Skip to content

Instantly share code, notes, and snippets.

@AMSTKO
Created May 16, 2017 17:09
Show Gist options
  • Select an option

  • Save AMSTKO/03f7242ca78d7e1417b8426ab62ec51c to your computer and use it in GitHub Desktop.

Select an option

Save AMSTKO/03f7242ca78d7e1417b8426ab62ec51c to your computer and use it in GitHub Desktop.
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display: block
}
audio,canvas,progress,video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],template {
display: none
}
a {
background-color: transparent
}
a:active,a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
b,strong {
font-weight: 700
}
dfn {
font-style: italic
}
h1 {
font-size: 2em;
margin: .67em 0
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code,kbd,pre,samp {
font-family: monospace,monospace;
font-size: 1em
}
button,input,optgroup,select,textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,select {
text-transform: none
}
button,html input[type=button],input[type=reset],input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],html input[disabled] {
cursor: default
}
button::-moz-focus-inner,input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type=checkbox],input[type=radio] {
box-sizing: border-box;
padding: 0
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
height: auto
}
input[type=search] {
-webkit-appearance: none;
box-sizing: content-box
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
fieldset {
border: none;
margin: 0;
padding: 0
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: 700
}
table {
border-collapse: collapse;
border-spacing: 0
}
td,th {
padding: 0
}
:root {
--x-height-multiplier:0;--baseline-multiplier:0}
.m-breakWord {
word-break: break-word;
word-wrap: break-word
}
.tabularNumeral {
font-feature-settings: "tnum" on;
-moz-font-feature-settings: "tnum" on;
-webkit-font-feature-settings: "tnum" on;
display: inline-block;
width: .6em;
text-align: center
}
.tabularNumeral--comma {
width: .3em;
text-align: left
}
.middotDivider {
padding-right: .45em;
padding-left: .45em;
font-size: 14px
}
.middotDivider:after {
content: '·'
}
.subscript {
margin-left: 2px;
font-size: 12px;
vertical-align: subscript
}
@font-face {
font-family: Cambria;
src: local('Arial'),local('Helvetica');
unicode-range: U+2500-259F
}
@-ms-viewport {
width: device-width
}
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
color: rgba(0,0,0,.8);
font-size: 18px;
line-height: 1.4
}
h1,h2,h3,h4 {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
a {
color: inherit;
text-decoration: none
}
a,button,input {
-webkit-tap-highlight-color: transparent
}
html {
overflow-y: scroll
}
body,html {
overflow-x: hidden
}
blockquote,dd,dl,figure,form,h1,h2,h3,h4,h5,h6,menu,ol,p,pre,ul {
margin: 0
}
p {
margin-bottom: 30px
}
menu,ol,ul {
padding: 0;
list-style: none;
list-style-image: none
}
figcaption {
-webkit-nbsp-mode: normal
}
main {
display: block
}
@media screen and (max-device-width: 1000px) {
html {
-webkit-text-size-adjust:none
}
}
@media print {
h2,h3 {
page-break-after: avoid;
page-break-inside: avoid
}
}
@media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact
}
}
@keyframes pop-upwards {
0% {
transform: matrix(.97,0,0,1,0,12);
opacity: 0
}
20% {
transform: matrix(.99,0,0,1,0,2);
opacity: .7
}
40% {
transform: matrix(1,0,0,1,0,-1);
opacity: 1
}
70% {
transform: matrix(1,0,0,1,0,0);
opacity: 1
}
100% {
transform: matrix(1,0,0,1,0,0);
opacity: 1
}
}
@keyframes pop-downwards {
0% {
transform: matrix(.97,0,0,1,0,-12);
opacity: 0
}
20% {
transform: matrix(.99,0,0,1,0,-2);
opacity: .7
}
40% {
transform: matrix(1,0,0,1,0,1);
opacity: 1
}
70% {
transform: matrix(1,0,0,1,0,0);
opacity: 1
}
100% {
transform: matrix(1,0,0,1,0,0);
opacity: 1
}
}
@keyframes shift-rightwards {
0% {
transform: translateX(-100%)
}
40% {
transform: translateX(0)
}
60% {
transform: translateX(0)
}
100% {
transform: translateX(100%)
}
}
@keyframes shimmy-shake {
0% {
transform: translateX(-1%)
}
20% {
transform: translateX(1%)
}
40% {
transform: translateX(-1%)
}
60% {
transform: translateX(1%)
}
80% {
transform: translateX(-1%)
}
100% {
transform: translateX(0)
}
}
@keyframes fade-in-pulse-06 {
0% {
opacity: 0;
transform: scale(.6)
}
50% {
opacity: 1
}
100%,70% {
transform: scale(1)
}
}
@keyframes fade-in-pulse-08 {
0% {
opacity: 0;
transform: scale(.8)
}
50% {
opacity: 1
}
100%,70% {
transform: scale(1)
}
}
@keyframes black-pulse-09 {
0% {
transform: scale(1);
fill: #000
}
15% {
transform: scale(.9)
}
100% {
transform: scale(1);
fill: #000
}
}
@keyframes scale-fade-out {
0% {
transform: scale(0);
opacity: 1;
visibility: visible
}
50% {
transform: scale(1)
}
99% {
opacity: 0
}
100% {
visibility: hidden
}
}
@keyframes fade-in {
0% {
visibility: hidden
}
1% {
visibility: visible;
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fade-out {
0% {
opacity: 1;
visibility: visible
}
99% {
opacity: 0
}
100% {
visibility: hidden
}
}
@keyframes fade-step-in-50 {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes scale-out-delayed {
0% {
transform: scale(1);
opacity: 1;
max-height: 800px
}
40% {
transform: scale(.99);
opacity: 0
}
100% {
transform: scale(0);
opacity: 0;
max-height: 0
}
}
.u-flexTop {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-align: start!important;
align-items: flex-start!important
}
.u-flexCenter {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-align: center!important;
align-items: center!important
}
.u-flexBottom {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-align: bottom!important;
align-items: bottom!important
}
.u-flexEnd {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-align: end!important;
align-items: flex-end!important
}
.u-flexStretch {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-align: stretch!important;
align-items: stretch!important
}
.u-flexColumn {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
-ms-flex-pack: center!important;
justify-content: center!important
}
.u-flexColumnTop {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
-ms-flex-pack: start!important;
justify-content: flex-start!important
}
.u-flexColumnBottom {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
-ms-flex-pack: end!important;
justify-content: flex-end!important
}
.u-flex {
display: -ms-flexbox!important;
display: flex!important
}
.u-justifyContentSpaceBetween {
-ms-flex-pack: justify!important;
justify-content: space-between!important
}
.u-justifyContentCenter {
-ms-flex-pack: center!important;
justify-content: center!important
}
.u-alignSelfStart {
-ms-flex-item-align: start!important;
-ms-grid-row-align: start!important;
align-self: start!important
}
.u-flexColumnSpaceBetween {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
-ms-flex-pack: justify!important;
justify-content: space-between!important
}
.u-flex0 {
-ms-flex: 0 0 auto;
flex: 0 0 auto
}
.u-flex1 {
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
.u-flexShrink1 {
-ms-flex-negative: 1;
flex-shrink: 1
}
.u-flexWrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.u-flexAlignSelfCenter {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center
}
@media (max-width: 767px) {
.u-xs-flex {
display:-ms-flexbox!important;
display: flex!important
}
.u-xs-flexColumn {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
-ms-flex-pack: center!important;
justify-content: center!important
}
.u-xs-flexTop {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-align: start!important;
align-items: flex-start!important
}
.u-xs-flexWrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.u-xs-flexColumnReverse {
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.u-xs-flex1 {
-ms-flex: 1 1 auto!important;
flex: 1 1 auto!important
}
}
.u-alignMiddle .u-alignBlock,.u-alignMiddle:before {
display: inline-block!important;
vertical-align: middle!important
}
.u-alignMiddle:before {
content: ''!important;
height: 100%!important
}
.u-floatLeft {
float: left!important
}
.u-floatRight {
float: right!important
}
.u-floatNone {
float: none!important
}
.u-clearBoth {
clear: both!important
}
@media (max-width: 767px) {
.u-xs-floatLeft {
float:left!important
}
.u-xs-floatRight {
float: right!important
}
.u-xs-floatNone {
float: none!important
}
}
.u-verticalAlignTop {
vertical-align: top!important
}
.u-verticalAlignMiddle {
vertical-align: middle!important
}
.u-verticalAlignBottom {
vertical-align: bottom!important
}
.u-verticalAlignBaseline {
vertical-align: baseline!important
}
.u-verticalAlignTextBottom {
vertical-align: text-bottom!important
}
.u-disablePointerEvents {
pointer-events: none!important
}
.u-pointerEventsAuto {
pointer-events: auto!important
}
.u-noUserSelect {
-webkit-user-select: none!important;
-moz-user-select: none!important;
-ms-user-select: none!important;
user-select: none!important;
-webkit-tap-highlight-color: transparent!important
}
.u-overflowX {
overflow-x: auto!important;
overflow-y: hidden!important;
-webkit-overflow-scrolling: touch!important;
-ms-overflow-style: -ms-autohiding-scrollbar!important
}
.u-overflowScroll {
overflow: scroll!important
}
.u-overflowScrollY {
overflow-y: scroll!important
}
.u-overflowHidden {
overflow: hidden!important
}
.u-overflowHiddenY {
overflow-y: hidden!important
}
.u-overflowVisible {
overflow: visible!important
}
.u-overflowAuto {
overflow: auto!important
}
@media screen and (max-width: 767px) {
.u-xs-overflowScrollX {
overflow-x:scroll!important;
-webkit-overflow-scrolling: touch!important;
-ms-overflow-style: -ms-autohiding-scrollbar!important
}
}
.u-inline {
display: inline!important
}
.u-inlineBlock {
display: inline-block!important
}
.u-block {
display: block!important
}
.u-hide {
display: none!important
}
.u-hideIfEmpty:empty {
display: none!important
}
.u-zeroSize {
overflow: hidden;
width: 0!important;
height: 0!important
}
.u-table {
display: table!important
}
.u-table:before {
height: auto!important;
display: inherit!important
}
.u-tableCell {
display: table-cell!important
}
@media screen and (min-width: 992px) {
.u-sm-show {
display:none!important
}
}
@media screen and (min-width: 768px) {
.u-xs-show {
display:none!important
}
}
@media screen and (max-width: 991px) {
.u-sm-hide {
display:none!important
}
.u-sm-block {
display: block!important
}
.u-sm-inline {
display: inline!important
}
}
@media screen and (max-width: 767px) {
.u-xs-flexOrder0 {
-ms-flex-order:0;
order: 0
}
.u-xs-flexOrder1 {
-ms-flex-order: 1;
order: 1
}
.u-xs-hide {
display: none!important
}
.u-xs-block {
display: block!important
}
.u-xs-inline {
display: inline!important
}
}
@media print {
.u-print-hide {
display: none!important
}
}
.u-clearfix:after,.u-clearfix:before {
display: table;
content: " "
}
.u-clearfix:after {
clear: both
}
.u-foreground {
position: relative!important;
z-index: 100!important
}
.u-background {
z-index: 70!important
}
.u-overlay {
z-index: 900!important
}
.u-zIndexFloating {
z-index: 700!important
}
.u-zIndexMetabar {
z-index: 500!important
}
.u-borderBox {
box-sizing: border-box!important
}
.u-translateNegative100Percent {
transform: translate(-100%,-100%)
}
.u-transformScale99TranslateY2 {
transform: scale(1) translateY(2px)
}
.u-transformScale100Hover:hover {
transform: scale(1)
}
.u-tableLayoutFixed {
table-layout: fixed
}
.u-columnWidth170 {
column-width: 170px;
-moz-column-width: 170px;
-webkit-column-width: 170px
}
.u-margin0 {
margin: 0!important
}
.u-marginTop0 {
margin-top: 0!important
}
.u-marginBottom0 {
margin-bottom: 0!important
}
.u-marginLeft0 {
margin-left: 0!important
}
.u-marginRight0 {
margin-right: 0!important
}
.u-margin5 {
margin: 5px!important
}
.u-marginTop5 {
margin-top: 5px!important
}
.u-marginBottom5 {
margin-bottom: 5px!important
}
.u-marginLeft5 {
margin-left: 5px!important
}
.u-marginRight5 {
margin-right: 5px!important
}
.u-margin10 {
margin: 10px!important
}
.u-marginTop10 {
margin-top: 10px!important
}
.u-marginBottom10 {
margin-bottom: 10px!important
}
.u-marginLeft10 {
margin-left: 10px!important
}
.u-marginRight10 {
margin-right: 10px!important
}
.u-margin15 {
margin: 15px!important
}
.u-marginTop15 {
margin-top: 15px!important
}
.u-marginBottom15 {
margin-bottom: 15px!important
}
.u-marginLeft15 {
margin-left: 15px!important
}
.u-marginRight15 {
margin-right: 15px!important
}
.u-margin20 {
margin: 20px!important
}
.u-marginTop20 {
margin-top: 20px!important
}
.u-marginBottom20 {
margin-bottom: 20px!important
}
.u-marginLeft20 {
margin-left: 20px!important
}
.u-marginRight20 {
margin-right: 20px!important
}
.u-margin25 {
margin: 25px!important
}
.u-marginTop25 {
margin-top: 25px!important
}
.u-marginBottom25 {
margin-bottom: 25px!important
}
.u-marginLeft25 {
margin-left: 25px!important
}
.u-marginRight25 {
margin-right: 25px!important
}
.u-margin30 {
margin: 30px!important
}
.u-marginTop30 {
margin-top: 30px!important
}
.u-marginBottom30 {
margin-bottom: 30px!important
}
.u-marginLeft30 {
margin-left: 30px!important
}
.u-marginRight30 {
margin-right: 30px!important
}
.u-margin40 {
margin: 40px!important
}
.u-marginTop40 {
margin-top: 40px!important
}
.u-marginBottom40 {
margin-bottom: 40px!important
}
.u-marginLeft40 {
margin-left: 40px!important
}
.u-marginRight40 {
margin-right: 40px!important
}
.u-margin50 {
margin: 50px!important
}
.u-marginTop50 {
margin-top: 50px!important
}
.u-marginBottom50 {
margin-bottom: 50px!important
}
.u-marginLeft50 {
margin-left: 50px!important
}
.u-marginRight50 {
margin-right: 50px!important
}
.u-marginAuto {
margin-left: auto!important;
margin-right: auto!important
}
.u-margin3 {
margin: 3px!important
}
.u-margin4 {
margin: 4px!important
}
.u-margin8 {
margin: 8px!important
}
.u-marginTopNegative95 {
margin-top: -95px!important
}
.u-marginTopNegative7 {
margin-top: -7px!important
}
.u-marginTopNegative5 {
margin-top: -5px!important
}
.u-marginTopNegative4 {
margin-top: -4px!important
}
.u-marginTopNegative2 {
margin-top: -2px!important
}
.u-marginTop2 {
margin-top: 2px!important
}
.u-marginTop3 {
margin-top: 3px!important
}
.u-marginTop4 {
margin-top: 4px!important
}
.u-marginTop7 {
margin-top: 7px!important
}
.u-marginTop11 {
margin-top: 11px!important
}
.u-marginTop60 {
margin-top: 60px!important
}
.u-marginTop70 {
margin-top: 70px!important
}
.u-marginTop75 {
margin-top: 75px!important
}
.u-marginTop100 {
margin-top: 100px!important
}
.u-marginTop120 {
margin-top: 120px!important
}
.u-marginTop180 {
margin-top: 180px!important
}
.u-marginBottomNegative1 {
margin-bottom: -1px!important
}
.u-marginBottom4 {
margin-bottom: 4px!important
}
.u-marginBottom7 {
margin-bottom: 7px!important
}
.u-marginBottom60 {
margin-bottom: 60px!important
}
.u-marginBottom100 {
margin-bottom: 100px!important
}
.u-marginBottom180 {
margin-bottom: 180px!important
}
.u-marginRightNegative12 {
margin-right: -12px!important
}
.u-marginRightNegative5 {
margin-right: -5px!important
}
.u-marginRight2 {
margin-right: 2px!important
}
.u-marginRight3 {
margin-right: 3px!important
}
.u-marginRight7 {
margin-right: 7px!important
}
.u-marginRight16 {
margin-right: 16px!important
}
.u-marginRight18 {
margin-right: 18px!important
}
.u-marginRight60 {
margin-right: 60px!important
}
.u-marginRight100 {
margin-right: 100px!important
}
.u-marginRight160 {
margin-right: 160px!important
}
.u-marginLeftNegative80 {
margin-left: -80px!important
}
.u-marginLeftNegative30 {
margin-left: -30px!important
}
.u-marginLeftNegative12 {
margin-left: -12px!important
}
.u-marginLeftNegative5 {
margin-left: -5px!important
}
.u-marginLeftNegative2 {
margin-left: -2px!important
}
.u-marginLeft3 {
margin-left: 3px!important
}
.u-marginLeft4 {
margin-left: 4px!important
}
.u-marginLeft8 {
margin-left: 8px!important
}
.u-marginLeft12 {
margin-left: 12px!important
}
.u-marginLeft18 {
margin-left: 18px!important
}
.u-marginLeft35 {
margin-left: 35px!important
}
.u-marginLeft100 {
margin-left: 100px!important
}
@media screen and (max-width: 991px) {
.u-sm-marginTopNegative20 {
margin-top:-20px!important
}
.u-sm-marginRight20 {
margin-right: 20px!important
}
.u-sm-marginRight30 {
margin-right: 30px!important
}
.u-sm-marginLeft20 {
margin-left: 20px!important
}
.u-sm-marginLeft30 {
margin-left: 30px!important
}
}
@media screen and (max-width: 767px) {
.u-xs-margin0 {
margin:0!important
}
.u-xs-marginTop0 {
margin-top: 0!important
}
.u-xs-marginBottom0 {
margin-bottom: 0!important
}
.u-xs-marginLeft0 {
margin-left: 0!important
}
.u-xs-marginRight0 {
margin-right: 0!important
}
.u-xs-margin20 {
margin: 20px!important
}
.u-xs-marginTop20 {
margin-top: 20px!important
}
.u-xs-marginBottom20 {
margin-bottom: 20px!important
}
.u-xs-marginLeft20 {
margin-left: 20px!important
}
.u-xs-marginRight20 {
margin-right: 20px!important
}
.u-xs-margin10 {
margin: 10px!important
}
.u-xs-marginTop4 {
margin-top: 4px!important
}
.u-xs-marginTop15 {
margin-top: 15px!important
}
.u-xs-marginTop30 {
margin-top: 30px!important
}
.u-xs-marginTop35 {
margin-top: 35px!important
}
.u-xs-marginTop50 {
margin-top: 50px!important
}
.u-xs-marginBottom5 {
margin-bottom: 5px!important
}
.u-xs-marginBottom10 {
margin-bottom: 10px!important
}
.u-xs-marginRight15 {
margin-right: 15px!important
}
.u-xs-marginRight30 {
margin-right: 30px!important
}
.u-xs-marginBottom30 {
margin-bottom: 30px!important
}
.u-xs-marginRight60 {
margin-right: 60px!important
}
.u-xs-marginLeft30 {
margin-left: 30px!important
}
.u-xs-marginAuto {
margin-left: auto!important;
margin-right: auto!important
}
}
.u-padding0 {
padding: 0!important
}
.u-paddingTop0 {
padding-top: 0!important
}
.u-paddingBottom0 {
padding-bottom: 0!important
}
.u-paddingLeft0 {
padding-left: 0!important
}
.u-paddingRight0 {
padding-right: 0!important
}
.u-padding5 {
padding: 5px!important
}
.u-paddingTop5 {
padding-top: 5px!important
}
.u-paddingBottom5 {
padding-bottom: 5px!important
}
.u-paddingLeft5 {
padding-left: 5px!important
}
.u-paddingRight5 {
padding-right: 5px!important
}
.u-padding10 {
padding: 10px!important
}
.u-paddingTop10 {
padding-top: 10px!important
}
.u-paddingBottom10 {
padding-bottom: 10px!important
}
.u-paddingLeft10 {
padding-left: 10px!important
}
.u-paddingRight10 {
padding-right: 10px!important
}
.u-padding15 {
padding: 15px!important
}
.u-paddingTop15 {
padding-top: 15px!important
}
.u-paddingBottom15 {
padding-bottom: 15px!important
}
.u-paddingLeft15 {
padding-left: 15px!important
}
.u-paddingRight15 {
padding-right: 15px!important
}
.u-padding20 {
padding: 20px!important
}
.u-paddingTop20 {
padding-top: 20px!important
}
.u-paddingBottom20 {
padding-bottom: 20px!important
}
.u-paddingLeft20 {
padding-left: 20px!important
}
.u-paddingRight20 {
padding-right: 20px!important
}
.u-padding25 {
padding: 25px!important
}
.u-paddingTop25 {
padding-top: 25px!important
}
.u-paddingBottom25 {
padding-bottom: 25px!important
}
.u-paddingLeft25 {
padding-left: 25px!important
}
.u-paddingRight25 {
padding-right: 25px!important
}
.u-padding30 {
padding: 30px!important
}
.u-paddingTop30 {
padding-top: 30px!important;
}
.u-paddingBottom30 {
padding-bottom: 30px!important
}
.u-paddingLeft30 {
padding-left: 30px!important
}
.u-paddingRight30 {
padding-right: 30px!important
}
.u-paddingTop1 {
padding-top: 1px!important
}
.u-paddingTop2 {
padding-top: 2px!important
}
.u-paddingTop4 {
padding-top: 4px!important
}
.u-paddingTop7 {
padding-top: 7px!important
}
.u-paddingTop8 {
padding-top: 8px!important
}
.u-paddingTop11 {
padding-top: 11px!important
}
.u-paddingTop13 {
padding-top: 13px!important
}
.u-paddingTop14 {
padding-top: 14px!important
}
.u-paddingTop16 {
padding-top: 16px!important
}
.u-paddingTop18 {
padding-top: 18px!important
}
.u-paddingTop19 {
padding-top: 19px!important
}
.u-paddingTop35 {
padding-top: 35px!important
}
.u-paddingTop40 {
padding-top: 40px!important
}
.u-paddingTop50 {
padding-top: 50px!important
}
.u-paddingTop60 {
padding-top: 60px!important
}
.u-paddingTop70 {
padding-top: 70px!important
}
.u-paddingTop80 {
padding-top: 80px!important
}
.u-paddingTop90 {
padding-top: 90px!important
}
.u-paddingTop100 {
padding-top: 100px!important
}
.u-paddingTop180 {
padding-top: 180px!important
}
.u-paddingTop177p77pct {
padding-top: 177.77%!important
}
.u-paddingTop1p25em {
padding-top: 1.25em!important
}
.u-paddingBottom2 {
padding-bottom: 2px!important
}
.u-paddingBottom3 {
padding-bottom: 3px!important
}
.u-paddingBottom4 {
padding-bottom: 4px!important
}
.u-paddingBottom7 {
padding-bottom: 7px!important
}
.u-paddingBottom8 {
padding-bottom: 8px!important
}
.u-paddingBottom18 {
padding-bottom: 18px!important
}
.u-paddingBottom35 {
/* padding-bottom: 35px!important; */
}
.u-paddingBottom40 {
padding-bottom: 40px!important
}
.u-paddingBottom50 {
padding-bottom: 50px!important
}
.u-paddingBottom60 {
padding-bottom: 60px!important
}
.u-paddingBottom80 {
padding-bottom: 80px!important
}
.u-paddingBottom100 {
padding-bottom: 100px!important
}
.u-paddingBottom150Pct {
padding-bottom: 150%!important
}
.u-paddingBottom1p25em {
padding-bottom: 1.25em!important
}
.u-paddingLeft6 {
padding-left: 6px!important
}
.u-paddingLeft8 {
padding-left: 8px!important
}
.u-paddingLeft9 {
padding-left: 9px!important
}
.u-paddingLeft12 {
padding-left: 12px!important
}
.u-paddingLeft13 {
padding-left: 13px!important
}
.u-paddingLeft14 {
padding-left: 14px!important
}
.u-paddingLeft22 {
padding-left: 22px!important
}
.u-paddingLeft35 {
padding-left: 35px!important
}
.u-paddingLeft40 {
padding-left: 40px!important
}
.u-paddingLeft50 {
padding-left: 50px!important
}
.u-paddingLeft60 {
padding-left: 60px!important
}
.u-paddingRight8 {
padding-right: 8px!important
}
.u-paddingRight12 {
padding-right: 12px!important
}
.u-paddingRight16 {
padding-right: 16px!important
}
.u-paddingRight18 {
padding-right: 18px!important
}
.u-paddingRight40 {
padding-right: 40px!important
}
.u-paddingRight50 {
padding-right: 50px!important
}
.u-paddingRight60 {
padding-right: 60px!important
}
.u-paddingRight100 {
padding-right: 100px!important
}
.u-paddingRight200 {
padding-right: 200px!important
}
.u-padding2 {
padding: 2px!important
}
.u-padding8 {
padding: 8px!important
}
.u-padding14 {
padding: 14px!important
}
.u-padding16 {
padding: 16px!important
}
.u-padding40 {
padding: 40px!important
}
@media (max-width: 991px) {
.u-sm-paddingTop0 {
padding-top:0!important
}
.u-sm-paddingTop30 {
padding-top: 30px!important
}
.u-sm-paddingBottom30 {
padding-bottom: 30px!important
}
.u-sm-paddingLeft20 {
padding-left: 20px!important
}
.u-sm-paddingRight20 {
padding-right: 20px!important
}
.u-sm-padding30 {
padding: 30px!important
}
}
@media (max-width: 767px) {
.u-xs-padding0 {
padding:0!important
}
.u-xs-paddingTop0 {
padding-top: 0!important
}
.u-xs-paddingBottom0 {
padding-bottom: 0!important
}
.u-xs-paddingLeft0 {
padding-left: 0!important
}
.u-xs-paddingRight0 {
padding-right: 0!important
}
.u-xs-padding5 {
padding: 5px!important
}
.u-xs-paddingTop5 {
padding-top: 5px!important
}
.u-xs-paddingBottom5 {
padding-bottom: 5px!important
}
.u-xs-paddingLeft5 {
padding-left: 5px!important
}
.u-xs-paddingRight5 {
padding-right: 5px!important
}
.u-xs-padding10 {
padding: 10px!important
}
.u-xs-paddingTop10 {
padding-top: 10px!important
}
.u-xs-paddingBottom10 {
padding-bottom: 10px!important
}
.u-xs-paddingLeft10 {
padding-left: 10px!important
}
.u-xs-paddingRight10 {
padding-right: 10px!important
}
.u-xs-padding15 {
padding: 15px!important
}
.u-xs-paddingTop15 {
padding-top: 15px!important
}
.u-xs-paddingBottom15 {
padding-bottom: 15px!important
}
.u-xs-paddingLeft15 {
padding-left: 15px!important
}
.u-xs-paddingRight15 {
padding-right: 15px!important
}
.u-xs-padding20 {
padding: 20px!important
}
.u-xs-paddingTop20 {
padding-top: 20px!important
}
.u-xs-paddingBottom20 {
padding-bottom: 20px!important
}
.u-xs-paddingLeft20 {
padding-left: 20px!important
}
.u-xs-paddingRight20 {
padding-right: 20px!important
}
.u-xs-paddingTop0 {
padding-top: 0!important
}
.u-xs-paddingTop13 {
padding-top: 13px!important
}
.u-xs-paddingTop25 {
padding-top: 25px!important
}
.u-xs-paddingTop30 {
padding-top: 30px!important
}
.u-xs-paddingTop35 {
padding-top: 35px!important
}
.u-xs-paddingRight12 {
padding-right: 12px!important
}
.u-xs-paddingRight30 {
padding-right: 30px!important
}
.u-xs-paddingBottom5 {
padding-bottom: 5px!important
}
.u-xs-paddingBottom25 {
padding-bottom: 25px!important
}
.u-xs-paddingBottom30 {
padding-bottom: 30px!important
}
.u-xs-paddingLeft4 {
padding-left: 4px!important
}
.u-xs-paddingLeft12 {
padding-left: 12px!important
}
.u-xs-paddingLeft30 {
padding-left: 30px!important
}
.u-xs-paddingLeft40 {
padding-left: 40px!important
}
.u-xs-paddingRight40 {
padding-right: 40px!important
}
.u-xs-padding12 {
padding: 12px!important
}
.u-xs-padding30 {
padding: 30px!important
}
}
.u-relative {
position: relative!important
}
.u-absolute {
position: absolute!important
}
.u-fixed {
position: fixed!important
}
.u-absolute0 {
position: absolute!important;
top: 0!important;
left: 0!important;
right: 0!important;
bottom: 0!important
}
.u-absoluteNegative1 {
position: absolute!important;
top: -1px!important;
left: -1px!important;
right: -1px!important;
bottom: -1px!important
}
.u-topNegative100Percent {
top: -100%!important
}
.u-right20Percent {
right: 20%!important
}
.u-right40Percent {
right: 40%!important
}
.u-topNegative36 {
top: -36px!important
}
.u-top0 {
top: 0!important
}
.u-top1 {
top: 1px!important
}
.u-top2 {
top: 2px!important
}
.u-top3 {
top: 3px!important
}
.u-top5 {
top: 5px!important
}
.u-top10 {
top: 10px!important
}
.u-top16 {
top: 16px!important
}
.u-top20 {
top: 20px!important
}
.u-top76 {
top: 76px!important
}
.u-bottom0 {
bottom: 0!important
}
.u-bottom10 {
bottom: 10px!important
}
.u-bottom25 {
bottom: 25px!important
}
.u-rightNegative30em {
right: -30em!important
}
.u-right0 {
right: 0!important
}
.u-right3 {
right: 3px!important
}
.u-right10 {
right: 10px!important
}
.u-right15 {
right: 15px!important
}
.u-right20 {
right: 20px!important
}
.u-right1p25em {
right: 1.25em!important
}
.u-rightNegative13 {
right: -13px!important
}
.u-rightNegative15 {
right: -15px!important
}
.u-rightNegative25Percent {
right: -25%!important
}
.u-leftNegative30em {
left: -30em!important
}
.u-leftNegative20 {
left: -20px!important
}
.u-leftNegative19 {
left: -19px!important
}
.u-left0 {
left: 0!important
}
.u-left2 {
left: 2px!important
}
.u-left3 {
left: 3px!important
}
.u-left14 {
left: 14px!important
}
.u-left24 {
left: 24px!important
}
.u-left25 {
left: 25px!important
}
.u-left25Percent {
left: 25%!important
}
@media screen and (max-width: 991px) {
.u-sm-left40Percent {
left:40%!important
}
.u-sm-rightNegative40Percent {
right: -40%!important
}
}
@media screen and (max-width: 767px) {
.u-xs-relative {
position:relative!important
}
.u-xs-absolute {
position: absolute!important
}
.u-xs-top1 {
top: 1px!important
}
.u-xs-top2 {
top: 2px!important
}
.u-xs-left0 {
left: 0!important
}
.u-xs-right0 {
right: 0!important
}
}
.u-heightAuto {
height: auto!important
}
.u-height5 {
height: 5px!important
}
.u-height7 {
height: 5px!important
}
.u-height15 {
height: 15px!important
}
.u-height19 {
height: 19px!important
}
.u-height20 {
height: 20px!important
}
.u-height28 {
height: 28px!important
}
.u-height32 {
height: 32px!important
}
.u-height35 {
height: 35px!important
}
.u-height36 {
height: 36px!important
}
.u-height40 {
height: 40px!important
}
.u-height44 {
height: 44px!important
}
.u-height50 {
height: 50px!important
}
.u-height60 {
height: 60px!important
}
.u-height65 {
height: 65px!important
}
.u-height95 {
height: 95px!important
}
.u-height100 {
height: 100px!important
}
.u-height105 {
height: 105px!important
}
.u-height110 {
height: 110px!important
}
.u-height115 {
height: 115px!important
}
.u-height120 {
height: 120px!important
}
.u-height145 {
height: 145px!important
}
.u-height150 {
height: 150px!important
}
.u-height155 {
height: 155px!important
}
.u-height165 {
height: 165px!important
}
.u-height172 {
height: 172px!important
}
.u-height180 {
height: 180px!important
}
.u-height200 {
height: 200px!important
}
.u-height220 {
height: 220px!important
}
.u-height225 {
height: 225px!important
}
.u-height240 {
height: 240px!important
}
.u-height250 {
height: 250px!important
}
.u-height272 {
height: 272px!important
}
.u-height280 {
height: 280px!important
}
.u-height315 {
height: 315px!important
}
.u-height350 {
height: 350px!important
}
.u-height400 {
height: 400px!important
}
.u-height448 {
height: 448px!important
}
.u-height450 {
height: 450px!important
}
.u-height460 {
height: 460px!important
}
.u-height500 {
height: 500px!important
}
.u-height550 {
height: 550px
}
.u-height40em {
height: 40em!important
}
.u-widthAuto {
width: auto!important
}
.u-width1 {
width: 1px!important
}
.u-width7 {
width: 5px!important
}
.u-width20 {
width: 20px!important
}
.u-width30 {
width: 30px!important
}
.u-width35 {
width: 35px!important
}
.u-width40 {
width: 40px!important
}
.u-width50 {
width: 50px!important
}
.u-width60 {
width: 60px!important
}
.u-width80 {
width: 80px!important
}
.u-width100 {
width: 100px!important
}
.u-width120 {
width: 120px!important
}
.u-width135 {
width: 135px!important
}
.u-width140 {
width: 140px!important
}
.u-width145 {
width: 145px!important
}
.u-width150 {
width: 150px!important
}
.u-width180 {
width: 180px!important
}
.u-width190 {
width: 190px!important
}
.u-width200 {
width: 200px!important
}
.u-width214 {
width: 214px!important
}
.u-width225 {
width: 225px!important
}
.u-width240 {
width: 240px!important
}
.u-width250 {
width: 250px!important
}
.u-width252 {
width: 252px!important
}
.u-width255 {
width: 255px!important
}
.u-width260 {
width: 260px!important
}
.u-width265 {
width: 265px!important
}
.u-width280 {
width: 280px!important
}
.u-width300 {
width: 300px!important
}
.u-width320 {
width: 320px!important
}
.u-width360 {
width: 360px!important
}
.u-width400 {
width: 400px!important
}
.u-width550 {
width: 550px!important
}
.u-width560 {
width: 560px!important
}
.u-width940 {
width: 940px!important
}
.u-width22p5em {
width: 22.5em!important
}
.u-maxSizeFullWidth {
max-width: 100%!important
}
.u-maxHeight40 {
max-height: 40px!important
}
.u-maxHeight50 {
max-height: 50px!important
}
.u-maxHeight60 {
max-height: 60px!important
}
.u-maxHeight140 {
max-height: 140px!important
}
.u-maxHeight250 {
max-height: 250px!important
}
.u-maxHeight300 {
max-height: 300px!important
}
.u-maxWidthNone {
max-width: none!important
}
.u-maxWidth150 {
max-width: 150px!important
}
.u-maxWidth200 {
max-width: 200px!important
}
.u-maxWidth300 {
max-width: 300px!important
}
.u-maxWidth310 {
max-width: 310px!important
}
.u-maxWidth360 {
max-width: 360px!important
}
.u-maxWidth400 {
max-width: 400px!important
}
.u-maxWidth414 {
max-width: 414px!important
}
.u-maxWidth450 {
max-width: 450px!important
}
.u-maxWidth550 {
max-width: 550px!important
}
.u-maxWidth600 {
max-width: 600px!important
}
.u-maxWidth640 {
max-width: 640px!important
}
.u-maxWidth660 {
max-width: 660px!important
}
.u-maxWidth700 {
max-width: 700px!important
}
.u-maxWidth740 {
max-width: 740px!important
}
.u-maxWidth888 {
max-width: 888px!important
}
.u-maxWidth920 {
max-width: 920px!important
}
.u-maxWidth1000 {
max-width: 1000px!important
}
.u-maxWidth1040 {
max-width: 1040px!important
}
.u-maxWidth1250 {
max-width: 1250px!important
}
@media screen and (max-width: 767px) {
.u-xs-maxHeight32 {
max-height:32px!important
}
.u-xs-maxHeight25 {
max-height: 25px!important
}
.u-xs-maxWidth160 {
max-width: 160px!important
}
.u-xs-maxWidth200 {
max-width: 200px!important
}
.u-xs-maxWidth350 {
max-width: 350px!important
}
.u-xs-maxWidth700 {
max-width: 700px!important
}
}
.u-minWidth200 {
min-width: 200px!important
}
.u-minWidth360 {
min-width: 360px!important
}
.u-minHeight22 {
min-height: 22px!important
}
.u-minHeight25 {
min-height: 25px!important
}
.u-minHeight28 {
min-height: 28px!important
}
.u-minHeight31 {
min-height: 31px!important
}
.u-minHeight250 {
min-height: 250px!important
}
.u-minHeight300 {
min-height: 300px!important
}
.u-minHeight400 {
min-height: 400px!important
}
.u-minHeight450 {
min-height: 450px!important
}
@media screen and (max-width: 991px) {
.u-sm-minHeight150 {
min-height:150px!important
}
}
@media screen and (max-width: 767px) {
.u-xs-minHeight100 {
min-height:100px!important
}
}
.u-size32x32 {
width: 32px!important;
height: 32px!important
}
.u-size36x36 {
width: 36px!important;
height: 36px!important
}
.u-size50x50 {
width: 50px!important;
height: 50px!important
}
.u-size60x60 {
width: 60px!important;
height: 60px!important
}
.u-size85x85 {
width: 85px!important;
height: 85px!important
}
.u-size100x100 {
width: 100px!important;
height: 100px!important
}
.u-size116x116 {
width: 116px!important;
height: 116px!important
}
@media screen and (max-width: 767px) {
.u-xs-size32x32 {
width:32px!important;
height: 32px!important
}
.u-xs-size80x80 {
width: 80px!important;
height: 80px!important
}
}
.u-sizeAuto {
width: auto!important;
max-width: none!important
}
.u-sizeFull,.u-sizeFullWidth {
width: 100%!important
}
.u-sizeFull,.u-sizeFullHeight {
height: 100%!important
}
.u-width20pct {
width: 20%!important
}
.u-width33p33Pct {
width: 33.33%!important
}
.u-width35pct {
width: 35%!important
}
.u-width40pct {
width: 40%!important
}
.u-sizeHalfWidth {
width: 50%!important
}
.u-width55pct {
width: 55%!important
}
.u-width60pct {
width: 60%!important
}
.u-width70pct {
width: 70%!important
}
.u-width90pct {
width: 90%!important
}
.u-maxSizeFullHeight {
max-height: 100%!important
}
@media screen and (max-width: 991px) {
.u-sm-height42 {
height:42px!important
}
}
@media screen and (max-width: 767px) {
.u-xs-maxSizeFullWidth {
max-width:100%!important
}
.u-xs-sizeFullWidth {
width: 100%!important
}
.u-xs-sizeFull {
width: 100%!important;
height: 100%!important
}
.u-xs-sizeFullViewportWidth {
width: 100vw!important
}
.u-xs-widthAuto {
width: auto!important
}
.u-xs-heightAuto {
height: auto!important
}
.u-xs-height24 {
height: 24px!important
}
.u-xs-height32 {
height: 32px!important
}
.u-xs-height39 {
height: 39px!important
}
.u-xs-height56 {
height: 56px!important
}
.u-xs-height95 {
height: 95px!important
}
.u-xs-height96 {
height: 96px!important
}
.u-xs-height100 {
height: 100px!important
}
.u-xs-height139 {
height: 139px!important
}
.u-xs-height170 {
height: 170px!important
}
.u-xs-height200 {
height: 200px!important
}
.u-xs-height240 {
height: 240px!important
}
.u-xs-height250 {
height: 250px!important
}
.u-xs-height350 {
height: 350px!important
}
.u-xs-width32 {
width: 32px!important
}
.u-xs-width200 {
width: 200px!important
}
.u-xs-width300 {
width: 300px!important
}
}
.u-sizeViewHeight100 {
height: 100vh!important;
box-sizing: border-box
}
.u-sizeViewHeight110 {
height: 110vh!important;
box-sizing: border-box
}
.u-sizeViewHeightMin100 {
min-height: 100vh!important;
box-sizing: border-box
}
.u-sizeViewHeightMax100 {
max-height: 100vh!important;
box-sizing: border-box
}
.u-size10of12,.u-size11of12,.u-size12of12,.u-size1of12,.u-size2of12,.u-size3of12,.u-size4of12,.u-size5of12,.u-size6of12,.u-size7of12,.u-size8of12,.u-size9of12 {
float: left!important
}
.u-size12of12 {
width: 100%!important
}
.u-size11of12 {
width: 91.66666667%!important
}
.u-size10of12 {
width: 83.33333333%!important
}
.u-size9of12 {
width: 75%!important
}
.u-size8of12 {
width: 66.66666667%!important
}
.u-size7of12 {
width: 58.33333333%!important
}
.u-size6of12 {
width: 50%!important
}
.u-size5of12 {
width: 41.66666667%!important
}
.u-size4of12 {
width: 33.33333333%!important
}
.u-size3of12 {
width: 25%!important
}
.u-size2of12 {
width: 16.66666667%!important
}
.u-size1of12 {
width: 8.33333333%!important
}
@media (max-width: 991px) {
.u-sm-size12of12 {
width:100%!important
}
}
@media (max-width: 767px) {
.u-xs-size6of12 {
width:50%!important
}
.u-xs-size12of12 {
width: 100%!important
}
}
.u-backgroundNone {
background: 0 0!important
}
.u-backgroundWhite {
background: #fff!important
}
.u-backgroundColorWhite {
background-color: #fff!important
}
.u-backgroundGrayLightest {
background: #fafafa!important
}
.u-backgroundBlueLightest {
background: #fbfcfd!important
}
.u-backgroundGrayLighter {
background: #f5f5f5!important
}
.u-backgroundGrayLight {
background: #f0f0f0!important
}
.u-backgroundColorGrayLight {
background-color: #f0f0f0!important
}
.u-backgroundTransparentWhiteDarker {
background: rgba(255,255,255,.85)!important
}
.u-backgroundTransparentWhiteDarkest {
background: rgba(255,255,255,.97)!important
}
.u-backgroundTransparentBlack {
background: rgba(0,0,0,0)!important
}
.u-backgroundTransparentBlackLight {
background: rgba(0,0,0,.3)!important
}
.u-backgroundColorTransparentBlackLight {
background-color: rgba(0,0,0,.3)!important
}
.u-backgroundTransparentBlackLightest {
background: rgba(0,0,0,.05)!important
}
.u-backgroundTransparentBlackDark {
background-color: rgba(0,0,0,.6)!important
}
.u-backgroundTransparentBlackDarker {
background-color: rgba(0,0,0,.8)!important
}
.u-backgroundGreenNormal {
background: #02b875!important
}
.u-backgroundTransparentGreenLight {
background-color: rgba(2,184,117,.1)
}
.u-backgroundHighlightStrong {
background-color: rgba(97,255,160,.8)
}
.u-backgroundNavyBlue {
background-color: #284255
}
.u-backgroundBlueGreyTransparent {
background-color: rgba(40,66,85,.05)
}
.u-backgroundMintGreen {
background-color: #ebfff3
}
.u-backgroundSizeCover {
background-size: cover!important
}
.u-backgroundSize1000 {
background-size: 1000px!important
}
.u-backgroundOriginBorderBox {
background-origin: border-box!important
}
.u-backgroundCover {
background-position: center!important;
background-origin: border-box!important;
background-size: cover!important
}
.u-backgroundContain {
background-position: center!important;
background-repeat: no-repeat!important;
background-size: contain
}
.u-backgroundPositionHorizontalCenter {
background-position: 50% 0!important
}
.u-backgroundNoRepeat {
background-repeat: no-repeat!important
}
@media screen and (max-width: 767px) {
.u-xs-backgroundPositionY350 {
background-position-y:350px!important
}
.u-xs-backgroundPositionX20Percent {
background-position-x: 20%!important
}
.u-xs-backgroudSize200Percent {
background-size: 200%!important
}
.u-xs-backgroundImageNone {
background-image: none!important
}
}
.u-borderDarker {
border: 1px solid rgba(0,0,0,.8)!important
}
.u-borderLighter {
border: 1px solid rgba(0,0,0,.15)!important
}
.u-borderLighterHover:hover {
border-color: rgba(0,0,0,.15)!important
}
.u-borderLightest {
border: 1px solid rgba(0,0,0,.05)!important
}
.u-borderGreenDashed {
border: 1px dashed #02b875!important
}
.u-borderTopLighter {
border-top: 1px solid rgba(0,0,0,.15)!important
}
.u-borderTopLightest {
border-top: 1px solid rgba(0,0,0,.05)!important
}
.u-borderTopGreen {
border-top: 1px solid #02b875!important
}
.u-borderNormal {
border: 1px solid rgba(0,0,0,.44)!important
}
.u-borderBottomNormal {
border-bottom: 1px solid rgba(0,0,0,.44)!important
}
.u-borderBottomLight {
border-bottom: 1px solid rgba(0,0,0,.0785)!important
}
.u-borderBottomLighter {
border-bottom: 1px solid rgba(0,0,0,.15)!important
}
.u-borderBottomLightest {
border-bottom: 1px solid rgba(0,0,0,.05)!important
}
.u-borderBottomWhite15 {
border-bottom: 15px solid #fff!important
}
.u-borderBottomRed {
border-bottom: 1px solid #cc5454!important
}
.u-borderBottomGrayLight {
border-bottom: 1px solid #f0f0f0!important
}
.u-borderBottomGrayLight2 {
border-bottom: 2px solid #f0f0f0!important
}
.u-borderBottomGreen {
border-bottom: 1px solid #02b875!important
}
.u-borderRight0 {
border-right: 0!important
}
.u-borderRightLighter {
border-right: 1px solid rgba(0,0,0,.15)!important
}
.u-borderRightTransparentWhiteLighter {
border-right: 1px solid rgba(255,255,255,.2)!important
}
.u-borderRightWhite15 {
border-right: 15px solid #fff!important
}
.u-borderCardBorder {
border: 1px solid rgba(0,0,0,.04)!important
}
.u-borderCardBackground {
border: 1px solid rgba(0,0,0,.09)!important
}
.u-borderStyleSolid {
border-style: solid!important
}
.u-border0 {
border: 0!important
}
.u-border1 {
border: 1px solid!important
}
.u-border2 {
border: 2px solid!important
}
.u-borderTop0 {
border-top: 0!important
}
.u-borderTop2 {
border-top: 2px solid!important
}
.u-borderTopLight {
border-top: 1px solid rgba(0,0,0,.0785)!important
}
.u-borderTopColorDarker {
border-top-color: rgba(0,0,0,.8)!important
}
.u-borderLeft0 {
border-left: 0!important
}
.u-borderLeft1 {
border-left: 1px solid!important
}
.u-borderLeft4 {
border-left: 4px solid!important
}
.u-borderLeftLighter {
border-left: 1px solid rgba(0,0,0,.15)!important
}
.u-borderLeftGreen {
border-left-color: #02b875!important
}
.u-borderLeftDashed {
border-left: 1px dashed!important
}
.u-borderGreenNormal {
border-color: #02b875!important
}
.u-borderWidth2 {
border-width: 2px!important
}
.u-borderTopLightest80:before {
content: '';
display: block;
position: relative;
width: 80px;
height: 1px;
background: rgba(0,0,0,.05)
}
@media screen and (max-width: 767px) {
.u-xs-borderBottomLight {
border-bottom:1px solid rgba(0,0,0,.0785)!important
}
.u-xs-border0 {
border: 0!important
}
}
.u-boxShadow {
box-shadow: 0 1px 7px rgba(0,0,0,.05)
}
.u-boxShadowThick {
box-shadow: 0 5px 30px -6px rgba(0,0,0,.15)
}
.u-boxShadowBottomThinLighter {
box-shadow: 0 2px 2px -2px rgba(0,0,0,.15)
}
.u-boxShadowBottom {
box-shadow: 0 4px 2px -2px rgba(0,0,0,.05)
}
.u-boxShadowInnerBottom {
box-shadow: inset 0 -1px 3px 0 rgba(0,0,0,.05)
}
.u-boxShadowTop {
box-shadow: 0 -3px 10px 0 rgba(0,0,0,.0785)
}
.u-boxShadow1px4pxCardBorder {
box-shadow: 0 1px 4px rgba(0,0,0,.04)
}
.u-boxShadowInsetSpread1pxLighter {
box-shadow: inset 0 0 0 1px rgba(0,0,0,.15)
}
.u-boxShadowNormal {
box-shadow: 0 0 1px rgba(0,0,0,.44)
}
.u-boxShadowBlur8pxLighter {
box-shadow: 2px 2px 8px rgba(0,0,0,.15)
}
.u-boxShadowBlur8pxLightHover:hover {
box-shadow: 2px 2px 8px rgba(0,0,0,.3)
}
.u-boxShadow4px16pxN2pxBlack10WithBorderBlack02 {
box-shadow: 0 4px 16px -2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.02)
}
@media screen and (max-width: 767px) {
.u-xs-boxShadowNone {
box-shadow:none!important
}
}
.u-strokeGreen {
stroke: #00ab6b!important;
fill: transparent!important
}
.u-transitionSeries:nth-child(2) {
transition-delay: 30ms!important
}
.u-transitionSeries:nth-child(3) {
transition-delay: 60ms!important
}
.u-transitionSeries:nth-child(4) {
transition-delay: 90ms!important
}
.u-animationSeries:nth-child(2) {
animation-delay: .1s!important
}
.u-animationSeries:nth-child(3) {
animation-delay: .2s!important
}
.u-transparent {
opacity: 0!important
}
.u-invisible {
visibility: hidden!important
}
.u-fadeLeft:before {
content: ''!important;
position: absolute!important;
z-index: 900;
pointer-events: none;
top: 0!important;
left: 0!important;
background-image: linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%)!important;
width: 65px!important;
height: 100%!important
}
.u-fadeRight:after {
content: ''!important;
position: absolute!important;
z-index: 900;
pointer-events: none;
top: 0!important;
right: 0!important;
background-image: linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%)!important;
width: 65px!important;
height: 100%!important
}
.u-hideOutline {
outline: 0!important
}
.u-round {
border-radius: 999em
}
.u-borderRadius0 {
border-radius: 0!important
}
.u-borderRadius2 {
border-radius: 2px!important
}
.u-borderRadius3 {
border-radius: 3px!important
}
.u-borderRadius4 {
border-radius: 4px!important
}
.u-borderRadius10 {
border-radius: 10px!important
}
.u-borderRadiusTop4 {
border-top-right-radius: 4px;
border-top-left-radius: 4px
}
@media screen and (max-width: 767px) {
.u-xs-borderRadiusTop0 {
border-top-right-radius:0;
border-top-left-radius: 0
}
}
.u-listStyleDisc {
list-style: disc!important
}
.u-listStyleDecimal {
list-style: decimal!important
}
.u-cursorPointer {
cursor: pointer!important
}
.u-cursorAuto {
cursor: auto!important
}
.u-cursorDefault {
cursor: default!important
}
.u-cursorGrab {
cursor: -webkit-grab!important;
cursor: grab!important
}
.u-cursorGrabbing {
cursor: -webkit-grabbing!important;
cursor: grabbing!important
}
.u-backgroundGradientGrayLighter {
background-image: linear-gradient(to bottom,#f5f5f5,rgba(255,255,255,.35))
}
@media screen and (max-width: 767px) {
.u-xs-backgroundGradientGrayLightest {
background-image:linear-gradient(to bottom,#fafafa,rgba(255,255,255,.35))
}
}
.u-textColorLighter {
color: rgba(0,0,0,.15)!important;
fill: rgba(0,0,0,.15)!important
}
.u-textColorLight {
color: rgba(0,0,0,.3)!important;
fill: rgba(0,0,0,.3)!important
}
.u-textColorLightHover:hover {
color: rgba(0,0,0,.3)!important;
fill: rgba(0,0,0,.3)!important
}
.u-textColorNormal {
color: rgba(0,0,0,.44)!important;
fill: rgba(0,0,0,.44)!important
}
.u-textColorNormalHover:hover {
color: rgba(0,0,0,.44)!important;
fill: rgba(0,0,0,.44)!important
}
.u-textColorNormalHover:hover .svgIcon {
fill: rgba(0,0,0,.44)!important
}
.u-textColorDark {
color: rgba(0,0,0,.6)!important;
fill: rgba(0,0,0,.6)!important
}
.u-textColorDarker {
color: rgba(0,0,0,.8)!important;
fill: rgba(0,0,0,.8)!important
}
.u-textColorDarkest {
color: rgba(0,0,0,.9)!important;
fill: rgba(0,0,0,.9)!important
}
.u-textColorTransparentWhite {
color: rgba(255,255,255,0)!important;
fill: rgba(255,255,255,0)!important
}
.u-textColorTransparentWhiteNormal {
color: rgba(255,255,255,.5)!important;
fill: rgba(255,255,255,.5)!important
}
.u-textColorTransparentWhiteDark {
color: rgba(255,255,255,.65)!important;
fill: rgba(255,255,255,.65)!important
}
.u-textColorTransparentWhiteDarker {
color: rgba(255,255,255,.85)!important;
fill: rgba(255,255,255,.85)!important
}
.u-textColorWhite {
color: #fff!important;
fill: #fff!important
}
.u-textColorGreenNormal {
color: #00ab6b!important;
fill: #02b875!important
}
.u-textColorGreenDark {
color: #1c9963!important;
fill: #00ab6b!important
}
.u-textColorYellow {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal;
color: #e7af0e!important;
fill: #e7af0e!important
}
.u-textColorRed {
color: #cc5454!important;
fill: #cc5454!important
}
.u-textColorSalmonNormal {
color: #ff857e!important;
fill: #ff857e!important
}
.u-textColorNavy {
color: #284255!important;
fill: #284255!important
}
.u-textColorTwitterBlue {
color: #55acee!important;
fill: #55acee!important
}
.u-iconColorLight {
fill: rgba(0,0,0,.3)!important
}
.u-experimental {
font-size: 14px;
text-align: center;
background: #fafafa;
padding: 20px 40px
}
.u-textScreenReader {
position: absolute!important;
width: 1px!important;
height: 1px!important;
overflow: hidden!important;
color: rgba(255,255,255,0)!important;
pointer-events: none!important
}
.u-textUnderline {
text-decoration: underline!important
}
.u-textUppercase {
text-transform: uppercase!important
}
.u-uiTextBold {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif!important;
letter-spacing: 0!important;
font-weight: 700!important;
font-style: normal!important
}
.u-uiTextSemibold {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif!important;
letter-spacing: 0!important;
font-weight: 600!important;
font-style: normal!important
}
.u-uiTextMedium {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif!important;
letter-spacing: 0!important;
font-weight: 500!important;
font-style: normal!important
}
.u-uiTextRegular {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif!important;
letter-spacing: 0!important;
font-weight: 400!important;
font-style: normal!important
}
.u-uiTextThin {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif!important;
letter-spacing: 0!important;
font-weight: 300!important;
font-style: normal!important
}
.u-uiTextMonospace {
font-family: Menlo,Monaco,"Courier New",Courier,monospace!important;
letter-spacing: 0!important;
font-weight: 400!important;
font-style: normal!important
}
.u-contentSansBold {
--x-height-multiplier:0.363!important;--baseline-multiplier:0.157!important;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif!important;
letter-spacing: -.02em!important;
font-weight: 700!important;
font-style: normal!important
}
.u-contentSansRegular {
--x-height-multiplier:0.363!important;--baseline-multiplier:0.157!important;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif!important;
letter-spacing: -.02em!important;
font-weight: 400!important;
font-style: normal!important
}
.u-contentSansThin {
--x-height-multiplier:0.363!important;--baseline-multiplier:0.157!important;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif!important;
letter-spacing: -.02em!important;
font-weight: 300!important;
font-style: normal!important
}
.u-contentSerifRegular {
--x-height-multiplier:0.35!important;--baseline-multiplier:0.179!important;font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif!important;
letter-spacing: .01rem!important;
font-weight: 400!important;
font-style: normal!important
}
.u-contentSerifItalic {
--x-height-multiplier:0.35!important;--baseline-multiplier:0.179!important;font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif!important;
letter-spacing: .01rem!important;
font-weight: 400!important;
font-style: italic!important
}
.u-contentSerifBold {
--x-height-multiplier:0.35!important;--baseline-multiplier:0.179!important;font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif!important;
letter-spacing: .01rem!important;
font-weight: 700!important;
font-style: normal!important
}
.u-contentSlabItalic {
--x-height-multiplier:0.363!important;--baseline-multiplier:0.157!important;font-family: medium-content-slab-serif-font,Georgia,Cambria,"Times New Roman",Times,serif!important;
font-weight: 400!important;
font-style: italic!important
}
.u-uiSerifRegular {
--x-height-multiplier:0.35!important;--baseline-multiplier:0.179!important;font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif!important;
letter-spacing: .01rem!important;
font-weight: 400!important;
font-style: normal!important
}
@media (max-width: 767px) {
.u-xs-contentSansBold {
--x-height-multiplier:0.363!important;
--baseline-multiplier:0.157!important;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif!important;
letter-spacing: -.02em!important;
font-weight: 700!important;
font-style: normal!important
}
}
.u-fontSize11 {
font-size: 11px!important
}
.u-fontSize12 {
font-size: 12px!important
}
.u-fontSize13 {
font-size: 13px!important
}
.u-fontSize14 {
font-size: 14px!important
}
.u-fontSize16 {
font-size: 16px!important
}
.u-fontSize18 {
font-size: 18px!important
}
.u-fontSize20 {
font-size: 20px!important
}
.u-fontSize22 {
font-size: 22px!important
}
.u-fontSize24 {
font-size: 24px!important
}
.u-fontSize28 {
font-size: 28px!important
}
.u-fontSize32 {
font-size: 32px!important
}
.u-fontSize36 {
font-size: 36px!important
}
.u-fontSize40 {
font-size: 40px!important
}
.u-fontSize44 {
font-size: 44px!important
}
.u-fontSize48 {
font-size: 48px!important
}
.u-fontSize50 {
font-size: 50px!important
}
.u-fontSize60 {
font-size: 60px!important
}
.u-fontSize75 {
font-size: 75px!important
}
.u-fontSize100 {
font-size: 100px!important
}
.u-fontSize200 {
font-size: 200px!important
}
@media screen and (max-width: 767px) {
.u-xs-fontSize12 {
font-size:12px!important
}
.u-xs-fontSize14 {
font-size: 14px!important
}
.u-xs-fontSize16 {
font-size: 16px!important
}
.u-xs-fontSize18 {
font-size: 18px!important
}
.u-xs-fontSize22 {
font-size: 22px!important
}
.u-xs-fontSize24 {
font-size: 24px!important
}
.u-xs-fontSize32 {
font-size: 32px!important
}
.u-xs-fontSize36 {
font-size: 36px!important
}
.u-xs-fontSize40 {
font-size: 40px!important
}
.u-xs-fontSize75 {
font-size: 75px!important
}
}
@media screen and (max-width: 991px) {
.u-sm-fontSize150 {
font-size:150px!important
}
.u-sm-fontSize50 {
font-size: 50px!important
}
}
.u-fontWeightThin {
font-weight: 300!important
}
.u-fontWeightNormal {
font-weight: 400!important
}
.u-fontWeightMedium {
font-weight: 500!important
}
.u-fontWeightSemibold {
font-weight: 600!important
}
.u-fontWeightBold {
font-weight: 700!important
}
.u-lineHeightHalf {
line-height: .5!important
}
.u-lineHeightBase {
line-height: 1.4!important
}
.u-lineHeightBaseSans {
line-height: 1.3!important
}
.u-lineHeightTight {
line-height: 1.2!important
}
.u-lineHeightTighter {
line-height: 1.1!important
}
.u-lineHeightTightest {
line-height: 1!important
}
.u-lineHeightLoose {
line-height: 1.6!important
}
.u-lineHeight13 {
line-height: 13px!important
}
.u-lineHeight18 {
line-height: 18px!important
}
.u-lineHeight30 {
line-height: 30px!important
}
.u-lineHeight32 {
line-height: 32px!important
}
.u-lineHeight35 {
line-height: 35px!important
}
.u-lineHeight36 {
line-height: 36px!important
}
.u-lineHeight40 {
line-height: 40px!important
}
.u-lineHeight44 {
line-height: 44px!important
}
.u-lineHeight100 {
line-height: 100px!important
}
.u-lineHeightInherit {
line-height: inherit!important
}
@media screen and (max-width: 991px) {
.u-sm-lineHeight44 {
line-height:44px!important
}
}
@media screen and (max-width: 767px) {
.u-xs-lineHeight22 {
line-height:22px!important
}
.u-xs-lineHeightBase {
line-height: 1.4!important
}
}
.u-letterSpacing003 {
letter-spacing: .03em!important
}
.u-letterSpacingTight {
letter-spacing: -.02em!important
}
.u-letterSpacingTighter {
letter-spacing: -.04em!important
}
.u-letterSpacingNormal {
letter-spacing: 0!important
}
.u-letterSpacingLoose {
letter-spacing: .1em!important
}
.u-textAlignCenter {
text-align: center!important
}
.u-textAlignRight {
text-align: right!important
}
.u-textAlignLeft {
text-align: left!important
}
@media (max-width: 767px) {
.u-xs-textAlignLeft {
text-align:left!important
}
.u-xs-textAlignRight {
text-align: right!important
}
.u-xs-textAlignCenter {
text-align: center!important
}
}
.u-noWrap {
white-space: nowrap!important
}
.u-normalWrap {
white-space: normal!important
}
.u-noWrapWithEllipsis {
white-space: nowrap!important;
text-overflow: ellipsis!important;
overflow: hidden!important
}
.u-textOverflowEllipsis {
text-overflow: ellipsis!important;
overflow: hidden!important
}
@media screen and (max-width: 767px) {
.u-xs-normalWrap {
white-space:normal!important
}
.u-xs-noWrapWithEllipsis {
white-space: nowrap!important;
text-overflow: ellipsis!important;
overflow: hidden!important
}
}
.u-wordBreakNormal {
word-break: normal!important
}
.u-breakWord {
word-break: break-word;
word-wrap: break-word
}
.u-lineClamp2 {
display: -webkit-box!important;
-webkit-line-clamp: 2!important;
-webkit-box-orient: vertical!important;
overflow: hidden!important
}
.u-lineClamp3 {
display: -webkit-box!important;
-webkit-line-clamp: 3!important;
-webkit-box-orient: vertical!important;
overflow: hidden!important
}
.u-maxHeight2LineHeightBase {
overflow: hidden;
line-height: 1.4!important;
max-height: 2.8em!important
}
.u-maxHeight2LineHeightTighter {
overflow: hidden;
line-height: 1.1!important;
max-height: 2.2em!important
}
.u-maxHeight2LineHeightTight {
overflow: hidden;
line-height: 1.2!important;
max-height: 2.4em!important
}
.u-maxHeight3LineHeightTight {
overflow: hidden;
line-height: 1.2!important;
max-height: 3.6em!important
}
.u-maxHeight3LineHeightBase {
overflow: hidden;
line-height: 1.4!important;
max-height: 4.2em!important
}
@media screen and (max-width: 767px) {
.u-xs-lineClamp2 {
display:-webkit-box!important;
-webkit-line-clamp: 2!important;
overflow: hidden!important
}
}
.u-transition--fadeOut100 {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .1s,opacity .1s 0s
}
.u-transition--fadeOut300 {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .3s,opacity .3s 0s
}
.u-transition--fadeIn300 {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s,opacity .3s 0s
}
.u-transition--fadeIn200Delay150 {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s,opacity .2s 150ms
}
.u-transition--transform125 {
transition: transform 125ms ease-in-out
}
.u-transition--transformLinear200 {
transition: transform .2s linear
}
.u-transition--transform200Spring {
transition: transform .2s cubic-bezier(.25,0,.6,1.4)
}
.u-transition--transform200EaseOutCubicOpacity125EaseIn {
transition: transform .2s cubic-bezier(.215,.61,.355,1),opacity 125ms ease-in
}
.u-transition--transform250BoxShadow200 {
transition: transform 250ms ease-in-out,box-shadow .2s ease-in-out
}
.u-transition--boxShadow200 {
transition: box-shadow .2s ease-in-out
}
.u-transition--none {
transition: none
}
.u-backfaceVisibilityHidden {
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.u-transformOriginLeft {
transform-origin: left
}
.col,.container,.row {
box-sizing: border-box
}
.container {
padding-right: 20px;
padding-left: 20px;
margin-right: auto;
margin-left: auto
}
.row {
margin-right: -20px;
margin-left: -20px
}
.row:after,.row:before {
display: table;
content: " "
}
.row:after {
clear: both
}
.col {
position: relative;
min-height: 1px;
padding-right: 20px;
padding-left: 20px
}
.surface {
top: 0;
height: 100%;
width: 100%;
box-sizing: border-box
}
.surface:after,.surface:before {
display: table;
content: " "
}
.surface:after {
clear: both
}
.surface-scrollOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 900;
overflow: auto
}
.is-transitioningSurfaces {
overflow: hidden
}
.is-transitioningSurfaces .surface {
position: absolute;
top: 0;
overflow: auto
}
.is-transitioningSurfaces .surface-scrollOverlay {
display: block
}
.is-transitioningSurfaces .surface-container {
position: absolute;
top: 0;
left: 0;
right: 0
}
.is-transitioningSurfaces .is-transitioningSurfaceOut {
z-index: 200
}
.is-transitioningSurfaces .is-transitioningSurfaceOut {
z-index: 100
}
.is-transitioningSurfaces .surface-container.is-fixed {
position: fixed;
top: 0
}
.screenContent {
outline: 0;
background-color: #fff
}
body.is-swBoot::-webkit-scrollbar {
visibility: hidden
}
body.is-swBoot {
min-height: 100000px
}
@media not print {
.screenContent {
height: 100%
}
}
.canvas-renderer {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: #fff;
transform: translateZ(0)
}
@media print {
.canvas-renderer {
display: none
}
}
.svgIcon--light {
fill: rgba(255,255,255,.65)
}
.svgIcon {
display: inline-block
}
.svgIcon--15px {
line-height: 15px;
height: 15px
}
.svgIcon--19px {
line-height: 19px;
height: 19px
}
.svgIcon--21px {
line-height: 21px;
height: 21px
}
.svgIcon--25px {
line-height: 25px;
height: 25px
}
.svgIcon--29px {
line-height: 29px;
height: 29px
}
.svgIcon--33px {
line-height: 33px;
height: 33px
}
.svgIcon--45px {
line-height: 45px;
height: 45px
}
.svgIcon--65px {
line-height: 65px;
height: 65px
}
.svgIcon--85px {
line-height: 85px;
height: 85px
}
.svgIcon--120px {
line-height: 120px;
height: 120px
}
.svgIcon--45x29px {
line-height: 29px;
height: 29px
}
.svgIcon--129x37px {
line-height: 37px;
height: 37px
}
.svgIcon--95x45px {
line-height: 45px;
height: 45px
}
.svgIcon--151x65px {
line-height: 65px;
height: 65px
}
.svgIcon--201x85px {
line-height: 85px;
height: 85px
}
.svgIcon--25px.svgIcon--heart.is-flushLeft,.svgIcon--25px.svgIcon--heartFilled.is-flushLeft {
margin-left: -3px
}
.svgIcon--21px.svgIcon--bookmark.is-flushLeft,.svgIcon--21px.svgIcon--bookmarkCheck.is-flushLeft,.svgIcon--21px.svgIcon--bookmarkFilled.is-flushLeft {
margin-left: -5px
}
.svgIcon--25px.svgIcon--bookmark.is-flushLeft,.svgIcon--25px.svgIcon--bookmarkCheck.is-flushLeft,.svgIcon--25px.svgIcon--bookmarkFilled.is-flushLeft {
margin-left: -6px
}
.svgIcon--29px.svgIcon--bookmark.is-flushLeft,.svgIcon--29px.svgIcon--bookmarkCheck.is-flushLeft,.svgIcon--29px.svgIcon--bookmarkFilled.is-flushLeft {
margin-left: -7px
}
.svgIcon--21px.svgIcon--bookmark.is-flushRight,.svgIcon--21px.svgIcon--bookmarkCheck.is-flushRight,.svgIcon--21px.svgIcon--bookmarkFilled.is-flushRight {
margin-right: -5px
}
.svgIcon--25px.svgIcon--bookmark.is-flushRight,.svgIcon--25px.svgIcon--bookmarkCheck.is-flushRight,.svgIcon--25px.svgIcon--bookmarkFilled.is-flushRight {
margin-right: -6px
}
.svgIcon--29px.svgIcon--bookmark.is-flushRight,.svgIcon--29px.svgIcon--bookmarkCheck.is-flushRight,.svgIcon--29px.svgIcon--bookmarkFilled.is-flushRight {
margin-right: -7px
}
.svgIcon--21px.svgIcon--bookmark.is-flushTop,.svgIcon--21px.svgIcon--bookmarkCheck.is-flushTop,.svgIcon--21px.svgIcon--bookmarkFilled.is-flushTop {
margin-top: -5px
}
.svgIcon--25px.svgIcon--bookmark.is-flushTop,.svgIcon--25px.svgIcon--bookmarkCheck.is-flushTop,.svgIcon--25px.svgIcon--bookmarkFilled.is-flushTop {
margin-top: -6px
}
.svgIcon--29px.svgIcon--bookmark.is-flushTop,.svgIcon--29px.svgIcon--bookmarkCheck.is-flushTop,.svgIcon--29px.svgIcon--bookmarkFilled.is-flushTop {
margin-top: -7px
}
.svgIcon--21px.svgIcon--bookmark.is-flushBottom,.svgIcon--21px.svgIcon--bookmarkCheck.is-flushBottom,.svgIcon--21px.svgIcon--bookmarkFilled.is-flushBottom {
margin-bottom: -3px
}
.svgIcon--25px.svgIcon--bookmark.is-flushBottom,.svgIcon--25px.svgIcon--bookmarkCheck.is-flushBottom,.svgIcon--25px.svgIcon--bookmarkFilled.is-flushBottom {
margin-bottom: -4px
}
.svgIcon--29px.svgIcon--bookmark.is-flushBottom,.svgIcon--29px.svgIcon--bookmarkCheck.is-flushBottom,.svgIcon--29px.svgIcon--bookmarkFilled.is-flushBottom {
margin-bottom: -5px
}
.svgIcon--25px.svgIcon--lockStory.is-flushRight {
margin-right: -6px
}
.svgIcon--45px.svgIcon--logoNew.is-flushLeft,.svgIcon--45px.svgIcon--logoNewRainbow.is-flushLeft {
margin-left: -2px
}
.svgIcon--21px.svgIcon--arrowRight.is-flushRight {
margin-right: -6px
}
.wordmarkSet .svgIcon:last-child {
margin-top: -20px
}
.avatar {
display: block;
white-space: nowrap;
overflow: visible;
text-overflow: ellipsis;
line-height: normal;
position: relative
}
.avatar-image {
display: inline-block;
vertical-align: middle;
border-radius: 100%
}
.avatar-image--outlined {
border: 1px solid rgba(0,0,0,.05)
}
.avatar--roundedRectangle .avatar-image {
border-radius: 3px
}
.avatar-text {
padding-left: 10px;
white-space: nowrap
}
.link:hover .avatar-text {
text-decoration: underline
}
.avatar-description {
margin-left: 5px;
color: rgba(0,0,0,.44);
font-size: 11px
}
.avatar-image--micro {
width: 24px;
height: 24px
}
.avatar-image--icon {
width: 32px;
height: 32px
}
.avatar-image--smaller {
width: 40px;
height: 40px
}
.avatar-image--small {
width: 60px;
height: 60px
}
.avatar-image--medium {
width: 80px;
height: 80px
}
.avatar-image--large {
width: 120px;
height: 120px
}
.avatar-image--icon+.avatar-text {
line-height: 32px
}
.avatar-svgIcon .svgIcon {
background: #02b875;
fill: #fff;
position: absolute;
right: -3px;
bottom: -3px;
width: 10px;
height: 10px;
padding: 3px;
line-height: 16px;
font-size: 8px;
-webkit-background-clip: padding-box;
pointer-events: none;
border-radius: 100%
}
.avatar-svgIcon .svgIcon-use {
width: 10px;
height: 10px
}
@media screen and (max-width: 767px) {
.avatar-svgIcon .svgIcon {
right:0;
bottom: 0;
width: 9px;
height: 9px;
line-height: 15px;
font-size: 7px
}
}
.button {
display: inline-block;
position: relative;
height: 37px;
padding: 0 16px;
color: rgba(0,0,0,.44);
background: rgba(0,0,0,0);
font-size: 14px;
text-align: center;
text-decoration: none;
cursor: pointer;
border: 1px solid rgba(0,0,0,.15);
vertical-align: bottom;
white-space: nowrap;
text-rendering: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
border-radius: 999em;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on
}
.button:active {
outline: 0
}
.button {
line-height: 35px
}
.button:hover {
color: rgba(0,0,0,.6);
border-color: rgba(0,0,0,.44)
}
.button:active,.button:focus {
outline: 0;
color: rgba(0,0,0,.8);
border-color: rgba(0,0,0,.6)
}
.button--disabled,.buttonSwitch--disabled .button,.button[disabled],.button[disabled]:active,.button[disabled]:hover {
pointer-events: none;
opacity: .25;
cursor: default
}
.button--activity[disabled] {
opacity: 1
}
.button,.button .svgIcon {
transition: .1s background-color,.1s border-color,.1s color,.1s fill
}
.button:active,.button:active .svgIcon {
transition: none
}
.button--circle {
padding: 0;
width: 37px;
text-align: center
}
.button--circle>.avatar,.button--circle>.avatar>.avatar-image {
width: 37px;
height: 37px;
border-radius: 100%
}
.button--circle.button--small>.avatar,.button--circle.button--small>.avatar>.avatar-image {
width: 32px;
height: 32px
}
.button--boxShadowBorder:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
z-index: 100
}
.button--boxShadowBorder:hover:before {
box-shadow: inset 0 0 0 1px rgba(0,0,0,.44)
}
.button--boxShadowBorder:active:before,.button--boxShadowBorder:focus:before {
box-shadow: inset 0 0 0 1px rgba(0,0,0,.6)
}
.button--rectangular {
border-radius: 1px
}
.button--borderless {
border: 0
}
.button.editable {
cursor: text;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto
}
.button--expandable {
padding: 0;
width: 37px;
text-align: center
}
.button--expandable .button-label {
display: none;
position: relative;
line-height: 100%
}
.button--expandable:hover .button-label {
display: inline-block
}
.button--chromeless,.button--link {
border-radius: 0;
box-shadow: none;
height: auto;
line-height: inherit;
border-width: 0;
padding: 0;
vertical-align: baseline;
color: rgba(0,0,0,.44);
white-space: normal;
text-align: left
}
.button--chromeless:active,.button--chromeless:focus,.button--chromeless:hover,.button--link:active,.button--link:focus,.button--link:hover {
color: rgba(0,0,0,.6);
border-width: 0
}
.button--link:active,.button--link:focus,.button--link:hover {
text-decoration: underline
}
.button--chromeless.button--circle {
border-radius: 999em
}
.button--chromeless.button--circle,.button--link.button--circle {
text-align: center
}
.button--link.button--underline {
text-decoration: underline
}
.button--unstyled,.button--unstyled:active,.button--unstyled:focus,.button--unstyled:hover {
border-radius: 0;
box-shadow: none;
background: inherit;
color: inherit;
height: auto;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
text-transform: inherit;
border-width: 0;
padding: 0;
vertical-align: baseline;
white-space: normal
}
.button .svgIcon {
vertical-align: middle;
fill: rgba(0,0,0,.44)
}
.button:hover .svgIcon {
fill: rgba(0,0,0,.44)
}
.button:active .svgIcon,.button:focus .svgIcon {
fill: rgba(0,0,0,.8)
}
.button--chromeless .svgIcon,.button--link .svgIcon {
fill: rgba(0,0,0,.44)
}
.button--chromeless:hover .svgIcon,.button--link:hover .svgIcon {
fill: rgba(0,0,0,.8)
}
.button--chromeless:active .svgIcon,.button--chromeless:focus .svgIcon,.button--link:active .svgIcon,.button--link:focus .svgIcon {
fill: rgba(0,0,0,.9)
}
.button--withIconAndLabel {
line-height: 35px
}
.button--withIconAndLabel .svgIcon {
padding-right: 4px
}
.button--withIconAndLabel.button--withIconRight .svgIcon {
padding-left: 4px;
padding-right: 0
}
.button--withIconAndLabel.button--expandable .svgIcon {
padding-right: 0
}
.button--withIconAndLabel.button--expandable:hover .svgIcon {
padding-right: 4px
}
.button--withSvgIcon .svgIcon {
top: -1px;
position: relative
}
.buttonSwitch--withLabels .svgIcon {
padding-right: 0
}
.button--withWrappingLabel .button-defaultState {
position: absolute;
top: 0;
left: 0
}
.button--withWrappingLabel .button-activeState {
position: absolute;
top: 0;
left: 0
}
.button--withWrappingLabel .button-label {
float: left;
margin-left: 26px
}
.button--withIconRight .button-text {
margin-right: 15px
}
.button--dark {
border-color: rgba(0,0,0,.6);
color: rgba(0,0,0,.6)
}
.button--dark .svgIcon {
fill: rgba(0,0,0,.6)
}
.button--dark:hover {
border-color: rgba(0,0,0,.8);
color: rgba(0,0,0,.8)
}
.button--dark:active,.button--dark:focus {
border-color: rgba(0,0,0,.9);
color: rgba(0,0,0,.9)
}
.button--dark.is-active .svgIcon,.button--dark:hover .svgIcon {
fill: rgba(0,0,0,.8)
}
.button--dark:active .svgIcon,.button--dark:focus .svgIcon {
fill: rgba(0,0,0,.9)
}
.is-darkBackgrounded .button--dark {
border-color: rgba(255,255,255,.65);
color: rgba(255,255,255,.65)
}
.is-darkBackgrounded .button--dark .svgIcon {
fill: rgba(255,255,255,.65)
}
.is-darkBackgrounded .button--dark:focus,.is-darkBackgrounded .button--dark:hover {
border-color: rgba(255,255,255,.85);
color: rgba(255,255,255,.85)
}
.is-darkBackgrounded .button--dark:focus .svgIcon,.is-darkBackgrounded .button--dark:hover .svgIcon {
fill: rgba(255,255,255,.85)
}
.button--dark .label {
color: rgba(0,0,0,.6)
}
.button--dark.button--primary {
color: rgba(0,0,0,.8);
border-color: rgba(0,0,0,.6)
}
.button--dark.button--primary:active,.button--dark.button--primary:focus,.button--dark.button--primary:hover {
color: rgba(0,0,0,.9);
border-color: rgba(0,0,0,.8)
}
.button--dark.button--activity.is-counter,.button--dark.button--primary.button--withChrome.is-active {
background: rgba(0,0,0,.44);
border-color: transparent
}
.button--dark.button--activity.is-counter {
color: #fff
}
.button--dark.button--activity.is-counter:hover,.button--dark.button--primary.button--withChrome.is-active:active,.button--dark.button--primary.button--withChrome.is-active:focus,.button--dark.button--primary.button--withChrome.is-active:hover {
background: rgba(0,0,0,.6);
border-color: transparent
}
.is-darkBackgrounded .button--chromeless,.is-darkBackgrounded .button--primary {
color: rgba(255,255,255,.85)
}
.button-count {
margin-left: 10px
}
.button-count:before {
content: '';
display: inline-block;
width: 1px;
height: 18px;
background: rgba(0,0,0,.44);
margin-right: 10px;
vertical-align: middle
}
.button--filled .button-count:before,.button--primary.button--withChrome.is-active .button-count:before {
background: rgba(255,255,255,.65)
}
.button--primary .button-count:before {
background: #02b875
}
.button--small .button-count {
margin-left: 6px
}
.button--small .button-count:before {
margin-right: 6px;
height: 14px
}
.buttonSet>.button,.buttonSet>.buttonSet-inner>.button {
margin-right: 8px;
vertical-align: middle
}
.buttonSet--withLabels>.buttonSet-inner {
margin-right: 5px
}
.buttonSet .buttonSet-inner {
display: inline-block;
vertical-align: middle
}
.buttonSet .buttonSet-inner:not(:first-child) {
margin-left: 5px
}
.buttonSet>.button:last-child,.buttonSet>.buttonSet-inner:last-child>.button:last-child {
margin-right: 0
}
.buttonSet--withLabels .buttonSet-inner .button:first-child {
margin-right: 4px
}
.buttonSet--withLabels .buttonSet-inner {
margin-right: 8px
}
.buttonSet--withLabels .buttonSet-inner:last-child,.buttonSet--withLabels .buttonSet-inner:last-child .button:last-child {
margin-right: 0
}
.buttonSet>.button--chromeless+.button,.buttonSet>.buttonSet-inner+.button--chromeless,.buttonSet>.buttonSet-separator+.button {
margin-left: 8px
}
.buttonSet--wide>.button,.buttonSet--wide>.buttonSet-inner>.button {
margin-right: 16px
}
.buttonSet>.button--chromeless:not(.button--circle) {
margin-right: 0;
padding-right: 8px
}
.buttonSet--wide>.button--chromeless:not(.button--circle) {
padding-right: 16px
}
.buttonSet>.button--chromeless:last-child {
padding-right: 0
}
.buttonSet>.button--chromeless+.button--chromeless:not(.button--circle) {
margin-left: 0;
padding-left: 8px
}
.buttonSet--vertical>.button--chromeless.button--fbInApp {
margin-right: auto
}
.buttonSet--narrow>.button {
margin-right: 4px
}
.buttonSet--narrow>.button+.button,.buttonSet--narrow>.buttonSet-separator+.button {
margin-left: 4px
}
.buttonSet--padded {
padding-top: 20px;
padding-bottom: 20px
}
.buttonSet--padded+.buttonSet--padded {
padding-top: 0
}
.buttonSet--vertical>.button {
display: block;
margin: 0 auto 10px
}
.buttonSet--vertical>a.button {
display: inline-block
}
.buttonSet--vertical>.button:last-child {
margin-right: auto
}
.button--vertical {
text-align: center;
height: 64px;
border: 0;
padding: 0;
border-radius: 0
}
.button--vertical:hover>.label {
border-color: rgba(0,0,0,.44)
}
.button--vertical>.label {
margin: 0
}
.button--vertical>.button-label {
font-size: 12px
}
.buttonSwitch {
display: inline-block;
position: relative;
height: 40px;
border: 1px solid rgba(0,0,0,.15);
vertical-align: bottom;
box-sizing: border-box;
border-radius: 999em
}
.buttonSwitch .button {
border: 0;
height: 100%;
width: auto;
text-align: center;
color: rgba(0,0,0,.44);
padding: 0 16px;
transition: none
}
.buttonSwitch .button:active,.buttonSwitch .button:focus,.buttonSwitch .button:hover {
color: rgba(0,0,0,.6)
}
.buttonSwitch .button:first-child {
border-radius: 999em 0 0 999em
}
.buttonSwitch .button:nth-child(2) {
border-radius: 0
}
.buttonSwitch .button:first-child,.buttonSwitch .button:nth-child(2) {
border-right: 1px solid rgba(0,0,0,.15)
}
.buttonSwitch .button:last-child {
border-radius: 0 999em 999em 0;
border-right: 0
}
.buttonSwitch .button[disabled] {
opacity: 1;
background: #02b875;
color: #fff;
border: 0;
box-shadow: 0 0 0 1px #02b875
}
.buttonSwitch .button[disabled] .svgIcon {
fill: #fff
}
.buttonSwitch--chromeless .button[disabled] {
color: #02b875;
background: rgba(255,255,255,0);
box-shadow: none
}
.buttonSwitch.buttonSwitch--chromeless .button[disabled] .svgIcon {
fill: #02b875
}
.buttonSwitch--chromeless .button.button--disabledInSwitch,.buttonSwitch.buttonSwitch--chromeless .button.button--disabledInSwitch .button-label {
color: rgba(0,0,0,.15)
}
.buttonSwitch.buttonSwitch--chromeless .button.button--disabledInSwitch .svgIcon {
fill: rgba(0,0,0,.15)
}
.buttonSwitch--compact,.buttonSwitch--small {
height: 32px;
line-height: 32px;
vertical-align: middle
}
.buttonSwitch--compact .button,.buttonSwitch--small .button {
width: 40px;
padding: 0
}
.buttonSwitch--compact .button {
top: -3px
}
.buttonSwitch--chromeless,.buttonSwitch--chromeless .button:first-child,.buttonSwitch--chromeless .button:nth-child(2) {
border: 0;
border-radius: 0
}
.buttonSwitch--chromeless .button {
width: 30px
}
.buttonSwitch--withLabels .button {
width: auto;
margin-right: 15px
}
.buttonSwitch--withLabelsDense .button {
margin-right: 8px
}
.buttonSwitch--withLabels .button:first-child {
margin-left: 15px
}
.buttonSwitch--withLabelsDense .button:first-child {
margin-left: 8px
}
.buttonSwitch--withLabels .button-label {
display: inline-block;
position: relative;
bottom: 0;
margin-left: 5px
}
.button .button-labelSet {
display: inline-block;
vertical-align: middle
}
.button .button-label--multiLine,.button--signin .button-label--multiLine {
display: block;
line-height: 16px
}
.buttonSwitch--withLabels .button[disabled] .button-label {
color: #00ab6b
}
.buttonSwitch--disabled {
border-color: rgba(0,0,0,.05)
}
.buttonSwitch--disabled .button[disabled] {
opacity: .25
}
.buttonSwitch--colorNormal .button {
color: rgba(0,0,0,.44)
}
.buttonSwitch--colorNormal .button .svgIcon {
fill: rgba(0,0,0,.44)
}
.buttonSwitch--outlined .button {
border-right: 1px solid rgba(0,0,0,.15);
transition: none
}
.buttonSwitch--outlined .button .svgIcon {
fill: rgba(0,0,0,.44);
transition: none
}
.buttonSwitch--outlined .button[disabled] {
color: #00ab6b;
background: #fff
}
.buttonSwitch--outlined .button[disabled] .svgIcon {
fill: #00ab6b
}
.buttonSwitch--outlined .button:not([disabled]):hover {
background-color: #02b875;
border-color: #02b875;
color: #fff
}
.buttonSwitch--outlined .button:not([disabled]):hover .svgIcon {
fill: #fff
}
.button--large {
height: 44px;
padding: 0 18px
}
.button--large {
line-height: 42px
}
.button--large,.button--large.button--chromeless,.button--large.button--link {
font-size: 15px
}
.button--large.button--chromeless,.button--large.button--link {
padding: 0
}
.button--large.button--circle {
width: 44px;
height: 44px;
padding: 0
}
.button--small {
height: 32px;
line-height: 30px;
padding: 0 14px;
font-size: 12px
}
.button--small.button--chromeless,.button--small.button--link {
padding: 0;
line-height: inherit;
height: inherit
}
.button--small.button--circle {
width: 32px;
height: 32px;
padding: 0
}
.button--small.button--expandable {
width: 32px;
padding: 0
}
.button--small.button--expandable:hover {
width: auto;
padding: 0 12px 0 8px
}
.button--smaller {
height: 25px;
line-height: 23px;
padding: 0 6px;
font-size: 12px
}
.button--smaller.button--chromeless,.button--smaller.button--link {
padding: 0;
line-height: inherit;
height: inherit
}
.button--smaller.button--circle {
width: 25px;
height: 25px;
padding: 0
}
.button--inline {
margin: 0 6px;
vertical-align: middle
}
.button--primary,.button--primary .label,.button--primary.button--link {
color: #00ab6b
}
.button--primary .svgIcon {
fill: #02b875
}
.button--primary {
border-color: #02b875
}
.button--primary:active,.button--primary:focus,.button--primary:hover {
border-color: #00ab6b;
color: #1c9963
}
.button--primary:active .svgIcon,.button--primary:focus .svgIcon,.button--primary:hover .svgIcon {
fill: #00ab6b
}
.button--primary.button--chromeless:active,.button--primary.button--chromeless:focus,.button--primary.button--chromeless:hover {
color: #1c9963
}
.button--primary.button--link:active,.button--primary.button--link:focus,.button--primary.button--link:hover {
color: #00ab6b
}
.button--filled,.button--filled.button--primary.button--chromeless,.button--filled.button--primary.button--link,.button--filled>.label,.button--primary.button--withChrome.is-active,.button--primary.button--withChrome.is-active>.label {
color: #fff
}
.button--filled>.svgIcon,.button--primary.button--withChrome.is-active .svgIcon {
fill: #fff
}
.button--filled,.button--primary.button--withChrome.is-active {
background: #02b875;
border-color: #02b875
}
.button--filled:active>.svgIcon,.button--filled:focus>.svgIcon,.button--filled:hover>.svgIcon {
fill: #fff
}
.button--filled:active,.button--filled:focus,.button--filled:hover,.button--primary.button--withChrome.is-active:active,.button--primary.button--withChrome.is-active:focus,.button--primary.button--withChrome.is-active:hover {
background: #00ab6b;
border-color: #00ab6b;
color: #fff
}
.button--withFadedLabel {
color: rgba(0,0,0,.44)
}
.button--delete:active,.button--delete:focus,.button--delete:hover {
border-color: #cc5454;
color: #cc5454
}
.button--lighter .svgIcon {
fill: rgba(0,0,0,.15)
}
.button--lighter:active .svgIcon,.button--lighter:focus .svgIcon,.button--lighter:hover .svgIcon {
fill: rgba(0,0,0,.44)
}
.button--light,.button--light.button--link {
color: rgba(255,255,255,.65)
}
.button--light {
border-color: rgba(255,255,255,.65)
}
.button--light .svgIcon {
fill: rgba(255,255,255,.65)
}
.button--light:active,.button--light:focus,.button--light:hover {
border-color: rgba(255,255,255,.85)
}
.button--light:active,.button--light:focus,.button--light:hover {
color: rgba(255,255,255,.97)
}
.button--light:active .svgIcon,.button--light:focus .svgIcon,.button--light:hover .svgIcon {
fill: rgba(255,255,255,.97)
}
.button--light .button-count:before {
background: rgba(255,255,255,.2)
}
.button--light.button--primary {
border-color: rgba(255,255,255,.97);
color: rgba(255,255,255,.97)
}
.button--light.button--primary:active,.button--light.button--primary:focus,.button--light.button--primary:hover {
border-color: #fff;
color: #fff
}
.button--light.button--activity.is-counter,.button--light.button--primary.is-active:not(.button--chromeless) {
background: rgba(255,255,255,.97);
border-color: rgba(255,255,255,.97);
color: rgba(0,0,0,.8)
}
.button--light.button--activity.is-counter:hover,.button--light.button--primary.is-active:active:not(.button--chromeless),.button--light.button--primary.is-active:focus:not(.button--chromeless),.button--light.button--primary.is-active:hover:not(.button--chromeless) {
background: #fff;
border-color: #fff;
color: rgba(0,0,0,.9)
}
.button--light.button--delete:active,.button--light.button--delete:focus,.button--light.button--delete:hover {
border-color: transparent;
background: #cc5454;
color: #fff
}
.buttonSet .button--chromeless,.buttonSet .button--link {
height: 37px;
line-height: 35px
}
.buttonSet .button--large.button--chromeless,.buttonSet .button--large.button--link {
height: 44px;
line-height: 42px
}
.buttonSet .button--small.button--chromeless,.buttonSet .button--small.button--link {
height: 32px;
line-height: 30px
}
.button--warning,.button--warning:active,.button--warning:focus,.button--warning:hover {
border-color: #e7af0e;
color: #e7af0e
}
.buttonSet--profile .button--cancel {
display: none
}
.editing .buttonSet--profile .button--cancel {
display: inline-block
}
.editing .buttonSet--profile .button--newStory {
display: none
}
.buttonSet--profile {
padding-top: 8px;
padding-bottom: 8px
}
.buttonSet--profile .button--chromeless {
color: rgba(0,0,0,.44);
margin-right: 6px
}
.buttonSet--profile .button--chromeless:active,.buttonSet--profile .button--chromeless:focus,.buttonSet--profile .button--chromeless:hover {
color: rgba(0,0,0,.6)
}
.buttonSet--profile .buttonSet-inner .button {
margin-right: 10px
}
.buttonSet--profile+.buttonSet--profile {
padding-top: 0
}
.buttonSet--profile .middotDivider {
color: rgba(0,0,0,.44);
font-size: 14px;
padding: 0;
margin-left: 14px;
margin-right: 14px
}
.button--signin,.button--signin:active,.button--signin:focus,.button--signin:hover {
border: 0;
color: #fff;
background-color: #fff
}
.button--signin:active,.button--signin:focus,.button--signin:hover {
background-color: rgba(0,0,0,.05)
}
.button--signin .svgIcon,.button--signin:active .svgIcon,.button--signin:focus .svgIcon,.button--signin:hover .svgIcon {
fill: #fff
}
.button--signin .svgIcon--25px {
padding-right: 8px
}
.button--facebook {
background-color: #3b5998
}
.button--facebook:active,.button--facebook:focus,.button--facebook:hover {
background-color: #1d315b
}
.button--twitter {
background-color: #55acee
}
.button--twitter:active,.button--twitter:focus,.button--twitter:hover {
background-color: #006daa
}
.button--google,.button--google:active,.button--google:focus,.button--google:hover {
border: 1px solid rgba(0,0,0,.15);
color: rgba(0,0,0,.6)
}
.button--email,.button--email:active,.button--email:focus,.button--email:hover {
border: 1px solid #02b875;
color: #00ab6b
}
.button--email .svgIcon,.button--email:active .svgIcon,.button--email:focus .svgIcon,.button--email:hover .svgIcon {
fill: #02b875
}
.button--disconnect {
font-size: 12px;
text-align: right;
display: block;
width: 100%
}
.button--dangerHover:hover {
color: #cc5454
}
.buttonSet--bar {
background: #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
padding: 0
}
.buttonSet-inside--bar {
padding: 17px 0
}
.button-text {
margin-right: 10px
}
.button--compound .button-text {
display: inline-block;
font-size: 16px;
margin-left: 0;
margin-right: 0
}
.button--compound .button {
font-size: 18px;
line-height: 30px;
padding-right: 10px;
padding-left: 10px
}
.button--activity.is-counter {
border: 0
}
.button--activity.is-counter .button-text {
display: block;
font-size: 14px;
width: auto;
margin-right: auto;
margin-left: auto;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 500;
font-style: normal
}
.button--activity.is-counter.is-highActivityCount .button-text {
font-size: 11px;
letter-spacing: -.02em
}
.buttonSet-label {
font-size: 14px;
color: rgba(0,0,0,.44);
vertical-align: middle;
margin-right: 10px
}
.buttonSet-label--height32 {
height: 32px;
line-height: 32px;
display: inline-block
}
.buttonSet>.buttonSwitch {
margin-right: 8px
}
.button--collection2upload {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 18px;
color: rgba(0,0,0,.8)
}
.button--uploadOAuthAppImage .svgIcon {
line-height: 158px;
margin-right: 0
}
.button--uploadOAuthAppImage,.button--uploadOAuthAppImage:focus,.button--uploadOAuthAppImage:hover {
overflow: hidden;
display: block;
width: 145px;
height: 145px;
margin: 25px 0 0 0;
background-size: cover;
border-radius: 3px
}
.button--uploadOAuthAppImage.is-imageBackgrounded .svgIcon {
fill: rgba(255,255,255,0)
}
.button--uploadOAuthAppImage.is-imageBackgrounded:hover .svgIcon {
fill: rgba(255,255,255,.97)
}
.button--uploadOAuthAppImage.is-imageBackgrounded:hover:before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0,0,0,.44)
}
.button--close {
font-size: 32px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
padding: 10px 20px;
position: absolute;
top: 0;
right: 0
}
.buttonScalableGroup.is-scaled .button--scale {
transform: scale(1);
transition-duration: .2s
}
.button--scale {
transform: scale(0);
transition-property: transform;
transition-duration: .1s
}
.button.is-active>.button-activeState,.button>.button-defaultState {
display: inline
}
.button.button--withIcon.is-active>.button-activeState,.button.button--withIcon>.button-defaultState {
display: inline-block;
vertical-align: top
}
.button.is-active>.button-defaultState,.button>.button-activeState {
display: none
}
.button--vertical.is-active>.button-activeState,.button--vertical>.button-defaultState {
display: block
}
.button--withHover:active>.button-hoverState,.button--withHover:focus>.button-hoverState,.button--withHover:hover>.button-hoverState,.button--withHover>.button-defaultState {
display: inline
}
.button--withHover:active>.button-defaultState,.button--withHover:focus>.button-defaultState,.button--withHover:hover>.button-defaultState,.button--withHover>.button-hoverState {
display: none
}
@media screen and (max-width: 767px) {
.button {
height:33px;
line-height: 32px;
font-size: 14px;
padding: 0 14px
}
.button--unstyled {
height: auto;
line-height: inherit;
font-size: inherit;
padding: 0
}
.button--circle {
padding: 0;
width: 33px
}
.button--circle>.avatar,.button--circle>.avatar>.avatar-image {
width: 32px;
height: 32px
}
.button--activity>.button-text {
font-size: 14px
}
.button--close {
top: 0;
right: 15px;
font-size: 32px
}
.button--chromeless,.button--link {
line-height: inherit;
vertical-align: baseline;
height: auto;
padding: 0
}
.button--large {
height: 37px;
line-height: 35px;
font-size: 14px;
padding: 0 16px
}
.buttonSet>.button {
margin-right: 4px
}
.buttonSet--vertical>.button {
margin: 0 auto 10px
}
.buttonSwitch {
height: 33px;
line-height: 29px
}
.buttonSwitch .button[disabled] {
padding: 0 12px
}
.button--withSvgIcon {
line-height: normal
}
.button--withIconAndLabel {
line-height: 32px
}
.button--smaller {
height: 25px;
line-height: 23px;
padding: 0 6px;
font-size: 12px
}
}
.link {
color: inherit;
text-decoration: none;
cursor: pointer
}
.link:active,.link:focus,.link:hover {
color: inherit;
text-decoration: underline
}
.link--primary {
color: rgba(0,0,0,.8);
text-decoration: none
}
.link--primary:active,.link--primary:focus,.link--primary:hover {
color: #00ab6b;
text-decoration: none
}
.link--secondary {
color: rgba(0,0,0,.44)
}
.link--dark {
color: rgba(0,0,0,.6)
}
.link--blackNormal {
color: rgba(0,0,0,.44)
}
.link--whiteDarker {
color: rgba(255,255,255,.85)
}
.link--whiteDarker:hover {
color: rgba(255,255,255,.97)
}
.link--darker {
color: rgba(0,0,0,.8)
}
.error .link,.error .link:active,.error .link:focus,.error .link:hover {
color: #fff
}
.link--underline {
text-decoration: underline
}
.link--noUnderline,.link--noUnderline:active,.link--noUnderline:focus,.link--noUnderline:hover {
text-decoration: none
}
.link--accent {
color: #00ab6b;
text-decoration: none
}
.link--accent:active,.link--accent:focus,.link--accent:hover {
color: #00ab6b
}
.link--butter {
color: #00ab6b;
text-decoration: underline
}
.link--butter:active,.link--butter:focus,.link--butter:hover {
color: #1c9963
}
.butterBar--error .link--butter,.butterBar--error .link--butter:active,.butterBar--error .link--butter:focus,.butterBar--error .link--butter:hover {
color: #fff
}
.link--overlay {
color: rgba(0,0,0,.8)
}
.link--overlay:active,.link--overlay:focus,.link--overlay:hover {
color: rgba(0,0,0,.9)
}
.link.link--darken:hover {
color: rgba(0,0,0,.6)
}
.link--accent.link--darken:hover {
color: #1c9963
}
.link--darker.link--darken:hover {
color: rgba(0,0,0,.9)
}
.link--blackNormal.link--darken:hover {
color: rgba(0,0,0,.6)
}
.link--darken:not(.link--underline):active,.link--darken:not(.link--underline):focus,.link--darken:not(.link--underline):hover {
text-decoration: none
}
.linkSet {
margin-top: 10px
}
.linkSet>.button {
margin-right: 8px
}
.link--maxWidth220 {
max-width: 220px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.link--withVisited:visited {
color: rgba(0,0,0,.6)
}
.button.is-touchIconFadeInPulse.is-touched:not(:active) .svgIcon,.link.is-touchIconFadeInPulse.is-touched:not(:active) .svgIcon {
animation: fade-in-pulse-06 .1s
}
.button.is-active.is-touchIconFadeInPulse.is-touched:not(:active) .svgIcon,.link.is-active.is-touchIconFadeInPulse.is-touched:not(:active) .svgIcon {
animation: fade-in-pulse-08 .3s
}
.button.is-touchIconBlackPulse.is-touched .svgIcon,.link.is-touchIconBlackPulse.is-touched .svgIcon {
animation: black-pulse-09 250ms;
animation-timing-function: ease-out;
animation-fill-mode: none
}
.list {
margin-bottom: 150px
}
.list-item {
list-style: none;
border-top: 1px solid rgba(255,255,255,.2);
padding: 40px 0 35px
}
.list-item:last-child {
border-bottom: 1px solid rgba(255,255,255,.2)
}
.list-item>p {
margin-bottom: 15px
}
.list--bordered .list-item {
border-bottom: 1px solid rgba(0,0,0,.05)
}
.list--bordered .list-item:last-child {
border-bottom: 0
}
.list--borderless .list-item {
display: block;
padding: 5px 0;
border: 0
}
.list--large .list-item {
font-size: 16px;
font-weight: 300
}
.list--withCompactListItems {
margin: 5px 0 15px
}
.list--withCompactListItems .list-item,.list-item--compact {
padding: 5px 0
}
.list--choice .list-item {
cursor: pointer;
box-sizing: border-box
}
.list--choice .list-item--inactive,.list--choice .list-item--separator {
cursor: default
}
.list--choice .list-item .button {
transition: none
}
.list--choice .list-item:first-child .heading {
padding-top: 5px
}
.list--choice .list-item .heading {
padding-bottom: 5px
}
.list--short.list--choice .list-item.list-item--inactive {
padding-top: 3px;
padding-bottom: 2px;
color: rgba(0,0,0,.44);
white-space: normal
}
.list--short {
margin-bottom: 0
}
.list--short.list--choice {
min-width: 150px
}
.list--short .button,.list--short .list-item {
text-align: left;
width: 100%;
line-height: 1.4;
white-space: nowrap
}
.list--borderless.list--short .list-item {
padding: 5px 15px;
box-sizing: border-box
}
.list--short.list--choice .list-item {
padding-top: 0;
padding-bottom: 0
}
.list--short.list--choice .button {
padding-top: 5px;
padding-bottom: 5px
}
.list-item--padded {
overflow: hidden;
position: relative;
padding-top: 30px;
padding-bottom: 36px;
border-bottom: 1px solid rgba(0,0,0,.05)
}
.list-item--padded:last-of-type {
border-bottom-width: 0
}
.list-itemInfo {
float: left;
width: 60%
}
.list-itemInfo.list-itemInfo--fullWidth {
width: 100%;
float: none
}
.list-itemInfo>.button--delete {
text-decoration: underline;
line-height: 1.4;
margin-top: 10px
}
.list-itemTitle {
color: rgba(0,0,0,.8);
font-size: 18px
}
.list-itemDescription {
font-size: 14px;
margin-right: 20px;
margin-bottom: 0;
color: rgba(0,0,0,.44)
}
.list .list-item.list-item--separator,.list--borderless .list-item.list-item--separator {
border-top: solid 1px rgba(0,0,0,.05);
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 0;
padding-top: 0
}
.list-item--draggable {
cursor: move;
cursor: -webkit-grab;
cursor: grab
}
.is-dragger.list-item--draggable {
opacity: .8;
cursor: -webkit-grabbing;
cursor: grabbing
}
.is-dragging.list-item--draggable {
visibility: hidden
}
.list-item--dark>a {
font-size: 16px;
color: rgba(0,0,0,.6)
}
.list-item--dark:hover>a {
color: #000
}
.list-itemInput {
display: block;
font-size: 16px;
border: none;
padding: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.list-itemInput--inline,.list-itemInput--inline.editable>.graf--p {
display: inline
}
.list-itemInput:focus {
outline: 0
}
.list-indexButton {
font-weight: 700;
color: rgba(0,0,0,.6);
margin-right: 15px;
position: relative;
top: -11px
}
.list-itemImage {
float: left;
margin-right: 10px;
margin-top: 3px
}
.list-itemDate {
display: block;
color: rgba(0,0,0,.44);
padding-top: 2px
}
.list--tags {
display: block
}
.list--tags .list-itemIcon {
float: left;
width: 32px;
height: 32px
}
.list--tags .svgIcon--tagFilled {
margin: 5px;
fill: #b3b3b1
}
.list--tags .list-itemName {
line-height: 32px;
padding-left: 10px
}
.list-item--deletable .button--delete {
position: relative;
top: -9px;
margin-left: 20px;
display: none
}
.list-item--deletable:active .button--delete .list-item--deletable:focus .button--delete,.list-item--deletable:hover .button--delete {
display: inline
}
.is-dragger.list-item--deletable .button--delete {
display: none
}
.list-item--inline,.list-item.list-item--inline {
display: inline-block;
margin-right: 10px;
width: auto;
padding: 5px 0 5px
}
.list--middot .list-item {
padding: 0;
margin-bottom: 10px;
position: relative
}
.list--middot .list-item:before {
position: absolute;
right: 100%;
content: '·';
box-sizing: border-box;
padding-right: 10px
}
@media screen and (max-width: 767px) {
.list-item--padded {
padding:20px 0 24px
}
.list-itemTitle {
font-size: 18px
}
.list-itemInfo {
float: none;
width: 100%
}
.list-itemInfo {
margin-bottom: 14px
}
}
.textInput {
border: 1px solid rgba(0,0,0,.15);
padding: 0 5px;
height: 35px;
font-size: 14px;
outline: 0;
background: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
border-radius: 4px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.textInputLabel {
display: table-cell;
vertical-align: middle;
height: 35px;
font-size: 14px;
box-sizing: border-box;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
.textInput:invalid {
box-shadow: none
}
.textInput--textarea {
padding: 15px;
margin: 15px 0 30px;
resize: none;
width: 100%;
height: 50px;
overflow: hidden
}
.textInput--textarea:focus {
outline: 0
}
.textInput--fullWidth {
width: 100%
}
.textInput--narrow {
width: 255px
}
.textInput--width50 {
width: 50px
}
.textInput--large {
font-size: 18px;
height: 40px;
margin: 10px auto;
overflow: hidden;
padding: 7px;
width: 500px;
white-space: nowrap;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.textInput--jumbo {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
font-size: 50px;
height: 80px;
padding: 0;
width: 100%
}
.textInput--transparent {
background: 0 0
}
@media all and (max-width: 767px) {
.textInput--jumbo {
font-size:32px;
height: 50px
}
.textInput--narrow {
width: 175px;
height: 32px;
padding: 0 10px
}
}
.textInput--rounded {
border-radius: 999em
}
.textInput--transparent {
background: 0 0
}
.textInput--darkText {
color: rgba(0,0,0,.8)
}
.textInput--chromeless {
border: 0;
padding: 0;
outline: 0;
height: auto;
background: 0 0
}
.textInput--underlined {
border: 0;
border-bottom: 1px solid rgba(0,0,0,.15);
border-radius: 0
}
.inputGroup {
position: relative
}
.inputGroup .textInput:not(.textInput--narrow) {
width: 100%;
box-sizing: border-box
}
.inputGroup--text {
text-align: left;
width: 100%;
margin-bottom: 10px
}
.inputGroup--text>.inputGroup-title {
color: rgba(0,0,0,.44);
font-size: 14px
}
.inputGroup--text>.textInput {
margin: 0
}
.inputGroup-description {
margin-top: 15px;
margin-bottom: 25px;
font-size: 16px;
color: rgba(0,0,0,.44)
}
.label--radio .inputGroup-description {
margin-left: 30px
}
.inputGroup .svgIcon {
top: -1px;
position: relative
}
.metabar .inputGroup.inputGroup--selection {
margin-top: 15px;
margin-bottom: 10px;
text-align: left
}
.inputGroup--selection .inputGroup-description {
position: relative;
margin-left: 30px;
margin-bottom: 15px;
font-size: 12px;
color: rgba(0,0,0,.6)
}
.inputGroup--selection .inputGroup-description--last {
margin-bottom: 0
}
.inputGroup--selection .button--small {
margin-top: 10px
}
.inputGroup--error>.textInput {
border-color: #cc5454
}
.inputGroup--error>.inputGroup-title {
color: #cc5454
}
.inputGroup--success>.textInput {
border-color: rgba(0,0,0,.15)
}
.inputGroup--success>.inputGroup-title {
color: #00ab6b
}
.checkbox {
margin-right: 5px
}
.checkboxInput {
display: inline-block;
border: 1px solid rgba(0,0,0,.44);
border-radius: 3px;
width: 17px;
height: 17px;
line-height: 15px;
vertical-align: middle;
box-sizing: border-box
}
.checkboxInput .svgIcon {
display: none
}
.checkboxInput .svgIcon--19px {
margin-top: -2px;
margin-left: -2px
}
.checkboxInput.is-active {
color: #fff;
background: #00ab6b;
border-color: #00ab6b
}
.checkboxInput.is-active .svgIcon {
display: inline-block;
fill: #fff
}
.radioInput {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
margin-right: 12px;
margin-top: -3px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.15);
border-radius: 100%
}
.radio:checked+.radioInput:after,.radioInput.is-active:after {
content: '';
position: relative;
width: 12px;
height: 12px;
left: 2px;
top: 2px;
display: block;
background-color: #02b875;
border-radius: 100%
}
.radioInput--block {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px
}
.radioDescription {
display: inline-block;
vertical-align: middle
}
.select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background: 0 0;
border: none;
border-bottom: 1px solid rgba(0,0,0,.15);
border-radius: 0;
padding-right: 20px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.select:focus {
border-bottom: 1px solid rgba(0,0,0,.44)
}
.select--basic {
font-size: 14px;
color: rgba(0,0,0,.8);
padding: 0 15px;
box-sizing: border-box;
height: 35px
}
.form:not(.form--legacy) {
text-align: left;
border: 1px solid rgba(0,0,0,.15);
color: rgba(0,0,0,.8);
background-color: #fff;
box-sizing: border-box
}
.form.form--borderless {
border: 0
}
.container.form:not(.form--legacy) {
padding: 0
}
.form-row {
margin: 30px 0
}
.form-row:first-child {
margin-top: 40px
}
.form-row:last-child {
margin-bottom: 40px
}
.form-row--borderedTop {
border-top: 1px solid rgba(0,0,0,.05)
}
.form-heading {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 600;
font-style: normal
}
.form-hint {
color: rgba(0,0,0,.44);
font-size: 14px
}
.form-hint--smaller {
font-size: 14px
}
.form-inlineEditorWithIcon .svgIcon {
fill: rgba(0,0,0,.44);
padding: 3px 5px 3px 0
}
.form-asterisk {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.form--postImport .button--primary {
margin-top: 50px
}
.form-footer {
color: rgba(0,0,0,.44);
font-size: 12px;
margin-top: 50px;
margin-bottom: 10px
}
.editorWithUnderline {
padding-bottom: 4px
}
.editorWithUnderline>p.graf--p {
padding-bottom: 2px;
border-bottom: 1px solid rgba(0,0,0,.15)
}
.editorWithUnderline:focus>p.graf--p {
border-bottom: 1px solid rgba(0,0,0,.44)
}
.editorWithUnderline .dateInput {
color: #b3b3b1
}
.heading {
color: rgba(0,0,0,.8);
font-size: 16px;
letter-spacing: 0;
position: relative
}
.heading--borderedTop {
border-top: 1px solid rgba(0,0,0,.05)
}
.heading--borderedBottom {
border-bottom: 1px solid rgba(0,0,0,.05)
}
.is-darkBackgrounded .heading--borderedBottom,.is-darkBackgrounded .heading--borderedBottom .heading-supplemental {
border-color: rgba(255,255,255,.2)
}
.heading--borderedTop .heading-content {
padding-top: 15px;
margin-bottom: 10px
}
.heading--borderedBottom .heading-content {
padding-top: 0;
margin-bottom: 8px
}
.heading--padded {
margin-bottom: 20px;
margin-top: 30px
}
.heading--paddedTop {
margin-top: 30px
}
.heading--backgrounded {
background-color: rgba(0,0,0,.05);
padding: 10px 20px
}
.heading--allCaps,.heading-prefix {
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase
}
.heading-prefix {
color: rgba(0,0,0,.44)
}
.heading-title--accent {
margin-top: -16px;
padding-top: 16px;
border-top: 1px solid rgba(0,0,0,.44)
}
.heading-title--lineHeightTight {
line-height: 1.2
}
.heading-title--dark {
color: rgba(0,0,0,.6)
}
.heading-title--dark .button:hover,.heading-title--dark .link:hover {
color: rgba(0,0,0,.8)
}
.heading-title--darker {
color: rgba(0,0,0,.8)
}
.heading-title--withIcon .svgIcon {
vertical-align: middle;
display: inline-block
}
.heading-title--withIcon .heading-titleText {
vertical-align: middle;
padding-left: 5px
}
.heading-title--semibold {
font-weight: 600
}
.heading-title--bold {
font-weight: 700
}
.heading-content>.link {
color: rgba(0,0,0,.44)
}
.is-darkBackgrounded .heading-content>.link {
color: rgba(255,255,255,.35)
}
.is-darkBackgrounded .heading-content>.link:hover {
color: rgba(255,255,255,.5)
}
.heading-content .button--chromeless {
line-height: 1
}
.heading--page {
margin-top: 40px;
margin-bottom: 40px
}
.heading--page .heading-title {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
font-size: 32px;
text-transform: none
}
.heading--streamSection {
margin-top: 50px;
margin-bottom: 20px
}
.heading--simple .heading-content,.heading--simple .heading-title {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 14px;
text-transform: none
}
.heading--simple .heading-title {
color: rgba(0,0,0,.8)
}
.heading--simple .heading-content>.link {
color: rgba(0,0,0,.44)
}
.heading--simple .heading-content>.link:hover {
color: rgba(0,0,0,.8)
}
.heading--light,.heading--light .heading-content,.heading--light .heading-title {
color: rgba(0,0,0,.44)
}
.heading--light.heading--borderedBottom,.heading--light.heading--borderedBottom .heading-supplemental,.heading--light.heading--borderedTop {
border-color: rgba(0,0,0,.15)
}
.heading--normal,.heading--normal .heading-content,.heading--normal .heading-title {
color: rgba(0,0,0,.44)
}
.heading--normal.heading--borderedBottom,.heading--normal.heading--borderedBottom .heading-supplemental,.heading--normal.heading--borderedTop {
border-color: rgba(0,0,0,.0785)
}
.heading--section {
margin-top: 80px;
padding-bottom: 15px
}
.heading--section .heading-title {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal;
font-size: 24px;
text-transform: none;
display: block
}
.heading-description {
display: block;
font-size: 16px;
margin-top: 15px
}
.heading-tabs {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden
}
.heading-tabsItem {
margin-right: 20px;
color: rgba(0,0,0,.44)
}
.heading--borderedTop .heading-tabsItem {
padding-top: 16px
}
.heading--borderedBottom .heading-tabsItem {
padding-bottom: 8px
}
.heading-tabsItem:last-child {
margin-right: 0
}
.heading--borderedTop .heading-tabsItem.is-active {
border-top: 1px solid rgba(0,0,0,.44)
}
.heading--borderedBottom .heading-tabsItem.is-active {
border-bottom: 1px solid rgba(0,0,0,.44)
}
.heading-tabsItem.is-active .heading-title {
font-weight: 600;
color: rgba(0,0,0,.8)
}
.heading--light .heading-tabsItem.is-active .heading-title {
color: rgba(0,0,0,.8)
}
.heading-count {
margin-left: 8px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
color: rgba(0,0,0,.44)
}
.heading-tabsItem.is-active .heading-count {
color: rgba(0,0,0,.8)
}
.heading-dismissButton {
font-size: 32px;
vertical-align: middle;
line-height: 14px;
font-weight: 300;
top: -5px
}
.heading.is-withSupplementalContent .heading-supplemental {
display: block
}
.heading-supplemental {
display: none;
color: rgba(0,0,0,.44);
letter-spacing: -.02em;
background-color: #fafafa;
font-size: 14px;
text-transform: none;
padding: 18px
}
.heading--borderedBottom.is-withSupplementalContent {
border: 0
}
.heading--borderedBottom .heading-supplemental {
border-top: solid 1px rgba(0,0,0,.05)
}
@media all and (max-width: 991px) {
.heading--stats {
margin:0
}
}
@media all and (max-width: 767px) {
.heading--page {
margin-top:5px;
margin-bottom: 20px
}
.heading--page .heading-title {
font-size: 24px
}
.heading--padded {
padding-top: 0
}
}
.inlineError:after {
display: block;
color: #cc5454;
font-size: x-small;
content: attr(data-error);
text-align: center;
font-weight: 400
}
.inlineError--muted:after {
color: rgba(0,0,0,.44)
}
.is-darkBackgrounded .inlineError:after {
color: #fff
}
.is-darkBackgrounded .inlineError--muted:after {
color: rgba(255,255,255,.35)
}
.inlineError--maxLength:after {
text-align: left;
content: "" attr(data-length) "/" attr(data-max-length)
}
.label {
color: rgba(0,0,0,.44);
line-height: 1.4
}
.label--withIcon .svgIcon {
fill: rgba(0,0,0,.44)
}
.label--block {
display: block
}
.label--withIcon {
display: inline-block;
padding: auto 0;
vertical-align: baseline;
height: 21px
}
.label--withIcon .svgIcon {
padding-right: 4px
}
.label--withIcon .label-text,.label--withIcon .label-text>.link {
vertical-align: top
}
.label--darker {
color: rgba(0,0,0,.8)
}
.label--quote {
--x-height-multiplier:0.35;--baseline-multiplier:0.179;font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
letter-spacing: .01rem;
font-weight: 400;
font-style: normal;
display: inline;
font-size: 16px;
line-height: 1.4;
background-color: rgba(39,243,106,.1);
color: rgba(0,0,0,.8)
}
.label--profileMeta {
border-top: solid 1px rgba(0,0,0,.05);
margin-top: 20px
}
.label--smaller {
font-size: 14px
}
.form .label,.inputGroup .label {
font-size: 14px;
color: rgba(0,0,0,.44);
margin: 4px
}
.inputGroup--fontSize18 .label {
font-size: 18px
}
.form .label--block,.inputGroup .label--block {
margin: 20px 0 4px 0
}
.form .label--radio,.inputGroup .label--radio {
color: rgba(0,0,0,.8);
margin: 5px 0
}
.progressiveMedia,.progressiveMedia-canvas,.progressiveMedia-image,.progressiveMedia-noscript,.progressiveMedia-zoom {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: auto;
box-sizing: border-box
}
.progressiveMedia {
background: rgba(0,0,0,.05);
transition: background .2s
}
.progressiveMedia.is-canvasLoaded,.progressiveMedia.is-imageLoaded,.progressiveMedia.is-zoomLoaded,body.is-noJs .progressiveMedia {
background: rgba(0,0,0,0)
}
.progressiveMedia-thumbnail {
display: none
}
.progressiveMedia-image {
z-index: 100
}
.progressiveMedia-zoom {
z-index: 200
}
.progressiveMedia-canvas,.progressiveMedia-image,.progressiveMedia-zoom {
visibility: hidden;
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.progressiveMedia.is-canvasLoaded .progressiveMedia-canvas,.progressiveMedia.is-imageLoaded .progressiveMedia-image,.progressiveMedia.is-zoomLoaded .progressiveMedia-zoom {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s,opacity .4s 0s
}
.progressiveMedia .progressiveMedia-zoom,.progressiveMedia.is-imageLoaded .progressiveMedia-canvas,.progressiveMedia.is-zoomLoaded .progressiveMedia-canvas,.progressiveMedia.is-zoomLoaded .progressiveMedia-image {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .5s,opacity .1s .4s
}
body.is-noJs .progressiveMedia-canvas,body.is-noJs .progressiveMedia-image,body.is-noJs .progressiveMedia-thumbnail,body.is-noJs .progressiveMedia-zoom {
display: none
}
[data-action=zoom] {
cursor: pointer;
cursor: zoom-in
}
.zoomable {
transition: transform .3s cubic-bezier(.2,0,.2,1);
z-index: 800
}
.zoomable.is-static {
position: relative
}
.zoomable:before {
content: '';
display: block;
position: absolute;
top: -100vh;
left: -100vw;
width: 100%;
height: 100%;
padding: 100vh 100vw;
background: #fff;
z-index: -1;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .3s,opacity .3s 0s;
transform: translateZ(0)
}
.zoomable.is-zooming:before {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s,opacity .3s 0s
}
.is-zoomLoaded[data-action=zoom] {
cursor: pointer;
cursor: zoom-out
}
body.is-zoomableActive .metabar,body.is-zoomableActive .postActionsBar.is-visible .postActionsBar-content {
opacity: 0;
visibility: hidden;
transition: transform .2s,opacity .2s,visibility 0s 2s
}
body.is-zoomableActive .metabar {
transform: translateY(-100%)
}
body.is-zoomableActive .postActionsBar.is-visible .postActionsBar-content {
transform: translateY(100%)
}
.hero {
text-align: center;
height: 500px
}
.hero-title {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-weight: 700;
font-style: normal;
font-size: 44px;
margin-left: -2.75px;
line-height: 1.2;
letter-spacing: 0;
color: rgba(0,0,0,.8);
margin-bottom: 8px;
outline: 0;
word-break: break-word;
word-wrap: break-word
}
.hero-description {
color: rgba(0,0,0,.6);
font-size: 18px;
outline: 0;
word-break: break-word;
word-wrap: break-word
}
.hero-description>a {
color: rgba(0,0,0,.8)
}
.hero-description>a:active,.hero-description>a:focus,.hero-description>a:hover {
text-decoration: underline
}
.hero-content {
margin-top: 20px;
margin-bottom: 20px
}
.hero--compact .hero-title {
float: left
}
.hero--alignLeft {
text-align: left
}
.hero--light {
color: rgba(255,255,255,.85)
}
.button--collectionLogo .svgIcon,.button--collectionLogo2 .svgIcon {
display: inline-block;
fill: rgba(0,0,0,.15)
}
.is-darkBackgrounded .button--collectionLogo .svgIcon,.is-darkBackgrounded .button--collectionLogo2 .svgIcon {
fill: rgba(255,255,255,.35)
}
.button--collectionLogo2:hover .svgIcon,.button--collectionLogo:hover .svgIcon {
fill: rgba(0,0,0,.44)
}
.is-darkBackgrounded .button--collectionLogo2:hover .svgIcon,.is-darkBackgrounded .button--collectionLogo:hover .svgIcon {
fill: rgba(255,255,255,.5)
}
.button--collectionLogo2 .svgIcon {
border: solid 2px rgba(0,0,0,.15);
border-radius: 10px;
padding: 15px
}
.hero--alignLeft .button--collectionLogo .svgIcon {
margin-left: 4px
}
.headerEditor .buttonSet {
padding: 20px 0;
background: #fff;
color: rgba(0,0,0,.6);
font-size: 14px;
border-radius: 3px;
text-align: left
}
.headerEditor .buttonSet-label {
font-weight: 400
}
.headerEditor .buttonSet-label:not(:first-child) {
margin-left: 0;
padding-left: 16px;
border-left: 1px solid rgba(0,0,0,.15)
}
.headerEditor .button--backgroundImage {
border-left: 1px solid rgba(0,0,0,.15);
padding-left: 16px
}
.headerEditor .button--backgroundImage[disabled] {
opacity: 1;
color: rgba(0,0,0,.15)
}
.headerEditor .textInput {
width: 90px;
height: 30px;
padding-left: 4px
}
.colorSwatch {
border-radius: 50%;
width: 20px;
height: 20px;
border: 1px solid rgba(0,0,0,.15)
}
.headerEditor .colorSwatch {
display: inline-block;
vertical-align: middle;
margin-right: 2px;
margin-left: 2px;
cursor: pointer
}
.collectionHeaderControls {
white-space: nowrap
}
.hero--withButton {
height: auto;
padding-top: 100px;
padding-bottom: 40px
}
.hero--withButton .button {
margin-top: 7px
}
.hero--profile {
height: auto;
text-align: left
}
.hero--profile .hero-description,.hero--profile .hero-title {
margin-right: 120px
}
.hero--profile .hero-title {
font-size: 32px;
margin-left: -2px;
margin-bottom: 0
}
.hero--profile .hero-description {
font-size: 16px;
line-height: 1.4;
margin-top: 4px;
margin-bottom: 0
}
.hero--profile .hero-description.is-empty {
margin-top: 0
}
.hero-avatarPicker {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
background: rgba(0,0,0,.44);
border-radius: 100%;
text-align: center
}
.editing .hero-avatarPicker {
display: block
}
.hero--standalone {
padding-top: 100px;
padding-bottom: 40px;
height: auto
}
.hero--underline:after {
content: '';
background: rgba(0,0,0,.15);
height: 1px;
width: 100px;
display: block;
margin: 30px auto 0
}
.hero--referrers {
height: auto;
padding: 100px 0 60px
}
.hero-title--referrers {
font-size: 32px;
line-height: 1.2
}
.hero-title--referrers>small {
color: rgba(0,0,0,.44);
display: block;
font-size: 24px;
margin-bottom: 20px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
@media screen and (max-width: 1199px) {
.collectionHeaderControls {
white-space:normal
}
}
@media screen and (max-width: 767px) {
.hero--standalone {
padding:0;
margin-bottom: 10px
}
.hero--standalone .hero-title {
font-size: 18px;
margin-left: -1.13px;
height: 44px;
line-height: 46px;
margin: 0 -6px 20px;
padding: 10px 0 10px 5px;
text-align: left
}
.hero--standalone:after {
display: none
}
.hero--standalone .textInput {
width: 100%
}
.hero-title--referrers {
font-size: 24px
}
.hero-title--referrers>small {
font-size: 18px;
margin-bottom: 10px
}
.hero--compact .hero-title,.hero--compact.hero--standalone {
float: none;
margin-bottom: 0;
margin-left: 8px
}
.hero--withButton {
padding-bottom: 20px
}
.hero--withButton .hero-title {
font-size: 32px
}
.hero--profile .hero-avatar {
margin-top: 10px;
margin-left: 10px
}
}
.butterBar {
position: fixed;
pointer-events: none;
transform: translateY(-100px);
width: 58%;
max-width: 640px;
margin-left: 36%;
z-index: 800;
text-align: center;
visibility: hidden;
opacity: 0;
transition: transform .7s,visibility 0s linear .7s,opacity .7s
}
.butterBar.is-active {
transform: translateY(0);
visibility: visible;
opacity: 1;
transition-delay: 0s
}
.butterBar--center {
left: 50%;
margin-left: -320px
}
.butterBar-message {
display: inline-block;
pointer-events: auto;
background: rgba(255,255,255,.97);
padding: 12px 25px;
margin-bottom: 0;
font-size: 14px;
box-shadow: 0 1px 1px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35);
border-radius: 0 0 4px 4px
}
.butterBar-actions {
color: rgba(0,0,0,.44)
}
.butterBar--error .butterBar-message {
background: #cc5454;
color: #fff
}
@media all and (max-width: 991px) {
.butterBar,.postShowScreen .butterBar {
left:0;
margin-left: 10%;
width: 80%;
max-width: none
}
}
@media all and (max-width: 767px) {
.butterBar {
margin-left:5%;
width: 90%
}
}
@media all and (min-width: 1666px) {
.butterBar {
margin-left:685px
}
.butterBar--center {
margin-left: -320px
}
}
@media print {
.butterBar {
position: absolute;
transition: none
}
}
.postMetaInline {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: rgba(0,0,0,.44);
fill: rgba(0,0,0,.44)
}
.postMetaInline-authorLockup {
font-size: 14px;
line-height: 1.4;
padding-left: 10px;
text-rendering: auto
}
.readingTime:after {
content: attr(title)
}
.postMetaInline .svgIcon--lightningFilled,.postMetaInline .svgIcon--tagFilled {
vertical-align: middle;
margin-right: 5px
}
.letters .postMetaInline-authorLockup {
padding-left: 0
}
.postMetaLockup--authorWithBio {
font-size: 15px
}
.postMetaLockup--authorWithBio .postMetaInline {
font-size: 13px;
line-height: 1.4;
margin-top: 2px
}
.postMetaInline--acknowledgments {
font-size: 13px;
line-height: 1.2
}
.postMetaInline-licenseIcons .svgIcon {
vertical-align: middle;
margin-top: -3px;
margin-left: -1px;
fill: rgba(0,0,0,.44)
}
@media screen and (max-width: 767px) {
.postMetaInline,.postMetaInline .button,.postMetaInline .link {
font-size:12px
}
.postMetaInline-avatar .avatar-image,.postMetaInline-avatar>.avatar {
width: 32px;
height: 32px
}
}
.catalog-header {
padding-top: 30px;
border-bottom: 1px solid rgba(0,0,0,.04)
}
.catalog-title {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 600;
font-style: normal;
color: #000
}
.catalog-description {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.catalog-imageContainer .aspectRatioPlaceholder {
margin: 0
}
.catalog-image {
position: relative
}
.catalog-image.is-focused {
border: solid 3px #02b875
}
.catalog-item {
margin-top: 16px;
margin-bottom: 35px
}
.catalog-item.is-selected {
border-left: 4px solid #02b875;
padding-left: 8px
}
.catalog-itemUrlInput.is-valid {
border: 1px solid #02b875
}
.catalog-itemUrlInput.is-invalid {
border: 1px solid #cc5454
}
.catalogItemAvatar {
width: 57px;
top: 20px;
left: -57px
}
.catalogItemAvatar-arrow {
top: 11px;
right: 0;
clip: rect(-4px 14px 18px 0)
}
.catalogItemAvatar-arrowInner {
height: 14px;
width: 14px;
transform: rotate(45deg) translate(6px,-6px);
box-shadow: -1px 1px 1px -1px rgba(0,0,0,.3)
}
@media screen and (max-width: 767px) {
.catalog-header {
padding-top:12px
}
}
.collectionHeader-description,.collectionHeader-name {
outline: 0
}
.collectionHeader-logoImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.collectionHeader-logoImage.is-focused {
box-shadow: 0 0 0 3px #02b875
}
.collectionHeader-aspectRatioCell,.collectionHeader-aspectRatioFullWidth,.collectionHeader-blockNav,.collectionHeader-overlayBackground {
display: none
}
.collectionHeader-nav {
display: -ms-flexbox;
display: flex;
height: 37px
}
.collectionHeader-navItem {
line-height: 38px;
margin-right: 22px
}
@media screen and (max-width: 767px) {
.collectionHeader-navItem {
font-size:13px
}
}
.collectionHeader--withNavigation .collectionHeader-nav.is-expanded {
height: auto
}
@media screen and (max-width: 767px) {
.collectionHeader--withNavigation .collectionHeader-nav.is-expanded {
display:block
}
}
.collectionHeader--editorLayoutLogo .collectionHeader-nameAndDescription,.collectionHeader--editorLayoutTitle .collectionHeader-logo {
display: none!important
}
.focalPointControl {
width: 280px;
margin: 20px 0
}
.focalPointControl-loupe {
margin-left: -20px;
margin-top: -20px;
height: 40px;
width: 40px;
border-radius: 50%;
background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0)),rgba(0,0,0,.1);
border: 2px solid rgba(255,255,255,.85);
box-shadow: 0 0 0 1px rgba(0,0,0,.44)
}
.focalPointControl-loupe--preview {
opacity: 0;
transition: opacity .2s .2s
}
.focalPointControl:hover .focalPointControl-loupe--preview {
opacity: 1;
transition: opacity 0s
}
.focalPointControl-loupe--small {
margin-left: -10px;
margin-top: -10px;
height: 20px;
width: 20px
}
.collectionHeader--layoutLarge.collectionHeader--colorBehaviorSubtle .collectionHeader-nav:after,.collectionHeader--layoutMedium.collectionHeader--colorBehaviorSubtle .collectionHeader-nav:after,.collectionHeader--layoutSmall.collectionHeader--colorBehaviorSubtle .collectionHeader-heroAndInlineNav:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
border-bottom: 1px solid rgba(0,0,0,.1)
}
.collectionHeader--layoutMedium.collectionHeader--colorBehaviorSubtle.collectionHeader--withoutNavigation .collectionHeader-heroAndInlineNav:after,.collectionHeader--layoutSmall.collectionHeader--colorBehaviorSubtle .collectionHeader-heroAndInlineNav:after {
left: 20px;
right: 20px
}
.collectionHeader--layoutSmall .collectionHeader-description,.collectionHeader--layoutSmall.is-modeView.collectionHeader--withLogo .collectionHeader-nameAndDescription,.collectionHeader--layoutSmall.is-modeView.collectionHeader--withoutLogo .collectionHeader-logo {
display: none
}
.collectionHeader--layoutSmall .collectionHeader-heroAndInlineNav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow: hidden
}
.collectionHeader--layoutSmall .collectionHeader-hero {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px
}
.collectionHeader--layoutSmall .collectionHeader-hero:not(:last-child) {
margin-bottom: -20px;
padding-bottom: 0
}
.collectionHeader--layoutSmall .collectionHeader-name {
max-width: 360px;
padding-right: 1px;
font-size: 24px;
color: rgba(0,0,0,.8);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
.collectionHeader--layoutSmall .collectionHeader-nav {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding-top: 30px;
padding-bottom: 25px
}
.collectionHeader--layoutSmall.collectionHeader--withoutNavigation .collectionHeader-hero {
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.collectionHeader--layoutSmall.collectionHeader--withoutNavigation .collectionHeader-nav {
-ms-flex: 0 0 auto;
flex: 0 0 auto
}
@media screen and (min-width: 768px) {
.collectionHeader--layoutSmall .collectionHeader-name {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis
}
}
@media screen and (max-width: 767px) {
.collectionHeader--layoutSmall .collectionHeader-name {
font-size:20px
}
.collectionHeader--layoutSmall .collectionHeader-nav {
padding-bottom: 10px
}
.collectionHeader--layoutSmall .collectionHeader-hero {
margin-bottom: -25px
}
}
.collectionHeader--layoutMedium .collectionHeader-hero {
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
width: 100%;
height: 100%;
display: table
}
.collectionHeader--layoutMedium .collectionHeader-logo {
padding-top: 10px;
padding-bottom: 10px
}
.collectionHeader--layoutMedium .collectionHeader-nameAndDescription {
padding-top: 5px;
padding-bottom: 5px;
float: left
}
.collectionHeader--layoutMedium .button--collectionLogo {
padding-top: 5px
}
.collectionHeader--layoutMedium .collectionHeader-name {
padding-top: 5px;
padding-bottom: 5px;
font-size: 36px;
line-height: 1.2;
color: rgba(0,0,0,.8);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
.collectionHeader--layoutMedium .collectionHeader-description {
padding-bottom: 5px;
font-size: 20px;
color: rgba(0,0,0,.44);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.collectionHeader--layoutMedium .collectionHeader-nav {
position: relative;
padding-top: 8px;
padding-bottom: 12px
}
.collectionHeader--layoutMedium.collectionHeader--withoutNavigation .collectionHeader-heroAndInlineNav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.collectionHeader--layoutMedium .collectionHeader-blockNav {
display: block
}
.collectionHeader--layoutMedium .collectionHeader-heroAndInlineNav .collectionHeader-nav {
display: none
}
.collectionHeader--layoutMedium .collectionHeader-heroInner {
display: table-cell;
vertical-align: middle;
width: 100%
}
.collectionHeader--layoutMedium .collectionHeader-aspectRatioTable {
position: relative;
display: table;
width: 200%;
table-layout: fixed
}
.collectionHeader--layoutMedium .collectionHeader-aspectRatioContent {
position: relative;
display: table-cell;
width: 50%;
vertical-align: middle;
overflow: hidden
}
.collectionHeader--layoutMedium .collectionHeader-aspectRatioCell {
display: table-cell;
width: 50%;
vertical-align: top
}
.collectionHeader--layoutMedium .collectionHeader-aspectRatioFullWidth {
display: block;
max-height: 300px
}
.collectionHeader--layoutMedium .collectionHeader-aspectRatioFullWidth:after {
content: '';
display: block;
width: 100%;
height: 0;
padding-bottom: 12%
}
@media screen and (max-width: 767px) {
.collectionHeader--layoutMedium .collectionHeader-name {
font-size:28px
}
.collectionHeader--layoutMedium .collectionHeader-description {
font-size: 16px
}
.collectionHeader--layoutMedium .collectionHeader-nav {
padding-top: 10px;
padding-bottom: 15px
}
}
.collectionHeader--layoutLarge .collectionHeader-aspectRatioTable {
position: relative;
display: table;
width: 200%;
table-layout: fixed
}
.collectionHeader--layoutLarge .collectionHeader-aspectRatioContent {
position: relative;
display: table-cell;
width: 50%;
vertical-align: middle;
overflow: hidden
}
.collectionHeader--layoutLarge .collectionHeader-aspectRatioCell {
display: table-cell;
width: 50%;
vertical-align: top
}
.collectionHeader--layoutLarge .collectionHeader-aspectRatioFullWidth {
display: block;
max-height: 700px
}
.collectionHeader--layoutLarge.collectionHeader--withoutBackground .collectionHeader-aspectRatioFullWidth {
max-height: 400px
}
.collectionHeader--layoutLarge .collectionHeader-aspectRatioFullWidth:after {
content: '';
display: block;
width: 100%;
height: 0;
padding-bottom: 36%
}
.collectionHeader--layoutLarge .collectionHeader-heroAndInlineNav {
height: 100%
}
.collectionHeader--layoutLarge .collectionHeader-hero {
width: 100%;
height: 100%;
min-height: 200px;
display: table
}
.collectionHeader--layoutLarge.collectionHeader--withoutBackground.collectionHeader--colorBehaviorBold .collectionHeader-hero {
padding-top: 22px
}
.collectionHeader--layoutLarge .collectionHeader-heroInner {
display: table-cell;
vertical-align: middle;
width: 100%
}
.collectionHeader--layoutLarge .collectionHeader-logo {
padding-top: 10px;
padding-bottom: 10px
}
.collectionHeader--layoutLarge .button--collectionLogo {
padding-top: 5px
}
.collectionHeader--layoutLarge .collectionHeader-name {
padding-top: 10px;
padding-bottom: 10px;
font-size: 44px;
line-height: 1.1;
color: rgba(0,0,0,.8);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
.collectionHeader--layoutLarge .collectionHeader-description {
padding-bottom: 10px;
font-size: 24px;
color: rgba(0,0,0,.44);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.collectionHeader--layoutLarge .collectionHeader-blockNav {
display: block
}
.collectionHeader--layoutLarge .collectionHeader-heroAndInlineNav .collectionHeader-nav {
display: none
}
.collectionHeader--layoutLarge .collectionHeader-nav {
position: relative;
padding-top: 25px;
padding-bottom: 25px
}
@media screen and (max-width: 767px) {
.collectionHeader--layoutLarge .collectionHeader-name {
font-size:28px
}
.collectionHeader--layoutLarge .collectionHeader-description {
font-size: 16px
}
.collectionHeader--layoutLarge .collectionHeader-nav {
padding-top: 8px;
padding-bottom: 10px
}
}
.collectionHeader--layoutLarge.collectionHeader--alignmentCenter .collectionHeader-hero,.collectionHeader--layoutMedium.collectionHeader--alignmentCenter .collectionHeader-hero {
text-align: center
}
.collectionHeader--layoutLarge.collectionHeader--alignmentCenter .collectionHeader-logo,.collectionHeader--layoutMedium.collectionHeader--alignmentCenter .collectionHeader-logo {
margin-left: auto;
margin-right: auto
}
.collectionHeader--withBackground .collectionHeader-overlayBackground {
position: absolute;
top: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.175);
height: 100vh
}
.collectionHeader--withBackground.collectionHeader--editorLayoutTitle .collectionHeader-overlayBackground,.collectionHeader--withBackground.collectionHeader--editorLayoutTitleAndLogo .collectionHeader-overlayBackground {
display: block
}
section[data-background-color=seaweed] {
background: #47bcac
}
section[data-background-color=midday] {
background: #2fa5c6
}
section[data-background-color=midnight] {
background: #5065a0
}
section[data-background-color=grimace] {
background: #8764ae
}
section[data-background-color=magic] {
background: #a93f7f
}
section[data-background-color=crush] {
background: #c7465e
}
section[data-background-color=warm] {
background: #e57f4c
}
section[data-background-color=gray] {
background: #1d1d1c
}
section[data-background-color=lime] {
background: #98bc6b
}
section[data-background-color=fresh] {
background: #69cb91
}
section[data-background-color=brook] {
background: #86a89d
}
section[data-background-color=lipstick] {
background: #a84a4e
}
section[data-background-color=seaweedLight] {
background: #c6eae5
}
section[data-background-color=middayLight] {
background: #b5e1ed
}
section[data-background-color=midnightLight] {
background: #bfc7df
}
section[data-background-color=grimaceLight] {
background: #dfd6ea
}
section[data-background-color=magicLight] {
background: #e3b3d0
}
section[data-background-color=crushLight] {
background: #efcbd2
}
section[data-background-color=warmLight] {
background: #fbebe3
}
section[data-background-color=grayLight] {
background: rgba(0,0,0,.05)
}
section[data-background-color=limeLight] {
background: #ebf2e2
}
section[data-background-color=freshLight] {
background: #eaf8ef
}
section[data-background-color=brookLight] {
background: #ebf1ef
}
section[data-background-color=lipstickLight] {
background: #e2bdbf
}
section.is-backgrounded {
color: rgba(0,0,0,.8);
padding-right: 280px
}
section.is-darkBackgrounded {
color: #fff
}
.homeContainer-content {
padding: 35px 0 0 0
}
.homeContainer-header,.homeContainer-stream {
max-width: 660px
}
.homeContainer-headerDescription {
color: rgba(0,0,0,.8);
font-size: 24px;
line-height: 1em;
vertical-align: bottom;
padding: 2px 0 30px 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.homeContainer-nextUp {
color: rgba(0,0,0,.8);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.homeContainer-topStoriesNav {
font-size: 14px;
float: right;
color: rgba(0,0,0,.6);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.homeContainer-topStoriesPreviousDay {
vertical-align: bottom
}
.homeContainer-topStoriesNextDay {
margin-left: 30px;
vertical-align: bottom
}
@media all and (max-width: 991px) {
.homeContainer-header,.homeContainer-stream {
margin:auto
}
.homeContainer-header {
padding: 10px 20px 0 20px
}
.homeContainer-headerDescription {
font-size: 18px;
padding-bottom: 10px
}
.homeContainer-content {
padding-top: 10px
}
}
@media all and (max-width: 767px) {
.homeContainer-topStoriesNav {
display:none
}
}
.ie9-dialog .spinnerOverlay {
display: none
}
.is-uploadingImage .ie9-dialog .spinnerOverlay {
display: block;
position: absolute;
z-index: 900;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,.5)
}
.imagePicker-previewImage {
transition: background .2s;
border: 1.5px solid rgba(0,0,0,.04)
}
.imagePicker-previewImage:hover {
box-shadow: 0 0 0 2px #b3ead6;
border: 1px solid #b3ead6
}
.imagePicker-previewImage[disabled] {
box-shadow: 0 0 0 1px #00ab6b;
border: 1px solid #00ab6b
}
.loadingBar {
position: fixed;
display: none;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 800;
background: #48e79a;
transform: translateX(100%)
}
.is-loadingApp .loadingBar {
display: block;
animation: shift-rightwards 1s ease-in-out infinite;
animation-delay: .8s
}
.loadingEllipsis>span:not(:first-child) {
animation: fade-step-in-50 1s infinite
}
.progressBar {
width: 100%;
height: 2px;
background: rgba(0,0,0,.15)
}
.progressBar-fill {
height: 2px;
background: #02b875
}
.overlay {
position: fixed;
overflow: auto;
text-align: center;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: block;
z-index: 900;
background-color: rgba(255,255,255,.97);
width: 100%;
padding: 0;
margin: 0;
border: 0
}
.overlay--dark {
background-color: rgba(0,0,0,.6)
}
.overlay:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -.25em
}
.overlay-dialog {
display: inline-block;
vertical-align: middle;
outline: 0;
overflow: hidden;
max-width: 580px;
padding: 100px 80px
}
.overlay-dialog--animate {
transform-origin: bottom center;
animation: fade-in-pulse-08 .3s forwards cubic-bezier(.8,.02,.45,.91)
}
.overlay-dialog.overlay-dialog--form {
overflow: visible
}
.overlay-title {
color: rgba(0,0,0,.8);
font-size: 24px;
line-height: 1.1;
margin-bottom: 6px
}
.overlay-title--thin {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.overlay-subtitle {
margin-bottom: 30px;
font-size: 18px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.overlay-content {
color: rgba(0,0,0,.6);
line-height: 1.4;
margin-bottom: 30px
}
.overlay-actions>.button {
margin-bottom: 10px
}
.overlay-content>a {
text-decoration: underline;
color: rgba(0,0,0,.6)
}
.overlay-title+.overlay-actions {
margin-top: 40px
}
.overlay-label {
font-size: 18px;
margin-top: 20px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
.overlay-footer {
font-size: 12px;
color: rgba(0,0,0,.44);
margin-top: 50px;
margin-bottom: 10px
}
.overlay--interstitial .overlay-content>p {
width: 450px;
line-height: 1.4
}
.overlay--storiesInterstitial .overlay-dialog,.overlay-dialog--update {
transform-origin: none;
animation: none
}
.overlay-dialog--alert,.overlay-dialog--confirm,.overlay-dialog--signin {
text-align: center
}
.overlay-dialog--list .overlay-title {
margin-bottom: 25px
}
.overlay-dialog--signin {
max-width: 620px
}
.overlay-dialog--signin .overlay-subtitle {
margin-bottom: 0
}
.overlay-dialog--signin .overlay-content {
padding-top: 10px
}
.overlay-dialog .button--signin {
width: 100%;
height: 58px;
border-radius: 2px;
font-size: 16px;
text-align: left;
padding-left: 18px;
max-width: 456px
}
.overlay-dialog--signin .button-label--subText {
color: rgba(255,255,255,.65);
font-size: 12px
}
.overlay-dialog--email .overlay-content {
margin-bottom: 0
}
.overlay--collabInterstitial .overlay-dialog {
width: 590px
}
.overlay--collabInterstitial .overlay-title {
margin-bottom: 15px
}
.overlay--collabInterstitial .overlay-animation {
display: block;
height: 168px;
width: 100%
}
.overlay--collabInterstitial .overlay-actions {
text-align: center
}
.overlay--dark .overlay-dialog {
background-color: #fff;
border-radius: 3px;
box-shadow: 0 2px 6px 0 rgba(0,0,0,.44);
padding: 0;
max-width: 520px
}
.overlay--dark .overlay-title,.overlay--dark .overlay-title--context {
margin-bottom: 0;
background-color: #f0f0f0;
padding: 24px 24px 24px;
font-size: 18px;
color: rgba(0,0,0,.8)
}
.overlay--dark .overlay-actions {
margin-bottom: 32px
}
.overlay--dark .overlay-title--context {
padding: 10px
}
.overlay--dark .button--close {
color: #fff
}
.overlay--dark .overlay-content {
padding: 0 32px 0;
margin: 24px 0;
font-size: 16px;
text-align: left;
color: rgba(0,0,0,.6)
}
.overlay--dark .overlay-dialog--wait {
padding: 0
}
.overlay--dark .overlay-footer {
margin: 0 0 16px
}
.overlay--dark .overlay-dialog--wait .overlay-content {
margin: 0;
padding-top: 32px;
color: rgba(0,0,0,.8);
font-size: 18px
}
.overlay--dark .overlay-dialog--email .button--link {
margin-top: -24px
}
.overlay--import {
font-size: 18px
}
.overlay--import>.overlay-title {
font-size: 44px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
.overlay--import>.overlay-content {
margin: 30px -100px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.overlay-item {
margin-left: 3.5%;
margin-right: 3.5%;
width: 26%
}
.overlay-itemHeader {
color: #00ab6b;
font-size: 32px;
margin-bottom: 10px
}
.overlay-itemText {
font-size: 18px;
min-height: 60px;
margin-bottom: 10px
}
.overlay-itemImage {
height: 166px
}
.overlayRegistration {
max-width: 400px
}
.overlayRegistration .textInput {
width: 100%;
margin-bottom: 10px
}
.overlayRegistration-followTwitter,.overlayRegistration-shadowMessage,.overlayRegistration-terms {
font-size: 14px;
text-align: left;
margin: 10px 0 0
}
.overlayRegistration-terms {
margin-top: 25px
}
.overlayRegistration-terms>a {
text-decoration: underline
}
.overlayRegistration-shadowMessage .shadowMessage-title {
font-weight: 700
}
.overlayRegistration-checkbox {
vertical-align: 1px;
margin-right: 4px
}
.overlay-signin--waiting {
max-width: 300px;
font-size: 14px;
color: rgba(0,0,0,.44);
margin: 0 auto
}
.overlay--dark .overlay-dialog--signin .signinPrivacyMessages {
text-align: left;
margin: 0 32px 20px
}
.signinPrivacyMessages .link {
text-decoration: underline
}
.overlay-embed {
border-width: 1px;
border-style: solid;
border-color: #eee #ddd #bbb;
position: relative;
overflow: hidden;
max-width: 400px;
margin: 0 auto;
border-radius: 5px;
box-shadow: rgba(0,0,0,.15) 0 1px 3px
}
.tweetEditor-avatar {
float: left;
padding: 2px 0;
margin-right: 14px
}
.tweetEditor-tweetContainer {
border: 1px solid rgba(0,0,0,.15);
border-radius: 5px;
padding: 14px 20px;
overflow: hidden
}
.tweetEditor-error {
font-size: 14px;
cursor: default
}
.tweetEditor-textContainer {
display: block;
font-size: 16px;
color: rgba(0,0,0,.8)
}
.tweetEditor-textContainer .inlineError--maxLength::after {
font-size: 14px;
margin-top: 2px
}
.tweetEditor-textshot {
text-align: left;
margin-top: 16px
}
.tweetEditor-imageContainer {
display: inline-block;
position: relative
}
.tweetEditor-imageStatus {
color: rgba(0,0,0,.44);
font-size: 14px
}
.tweetEditor-imageStatusIcon {
margin-right: 5px;
font-size: 18px
}
.tweetEditor-image {
height: 220px;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
cursor: zoom-in;
transition: height .1s
}
.tweetEditor-image.tweetEditor-image--expanded {
height: 340px;
cursor: zoom-out
}
.tweetEditor-removeTextshot {
position: absolute;
top: -8px;
right: -10px;
width: 20px;
height: 20px;
font-size: 18px;
line-height: 18px;
font-weight: 700;
background: #b3b3b1;
border-color: #b3b3b1;
color: #fff
}
.tweetEditor-removeTextshot:active,.tweetEditor-removeTextshot:focus,.tweetEditor-removeTextshot:hover {
background: rgba(0,0,0,.8);
border-color: rgba(0,0,0,.8);
color: #fff
}
@media screen and (max-width: 991px) {
.overlay-keyboardDef {
float:none;
width: auto
}
}
@media screen and (max-width: 767px) and (max-height:500px) {
.overlay-dialog {
width:80%;
padding: 30px 0
}
}
@media screen and (max-width: 767px) {
.overlay-dialog {
width:80%;
padding: 0
}
.overlay-title {
font-size: 24px;
padding-top: 35px
}
.overlay-content {
font-size: 16px
}
.overlay--collabInterstitial .overlay-animation {
height: 84px
}
.overlay--interstitial .overlay-content>p {
width: 100%
}
.overlay--dark {
padding: 10px 0
}
.overlay--dark .overlay-dialog {
width: 100%;
box-shadow: none;
border-radius: 0;
vertical-align: top;
max-width: 100%
}
.overlay--dark .overlay-actions {
margin-bottom: 16px
}
.overlay--dark .overlay-title {
padding-left: 16px;
padding-right: 16px
}
.overlay--dark .overlay-content {
padding: 0 16px
}
.overlay--dark .button--signin {
margin-left: 0;
margin-right: 0;
width: 100%;
max-width: 100%
}
.overlay--dark .button--close {
z-index: 200;
color: rgba(0,0,0,.44);
right: 5px
}
.overlay--dark::before {
margin-right: 0
}
.overlay--dark .overlay-dialog--signin .signinPrivacyMessages {
margin: 0 16px
}
.overlay--dark .overlay-dialog--signin .buttonSet--vertical {
margin: 0 16px
}
}
.metabar {
position: absolute;
display: block;
z-index: 500;
width: 100%;
font-size: 14px;
background: #fff;
color: rgba(0,0,0,.44);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
box-sizing: border-box;
top: 0
}
.metabar-inner {
position: relative
}
.metabar-inner:after,.metabar-inner:before {
display: table;
content: " "
}
.metabar-inner:after {
clear: both
}
.metabar .popover {
color: rgba(0,0,0,.8)
}
.metabar--spacer {
position: relative;
z-index: 100
}
.metabar-block:not(.metabar-block--center) {
position: relative;
z-index: 500
}
.metabar .buttonSet,.metabar .inputGroup,.metabar-block>.button {
margin: 10px;
display: inline-block;
white-space: nowrap;
vertical-align: top
}
.metabar .buttonSet,.metabar .inputGroup {
line-height: 44px
}
.metabar .buttonSet:last-child {
margin-right: 0
}
.metabar .buttonSet .inputGroup {
margin: 0
}
.metabar-block>.buttonSet+.buttonSet {
margin-left: 0
}
.inputGroup+.buttonSet {
margin-left: 0
}
.metabar-block--center {
position: absolute;
left: 0;
right: 0;
text-align: center;
height: 100%
}
.metabar-block--below {
box-sizing: border-box;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.15)
}
.metabar--affixed {
position: fixed;
background: #fff;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.15);
transform: translateY(-100%)
}
.metabar--affixed.is-withBottomSection:not(.is-hiddenWhenMinimized) {
transform: translateY(-65px)
}
.metabar--affixed.is-transitioning {
transition: transform .3s
}
.metabar--affixed.is-maximized {
transform: translateY(0)
}
.metabar--affixed.is-minimized {
visibility: hidden
}
.metabar--affixed.is-withBottomSection:not(.is-hiddenWhenMinimized).is-minimized {
visibility: visible
}
.metabar--affixed .metabar-block--below {
box-shadow: none
}
.metabar-navItem {
padding: 10px 20px 18px 0
}
.metabar-navItem:last-child {
padding-right: 0
}
.metabar-navItem .svgIcon--search {
top: -4px
}
.metabar-predictiveSearch {
display: inline-block;
min-width: 32px
}
.inputGroup.metabar-predictiveSearch .textInput {
display: inline-block;
vertical-align: middle;
width: 1px;
height: 37px;
border: none;
transition: width .2s,padding .2s;
cursor: pointer;
padding-left: 0;
padding-right: 0
}
.inputGroup.metabar-predictiveSearch .textInput:focus,.inputGroup.metabar-predictiveSearch .textInput:valid {
padding-left: 10px;
width: 200px;
cursor: text
}
@media screen and (max-width: 767px) {
.metabar--spacer {
position:relative
}
.metabar.is-showingDrawer {
z-index: 900
}
.metabar--affixed.is-withBottomSection:not(.is-hiddenWhenMinimized) {
transform: translateY(-56px)
}
.metabar--affixed.is-maximized {
transform: translateY(0)
}
.metabar .buttonSet {
margin-top: 9px;
line-height: 33px
}
.metabar-block .avatar--roundedRectangle>.avatar-image {
width: 30px;
height: 30px
}
.is-globalNavPopoverActive .metabar {
position: relative
}
.is-globalNavPopoverActive .metabar-block--below,.is-globalNavPopoverActive .metabar-sibling {
display: none
}
}
@media print {
.metabar {
display: none
}
}
.listChoice {
position: relative
}
.listChoice--short {
max-height: 375px
}
.listChoice-items {
text-align: left;
overflow: auto
}
.listChoice-item {
border-bottom: 1px solid rgba(0,0,0,.05)
}
.listChoice-item:last-child {
border-bottom: 0
}
.listChoice-item:last-child>.button--link {
border-radius: 0 0 4px 4px
}
.listChoice-item>.button--link {
width: 100%;
padding: 10px;
color: rgba(0,0,0,.9)
}
.listChoice-item>.button--link:hover {
background: rgba(0,0,0,.05)
}
.listChoice-image {
display: block;
position: relative;
float: left;
width: 50px;
height: 50px;
display: inline-block;
margin-right: 20px;
border: 0;
background-position: center;
background: #fff;
margin: 0 auto;
overflow: hidden;
background-size: cover;
border-radius: 3px
}
.listChoice-text {
height: 50px;
position: relative
}
.listChoice-text.listChoice-text--withImage {
margin-left: 60px
}
.listChoice-itemTitle>small {
display: block;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 12px
}
.listChoice-item--withStatus {
display: block
}
.listChoice-item--withoutImage>.button--link {
padding: 15px
}
.listChoice-item--withoutImage .listChoice-text {
height: auto
}
.listChoice-empty {
text-align: center;
font-size: 14px;
color: rgba(0,0,0,.44);
padding: 15px 0 15px 0
}
.listChoice-textColumn {
vertical-align: middle;
font-size: 14px;
display: inline-block
}
.listChoice-textColumn--left {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.listChoice-textColumn--right {
float: right;
color: rgba(0,0,0,.44)
}
.listChoice-detail {
font-size: 14px;
color: rgba(0,0,0,.44)
}
.popover {
overflow: hidden;
position: absolute;
z-index: 900;
font-size: 12px;
text-align: center;
padding: 15px;
visibility: hidden;
pointer-events: auto
}
.popover.is-active {
visibility: visible
}
.is-resizing .popover {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .3s,opacity .3s 0s
}
.popover--animated {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .2s,opacity .2s 0s
}
.popover--animated.is-active {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s,opacity .2s 0s
}
.popover-inner {
position: relative;
max-width: 280px;
padding: 14px;
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35)
}
.popover-inner .textInput {
width: 250px;
height: auto;
padding: 0
}
.popover-inner>.button--primary {
margin-top: 15px
}
.browser-safari .popover-inner {
box-shadow: 0 1px 1px 1px rgba(0,0,0,.05),0 0 1px 1px rgba(0,0,0,.15)
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.browser-safari .popover-inner {
box-shadow:0 1px 1px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35)
}
}
.popover--menu>.popover-inner {
padding: 8px 0;
overflow: auto;
-webkit-overflow-scrolling: touch
}
.browser-firefox .popover--inlinePostControl>.popover-inner {
min-width: 125px
}
.popover-arrow {
position: absolute
}
.popover--bottom .popover-arrow,.popover--top .popover-arrow {
left: 50%;
margin-left: -7px
}
.popover--left .popover-arrow,.popover--right .popover-arrow {
top: 50%;
margin-top: -7px
}
.popover--top .popover-arrow {
bottom: 1px;
clip: rect(0 18px 18px -4px)
}
.popover--right .popover-arrow {
left: 1px;
clip: rect(-4px 14px 18px 0)
}
.popover--bottom .popover-arrow {
top: 1px;
clip: rect(0 18px 14px -4px)
}
.popover--left .popover-arrow {
right: 1px;
clip: rect(-4px 14px 18px 0)
}
.popover-arrow:after {
content: '';
display: block;
width: 14px;
height: 14px;
background: #fff
}
.popover--top .popover-arrow:after {
transform: rotate(45deg) translate(-5px,-5px);
box-shadow: 1px 1px 1px -1px rgba(0,0,0,.8)
}
.popover--right .popover-arrow:after {
transform: rotate(45deg) translate(6px,-6px);
box-shadow: -1px 1px 1px -1px rgba(0,0,0,.8)
}
.popover--bottom .popover-arrow:after {
transform: rotate(45deg) translate(6px,6px);
box-shadow: -1px -1px 1px -1px rgba(0,0,0,.44)
}
.popover--left .popover-arrow:after {
transform: rotate(45deg) translate(-6px,6px);
box-shadow: 1px -1px 1px -1px rgba(0,0,0,.8)
}
.popover--withoutArrow .popover-arrow {
display: none
}
.popover--dark>.popover-inner {
color: #fff;
border: none;
box-shadow: none;
background-image: linear-gradient(to bottom,rgba(49,49,47,.99),#262625);
background-repeat: repeat-x;
padding-top: 10px;
padding-bottom: 10px
}
.popover--dark>.popover-arrow:after {
background: rgba(0,0,0,.8);
border: none;
box-shadow: none
}
.popover--dark .popover-description {
color: #fff
}
.popover-title {
margin-top: 10px;
margin-left: 18px
}
.popover-description {
color: rgba(0,0,0,.44);
font-size: 14px;
line-height: 1.3;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.popover-errors {
color: #cc5454;
line-height: 1.3;
margin: 10px 0 10px 28px;
font-size: 12px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.popover-errors:empty {
margin-top: 0;
margin-bottom: 0
}
.popover-description+.button {
margin-top: 10px
}
.popover-text {
margin-top: 10px;
font-size: 14px
}
.popover--share .popover-title {
color: rgba(0,0,0,.8);
border-bottom: 1px solid rgba(0,0,0,.15);
font-size: 14px;
margin: 0 15px 5px 15px;
padding: 5px 0 10px 0;
box-sizing: border-box;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
.popover--license {
text-align: left
}
.popover.popover--license .popover-inner {
padding: 9px;
width: 300px;
max-width: 300px;
overflow-y: auto
}
.popover--tooltip>.popover-inner {
padding: 8px
}
.popover--tooltip {
pointer-events: none
}
.popover--linkTooltip {
pointer-events: auto;
z-index: 300;
word-break: break-word;
word-wrap: break-word
}
.popover--citeTooltip {
text-align: left
}
.popover-cite {
display: block;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
.popover--info {
max-width: 160px;
font-size: 14px;
color: rgba(0,0,0,.44)
}
.popover--predictiveSearch .popover-inner {
min-width: 250px;
padding-top: 0;
padding-bottom: 5px;
padding-left: 0;
padding-right: 0;
text-align: left
}
.popover--collectionSearch .popover-inner {
padding-bottom: 0
}
.popover--predictiveSearch .heading {
margin-top: 15px;
margin-left: 14px;
margin-right: 14px
}
.popover--predictiveSearch .list-item {
padding: 0
}
.popover--predictiveSearch .list-item .link {
display: block;
padding: 5px 14px
}
.popover--predictiveSearch .link--backgrounded {
display: block;
padding: 15px 14px;
margin-top: 15px;
background-color: #fafafa
}
.popover--predictiveSearch .list--withCompactListItems {
margin-top: 5px;
margin-bottom: 0
}
.popover--predictiveSearch .popover-inner .textInput {
box-sizing: border-box;
min-width: 250px;
width: 100%;
padding: 0 14px
}
.popover--publish {
font-size: 18px;
color: rgba(0,0,0,.6);
text-align: left;
overflow: visible
}
.popover--publish>.popover-inner {
padding: 20px;
min-width: 220px;
max-width: 280px
}
.popover-schedulerOptions,.popover-showVisibilityLicenseOptions,.popover-visibilityLicenseOptions {
display: none
}
.popover-prePublishOptions.popover-prePublishOptions--schedulerOptionUnbundled .popover-schedulerOptions,.popover-prePublishOptions.popover-prePublishOptions--schedulerOptionUnbundled .popover-showVisibilityLicenseOptions {
display: block
}
.popover-prePublishOptions.popover-prePublishOptions--schedulerOptionUnbundled .popover-showSchedulerVisibilityLicenseOptions {
display: none
}
.popover-prePublishOptions.popover-prePublishOptions--allOptionsUnbundled .popover-schedulerOptions,.popover-prePublishOptions.popover-prePublishOptions--allOptionsUnbundled .popover-visibilityLicenseOptions {
display: block
}
.popover-prePublishOptions.popover-prePublishOptions--allOptionsUnbundled .popover-showSchedulerVisibilityLicenseOptions,.popover-prePublishOptions.popover-prePublishOptions--allOptionsUnbundled .popover-showVisibilityLicenseOptions {
display: none
}
.popover-prePublishOptions {
margin-right: 20px;
-ms-flex-positive: 100;
flex-grow: 100;
margin-bottom: auto
}
.popover-publishButton {
margin-top: 5px
}
.popover-prePublishTags {
padding: 14px 0 0;
border-bottom: 1px solid rgba(0,0,0,.05);
font-size: 14px;
color: rgba(0,0,0,.6)
}
.popover-prePublishTags .tags--postTagsEditor {
margin-top: 11px;
min-height: 85px
}
.popover-prePublishBorder {
border-bottom: 1px solid rgba(0,0,0,.05)
}
.popover-prePublishDescription {
color: rgba(0,0,0,.6)
}
.popover-prePublishSaving {
color: rgba(0,0,0,.15);
border-bottom: 1px solid rgba(0,0,0,.05)
}
.popover-prePublishWarning {
font-size: 14px;
color: rgba(0,0,0,.6);
padding-bottom: 24px;
margin-bottom: 15px;
border-bottom: 1px solid rgba(0,0,0,.05)
}
.popover-prePublishWarningItem:not(:last-child) {
margin-bottom: 10px
}
.popover--visibility {
text-align: left
}
.popover--visibility>.popover-inner {
padding: 9px;
width: 242px;
max-width: 242px
}
.popover--customizeSlug .popover-inlineEditor {
margin-top: 0;
margin-left: 28px;
padding: 0 0 3px 0
}
.popover--customizeSlug .inputGroup--selection {
margin: 10px 0 5px 0
}
.popover--scheduler>.popover-inner {
min-width: 280px
}
.popover--scheduler .popover-datePicker {
margin-top: 0;
margin-left: 28px
}
.popover--scheduler .inputGroup.inputGroup--selection {
margin-top: 5px;
white-space: normal;
line-height: 1.4
}
.popover--scheduler .label--radio {
margin-top: 15px
}
.popover--scheduler .label--radio:first-child {
margin-top: 5px
}
.popover--changeAuthor .inputGroup {
margin-top: 5px;
max-width: 260px
}
.popover--changeAuthor .inputGroup-description {
margin-top: 5px;
margin-bottom: 0;
color: rgba(0,0,0,.6)
}
.popover--changeAuthor .popover-errors {
margin-left: 10px
}
@media all and (max-width: 767px) {
.popover-inner .textInput {
width:100%
}
.popover .popover-inner {
max-width: 240px
}
}
.floating {
overflow: hidden;
position: absolute;
z-index: 700;
visibility: visible
}
.chartHelper {
display: block;
color: rgba(0,0,0,.44);
font-size: 18px;
text-align: left;
padding-top: 9px;
font-style: normal
}
.chartHelper-back {
font-style: normal
}
.chartHelper .button {
font-size: 16px
}
.chartPage {
margin-top: 10px;
text-align: center
}
.chartPage-verticalDivider {
border-right: 1px solid rgba(0,0,0,.44);
margin: 2px 10px 0;
display: inline-block;
height: 25px;
vertical-align: top
}
.chartTabs {
margin-top: 30px
}
.chartTabs:after,.chartTabs:before {
display: table;
content: " "
}
.chartTabs:after {
clear: both
}
.chartTabs li {
float: left;
width: 33%;
display: block;
border-bottom: 1px solid rgba(0,0,0,.15)
}
.chartTabs li:last-child {
width: 34%
}
.chartTabs .chartTab {
border: 0;
color: rgba(0,0,0,.15);
cursor: pointer;
display: block;
padding: 0 15px 10px;
background: 0 0;
width: 100%;
text-align: left;
border-right: 1px solid transparent;
border-left: 1px solid rgba(0,0,0,.15);
font-size: 18px;
transition: color .2s;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
.chartTabs .chartTab:hover {
color: rgba(0,0,0,.44)
}
.chartTabs .is-active,.chartTabs .is-active:hover {
border-bottom: 1px solid transparent
}
.chartTabs .is-active .chartTab {
color: rgba(0,0,0,.8)
}
.chartTabs li:first-child .chartTab {
border-left: 0;
padding-left: 0
}
.bargraph {
height: 245px;
margin-top: 35px;
-webkit-user-select: none
}
.bargraph-bar {
transition: opacity .2s ease-in-out;
fill: rgba(2,184,117,.8)
}
line.bargraph-gridLine {
stroke: rgba(0,0,0,.44);
stroke-dasharray: 1,3
}
line.bargraph-gridLine:first-child {
stroke: rgba(0,0,0,.44);
stroke-dasharray: none
}
line.bargraph-averageLine {
stroke: #02b875
}
.bargraph .tick,.bargraph-yAxis path {
display: none
}
.bargraph-xAxis path {
display: none
}
.bargraph-xAxis .bargraph-yAxis,text {
fill: rgba(0,0,0,.44);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 12px
}
.bargraph svg:hover .bargraph-bar {
opacity: .5
}
.bargraph svg:hover .bargraph-bar:hover {
opacity: 1;
cursor: pointer
}
@media screen and (max-width: 991px) {
.bargraph {
height:80px;
margin: 20px 5px 0;
overflow: hidden
}
.bargraph svg:hover .bargraph-bar {
opacity: 1
}
.bargraph-yAxis g {
display: none
}
.bargraph-yAxis g:nth-last-child(2) {
display: block
}
.bargraph-xAxis .bargraph-yAxis,text {
font-size: 11px
}
.chartTabs {
margin: 10px 0 0;
border-top: 1px solid #fff
}
.chartTabs button,.chartTabs li:first-child button {
padding: 5px 10px;
font-size: 14px
}
.chartTabs .chartTab {
font-size: 14px;
font-weight: 400
}
.stats-title--chart .chartHelper {
display: none
}
}
.barGraph2 {
height: 250px;
margin-bottom: 50px;
padding: 0
}
.barGraph2.barGraph2--highlighted .barGraph2-bar {
fill: rgba(0,0,0,.15)
}
.barGraph2.barGraph2--highlighted .barGraph2-bar.barGraph2-bar--highlighted {
fill: rgba(2,184,117,.8)
}
.barGraph2 .barGraph2-bar {
fill: rgba(2,184,117,.8)
}
.sortableTableWrapper {
padding: 10px 0
}
.sortableTableWrapper table,.sortableTableWrapper td,.sortableTableWrapper th {
border: 0;
text-align: left
}
.sortableTableHeaders {
vertical-align: top
}
.sortableTable-row {
position: relative;
border-bottom: 1px solid rgba(0,0,0,.05)
}
.sortableTable-row:last-child {
border-bottom: 0
}
.sortableTableWrapper td {
padding: 10px 25px 10px 10px;
line-height: 1
}
.sortableTableWrapper th {
padding-right: 25px;
text-align: right;
min-width: 100px
}
.sortableTableWrapper th .svgIcon {
position: absolute;
top: 16px;
opacity: 0
}
.sortableTable td:first-child {
padding-left: 0;
padding-right: 10px
}
.sortableTable th:first-child {
padding-right: 10px;
text-align: left
}
.sortableTable td:last-child,.sortableTable th:last-child {
padding-right: 0
}
.sortableTable-value,.sortableTable.is-hidingBuckets .sortableTable-row--dateBucket {
display: none
}
.sortableTable-row--dateBucket {
border-bottom: 0
}
.sortableTable-row--dateBucket td {
padding-top: 50px
}
.sortableTable .is-active td,.sortableTable .is-active:hover td,.sortableTable tr:hover td {
background: rgba(255,255,255,.65);
cursor: pointer
}
.sortableTableWrapper .sortableTable-rowTitle {
position: relative;
padding-top: 43px;
padding-bottom: 20px;
width: 100%
}
.sortableTable-title {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
letter-spacing: -.02em;
font-weight: 700;
font-style: normal;
color: rgba(0,0,0,.8);
font-size: 22px;
line-height: 1;
margin: 6px 0 2px 0;
position: absolute;
white-space: nowrap;
text-overflow: ellipsis;
height: 1.2em;
overflow: hidden;
top: 10px;
width: 100%
}
.sortableTable-link,.sortableTable-text {
font-size: 14px;
color: rgba(0,0,0,.44)
}
.sortableTable-text em {
font-style: normal
}
.sortableTable-text--visibility {
color: rgba(0,0,0,.8);
fill: rgba(0,0,0,.8)
}
.sortableTable-tip {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
font-size: 12px;
color: rgba(0,0,0,.44);
text-align: left;
cursor: pointer
}
.sortableTable-number {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal;
color: rgba(0,0,0,.8);
font-size: 22px;
display: inline-block;
width: 100%;
text-align: right
}
.sortableTable-extraNumber {
font-weight: 400;
font-size: 70%;
margin-left: 5px;
color: rgba(0,0,0,.44)
}
.sortableTable-extraNumber::before {
content: "+"
}
.sortableTable-link:hover {
text-decoration: underline
}
tbody.is-muted tr {
opacity: .4
}
tbody.is-muted .is-active {
opacity: 1
}
.sortableTableWrapper button {
color: rgba(0,0,0,.44);
border: 0;
padding: 15px 0;
font-size: 16px;
background: 0 0;
margin-bottom: -2px;
white-space: nowrap;
text-align: inherit;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
.sortableTableWrapper .button[disabled],.sortableTableWrapper .button[disabled]:active,.sortableTableWrapper .button[disabled]:hover {
opacity: 1
}
.sortableTableWrapper .sortableTable-header--withTooltip button {
padding-bottom: 5px
}
.sortableTable {
width: 100%;
position: relative
}
.sortableTable-header.is-reverseSorted button,.sortableTable-header.is-reverseSorted button:focus,.sortableTable-header.is-sorted button,.sortableTable-header.is-sorted button:focus {
color: rgba(0,0,0,.8)
}
.sortableTable-header.is-reverseSorted .svgIcon.svgIcon--sortDescending,.sortableTable-header.is-sorted .svgIcon.svgIcon--sortAscending {
opacity: 1;
fill: rgba(0,0,0,.8)
}
@media screen and (max-width: 991px) {
.sortableTableWrapper {
padding:0
}
.sortableTable-text {
word-break: break-word;
word-wrap: break-word
}
.sortableTable tr:hover td {
background: rgba(0,0,0,0);
cursor: default
}
.sortableTableWrapper thead tr {
display: block;
margin: 0 15px;
border-bottom: none;
border-radius: 4px
}
.sortableTableWrapper thead {
display: block
}
.sortableTableWrapper tbody {
display: block;
padding-bottom: 15px
}
.sortableTableWrapper th {
padding: 0;
border-bottom: 1px solid rgba(0,0,0,.05);
display: none
}
.sortableTable th:first-child {
padding-left: 0;
border-top: 1px solid rgba(0,0,0,.15)
}
.sortableTableWrapper button {
padding: 15px;
width: 100%;
border-bottom: 0;
text-align: left;
color: rgba(0,0,0,.9)
}
.sortableTableWrapper td {
display: block;
float: left;
padding: 0;
width: 20%;
cursor: default;
line-height: 1.3
}
.sortableTableWrapper td:nth-child(5) {
text-align: center
}
.sortableTableWrapper td:last-child {
padding-right: 0;
text-align: right
}
.sortableTableWrapper .sortableTable-rowTitle {
float: none;
border-bottom: 1px solid rgba(0,0,0,.05);
padding: 28px 5px 7px;
width: auto
}
.sortableTable-title {
top: 0
}
.sortableTableWrapper tbody tr {
padding: 15px 5px;
display: block
}
.sortableTableWrapper tbody tr:after,.sortableTableWrapper tbody tr:before {
display: table;
content: " "
}
.sortableTableWrapper tbody tr:after {
clear: both
}
.sortableTable-number {
font-size: 12px;
text-align: left;
margin-top: 15px
}
.sortableTableWrapper .sortableTable-row--dateBucket {
padding-top: 50px;
padding-bottom: 0
}
.sortableTable-row--dateBucket td:nth-child(2) {
padding-left: 5px;
width: auto
}
}
.table {
margin-bottom: 50px;
width: 100%
}
.table--striped tr:nth-child(even) {
background-color: #fafafa
}
.table-thead {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal;
border-bottom: 1px solid rgba(0,0,0,.15);
color: rgba(0,0,0,.44);
font-size: 11px;
letter-spacing: .1em;
text-align: left;
text-transform: uppercase
}
.table-thead--lightest {
border-bottom: 1px solid rgba(0,0,0,.05)
}
.table-th {
padding: 5px 0
}
.table-th--black {
color: #000
}
.table-th--alignRight {
padding-left: 50px;
text-align: right!important
}
.table-row {
border-bottom: 1px solid rgba(0,0,0,.05)
}
.table-cell {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
line-height: 1.2;
padding: 16px 20px 16px 0
}
.table-cell--label {
font-size: 18px;
width: 75%;
word-break: break-all
}
.table-cell--value {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal;
font-size: 24px;
padding: 16px 0 16px 10px;
text-align: right;
vertical-align: top;
white-space: nowrap
}
@media all and (max-width: 767px) {
.table-thead {
font-size:11px
}
}
@media screen and (max-width: 991px) {
.table-cell--inlineCell {
display:inline-block;
margin: 3px 10px;
line-height: 1.6;
min-width: 20px
}
}
.site-main {
height: 100%;
background: #fff
}
body.is-diagnosticsVisible .site-main {
padding-bottom: 50px
}
.siteNav-logo {
position: relative;
display: inline-block;
padding-top: 10px;
padding-left: 12px;
padding-right: 14px;
z-index: 700;
border: 0
}
.siteNav-logo .svgIcon--logo,.siteNav-logo .svgIcon--logoWordmark {
fill: rgba(0,0,0,.8)
}
.metabar .siteNav-logo {
padding-left: 0;
margin-left: -4px
}
.notificationsList {
margin-bottom: 0
}
.notificationsList-item {
position: relative;
border-bottom: 1px solid rgba(0,0,0,.05)
}
.notificationsList-item.notificationsList-item--status {
padding: 32px 0;
font-size: 14px
}
.notificationsList-button {
display: block;
min-height: 20px;
padding: 18px 10px 16px 82px;
color: rgba(0,0,0,.44);
line-height: 1.4;
font-size: 14px;
background-color: rgba(255,255,255,0);
text-align: left
}
.notificationsList-userAvatarIcon {
position: absolute;
top: 28px;
left: 33px
}
.notificationsList-userAvatarIconWrapper .notificationsList-userAvatarIcon {
position: static;
float: left;
margin-right: 8px
}
.notificationsList-morebutton {
background: rgba(0,0,0,.05);
border: none;
color: rgba(0,0,0,.44);
font-size: 14px;
text-align: center;
width: 100%;
height: 100%;
display: block;
border-radius: 100%;
padding: 0
}
.notificationsList-item--new:after {
content: '';
position: absolute;
top: 0;
bottom: -1px;
left: 0;
width: 4px;
background: #02b875;
border-bottom: 1px solid rgba(0,0,0,.15)
}
.popover .list-item--separator {
padding-bottom: 0;
margin-bottom: 5px
}
.notificationsList-author,.notificationsList-milestone,.notificationsList-note,.notificationsList-title {
color: rgba(0,0,0,.8)
}
.notificationsList-quote {
color: rgba(0,0,0,.8);
background-color: rgba(39,243,106,.1);
display: inline-block;
max-width: 100%;
height: 19px;
padding: 2px 2px 1px;
margin: 0 -2px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.notificationsList-note--oneLine,.notificationsList-title--oneLine {
display: block;
box-sizing: border-box;
height: 19px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
.notificationsList-note.notificationsList-note--oneLine {
text-overflow: '…”'
}
.notificationsList-actions {
padding: 16px 20px 14px
}
.notificationsList-timestamp {
font-size: 12px;
margin-top: 1px
}
@media screen and (min-width: 991px) {
.notificationsList-button:hover {
color:rgba(0,0,0,.6);
outline: 0
}
}
@media screen and (max-width: 991px) {
.notificationsList-button {
padding-top:20px;
padding-bottom: 19px
}
}
@media screen and (max-width: 767px) {
.siteNav-logo {
padding-top:5px;
padding-left: 12px
}
}
.button.button--light.is-inSiteNavBar {
border-color: rgba(255,255,255,.35)
}
.button.button--light.is-inSiteNavBar:focus,.button.button--light.is-inSiteNavBar:hover {
border-color: rgba(255,255,255,.65)
}
.button.button--light.is-inSiteNavBar .svgIcon,.button.button--light.is-inSiteNavBar:focus .svgIcon,.button.button--light.is-inSiteNavBar:hover .svgIcon {
fill: rgba(255,255,255,.65)
}
.popover--userActions {
width: 230px
}
.popover--userActions.popover--globalNav .list-item:hover>.button {
color: rgba(0,0,0,.8)
}
.popover--userActions.popover--globalNav .list-item>.button {
padding: 7px 25px
}
.popover--globalNav .notificationsList-userAvatarIcon {
left: 16px
}
.popover--globalNav .notificationsList-button {
padding-left: 66px;
padding-right: 16px
}
.popover--globalNav .notificationsList-userAvatarIcon {
top: 50%;
margin-top: -19px
}
@media screen and (max-width: 767px) {
.popover--globalNav {
position:relative;
left: 0!important;
right: 0!important;
top: 0!important;
padding-left: 0!important;
padding-right: 0!important;
padding-bottom: 0!important;
width: 100%!important;
height: auto!important;
margin: auto;
margin-top: -6px
}
.popover--globalNav>.popover-inner {
width: 100%!important;
max-width: 100%!important;
height: auto!important;
overflow: visible!important;
border-radius: 0
}
.button.is-inSiteNavBar {
margin-right: 10px
}
}
.typeahead {
animation: pop-downwards .2s forwards linear
}
.typeahead .popover-inner {
padding: 0;
overflow: hidden;
min-width: 100px
}
.typeahead .typeahead-item {
cursor: pointer;
padding: 5px 10px;
line-height: 2;
font-size: 12px;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden
}
.typeahead .typeahead-item:first-child {
padding-top: 7px
}
.typeahead .typeahead-item:last-child {
padding-bottom: 7px
}
.typeahead .avatar {
float: left;
margin: 0 6px 0 -2px
}
.typeahead .typeahead-tag {
margin-left: 5px
}
.typeahead .typeahead-post {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal;
padding-top: 3px;
font-size: 14px;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis
}
.typeahead .typeahead-score {
color: rgba(0,0,0,.44)
}
.typeahead-item .postMetaInline {
line-height: 1.2
}
.typeahead--minWidth150 .popover-inner {
min-width: 150px
}
.typeahead-item.is-active {
background: #02b875;
color: #fff
}
.typeahead-item.is-active .postMetaInline,.typeahead-item.is-active .postMetaInline .link--secondary,.typeahead-item.is-active .typeahead-score {
color: rgba(255,255,255,.65)
}
.typeahead--mention {
padding-top: 10px
}
.typeahead--mention .typeahead-item {
padding: 6px 15px;
font-size: 13px
}
.typeahead--mention .typeahead-item .avatar {
margin-right: 10px
}
.typeahead--mention .popover-arrow {
display: none
}
.cardChromeless {
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.04);
border: 1px solid rgba(0,0,0,.09);
border-radius: 3px
}
.infoCard {
font-size: 14px;
color: rgba(0,0,0,.8);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.infoCard--borderedBottom {
border-bottom: 1px solid rgba(0,0,0,.05)
}
.infoCard--borderedBottom.infoCard--padded {
margin-bottom: 20px
}
.infoCard--borderedBottom:last-child {
border-bottom: none;
margin-bottom: 0
}
.infoCard--padded {
padding-top: 10px;
padding-bottom: 20px
}
.infoCard--padded:last-child {
padding-bottom: 40px
}
.infoCard-info {
float: left;
width: 60%;
margin-left: 25px
}
.infoCard-avatar {
float: left;
height: 60px;
width: 60px
}
.infoCard-info .button--primary,.infoCard-info .link--primary {
font-size: 16px
}
.infoCard-title {
text-transform: uppercase;
letter-spacing: .1em
}
.infoCard-actions,.infoCard-info--short {
display: block;
height: 60px
}
.infoCard-actions>.button>.label.is-default {
color: rgba(0,0,0,.6)
}
.infoCard-actions>.button,.infoCard-info--short .infoCard-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%)
}
.infoCard.is-hidden .infoCard-avatar,.infoCard.is-hidden .infoCard-wrapper {
opacity: .3
}
.promoCard {
width: 290px;
border: 1px solid rgba(0,0,0,.15);
border-radius: 5px;
box-shadow: 0 0 4px #f0f0f0
}
.promoCard .button--close {
font-size: 24px;
padding: 15px 20px 0 0
}
.promoCard .button--follow {
margin-left: 10px
}
.promoCard .avatar-text {
font-size: 14px
}
.readNextPromo {
padding: 0 0;
width: 290px;
height: 85px;
border-radius: 3px;
background: #fff;
color: rgba(0,0,0,.8);
border: 1px solid rgba(0,0,0,.15);
box-shadow: 0 0 4px #f0f0f0
}
.readNextPromo--chromeless {
box-shadow: none;
width: 255px;
border-radius: 0;
border: 0
}
.readNextPromo-postInfo {
padding: 2px 15px;
width: 100%;
max-width: 260px
}
.readNextPromo--chromeless .readNextPromo-postInfo {
padding: 0 5px 2px 10px
}
.readNextPromo-callToAction {
color: #00ab6b;
font-size: 12px
}
.readNextPromo-postTitle {
color: rgba(0,0,0,.8);
font-size: 16px;
margin-top: -5px;
line-height: 1.2
}
@media (max-width: 767px) {
.infoCard-actions {
display:block;
width: 100%;
margin-left: 0;
margin-top: 10px
}
.infoCard-info {
margin-left: 15px
}
}
.tags {
font-size: 12px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.tags .tag-token,.tags>a,.tags>li {
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
position: relative
}
.tags .tag-button,.tags>a,.tags>li {
color: #fff;
border-radius: 999em;
padding: 0 9px;
line-height: 22px
}
.tags .tag-button:focus,.tags a:focus {
background: #02b875;
outline: 0
}
.tags-input {
display: inline-block;
white-space: nowrap;
min-width: 5px;
outline: 0;
border-radius: 999em;
padding: 3px 9px;
margin-bottom: 5px;
cursor: text
}
.sectionTagEditor .tags>.tag-token:nth-child(1)+.tags-input,.tags--navigation>.tag-token:nth-child(1)+.tags-input {
display: none
}
.tags--postTags .tags-input {
min-width: 100px
}
.tags--postTags>.tag-token:nth-child(5)+.tags-input {
min-width: 10px
}
.tags--postTags>.tag-token:nth-child(5)+.tags-input .defaultValue {
visibility: hidden;
display: inline-block;
width: 0
}
.tags--tagsHierarchy {
margin-top: -40px
}
.tags--tagsHierarchy>li>a {
font-weight: 300;
color: rgba(0,0,0,.8);
font-size: 16px
}
.tags--tagsHierarchy .tag-button.is-active,.tags--tagsHierarchy .tag-button:focus,.tags--tagsHierarchy .tag-button:hover,.tags--tagsHierarchy a:focus,.tags--tagsHierarchy a:hover,.tags--tagsHierarchy>.button.is-active,.tags--tagsHierarchy>.button:focus,.tags--tagsHierarchy>.button:hover {
color: rgba(0,0,0,.8);
background: 0 0;
text-decoration: none
}
.tags--uppercase {
text-transform: uppercase
}
.tags--dark .tag-button,.tags--dark>a,.tags--dark>li {
color: rgba(0,0,0,.6);
background: rgba(0,0,0,.05)
}
.tags--dark .tags-input {
background: rgba(0,0,0,.05)
}
.tags--dark .tags-input.editable,.tags--dark .tags-input.editable .defaultValue,.tags--dark .tags-input.editable a {
color: rgba(0,0,0,.44)
}
.tags--darker .tags-input.editable .defaultValue {
color: rgba(0,0,0,.8)
}
.tags--postTags .tag-token,.tags--postTags>.button,.tags--postTags>a,.tags--postTags>li {
margin-right: 8px;
margin-bottom: 8px
}
.tags--postTags .tag-button,.tags--postTags>.button,.tags--postTags>a,.tags--postTags>li {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-weight: 400;
font-style: normal;
color: rgba(0,0,0,.44);
font-size: 13px;
letter-spacing: 0;
text-decoration: none;
background: #fafafa;
border-radius: 3px;
border: 1px solid #f0f0f0;
padding: 5px 10px
}
.tags--postTags .tag-token:last-child,.tags--postTags>a:last-child,.tags--postTags>li:last-child {
margin-right: 0
}
.tags--postTags.tags--light .tag-button,.tags--postTags.tags--light>a,.tags--postTags.tags--light>li {
color: rgba(0,0,0,.6);
background: rgba(255,255,255,.97)
}
body.is-withMagicUnderlines .tags a.markup--anchor {
background-image: none
}
.tags--postTags .tag-button.is-active,.tags--postTags .tag-button:focus,.tags--postTags .tag-button:hover,.tags--postTags a:focus,.tags--postTags a:hover,.tags--postTags>.button.is-active,.tags--postTags>.button:focus,.tags--postTags>.button:hover {
color: rgba(0,0,0,.8);
border-color: rgba(0,0,0,.15);
background: #fff;
text-decoration: none
}
.tags--postTagsEditor .tag-button,.tags--postTagsEditor>.button,.tags--postTagsEditor>a {
transition: none
}
.tags--postTagsEditor .tag-button:hover,.tags--postTagsEditor>.button:hover,.tags--postTagsEditor>a:hover {
background: #fafafa;
color: rgba(0,0,0,.44);
border-color: rgba(0,0,0,.44)
}
.tags--postTagsEditor .tag-button:focus,.tags--postTagsEditor>.button:focus,.tags--postTagsEditor>a:focus {
background: #fafafa;
color: rgba(0,0,0,.44);
border-color: rgba(2,184,117,.8)
}
.tags--postTags .tags-input {
padding: 10px 0
}
.tags--postTags .tags-input.editable,.tags--postTags .tags-input.editable a {
color: rgba(0,0,0,.8)
}
.tags--postTags .tags-input.editable .defaultValue {
color: rgba(0,0,0,.44)
}
.tags--postTags .tags-input.editable .graf--p {
margin-bottom: 0
}
.inlineEditor .tags--postTagsEditor {
margin: 0
}
.inlineEditor .tags--postTags .tags-input {
padding: 9px 0
}
.inlineEditor .tags--postTags>a {
margin-bottom: 0
}
.inlineEditor .tags--postTagsEditor {
margin-top: 2px;
margin-bottom: 8px
}
.tagEditor {
min-height: 37px
}
.tags--inlineBlock {
text-align: left;
height: 31px;
position: relative;
top: -1px
}
.tags--borderless .tag-button,.tags--borderless>.button,.tags--borderless>a,.tags--borderless>li {
border: none;
color: rgba(0,0,0,.6);
background: rgba(0,0,0,.05)
}
.tags--borderless .tag-button.is-active,.tags--borderless .tag-button:focus,.tags--borderless .tag-button:hover,.tags--borderless>.button.is-active,.tags--borderless>.button:focus,.tags--borderless>.button:hover,.tags--borderless>a:focus,.tags--borderless>a:hover,.tags--borderless>li:focus,.tags--borderless>li:hover {
background: rgba(0,0,0,.1);
color: rgba(0,0,0,.6)
}
.tags--borderless>li>a:focus,.tags--borderless>li>a:hover {
background: 0 0;
color: rgba(0,0,0,.6)
}
.tags--onboarding .tags-input {
font-size: 14px;
padding: 7px 15px;
margin: 0 auto 15px;
border-radius: 999em;
border: 1px solid #f0f0f0;
line-height: 1;
min-width: 180px
}
.tags--onboarding .tags-input.editable,.tags--onboarding .tags-input.editable a {
color: rgba(0,0,0,.8)
}
.tags--onboarding>.tags-token {
height: 100px;
border: 0;
padding: 2px;
background-color: #b3b3b1;
background-size: cover;
background-repeat: no-repeat;
background-origin: content-box;
background-clip: content-box;
border-radius: 5px
}
@media screen and (min-width: 768px) {
.tags--onboarding>.tags-token {
width:20%!important
}
}
.tags-token>.tags-button {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-weight: 700;
font-style: normal;
color: rgba(255,255,255,.97);
font-size: 18px;
letter-spacing: 0;
text-decoration: none;
height: 100%;
width: 100%;
text-align: center
}
.tags-token>.tags-button {
border-radius: 3px;
font-size: 16px
}
.tags--onboarding>.tags-token.is-dynamic {
animation: fade-in 750ms;
animation-fill-mode: both
}
.tags-token>.tags-button:hover:not(.is-active) {
background-color: rgba(255,255,255,.1)
}
.tags-token>.tags-button.is-active {
background-color: rgba(2,184,117,.8)
}
.tags--onboarding>.button.is-active {
color: #fff;
border-color: #02b875;
background: #02b875
}
.tags--postTagsEditor .tag-token {
position: relative
}
.tags--postTagsEditor:not(.is-withoutCloseButton) .tag-button {
padding-right: 24px
}
.tags--fontSizeSmall.tags--dark:not(.is-withoutCloseButton) .tag-button {
padding-right: 32px
}
.tags--postTagsEditor .button--close {
margin: 1px;
padding: 10px 8px;
font-size: 16px;
line-height: 11px;
border-radius: 100%
}
.tags--postTagsEditor .button--close:active,.tags--postTagsEditor .button--close:focus,.tags--postTagsEditor .button--close:hover {
color: rgba(0,0,0,.8)
}
.tags--dark .button--close:hover {
color: #cc5454
}
.tags--navigation .tag-button {
cursor: inherit;
white-space: nowrap;
max-width: 236px;
overflow: hidden;
text-overflow: ellipsis
}
.tags--navigation .tag-button:hover {
border-color: #f0f0f0
}
.tags--navigation .tag-token {
max-width: 250px
}
.tags--navigation .token-button {
background-color: rgba(255,255,255,.85)
}
.tags--navigation .token-button:after {
margin-left: 10px;
font-size: 12px;
text-transform: uppercase;
content: 'story';
color: rgba(0,0,0,.44)
}
.tags--fontSizeSmall .button,.tags--fontSizeSmall .tags-input {
font-size: 16px;
padding: 7px 13px;
min-height: 22px;
margin-bottom: 0;
vertical-align: bottom
}
.tags--fontSizeSmall.tags--dark .tags-input {
margin-bottom: 5px
}
@media all and (max-width: 767px) {
.tags--postTags {
font-size:12px
}
}
@media all and (max-width: 767px) {
.tags--onboarding>.tags-token {
height:100px
}
}
.blockGroup-row {
table-layout: fixed;
display: table;
width: 100%;
position: relative
}
.insertSectionControl {
z-index: 300;
margin-top: -17px;
text-align: center
}
.insertSectionControl:last-child:before {
display: none
}
.insertSectionControl .button {
background: #fff
}
.blockGroup-row:nth-child(even) .blockGroup-item:first-child,.blockGroup-row:nth-child(odd) .blockGroup-item:last-child {
width: 40%
}
.blockGroup-row:nth-child(even) .blockGroup-item:last-child,.blockGroup-row:nth-child(odd) .blockGroup-item:first-child {
width: 60%
}
.blockGroup-row:nth-child(even) .blockGroup-item:last-child,.blockGroup-row:nth-child(odd) .blockGroup-item:last-child {
border-right: 0
}
.blockGroup-row:nth-child(even) .blockGroup-item:only-child,.blockGroup-row:nth-child(odd) .blockGroup-item:only-child {
border-right: 0;
width: 100%
}
.menu {
margin-bottom: 30px
}
.hero-description+.menu {
margin-top: -10px
}
.menu-item {
display: inline-block;
vertical-align: top
}
.menu-item>.button--chromeless {
padding: 10px 20px 5px;
color: rgba(0,0,0,.8);
font-size: 24px;
border-right: 1px solid rgba(0,0,0,.05)
}
.menu-item:last-child>.button--chromeless {
border-right: 0
}
.menu-label {
color: rgba(0,0,0,.6);
text-transform: uppercase;
display: block;
font-size: 11px;
letter-spacing: 2px
}
@media (max-width: 767px) {
.menu-item>.button--chromeless {
padding:7px 15px 3px;
vertical-align: top
}
.menu-item:first-child,.menu-item:first-child>.button--chromeless {
padding-left: 0
}
.menu-item:last-child,.menu-item:last-child>.button--chromeless {
padding-right: 0
}
.menu-label {
font-size: 9px
}
}
.sidebar {
background-color: rgba(255,255,255,0);
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 340px;
padding: 0 0 60px 18px;
box-sizing: border-box;
z-index: 600
}
.sidebar-contentWrapper {
width: 322px
}
.is-dockedTop {
position: fixed;
top: 0
}
.is-dockedBottom {
position: fixed;
bottom: 0
}
@media all and (max-width: 991px) {
.sidebar {
display:none
}
}
.interstitial {
position: relative;
display: block;
background-color: #fafafa;
min-height: 150px;
padding-top: 35px;
padding-bottom: 35px;
margin-top: 35px;
margin-bottom: 35px
}
@media all and (max-width: 991px) {
.interstitial {
margin-top:0;
margin-bottom: 0;
background-position: 55% 30px
}
}
@media all and (max-width: 767px) {
.interstitial {
padding-top:20px;
padding-bottom: 5px;
background-position: 55% 45px
}
}
.promo {
position: relative;
background-repeat: no-repeat;
display: block;
color: #fff;
overflow: hidden
}
.promo.is-dismissed {
display: none
}
.promo-title {
line-height: 1.2;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal
}
.promo-subtitle,.promo-text {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.promo--sidebar .promo-content {
color: rgba(0,0,0,.9)
}
.promo--sidebar .promo-text {
font-size: 14px;
padding-top: 15px;
margin-bottom: 15px
}
.promo--sidebar .buttonSet--vertical {
padding-top: 10px
}
.promo--sidebar .buttonSet--vertical>.button {
margin-left: 0
}
.promo--sidebar.is-darkBackgrounded {
background-size: inherit;
background-position: 80% 30%
}
.promo--sidebar.is-darkBackgrounded .promo-content {
color: #fff
}
.promo--sidebar.is-darkBackgrounded .promo-text {
font-size: 24px
}
.promo--postFooter {
background-color: #020733;
background-position: 50% 25px;
padding: 110px 0 130px;
text-align: center
}
.promo--postFooter.is-dismissed {
display: block;
visibility: hidden
}
.promo--postFooter .promo-title {
padding: 0 50px;
margin: 0 auto 12px;
font-size: 32px
}
.promo--postFooter .promo-subtitle {
max-width: 480px;
padding: 0 50px;
margin: 0 auto 18px;
font-size: 24px
}
.promo--postFooter .button--dismissPromo {
color: rgba(255,255,255,.85)
}
.promo--hero {
padding: 60px 0 60px;
background-size: cover;
background-position: 50% 0;
text-align: center
}
.promo--hero .promo-title {
padding: 0 50px;
font-size: 44px
}
.promo--hero .promo-subtitle {
max-width: 580px;
margin: 10px auto;
padding: 0 50px;
font-size: 24px
}
.promo--hero .promo-text {
padding: 0 50px;
color: rgba(255,255,255,.65);
font-size: 18px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.promo--hero .promo-content {
width: 100%;
padding-top: 50px;
padding-bottom: 50px
}
.promo--hero .buttonSet {
margin-top: 20px;
margin-bottom: 20px
}
.promo--hero .promo-dismissButton>.svgIcon {
fill: rgba(255,255,255,.5)
}
.promo--hero .promo-dismissButton>.svgIcon:hover {
fill: rgba(255,255,255,.85)
}
.promo--catalogHomeHero {
padding: 60px 0;
border-radius: 4px
}
.promo--hero .button--withChrome.button--primary {
color: #e368d6;
border-color: #e368d6
}
.promo--hero .button--withChrome.button--filled {
color: #fff;
background: #e368d6;
border-color: #e368d6
}
.is-darkGradientBackgrounded {
background-image: radial-gradient(50% 50%,rgba(1,6,51,.8) 50%,rgba(1,6,51,0) 100%)
}
.promo--stream {
color: rgba(0,0,0,.9)
}
.promo--stream .promo-title {
font-size: 32px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.promo--stream .promo-text {
margin-bottom: 20px;
color: rgba(0,0,0,.6);
font-size: 18px
}
.promo-dismissButton {
position: absolute;
top: 10px;
right: 10px
}
.heading .promo-dismissButton {
top: 0;
right: 0
}
.mobileAppIcon {
display: inline-block;
background-color: rgba(0,0,0,.8);
color: #fff;
text-align: center
}
.mobileAppIcon--light {
background-color: #fff;
width: 45px;
height: 45px;
border-radius: 6px
}
@media screen and (max-width: 991px) {
.promo--postFooter .promo-title {
font-size:24px
}
.promo--postFooter .promo-subtitle {
font-size: 16px
}
.promo--hero {
padding-top: 20px;
padding-bottom: 20px
}
.promo--catalogHomeHero {
margin-top: 0;
border-radius: 0
}
}
@media screen and (max-width: 767px) {
.promo--postFooter {
padding:60px 40px
}
.promo--postFooter .promo-subtitle,.promo--postFooter .promo-title {
margin-top: 15px;
padding: 0
}
.promo--hero .promo-title {
padding: 0 20px;
font-size: 32px
}
.promo--hero .promo-subtitle {
padding: 0 20px;
margin-top: 0;
font-size: 18px
}
.promo--hero .promo-text {
display: none
}
}
@media print {
.promo {
display: none
}
}
.followCount {
margin-top: 10px;
color: rgba(0,0,0,.6);
height: 38px;
line-height: 2.7;
font-size: 14px;
margin-right: 10px;
border-right: solid 1px #f0f0f0;
padding-right: 10px
}
.followCount:not(.followCount--oneline) {
display: block;
border-right: none;
margin-right: 0;
padding-right: 0;
margin-bottom: 5px
}
.followState.is-blocking>.button--unblock,.followState>.button--follow {
display: inline-block
}
.followState.is-blocking>.button--follow,.followState>.button--unblock {
display: none
}
.button--unblock {
background: #cc5454;
border-color: #cc5454;
color: #fff
}
.button--unblock:active,.button--unblock:focus,.button--unblock:hover {
background: rgba(0,0,0,0);
border-color: rgba(0,0,0,.44);
color: rgba(0,0,0,.6)
}
.button--chromeless.button--unblock {
background: 0 0;
color: #cc5454
}
.letters-post.is-inEditor {
display: none
}
.letters-actions {
border-bottom: solid 1px rgba(0,0,0,.05)
}
.letters--list {
margin-bottom: 50px
}
.letters-statsPercentage {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: rgba(0,0,0,.44)
}
.licenseSelector--allRightsReserved .licenseSelector-licenses {
display: none
}
.licenseSelector-group--noRightsReserved,.licenseSelector-group--someRightsReserved {
display: none
}
.licenseSelector--noRightsReserved .licenseSelector-group--noRightsReserved,.licenseSelector--someRightsReserved .licenseSelector-group--someRightsReserved {
display: block
}
.licenseSelector-groups {
padding-bottom: 4px
}
.licenseSelector-group .label {
margin-bottom: 10px;
font-size: 12px
}
.licenseSelector-licenses.list-item {
padding: 4px 6px
}
.licenseSelector-description {
margin-top: 3px;
margin-bottom: 9px;
text-align: left;
font-size: 12px;
color: rgba(0,0,0,.6);
clear: both
}
.licenseSelector-descriptors {
margin-top: 13px;
margin-bottom: 10px;
padding-left: 16px;
padding-right: 8px
}
.licenseSelector-description .svgIcon {
vertical-align: middle;
margin-top: -3px;
margin-left: 22px;
fill: rgba(0,0,0,.44);
float: right
}
.floatLeftPlaceholder {
float: left;
padding-top: 2px
}
.floatLeftPlaceholder:after,.floatLeftPlaceholder:before {
display: table;
content: " "
}
.floatLeftPlaceholder:after {
clear: both
}
.avatarPlaceholder {
background: rgba(0,0,0,.05);
border-radius: 100%;
float: left;
margin-right: 10px;
margin-bottom: 10px
}
.buttonPlaceholder {
display: inline-block;
width: 100px;
height: 44px;
vertical-align: top;
border-radius: 999em;
background: rgba(0,0,0,.05)
}
.inlineEditorPlaceholder {
margin-top: 35px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(0,0,0,.1)
}
.cardChromeless .inlineEditorPlaceholder {
border-bottom: 0
}
.linePlaceholder {
background: rgba(0,0,0,.05);
display: inline-block;
height: 10px;
margin-top: 7px;
margin-bottom: 7px;
width: 100%;
float: left;
clear: both
}
.linePlaceholder--padded {
margin-top: 14px;
margin-bottom: 0
}
.linePlaceholder--lighter {
background: rgba(0,0,0,.15)
}
.linePlaceholder--word {
width: 30px
}
.linePlaceholder--large {
width: 360px
}
.linePlaceholder--medium {
width: 240px
}
.linePlaceholder--small {
width: 120px
}
.linePlaceholder--smaller {
width: 80px
}
.linePlaceholder--truncated {
width: 80%
}
.linePlaceholder--thinnest {
height: 1px;
margin-top: 11px;
margin-bottom: 11px;
display: block;
float: none
}
.linePlaceholder--thin {
height: 8px;
margin-top: 4px;
margin-bottom: 4px
}
.linePlaceholder--thick {
height: 12px;
margin-top: 9px;
margin-bottom: 9px
}
.linePlaceholder--thicker {
height: 15px;
margin-top: 12px;
margin-bottom: 18px
}
.linePlaceholder--center {
float: none;
margin-left: auto;
margin-right: auto
}
.buttonSetPlaceholder {
height: 37px;
display: inline-block
}
.buttonSetPlaceholder .linePlaceholder {
float: none;
margin-right: 8px
}
.listItemPlaceholder {
padding-top: 20px;
padding-bottom: 200px;
border-bottom: 1px solid rgba(0,0,0,.1)
}
.listItemPlaceholder:after,.listItemPlaceholder:before {
display: table;
content: " "
}
.listItemPlaceholder:after {
clear: both
}
.listItemPlaceholder--withSocialHeader {
padding-top: 56px
}
.listItemPlaceholder:last-child {
border-bottom: 0
}
.listItemPlaceholder.cardChromeless {
border: 0;
margin-top: 10px;
margin-bottom: 10px
}
.yourStoryPlaceholder {
padding-top: 25px;
padding-bottom: 22px
}
.yourStoryPlaceholder+.yourStoryPlaceholder {
border-top: 1px solid rgba(0,0,0,.05)
}
.svgIcon--logoWordmarkNew {
fill: rgba(0,0,0,.75)
}
.svgIcon--logoNew path:nth-child(1) {
fill: #d0d2d3
}
.svgIcon--logoNew path:nth-child(2) {
fill: #a6a8ab
}
.svgIcon--logoNew path:nth-child(3) {
fill: #808184
}
.svgIcon--logoNew path:nth-child(4) {
fill: #58595b
}
.svgIcon--logoNew.svgIcon--green path:nth-child(1) {
fill: #32fc8d
}
.svgIcon--logoNew.svgIcon--green path:nth-child(2) {
fill: #0be370
}
.svgIcon--logoNew.svgIcon--green path:nth-child(3) {
fill: #14c767
}
.svgIcon--logoNew.svgIcon--green path:nth-child(4) {
fill: #00ac6a
}
body.is-hatch:not(.is-swBoot) .svgIcon--logoNew path:nth-child(1) {
fill: #a2e4ff
}
body.is-hatch:not(.is-swBoot) .svgIcon--logoNew path:nth-child(2) {
fill: #74d7ff
}
body.is-hatch:not(.is-swBoot) .svgIcon--logoNew path:nth-child(3) {
fill: #45c9ff
}
body.is-hatch:not(.is-swBoot) .svgIcon--logoNew path:nth-child(4) {
fill: #16bbff
}
body.is-dev:not(.is-swBoot) .svgIcon--logoNew path,body.is-dev:not(.is-swBoot) .svgIcon--logoNew.svgIcon--green path {
stroke: #16bbff;
stroke-width: 1.2px;
fill: transparent
}
body.is-swBoot .svgIcon--logoNew path:nth-child(1) {
animation: logo-loading-sw-1 1.26s;
animation-delay: 324ms;
animation-iteration-count: infinite;
animation-timing-function: ease
}
body.is-swBoot .svgIcon--logoNew path:nth-child(2) {
animation: logo-loading-sw-2 1.26s;
animation-delay: 254ms;
animation-iteration-count: infinite;
animation-timing-function: ease
}
body.is-swBoot .svgIcon--logoNew path:nth-child(3) {
animation: logo-loading-sw-3 1.26s;
animation-delay: 170ms;
animation-iteration-count: infinite;
animation-timing-function: ease
}
body.is-swBoot .svgIcon--logoNew path:nth-child(4) {
animation: logo-loading-sw-4 1.26s;
animation-delay: .1s;
animation-iteration-count: infinite;
animation-timing-function: ease
}
@keyframes logo-loading-sw-1 {
0%,10% {
fill: #d0d2d3
}
55%,65% {
fill: #32fc8d
}
100% {
fill: #d0d2d3
}
}
@keyframes logo-loading-sw-2 {
0%,10% {
fill: #a6a8ab
}
55%,65% {
fill: #0be370
}
100% {
fill: #a6a8ab
}
}
@keyframes logo-loading-sw-3 {
0%,10% {
fill: #808184
}
55%,65% {
fill: #14c767
}
100% {
fill: #808184
}
}
@keyframes logo-loading-sw-4 {
0%,10% {
fill: #58595b
}
55%,65% {
fill: #00ac6a
}
100% {
fill: #58595b
}
}
.streamItem-card {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
max-width: 660px
}
.streamItem-card--hPadding20 {
padding-right: 20px;
padding-left: 20px
}
.streamItem .graf--figure,.streamItem .graf--mixtapeEmbed {
margin-top: 0;
margin-bottom: 0
}
.streamItem-card {
margin-bottom: 10px
}
.streamItem-cardInner {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0,0,0,.15)
}
.streamItem-card.cardChromeless {
border-radius: 0
}
.streamItem-card.cardChromeless.streamItem-card--borderRadius3 {
border-radius: 3px
}
.cardChromeless>.streamItem-cardInner {
padding-top: 10px;
border-bottom: none
}
.streamItem-cardInner.streamItem-cardInner--compressedPostList,.streamItem-cardInner.streamItem-cardInner--inlineEditor,.streamItem-cardInner.streamItem-cardInner--quotePreview {
padding-top: 0;
padding-bottom: 0
}
.streamItem-cardInner.streamItem-cardInner--compressedPostListHeader {
padding-top: 0;
padding-bottom: 0;
border-bottom: none
}
.streamItem-cardInner.streamItem-cardInner--collectionPreview,.streamItem-cardInner.streamItem-cardInner--userPreview {
padding-top: 15px
}
.compressedPostListItem {
padding: 20px;
border-bottom: 1px solid rgba(0,0,0,.05);
overflow: hidden
}
.compressedPostListItem:last-child {
border-bottom: 0
}
.compressedPostListItem--withImage .compressedPostListItem-content {
margin-right: 75px
}
.compressedPostListItem-social {
margin-bottom: -5px
}
.compressedPostListItem-postStats {
display: inline-block
}
.compressedPostListItem-readingTime {
margin-right: 10px
}
.compressedPostListItem-recommendAndRespondCounts {
display: inline-block;
vertical-align: middle
}
.compressedPostListItem-recommendAndRespondCounts .label {
line-height: 19px
}
.compressedPostListItem-title {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
letter-spacing: -.02em;
font-weight: 700;
font-style: normal;
font-size: 18px;
line-height: 1.2;
margin-top: 5px;
margin-bottom: 3px
}
.compressedPostListItem-author {
font-size: 14px
}
.compressedPostListItem-previewImage {
height: 65px;
width: 65px;
float: right
}
.streamItemConversation-divider {
margin-bottom: 20px;
border-top: 2px solid rgba(0,0,0,.44);
width: 75px
}
.streamItemConversation .heading-title {
color: rgba(0,0,0,.44)
}
.streamItemConversation-inner {
margin-top: 20px
}
.streamItemConversationItem {
padding: 15px 20px
}
.streamItemConversationItem--preview:not(:first-child) {
border-top: 1px solid rgba(0,0,0,.09)
}
.streamItemConversationItem--summary {
background-color: #fafafa
}
.streamItemConversationItem--summary:not(:first-child) {
border-top: 1px solid rgba(0,0,0,.09)
}
.streamItem-card--catalogPreview {
margin-bottom: 8px
}
.streamItem-card--catalogPreview.cardChromeless {
margin-bottom: 20px
}
.streamItem-cardInner.streamItem-cardInner--catalogPreview {
padding-top: 0;
padding-bottom: 0;
border-bottom: none
}
.streamItem-cardInner--digestSectionPreview .streamItem-card:last-child .streamItem-cardInner {
padding-bottom: 0;
border-bottom: none
}
.streamItem-card--collectionManagerPost {
max-width: 100%
}
.streamItem-cardInner--collectionManagerPost {
border-bottom: 1px solid rgba(0,0,0,.05)
}
.streamItem-card--collectionManagerPost .post-title {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
letter-spacing: -.02em;
font-weight: 700;
font-style: normal;
font-size: 24px;
line-height: 1.2;
margin-top: 5px;
margin-bottom: 3px
}
.streamItem-card--collectionManagerPost .post-subtitle {
display: block;
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
letter-spacing: -.02em;
font-weight: 300;
font-style: normal;
font-size: 18px;
margin-left: -1.13px;
margin: 2px 0 0;
line-height: 1.3
}
.streamItem-card--collectionManagerPost .middotDivider {
color: rgba(0,0,0,.44)
}
.followedStreamItems .streamItem--heading:not(:first-child),.suggestionSidebar .streamItem--heading:not(:first-child) {
margin-top: 30px
}
.followedStreamItems .streamItem--tagList:not(:first-child) {
margin-top: 20px;
margin-bottom: 0
}
.streamItem--seriesHeroCarousel {
width: 100%;
padding-left: 30px;
overflow: auto;
box-sizing: border-box
}
.seriesPreviewCard {
padding: 5px
}
.streamItem--seriesHeroCarousel .seriesPreviewCard:first-child {
margin-left: -30px;
padding-left: 0;
padding-right: 10px
}
.streamItem--seriesHeroCarousel .seriesPreviewCard:last-child {
padding-right: 0;
padding-left: 10px
}
.streamItem--seriesGridCard .seriesPreviewCard {
box-sizing: border-box
}
@media (max-width: 991px) {
.streamItemConversation {
padding-left:0;
padding-right: 0;
margin-left: 0;
margin-right: 0
}
.streamItemConversation .row {
margin-left: 0;
margin-right: 0
}
.streamItemConversation .postMetaInline-authorLockup {
white-space: normal
}
}
@media (max-width: 767px) {
.compressedPostListItem-postStats {
display:block
}
}
.titleLockup {
font-size: 14px;
line-height: 1.2
}
.titleLockup-title {
color: rgba(0,0,0,.8)
}
.titleLockup-meta {
display: -ms-flexbox;
display: flex;
color: rgba(0,0,0,.44);
padding-top: 1px
}
.titleLockup-creator {
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.titleLockup-social {
box-sizing: border-box;
text-align: right;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
max-width: 100%
}
.browser-ie .titleLockup-meta {
display: block
}
.browser-ie .titleLockup-creator {
float: left;
width: 60%
}
.browser-ie .titleLockup-social {
float: right;
width: 40%
}
.userAnnotation {
padding: 30px 20px;
font-size: 16px;
position: relative;
background-color: #fafafa;
border: 1px solid rgba(0,0,0,.09);
border-bottom: none
}
.userAnnotation-text {
display: table-cell;
vertical-align: middle;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
color: rgba(0,0,0,.8);
padding-left: 16px
}
.userAnnotation .avatar {
display: table-cell;
vertical-align: middle
}
@media (max-width: 767px) {
.userAnnotation {
padding:24px 20px
}
}
.catalogPreview-header {
margin: 0 30px 0 20px;
padding-top: 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0,0,0,.0785)
}
.catalogPreview-name {
font-size: 14px;
line-height: 1.2;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 500;
font-style: normal
}
.catalogPreview-description {
padding-top: 2px
}
.catalogPreview-footer {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 500;
font-style: normal
}
.catalogPreview--card {
margin-bottom: 20px
}
.catalogPreview--card .catalogPreview-header {
margin: 0;
padding: 30px;
border-top: 2px solid rgba(0,0,0,.8);
background: #fff
}
.catalogPreview--card .catalogPreview-name {
color: rgba(0,0,0,.8);
font-size: 18px
}
.catalogPreview--card .catalogPreview-description {
color: rgba(0,0,0,.44);
padding-top: 3px
}
.catalogPreview--card .catalogPreview-item {
border-top: 1px solid rgba(0,0,0,.0785);
padding: 16px 30px
}
.catalogPreview--card .catalogPreview-item:first-child {
border-top: none
}
.catalogPreview--card .catalogPreview-item:last-child {
padding-bottom: 0
}
.catalogPreview--borderless {
margin-bottom: 40px
}
.catalogPreview--borderless .catalogPreview-name {
color: rgba(0,0,0,.8);
font-weight: 400
}
.catalogPreview--borderless .catalogPreview-description {
color: rgba(0,0,0,.44)
}
.catalogPreview--borderless .catalogPreview-item {
margin: 20px
}
@media all and (max-width: 991px) {
.catalogPreview--card .catalogPreview-header {
padding:20px
}
.catalogPreview--card .catalogPreview-item {
padding-left: 20px;
padding-right: 20px
}
}
.browsableStreamTabs {
-ms-flex-direction: row;
flex-direction: row;
text-align: left;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
color: rgba(0,0,0,.44)
}
.browsableStreamTabs-item {
display: table-cell;
padding: 13px 20px 15px 0;
font-size: 16px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
white-space: nowrap
}
@media (max-width: 767px) {
.browsableStreamTabs {
padding-bottom:5px;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar
}
.browsableStreamTabs-item {
padding: 10px 14px 11px 0;
font-size: 15px
}
}
.graf--mixtapeEmbed {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 12px;
position: relative;
overflow: hidden;
max-height: 280px;
box-sizing: border-box;
color: rgba(0,0,0,.44);
box-shadow: 0 1px 4px rgba(0,0,0,.04),inset 0 0 0 1px rgba(0,0,0,.09);
display: table;
width: 100%
}
.markup--anchor.markup--mixtapeEmbed-anchor {
-webkit-tap-highlight-color: transparent;
display: table-cell;
vertical-align: middle;
padding: 20px;
text-decoration: none
}
body.is-withMagicUnderlines .markup--anchor.markup--mixtapeEmbed-anchor {
background: rgba(255,255,255,0)
}
.is-backgrounded .graf--mixtapeEmbed {
border: none;
background-color: rgba(255,255,255,0)
}
.markup--mixtapeEmbed-strong {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 1.3;
color: rgba(0,0,0,.9);
display: block;
margin-bottom: -8px
}
.markup--mixtapeEmbed-em {
font-size: 14px;
font-style: normal;
color: rgba(0,0,0,.6);
display: block;
margin-top: -1px;
margin-bottom: 10px;
max-height: 120px;
overflow: hidden
}
.mixtapeImage {
display: table-cell;
vertical-align: middle;
width: 160px;
height: 160px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
box-sizing: border-box;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.09)
}
.mixtapeImage--empty {
width: 0;
height: 0
}
.catalogPreview .graf--mixtapeEmbed {
font-size: 11px
}
.catalogPreview .markup--anchor.markup--mixtapeEmbed-anchor {
padding: 10px 12px 10px
}
.catalogPreview .markup--mixtapeEmbed-em,.catalogPreview .markup--mixtapeEmbed-strong {
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden
}
.catalogPreview .markup--mixtapeEmbed-strong {
font-size: 14px
}
.catalogPreview .markup--mixtapeEmbed-em {
font-size: 12px;
margin-bottom: 5px
}
.catalogPreview .mixtapeImage {
width: 110px;
height: 110px
}
@media all and (max-width: 767px) {
.graf--mixtapeEmbed {
font-size:11px
}
.markup--anchor.markup--mixtapeEmbed-anchor {
padding: 10px 12px 10px
}
.markup--mixtapeEmbed-em,.markup--mixtapeEmbed-strong {
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden
}
.markup--mixtapeEmbed-strong {
font-size: 14px
}
.markup--mixtapeEmbed-em {
font-size: 12px;
margin-bottom: 5px
}
.mixtapeImage {
width: 110px;
height: 110px
}
}
.creditCardForm {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
text-align: left;
max-width: 600px
}
.creditCardForm-heading {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
color: rgba(0,0,0,.44);
font-size: 14px
}
.creditCardForm--saved,.is-usesSavedCard .creditCardForm--input {
display: none
}
.creditCardForm--input,.is-usesSavedCard .creditCardForm--saved {
display: block
}
.creditCardForm--error {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
display: none;
text-align: center;
font-size: 14px;
margin-top: 40px;
margin-bottom: 35px;
color: #cc5454
}
.creditCardForm--error .svgIcon {
margin-right: 5px;
fill: #cc5454;
margin-top: -4px;
vertical-align: top
}
.is-errored .creditCardForm--error {
display: block
}
.is-invalidCvc .creditCardForm-cvc,.is-invalidExpiration .creditCardForm-expiration,.is-invalidNumber .creditCardForm-number {
border-bottom: solid 1px #cc5454
}
.creditCardForm-ccImage {
height: 19px;
width: 25px;
margin-right: 5px
}
.creditCardForm-icon {
position: absolute;
left: 22px;
top: 7px;
width: 25px;
height: 19px;
overflow: hidden;
perspective: 80px;
z-index: 900
}
.creditCardForm-icon:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 25px;
height: 19px;
background-image: url(https://cdn-static-1.medium.com/_/fp/img/payments/credit-card-sprite.aNIJTodZTkf86-MUkQX7Xw.png);
background-repeat: no-repeat;
background-size: 175px 19px;
background-position: 0 0;
transition: transform linear .2s,background linear 1ms .1s
}
.creditCardForm-icon:before {
transform: rotateY(180deg)
}
.creditCardForm-icon[data-card-type]:before {
transform: rotateY(0)
}
.creditCardForm-icon[data-card-type=visa]:before {
background-position: -25px 0
}
.creditCardForm-icon[data-card-type=mastercard]:before {
background-position: -50px 0
}
.creditCardForm-icon[data-card-type=amex]:before {
background-position: -75px 0
}
.creditCardForm-icon[data-card-type=jcb]:before {
background-position: -100px 0
}
.creditCardForm-icon[data-card-type=discover]:before {
background-position: -125px 0
}
.creditCardForm-icon[data-card-type=diners]:before {
background-position: -150px 0
}
@media (max-width: 767px) {
.container .creditCardForm-lastFour,.creditCardForm-useDiffCard {
text-align:left
}
.creditCardForm-cvc,.creditCardForm-expiration {
width: 100%
}
.creditCardForm .textInput {
font-size: 16px
}
}
.postFade:before {
content: '';
position: relative;
display: block;
margin-top: -150px;
height: 150px;
width: 100%;
background-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%);
margin-bottom: 30px;
margin-left: -20px;
padding-left: 20px;
padding-right: 20px
}
.membershipPrompt-wrapper {
position: relative;
text-align: center;
border: solid 1px rgba(0,0,0,.05);
border-radius: 4px;
padding: 30px 20px;
margin-bottom: 40px;
background-color: #fafafa
}
.membershipPrompt.is-showingCreditCardForm .membershipPrompt-wrapper {
padding-top: 40px;
padding-bottom: 40px
}
.membershipPrompt-title {
width: 500px;
margin: 0 auto;
color: rgba(0,0,0,.6);
font-size: 16px
}
.membershipPrompt-title .svgIcon {
margin-bottom: 7px;
fill: rgba(0,0,0,.44)
}
.membershipPrompt-title.membershipPrompt-title--confirmation {
width: auto;
font-size: 16px
}
.membershipPrompt-plus {
font-size: 24px;
color: rgba(0,0,0,.6);
padding: 0 16px 0 14px
}
.membershipPrompt-avatars {
text-align: right;
padding-top: 13px;
vertical-align: middle
}
.membershipPrompt-reasons {
padding-left: 40px
}
.membershipPrompt-reason {
margin-bottom: 10px
}
.membershipPrompt-reason:last-child {
margin-bottom: 0
}
.membershipPrompt-contents {
margin-top: 30px;
padding-top: 30px;
border-top: solid 1px rgba(0,0,0,.05)
}
.membershipPrompt.is-showingCreditCardForm .membershipPrompt-contents {
margin-top: 40px;
padding-top: 40px
}
.membershipPrompt-contents .textInput {
font-size: 16px
}
.membershipPrompt-hint {
color: rgba(0,0,0,.44);
font-size: 14px;
margin-bottom: 25px;
line-height: 1.6
}
.membershipPrompt-cancellationHint {
margin-top: 15px;
margin-bottom: 15px
}
.membershipPrompt-hint--step1 .membershipPrompt-cancellationHint,.membershipPrompt-hint--step1 .membershipPrompt-moneyHint {
display: inline;
margin: 0
}
.membershipPrompt-collectionName {
margin-top: 5px;
margin-bottom: 10px
}
.membershipPrompt-solicitationMessage,.membershipPrompt-thanksMessage {
font-size: 16px;
color: rgba(0,0,0,.6);
margin-bottom: 20px
}
.membershipPrompt-solicitation--withMessage .membershipPrompt-solicitationMessage,.membershipPrompt-thanksMessage {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-slab-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
font-weight: 400;
font-style: italic;
font-size: 20px;
margin: 20px 0
}
.membershipPrompt-thanksMessage+.membershipPrompt-successMessage {
border-top: solid 1px rgba(0,0,0,.05);
margin-top: 40px;
padding-top: 40px
}
.membershipPrompt .button--close {
line-height: 1
}
.membershipPrompt .button--close,.membershipPrompt-creditCardForm,.membershipPrompt-patronageAmount,.membershipPrompt-title--confirmation,.membershipPrompt.is-showingCreditCardForm .membershipPrompt-message,.membershipPrompt.is-showingCreditCardForm .membershipPrompt-title--solicitation {
display: none
}
.membershipPrompt-title--solicitation,.membershipPrompt.is-showingCreditCardForm .button--close,.membershipPrompt.is-showingCreditCardForm .membershipPrompt-creditCardForm,.membershipPrompt.is-showingCreditCardForm .membershipPrompt-patronageAmount,.membershipPrompt.is-showingCreditCardForm .membershipPrompt-title--confirmation {
display: block
}
.membershipPrompt-footer {
margin-top: 20px;
margin-bottom: -20px;
text-align: right
}
.membershipPrompt.is-showingCreditCardForm .membershipPrompt-footer {
margin-bottom: -30px
}
.membershipPrompt-confirmButton {
margin: 0 auto;
margin-top: 30px
}
.membershipPrompt-loadingMessage,.membershipPrompt-processingMessage {
text-align: center;
color: rgba(0,0,0,.44);
font-size: 14px;
min-height: 25px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.membershipPrompt-loadingMessage {
margin-top: 20px
}
.membershipPrompt-processingMessage {
margin-top: 50px
}
.is-processing .membershipPrompt-processingMessage,.membershipPrompt-confirmButton {
display: block
}
.is-processing .membershipPrompt-confirmButton,.membershipPrompt-processingMessage {
display: none
}
.membershipPrompt-overview {
font-size: 16px;
margin: 20px 0
}
@media (max-width: 767px) {
.membershipPrompt:before {
margin-bottom:0
}
.membershipPrompt-wrapper {
text-align: left
}
.membershipPrompt-wrapper,.membershipPrompt.is-showingCreditCardForm .membershipPrompt-wrapper {
padding-top: 20px;
padding-bottom: 20px
}
.membershipPrompt-title {
width: auto
}
.membershipPrompt-confirmButton {
margin: 30px 0 0 0
}
.membershipPrompt-solicitation--withMessage .membershipPrompt-solicitationMessage,.membershipPrompt-thanksMessage {
text-indent: -.4em
}
.membershipPrompt-thanksMessage+.membershipPrompt-successMessage {
margin-top: 20px;
padding-top: 20px
}
.membershipPrompt-title .svgIcon--lockStory {
margin-left: -3px
}
.membershipPrompt-contents,.membershipPrompt.is-showingCreditCardForm .membershipPrompt-contents {
margin-top: 20px;
padding-top: 20px
}
.membershipPrompt-reasons {
padding-left: 20px
}
.membershipPrompt-reason {
margin-bottom: 12px
}
.membershipPrompt-avatars {
text-align: left;
padding-top: 5px;
padding-bottom: 20px
}
.membershipPrompt-wrapper .container {
padding: 0
}
.membershipPrompt-footer {
margin-top: 15px;
margin-bottom: 0;
text-align: left
}
.membershipPrompt-overviewLine {
margin-bottom: 10px
}
}
.singleStoryPrompt:before {
content: '';
position: relative;
display: block;
margin-top: -150px;
height: 150px;
width: 100%;
background-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%);
margin-bottom: 30px;
margin-left: -20px;
padding-left: 20px;
padding-right: 20px;
z-index: 200
}
.singleStoryPrompt-wrapper {
position: relative;
text-align: center;
border: solid 1px rgba(0,0,0,.05);
border-radius: 4px;
padding: 30px 20px;
margin-bottom: 40px;
background-color: #fafafa
}
.singleStoryPrompt-title .svgIcon {
margin-bottom: 7px;
fill: rgba(0,0,0,.44)
}
.singleStoryPrompt-footer {
margin-bottom: -20px
}
.singleStoryPrompt-confirmButton {
margin: 0 auto
}
.is-processing .singleStoryPrompt-processingMessage,.singleStoryPrompt-confirmButton {
display: block
}
.is-processing .singleStoryPrompt-confirmButton,.singleStoryPrompt-processingMessage {
display: none
}
@media (max-width: 767px) {
.singleStoryPrompt:before {
margin-bottom:0
}
.singleStoryPrompt-wrapper {
text-align: left
}
.singleStoryPrompt-confirmButton {
margin: 30px 0 0 0
}
.singleStoryPrompt-title .svgIcon {
margin-left: -3px
}
.singleStoryPrompt-wrapper .container {
padding: 0
}
}
.onboardingTopBar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fafafa;
box-shadow: 0 0 1px rgba(0,0,0,.15);
z-index: 500
}
.onboardingTopBar .is-waitingForReadingList {
display: none
}
.onboardingTopBar-greeting {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
margin-top: 15px;
line-height: 1.1
}
.onboardingTopBar-action {
margin: 0 0 15px 10px;
float: right
}
.onboardingTopBar-progress {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
margin-bottom: 10px;
margin-top: 3px;
line-height: 1.2
}
.onboardingTopBar-step {
color: rgba(0,0,0,.44)
}
.onboardingTopBar-step.is-active {
color: rgba(0,0,0,.8)
}
.onboardingTopBar-step .svgIcon {
fill: rgba(0,0,0,.44);
vertical-align: middle;
margin-top: -2px
}
.onboardingTopBar-actionConfirmation {
color: rgba(0,0,0,.6);
background-color: #f0f0f0;
box-shadow: 2px 2px 5px rgba(0,0,0,.44);
border: 0;
font-size: 14px;
padding: 7px 10px 7px;
margin: 10px 0 10px;
border-radius: 2px
}
.onboardingTopBar-confirmationAvatar {
margin-right: 5px
}
.onboardingContent {
margin: 120px auto 40px
}
.onboardingContent-title {
color: rgba(0,0,0,.8);
font-size: 24px;
line-height: 1.1;
margin-bottom: 6px
}
.onboardingContent-subtitle {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
margin-bottom: 40px;
font-size: 18px
}
.onboardingContent-waiting {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.onboardingContent-waiting:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -.25em
}
.onboardingContent-waitingInner {
display: inline-block;
text-align: center;
width: 100%
}
.onboardingToken {
position: relative
}
.onboardingToken>.button:hover:not(.is-active) {
opacity: .9
}
.onboardingToken>.button.is-active:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(2,184,117,.8);
border-radius: 4px
}
.stats-title {
padding-bottom: 17px
}
.stats-title--page {
line-height: 1;
margin-top: 70px
}
.stats-title--chart {
border-bottom: 1px solid rgba(0,0,0,.15)
}
.stats-titleHeading {
color: rgba(0,0,0,.6);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.stats-title--chart .stats-titleInner--all,.stats-title--chart.is-singlePost .stats-titleInner--post {
display: block
}
.stats-title--chart .stats-titleInner--post,.stats-title--chart.is-singlePost .stats-titleInner--all {
display: none
}
.stats-title--chart button {
border: none;
background: 0 0
}
.stats-titleHeading--post {
text-overflow: ellipsis;
overflow: hidden;
max-width: 420px;
height: 1.3em;
white-space: nowrap
}
.stats-description {
margin: 5px 0;
font-size: 14px
}
.stats-totalNumber {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-weight: 700;
font-style: normal;
font-size: 50px;
display: block;
line-height: 40px;
height: 40px;
margin-bottom: 5px;
letter-spacing: 0
}
.stats--noPosts {
color: rgba(0,0,0,.44);
font-size: 18px;
text-align: center
}
@media screen and (max-width: 991px) {
.stats-title {
margin:15px 0 0;
padding: 0;
font-size: 18px
}
.stats-title--page {
margin: 5px 0 0;
font-size: 24px;
line-height: 2
}
.stats-title h2 {
font-size: 18px;
line-height: 2;
height: 2em
}
.stats-totalNumber {
font-size: 24px;
height: 34px;
margin-bottom: 0
}
}
.postArticle {
position: relative
}
.postArticle:after,.postArticle:before {
display: table;
content: " "
}
.postArticle:after {
clear: both
}
.postArticle.is-expanded .postArticle-readMore {
display: none
}
.postArticle-content {
position: relative;
margin-bottom: 0
}
.postArticle-content:after,.postArticle-content:before {
display: table;
content: " "
}
.postArticle-content:after {
clear: both
}
.is-postEditMode .postArticle-content {
margin-bottom: 50px
}
.postArticle-content,.postArticle-content:focus {
outline: 0;
word-break: break-word;
word-wrap: break-word
}
.postArticle-content .graf--p {
margin-bottom: 0
}
.graf--h2,.graf--h3,.graf--h4 {
color: rgba(0,0,0,.8)
}
.graf--kicker,.graf--subtitle {
color: rgba(0,0,0,.44)
}
.graf--blockquote {
border-left: 3px solid rgba(0,0,0,.8);
padding-left: 20px;
margin-left: -23px;
padding-bottom: 2px
}
.graf--pullquote {
color: rgba(0,0,0,.6);
border: none;
padding: 0;
padding-left: 50px;
text-align: left
}
.postList {
counter-reset: post
}
.postList>li:before {
position: absolute;
display: inline-block;
box-sizing: border-box;
width: 78px;
margin-left: -78px;
text-align: right
}
ol.postList>li:before {
font-feature-settings: "liga" on,"lnum" on;
-moz-font-feature-settings: "liga" on,"lnum" on;
-webkit-font-feature-settings: "liga" on,"lnum" on;
padding-right: 12px;
counter-increment: post;
content: counter(post) "."
}
ul.postList>li:before {
padding-top: 4px;
padding-right: 15px;
content: '•'
}
.graf--li {
margin-left: 30px;
margin-bottom: 14px
}
.graf--li:last-child {
margin-bottom: 0
}
hr.section-divider {
display: block;
border: 0;
text-align: center
}
hr.section-divider:before {
content: '...';
display: inline-block;
margin-left: .6em;
color: rgba(0,0,0,.6);
position: relative;
top: -30px
}
.graf--pre {
background: rgba(0,0,0,.05);
padding: 20px;
white-space: pre-wrap
}
.graf--pre+.graf--pre {
margin-top: 0;
padding-top: 4px
}
.markup--blockquote-code,.markup--li-code,.markup--p-code {
background: rgba(0,0,0,.05);
padding: 3px 4px;
margin: 0 2px
}
.markup--audio {
color: rgba(255,255,255,0);
display: inline-block;
width: 20px;
height: 20px;
line-height: 0;
position: relative;
margin: 0 5px;
text-indent: 0
}
.markup--audio:before {
background-size: contain;
background-image: url(https://cdn-static-1.medium.com/_/fp/img/audio/audio-inactive.JUSjk6tbAM3TXmspwm4Gtw.png);
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -50%
}
.markup--audio:hover:before {
background-image: url(https://cdn-static-1.medium.com/_/fp/img/audio/audio-hover.S-Szx-93nxoBi0c2-rykUQ.png)
}
.markup--audio.is-playing:before {
background-image: url(https://cdn-static-1.medium.com/_/fp/img/audio/audio-active.4GSkS4zw9tXS7CDfabsViQ.png)
}
.graf--hasDropCap {
clear: left
}
.graf-dropCap {
display: block;
position: relative;
float: left
}
.graf--hasDropCapImage .graf-dropCapText {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
body.is-amp {
position: relative
}
.markup--quote {
transition: .2s background-color;
cursor: pointer
}
body.is-withMagicUnderlines .markup--h2-quote {
background-repeat: repeat-x;
background-size: 2px 54px;
background-position: 0 5px
}
body.is-withMagicUnderlines .markup--h3-quote {
background-repeat: repeat-x;
background-size: 2px 41px;
background-position: 0 2px
}
body.is-withMagicUnderlines .markup--h4-quote {
background-repeat: repeat-x;
background-size: 2px 34px;
background-position: 0 0
}
.markup--quote.is-other {
background-color: rgba(39,243,106,.1)
}
body.is-withMagicUnderlines .markup--quote.is-other {
background-color: transparent;
background-image: linear-gradient(to bottom,rgba(39,243,106,.1),rgba(39,243,106,.1))
}
.markup--quote.is-me {
background-color: rgba(92,255,160,.5)
}
body.is-withMagicUnderlines .markup--quote.is-me {
background-color: transparent;
background-image: linear-gradient(to bottom,rgba(92,255,160,.5),rgba(92,255,160,.5))
}
.markup--quote.is-selected,.markup--quote.is-targeted {
background-color: rgba(97,255,160,.8)
}
body.is-withMagicUnderlines .markup--quote.is-selected,body.is-withMagicUnderlines .markup--quote.is-targeted {
background-color: transparent;
background-image: linear-gradient(to bottom,rgba(97,255,160,.8),rgba(97,255,160,.8))
}
section.is-darkBackgrounded .markup--quote.is-other {
background-color: rgba(255,255,255,.2)
}
body.is-withMagicUnderlines section.is-darkBackgrounded .markup--quote.is-other {
background-color: transparent;
background-image: linear-gradient(to bottom,rgba(255,255,255,.2),rgba(255,255,255,.2))
}
section.is-darkBackgrounded .markup--quote.is-me {
background-color: rgba(255,255,255,.5)
}
body.is-withMagicUnderlines section.is-darkBackgrounded .markup--quote.is-me {
background-color: transparent;
background-image: linear-gradient(to bottom,rgba(255,255,255,.5),rgba(255,255,255,.5))
}
section.is-darkBackgrounded .markup--quote.is-selected,section.is-darkBackgrounded .markup--quote.is-targeted {
background-color: rgba(255,255,255,.65)
}
body.is-withMagicUnderlines section.is-darkBackgrounded .markup--quote.is-selected,body.is-withMagicUnderlines section.is-darkBackgrounded .markup--quote.is-targeted {
background-color: transparent;
background-image: linear-gradient(to bottom,rgba(255,255,255,.65),rgba(255,255,255,.65))
}
.is-postEditMode .graf[data-translationStatus=reference] {
color: #788ca0
}
.is-postEditMode .section.is-darkBackgrounded .graf[data-translationStatus=reference] {
color: #bac4ce
}
.postArticle-content>section {
position: relative;
clear: both
}
.section--cover+section>.section-divider,.section--first .section-divider,section.is-backgrounded+section>.section-divider,section:first-child>.section-divider {
display: none
}
.postArticle-content .section--first:not(.is-imageBackgrounded) {
padding-top: 75px
}
.postArticle--full.postArticle--response>.postArticle-content .section--first,.postArticle:not(.postArticle--letter)>.postArticle-content .section--first {
margin-top: 20px;
padding-top: 0
}
.section--last {
padding-bottom: 5px
}
.section-inner {
position: relative
}
.section--bottomCenter>.section-inner {
vertical-align: bottom
}
section.is-backgrounded {
width: 100%;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0
}
section.is-imageBackgrounded {
box-sizing: border-box
}
section.is-imageBackgrounded.is-darkBackgrounded {
background: rgba(0,0,0,.9);
color: #fff
}
section.is-imageBackgrounded.is-darkBackgrounded.is-sectionUsingCanvas {
background: rgba(255,255,255,0)
}
section.is-darkBackgrounded .graf--h2,section.is-darkBackgrounded .graf--h3 {
color: #fff
}
section.is-darkBackgrounded .graf--pullquote,section.is-imageBackgrounded .graf--h4,section[data-background-color]:not([data-background-color$=Light]) .graf--h4 {
color: rgba(255,255,255,.65)
}
section.is-darkBackgrounded .markup--comment {
background: rgba(255,255,255,.1);
color: rgba(255,255,255,.65)
}
section.is-darkBackgrounded .graf--blockquote {
border-left-color: rgba(255,255,255,.85)
}
section.section-image--fullBleed.is-sectionUsingCanvas {
background: rgba(255,255,255,0)
}
section.section-image--fullBleed.is-backgrounded {
padding-top: 110vh
}
section.section-image--coverFade.is-backgrounded,section.section-image--fullScreen.is-backgrounded {
min-height: 100vh;
padding-top: 50vh
}
section.section-image--coverFade {
height: 100vh
}
section.section-image--aspectRatio.is-backgrounded,section.section-image--aspectRatioViewport.is-backgrounded {
padding: 0
}
.section-image--aspectRatioViewport .section-backgroundImage:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.44)
}
section.section-image--coverFade.is-backgrounded {
display: table;
padding-top: 0;
padding-bottom: 0
}
.section-coverFadePadding {
display: table-cell;
vertical-align: bottom;
padding-bottom: 160px
}
.section-doubleWidthTable {
width: 200%;
table-layout: fixed
}
.section-doubleWidthTable>.section-contentCell {
width: 50%
}
.section-image--aspectRatio .section-content {
padding-top: 80px;
padding-bottom: 3%
}
section.is-sectionUsingCanvas.is-imageBackgrounded .section-backgroundImage {
display: none
}
.section-doubleWidthTable {
width: 200%
}
.section-doubleWidthTable>.section-contentCell {
width: 50%
}
.section-image--aspectRatioViewport.section--topCenter .section-content {
padding: 120px 0 80px
}
.section-image--aspectRatioViewport.section--middleCenter .section-content {
padding: 100px 0
}
.section-image--aspectRatioViewport.section--bottomCenter .section-content {
padding-bottom: 80px
}
section.is-sectionUsingCanvas.is-imageBackgrounded .section-backgroundImage {
display: none
}
.section-aspectRatioViewportPlaceholder {
max-height: 100vh
}
.section-aspectRatioViewportBottomPlaceholder,.section-aspectRatioViewportBottomSpacer {
display: none;
max-height: 50vh
}
.section--bottomCenter .section-aspectRatioViewportBottomPlaceholder,.section--bottomCenter .section-aspectRatioViewportBottomSpacer {
display: block
}
.section--bottomCenter .section-aspectRatioViewportPlaceholder {
display: none
}
.section--topCenter .section-contentCell {
vertical-align: top
}
.section--bottomCenter .section-contentCell,.section--middleCenter .section-contentCell {
vertical-align: middle
}
.section-aspectRatioViewportCropPlaceholder {
max-height: 100vh
}
.postArticle--series {
--section-card-gutter:1em;--section-card-width:23.5em;--section-drag-index-offset:0;--section-drop-index-offset:0;margin-left: calc((50vw - 1000px / 2));
padding-right: calc((50vw - 1000px / 2) + var(--section-card-width) - var(--section-card-gutter))
}
.postArticle--series .postArticle-content {
width: calc(var(--section-count) * var(--section-card-width));
height: 40em
}
.postArticle--series .postArticle-after {
transform: translateX(calc(var(--section-count) * var(--section-card-width)))
}
.section--card {
box-shadow: 0 .25em .75em rgba(0,0,0,.05);
transform: translateX(calc((var(--section-index) + var(--section-drop-index-offset) + var(--section-drag-index-offset)) * var(--section-card-width)));
z-index: var(--section-index)
}
.section--card.is-dragging,.section--card.is-dragging~.section--card {
--section-drag-index-offset:-1}
.section--card.is-dropTarget,.section--card.is-dropTarget~.section--card {
--section-drop-index-offset:1}
.section--card.is-dragging {
z-index: var(--section-count)
}
.section--card:hover {
box-shadow: 0 .375em 1em rgba(0,0,0,.1)
}
.section--card.is-withGrafSelection {
box-shadow: 0 .625em 1.5em rgba(0,0,0,.15)
}
.section--card.is-sectionFocused {
box-shadow: 0 .625em 1.5em rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.3)
}
.section--card.is-sectionFocused.is-imageBackgrounded {
box-shadow: 0 .625em 1.5em rgba(0,0,0,.15)
}
.section--card.is-sectionFocused.is-imageBackgrounded .section-backgroundImage {
box-shadow: inset 0 0 0 1px rgba(0,0,0,.3)
}
.seriesEditor-addCard {
transition: box-shadow .2s ease-in-out,color .2s ease-in-out;
box-shadow: 0 .25em .75em rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.05)
}
.seriesEditor-addCard:hover {
box-shadow: 0 .375em 1em rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05)
}
.seriesEditor-cardDropPlaceholder {
--section-index:-1;transform: translateX(calc(var(--section-index) * var(--section-card-width)))
}
@media (max-width: 1040px) {
.postArticle--series {
margin-left:20px;
padding-right: calc(20px + var(--section-card-width) - var(--section-card-gutter))
}
}
.sectionLayout--insetColumn {
max-width: 700px;
width: 100%;
margin: 0 auto;
box-sizing: border-box
}
.postArticle--full .sectionLayout--insetColumn {
max-width: 740px;
padding-left: 20px;
padding-right: 20px
}
.postArticle--series .sectionLayout--insetColumn {
padding-left: 1.25em;
padding-right: 1.25em
}
.postArticle--sequence .sectionLayout--insetColumn {
max-width: none;
padding-left: 0;
padding-right: 0
}
.postArticle--short .sectionLayout--insetColumn {
padding-left: 0;
padding-right: 0
}
.sectionLayout--outsetColumn,.sectionLayout--outsetRow {
max-width: 1000px;
width: 100%;
margin: 0 auto;
box-sizing: border-box
}
.sectionLayout--outsetColumn:after,.sectionLayout--outsetColumn:before,.sectionLayout--outsetRow:after,.sectionLayout--outsetRow:before {
display: table;
content: " "
}
.sectionLayout--outsetColumn:after,.sectionLayout--outsetRow:after {
clear: both
}
.sectionLayout--fullWidth {
width: 100%
}
.markup--em:not(.markup--mixtapeEmbed-em) {
font-feature-settings: "liga" on,"salt" on;
-moz-font-feature-settings: "liga" on,"salt" on;
-webkit-font-feature-settings: "liga" on,"salt" on
}
.markup--comment {
display: none;
margin: 0 2px 0 1px;
background: rgba(80,171,201,.1);
color: rgba(88,151,172,.9);
border: 1px solid rgba(80,171,201,.25);
box-sizing: border-box
}
body.is-postEditMode .markup--comment {
display: inline
}
.markup--blockquote-em,.markup--figure-em,.markup--h2-em,.markup--h3-em,.markup--h4-em,.markup--pullquote-em,.markup--sectionCaption-em {
font-style: normal
}
.markup--h4-strong {
font-weight: inherit
}
.markup--anchor {
-webkit-tap-highlight-color: rgba(0,0,0,.44)
}
.markup--user {
color: #00ab6b;
text-decoration: none
}
.is-postEditMode .postArticle-content a[rel=token],.markup--query {
color: #00ab6b;
text-decoration: none;
background-image: none!important
}
.supplementalPostContent {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .3s,opacity .3s 0s
}
.is-supplementalPostContentLoaded .supplementalPostContent {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s,opacity .3s 0s
}
.graf--figure {
position: relative;
clear: both;
outline: 0;
box-sizing: border-box;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
z-index: 100
}
.graf--figure.is-partialWidth {
clear: none;
float: left;
padding: 5px;
box-sizing: content-box
}
.sectionLayout--outsetRow .graf--figure.is-partialWidth:first-child {
padding-left: 0
}
.sectionLayout--outsetRow .graf--figure.is-partialWidth:last-child {
padding-right: 0
}
.sectionLayout--outsetRow[data-paragraph-count="2"] {
padding-left: 10px
}
.sectionLayout--outsetRow[data-paragraph-count="2"] .is-partialWidth:first-child {
margin-left: -10px
}
.sectionLayout--outsetRow[data-paragraph-count="3"] {
padding-left: 20px
}
.sectionLayout--outsetRow[data-paragraph-count="3"] .is-partialWidth:first-child {
margin-left: -20px
}
.graf--figure.graf--layoutOutsetRow {
clear: both
}
.graf-image,.graf-imageAnchor,.iframeContainer,.iframeContainer>iframe {
display: block;
position: relative;
margin: auto;
max-width: 100%;
box-sizing: border-box
}
.graf--layoutOutsetCenter {
padding: 5px 0
}
.graf--layoutOutsetCenter .graf-image {
margin: 0
}
.graf--layoutConstrainedHeightPreview {
overflow: hidden
}
.graf--layoutConstrainedHeightPreview>.aspectRatioPlaceholder {
float: left
}
.graf--layoutInsetLeft,.graf--layoutOutsetLeft {
float: left;
margin-right: 30px;
padding-top: 10px;
padding-bottom: 10px
}
.graf--layoutInsetRight {
float: right;
padding-top: 6px;
padding-left: 20px;
width: 35%
}
.graf--layoutInsetLeft {
width: 50%
}
.streamItem .graf--layoutInsetLeft {
width: 30%;
margin-right: 10px
}
.graf--layoutOutsetLeft {
width: 75%
}
.graf--layoutOutsetLeft {
margin-left: -150px
}
.graf--layoutFillWidth .imageCaption {
padding-bottom: 10px
}
.imageCaption {
position: relative;
left: 0;
width: 100%;
top: 0;
margin-top: 10px;
color: rgba(0,0,0,.6);
outline: 0;
text-align: center;
z-index: 300
}
section.is-imageBackgrounded .imageCaption,section[data-background-color]:not([data-background-color$=Light]) .imageCaption {
color: rgba(255,255,255,.65)
}
.graf--layoutFillWidth>.imageCaption:before,.graf--layoutOutsetCenter>.imageCaption:before,.graf--layoutOutsetLeft>.imageCaption:before,.is-partialWidth>.imageCaption:before,.postArticle--short .imageCaption:before {
content: none
}
.graf--layoutFillWidth>.imageCaption,.graf--layoutOutsetCenter>.imageCaption {
text-align: center;
margin: 10px auto 0
}
.graf--layoutFillWidth>.imageCaption {
max-width: 1000px
}
.graf--sectionCaption {
display: block;
font-size: 16px;
font-style: italic;
text-align: center
}
.section-captionContent,section.is-darkBackgrounded>.section-captionContent {
position: absolute;
top: 100%;
width: 100%;
display: block;
color: rgba(0,0,0,.6);
left: 0;
margin-top: 10px
}
.aspectRatioPlaceholder-fill {
display: block
}
.aspectRatioPlaceholder {
position: relative;
width: 100%;
margin: 0 auto;
display: block
}
.aspectRatioPlaceholder.is-locked .catalog-image,.aspectRatioPlaceholder.is-locked .graf-dropCapImage,.aspectRatioPlaceholder.is-locked .graf-image,.aspectRatioPlaceholder.is-locked .graf-imageAnchor,.aspectRatioPlaceholder.is-locked .iframeContainer,.aspectRatioPlaceholder.is-locked .iframeContainer>iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.graf--li.graf--containsTK:after,.graf.graf--containsTK:not(.graf--li):before {
content: 'TK';
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 700;
font-style: normal;
font-size: 14px;
letter-spacing: .1em;
color: #e7af0e;
position: absolute;
left: -48px;
margin-top: 6px
}
.graf--blockquote.graf--containsTK:before {
margin-left: -3px
}
.graf--layoutInsetLeft+.graf--containsTK:before,.graf--layoutOutsetLeft+.graf--containsTK:before {
margin-left: -160px
}
.lockedPostHeader {
height: 60px;
font-size: 14px;
color: rgba(0,0,0,.44);
border-bottom: solid 1px rgba(0,0,0,.15)
}
.lockedPostHeader .svgIcon {
fill: rgba(0,0,0,.44);
margin-right: 10px
}
.postMetaHeader {
padding-top: 35px
}
.postMetaHeader-socialProof2 .button--chromeless,.postMetaHeader-socialProof2 .link,.postMetaHeader-socialProof2 .postMetaInline {
font-size: 13px
}
.postActionsBar {
visibility: hidden;
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 0;
z-index: 500;
transition: visibility 0s linear .3s
}
.postActionsBar.is-visible {
visibility: visible;
transition-delay: 0s
}
.postActionsBar-container {
position: relative;
height: 0;
transform: translateZ(0)
}
.postActionsBar-content {
box-sizing: border-box;
position: absolute;
width: 100%;
bottom: 0;
transform: translateY(100%);
transition: transform .3s
}
.postActionsBar.is-visible .postActionsBar-content {
transform: translateY(0)
}
.postActions {
background: #fff;
padding-bottom: 1px
}
.postActions .avatar-text,.postActionsBar .avatar-text {
font-size: 14px;
color: rgba(0,0,0,.6)
}
.postActionsBar .button--follow.is-active,.postActionsBar .middotDivider {
font-size: 14px;
color: rgba(0,0,0,.44)
}
.postActionsBar .followState.buttonSet-inner {
margin-left: 0
}
.postActions .buttonSet-separator,.postActionsBar .buttonSet-separator {
background-color: rgba(0,0,0,.15);
margin: 0 16px
}
.postActionsBar .buttonSet-separator--readNext {
margin: 12px 16px 0 12px
}
.letterHeader {
position: relative;
line-height: 1.45
}
.postArticle--full.postArticle--letter>.postArticle-content .section--first {
padding-top: 20px
}
.postArticle--full.postArticle--letter .postMetaHeader {
display: none
}
.postArticle--full.postArticle--letter>.postArticle-content {
padding-top: 0
}
.postArticle--full.postArticle--letter>.postArticle-content .section--first:not(.is-imageBackgrounded):before {
content: '';
text-align: center;
display: block;
margin: 0 auto 30px;
height: 1px;
max-width: 700px;
background-color: rgba(0,0,0,.15)
}
.postArticle.postArticle--short:not(.postArticle--letter) {
padding-top: 5px;
padding-bottom: 0
}
.postArticle--short .postArticle-content {
cursor: pointer
}
.postArticle--short .postArticle-content {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0
}
.postArticle--short .graf--blockquote {
padding-left: 17px;
margin-left: -20px
}
.postArticle--short .graf--pullquote {
padding-left: 30px
}
.postArticle--short .graf--pre {
padding: 15px
}
.postArticle--short .graf--pre+.graf--pre {
margin-top: 0;
padding-top: 3px
}
.postArticle--short .graf--layoutOutsetLeft {
width: 100%;
margin-left: 0;
margin-right: 0;
float: none
}
.postArticle #ad01,.postArticle #ad02 {
display: block!important;
visibility: visible!important
}
.iframeContainer {
overflow: auto;
-webkit-overflow-scrolling: touch
}
.iframeContainer>iframe {
transform: translateZ(0)
}
.v-thirdParty.graf--iframe {
border: 2px solid #02b875
}
.v-thirdParty.graf--iframe::after {
content: "Third-party embed";
position: absolute;
right: -2px;
background: #02b875;
border: 2px solid #02b875;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 2px 5px;
color: #fff;
font-size: 11px
}
@media (max-width: 991px) {
.graf--layoutInsetLeft.graf--iframe,.graf--layoutOutsetCenter,.graf--layoutOutsetLeft {
width:100%;
margin-left: 0;
margin-right: 0;
float: none
}
.graf--layoutInsetRight {
width: 30%
}
.graf-image {
width: 100%;
height: auto
}
.graf--layoutFillWidth .imageCaption,.graf--layoutOutsetCenter .imageCaption,.sectionLayout--outsetRow .imageCaption {
padding-left: 30px;
padding-right: 30px;
box-sizing: border-box
}
}
@media (max-width: 767px) {
.postArticle-content {
margin-bottom:10px
}
.lockedPostHeader {
margin-bottom: 20px
}
.postMetaHeader {
padding-top: 20px
}
.graf--blockquote {
padding-left: 17px;
margin-left: -20px
}
.graf--pullquote {
padding-left: 30px
}
.popover-upvotes[data-count="0"] {
display: none
}
.popover-upvotes {
display: block
}
.postArticle--full.postArticle--letter>.postArticle-content .section--first:not(.is-imageBackgrounded):before {
margin-left: 20px;
margin-right: 20px
}
.letterHeader .infoCard-actions {
margin-top: -5px;
margin-bottom: -10px
}
.postArticle.postArticle--short {
padding-bottom: 10px
}
.postActionsBar-content {
border-radius: 0
}
.postActions .avatar-text,.postActionsBar .avatar-text,.postActionsBar .middotDivider {
display: none
}
}
@media print {
body {
overflow: hidden
}
body.postShowScreen * {
visibility: hidden
}
body.postShowScreen .butterBar,body.postShowScreen .butterBar *,body.postShowScreen .postArticle-content,body.postShowScreen .postArticle-content *,body.postShowScreen .postMetaHeader,body.postShowScreen .postMetaHeader * {
visibility: visible
}
@page {
margin-top: .75in;
margin-bottom: .75in
}
body.postShowScreen .sectionLayout--insetColumn {
max-width: 4.95in
}
body {
color: #000;
orphans: 2;
widows: 2
}
.graf--h2,.graf--h3 {
color: #000
}
.graf--h4,section.is-imageBackgrounded .graf--h4,section[data-background-color]:not([data-background-color$=Light]) .graf--h4 {
color: rgba(0,0,0,.6)
}
.graf--blockquote {
border-left: .17em solid #000
}
ul.postList>li:before {
padding-top: 3px
}
.graf--figure {
page-break-inside: avoid
}
.is-sectionUsingCanvas.is-darkBackgrounded .section-background {
display: none
}
.is-sectionUsingCanvas.is-darkBackgrounded:after,.is-sectionUsingCanvas.is-darkBackgrounded:not(.section--first):before {
content: '';
display: block;
position: absolute;
height: 1px;
left: 50%;
margin-left: -50px;
width: 100px;
background-color: rgba(0,0,0,.15)
}
.is-sectionUsingCanvas.is-darkBackgrounded:before {
margin-top: -40px
}
.is-sectionUsingCanvas.is-darkBackgrounded:after {
margin-top: 30px
}
.is-sectionUsingCanvas.is-darkBackgrounded .graf--h2,.is-sectionUsingCanvas.is-darkBackgrounded .graf--h3,.is-sectionUsingCanvas.is-darkBackgrounded .section-inner {
color: #000
}
.markup--quote {
background: 0 0!important
}
.section-image--aspectRatioViewport.section--bottomCenter .section-content,.section-image--aspectRatioViewport.section--middleCenter .section-content,.section-image--aspectRatioViewport.section--topCenter .section-content {
padding: 0
}
.postArticle-content {
padding-top: 0
}
.postArticle-content .section--first {
padding-top: 200px
}
.postArticle--full.postArticle--response>.postArticle-content .section--first {
padding-top: 0
}
.postArticle--full.postArticle--response>.postArticle-content .section--first:not(.is-imageBackgrounded):before {
display: none
}
.infoCard-actions,.postActionsBar-content {
display: none
}
}
.compactPostPreview-avatar {
display: table-cell;
padding-right: 18px;
vertical-align: top
}
.compactPostPreview-title {
display: table-cell;
vertical-align: top
}
.postArticle-content .graf--p {
--x-height-multiplier:0.35;--baseline-multiplier:0.179;font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
letter-spacing: .01rem;
font-weight: 400;
font-style: normal;
font-size: 21px;
line-height: 1.58;
letter-spacing: -.003em
}
.graf--h2 {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
letter-spacing: -.02em;
font-weight: 700;
font-style: normal;
font-size: 40px;
margin-left: -2.5px;
line-height: 1.04;
letter-spacing: -.03em
}
.graf--h3 {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 32px;
margin-left: -2px;
line-height: 1.15;
letter-spacing: -.02em
}
.graf--h4 {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
letter-spacing: -.02em;
font-weight: 700;
font-style: normal;
font-size: 24px;
margin-left: -1.5px;
line-height: 1.22;
letter-spacing: -.018em
}
.graf--title {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
letter-spacing: -.02em;
font-weight: 700;
font-style: normal;
font-size: 40px;
margin-left: -2.5px;
line-height: 1.04;
letter-spacing: -.028em
}
.graf--subtitle {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
letter-spacing: -.02em;
font-weight: 300;
font-style: normal;
font-size: 27px;
margin-left: -1.69px;
line-height: 1.22;
letter-spacing: -.022em
}
.graf--kicker {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
letter-spacing: -.02em;
font-weight: 300;
font-style: normal;
font-size: 20px;
margin-left: -1.25px;
line-height: 1.22;
letter-spacing: -.022em
}
.graf--blockquote {
--x-height-multiplier:0.35;--baseline-multiplier:0.179;font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
letter-spacing: .01rem;
font-weight: 400;
font-style: italic;
font-size: 21px;
line-height: 1.58;
letter-spacing: -.003em
}
.graf--pullquote {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-slab-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
font-weight: 400;
font-style: italic;
font-size: 28px;
margin-left: -1.75px;
line-height: 1.48;
letter-spacing: -.014em
}
.markup--pullquote-em,.markup--pullquote-strong {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-slab-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
font-weight: 400;
font-style: italic
}
.graf--li {
--x-height-multiplier:0.35;--baseline-multiplier:0.179;font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
letter-spacing: .01rem;
font-weight: 400;
font-style: normal;
font-size: 21px;
line-height: 1.58;
letter-spacing: -.003em
}
ul.postList>li:before {
font-size: 16.8px
}
.markup--code {
font-family: inherit
}
.graf--pre,.markup--blockquote-code,.markup--li-code,.markup--p-code {
font-family: Menlo,Monaco,"Courier New",Courier,monospace;
font-size: 16px
}
.markup--blockquote-code {
font-style: normal
}
hr.section-divider:before {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-slab-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
font-weight: 400;
font-style: italic;
font-size: 28px;
letter-spacing: .6em
}
.graf--p.graf--startsWithSingleQuote {
text-indent: -.2em
}
.graf--p.graf--startsWithDoubleQuote {
text-indent: -.4em
}
.graf--h4.graf--startsWithSingleQuote {
text-indent: -.18em
}
.graf--h4.graf--startsWithDoubleQuote {
text-indent: -.34em
}
.graf--h2.graf--startsWithSingleQuote,.graf--h3.graf--startsWithSingleQuote {
text-indent: -.21em
}
.graf--h2.graf--startsWithDoubleQuote,.graf--h3.graf--startsWithDoubleQuote {
text-indent: -.415em
}
.graf--pullquote.graf--startsWithSingleQuote {
text-indent: -.18em
}
.graf--pullquote.graf--startsWithDoubleQuote {
text-indent: -.32em
}
.graf--startsWithDoubleQuote[data-align=center],.graf--startsWithSingleQuote[data-align=center] {
text-indent: 0
}
.graf-dropCap {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
letter-spacing: -.02em;
font-weight: 700;
font-style: normal;
font-size: 64px;
padding-top: 7px;
margin-left: -5px;
margin-right: 7px;
letter-spacing: -.03em;
line-height: .83;
margin-bottom: -.08em
}
.graf--hasDropCapImage .graf-dropCap {
padding-top: 10px;
margin-left: 0;
margin-right: 18px
}
.graf-dropCapQuote {
font-size: 44px;
line-height: .92;
margin-left: -3px;
margin-right: 3px;
vertical-align: top
}
.graf--p.graf--startsWithSingleQuote>.graf-dropCap {
text-indent: -.13em;
margin-right: 6px
}
.graf--p.graf--startsWithDoubleQuote>.graf-dropCap {
text-indent: -.28em;
margin-right: 6px
}
.graf--p.graf--hasDropCap.graf--startsWithDoubleQuote,.graf--p.graf--hasDropCap.graf--startsWithSingleQuote {
text-indent: 0
}
.graf--blockquote[data-align=center],.graf--h2[data-align=center],.graf--h3[data-align=center],.graf--h4[data-align=center],p[data-align=center] {
text-align: center
}
.graf--sectionCaption,.imageCaption {
--x-height-multiplier:0.363;--baseline-multiplier:0.157;font-family: medium-content-sans-serif-font,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif;
letter-spacing: -.02em;
font-weight: 300;
font-style: normal;
font-feature-settings: "liga" on,"lnum" on;
-moz-font-feature-settings: "liga" on,"lnum" on;
-webkit-font-feature-settings: "liga" on,"lnum" on;
font-size: 14px;
line-height: 1.4;
color: rgba(0,0,0,.6);
letter-spacing: 0
}
.postArticle--short .postArticle-content .graf--p {
font-size: 18px;
line-height: 1.58;
letter-spacing: -.004em
}
.postArticle--short .graf--h2 {
font-size: 29px;
margin-left: -1.81px;
line-height: 1.04;
letter-spacing: -.03em
}
.postArticle--short .graf--h3 {
font-size: 25px;
margin-left: -1.56px;
line-height: 1.15;
letter-spacing: -.02em
}
.postArticle--short .graf--h4 {
font-size: 21px;
margin-left: -1.31px;
line-height: 1.22;
letter-spacing: -.018em
}
.postArticle--short .graf--blockquote {
font-size: 18px;
line-height: 1.58;
letter-spacing: -.004em
}
.postArticle--short .graf--pullquote {
font-size: 24px;
margin-left: -1.5px;
line-height: 1.4;
letter-spacing: -.008em
}
.postArticle--short .graf--li {
font-size: 18px;
line-height: 1.58;
letter-spacing: -.004em
}
.postArticle--short ul.postList>li:before {
font-size: 14.4px
}
.postArticle--short .graf--pre,.postArticle--short .markup--blockquote-code,.postArticle--short .markup--li-code,.postArticle--short .markup--p-code {
font-size: 14px
}
.postArticle--short .graf[data-align=center] {
text-align: left
}
.postArticle--short .graf--title {
font-size: 29px;
margin-left: -1.81px;
line-height: 1.04;
letter-spacing: -.028em
}
.postArticle--short .graf--subtitle {
font-size: 23px;
margin-left: -1.44px;
line-height: 1.22;
letter-spacing: -.022em
}
@media all and (max-width: 767px) {
.postArticle-content .graf--p {
font-size:18px;
line-height: 1.58;
letter-spacing: -.004em
}
.graf--h2 {
font-size: 32px;
margin-left: -2px;
line-height: 1.04;
letter-spacing: -.03em
}
.graf--h3 {
font-size: 28px;
margin-left: -1.75px;
line-height: 1.15;
letter-spacing: -.02em
}
.graf--h4 {
font-size: 22px;
margin-left: -1.38px;
line-height: 1.22;
letter-spacing: -.018em
}
.graf--blockquote {
font-size: 18px;
line-height: 1.58;
letter-spacing: -.004em
}
.graf--pullquote {
font-size: 22px;
margin-left: -1.38px;
line-height: 1.4;
letter-spacing: -.008em
}
.graf--li {
font-size: 18px;
line-height: 1.58;
letter-spacing: -.004em
}
ul.postList>li:before {
font-size: 14.4px
}
.graf--pre,.markup--p-code {
font-size: 14px
}
.postArticle[lang] .graf--blockquote,.postArticle[lang] .graf--li,.postArticle[lang] .graf--p {
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 2;
-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-lines: 2
}
.graf-dropCap {
font-size: 54.85px;
padding-top: 3.5px;
margin-left: -4px;
margin-right: 6px
}
.graf--hasDropCapImage .graf-dropCap {
margin-right: 14px
}
.graf-dropCapQuote {
margin-right: 2px
}
.graf--p.graf--startsWithDoubleQuote>.graf-dropCap {
text-indent: -8px;
margin-right: 6px
}
hr.section-divider {
font-size: 22px;
line-height: 1.4
}
.graf--title {
font-size: 32px;
margin-left: -2px;
line-height: 1.04;
letter-spacing: -.028em
}
.graf--subtitle {
font-size: 23px;
margin-left: -1.44px;
line-height: 1.22;
letter-spacing: -.022em
}
.postArticle--short .postArticle-content .graf--p {
font-size: 18px;
line-height: 1.58;
letter-spacing: -.004em
}
.postArticle--short .graf--h2 {
font-size: 28px;
margin-left: -1.75px;
line-height: 1.12;
letter-spacing: -.022em
}
.postArticle--short .graf--h3 {
font-size: 28px;
margin-left: -1.75px;
line-height: 1.12;
letter-spacing: -.022em
}
.postArticle--short .graf--h4 {
font-size: 24px;
margin-left: -1.5px;
line-height: 1.18;
letter-spacing: -.022em
}
.postArticle--short .graf--blockquote {
font-size: 18px;
line-height: 1.58;
letter-spacing: -.004em
}
.postArticle--short .graf--pullquote {
font-size: 22px;
margin-left: -1.38px;
line-height: 1.4;
letter-spacing: -.008em
}
.postArticle--short .graf--li {
font-size: 18px;
line-height: 1.58;
letter-spacing: -.004em
}
.postArticle--short hr.section-divider {
font-size: 22px;
line-height: 1.4
}
}
@media print {
.postArticle-content .graf--p {
font-size: 14.28px
}
.graf--h2 {
font-size: 35.36px;
margin-left: -2.21px
}
.graf--h3 {
font-size: 24.48px;
margin-left: -1.53px
}
.graf--h4 {
font-size: 19.04px;
margin-left: -1.19px
}
.graf--blockquote {
font-size: 14.28px
}
.graf--pullquote {
font-size: 19.04px;
margin-left: -1.19px
}
.graf--li {
font-size: 14.28px
}
ul.postList>li:before {
font-size: 11.42px
}
.graf--pre {
font-size: 10.88px
}
.markup--code {
font-size: 10.88px
}
hr.section-divider:before {
font-size: 19.04px
}
.graf-dropCap {
font-size: 43.52px
}
.graf-dropCapQuote {
font-size: 29.92px
}
.graf--sectionCaption,.imageCaption {
font-size: 9.52px
}
}
.postArticle[lang=ja] {
font-feature-settings: "liga" on,"lnum" on;
-moz-font-feature-settings: "liga" on,"lnum" on;
-webkit-font-feature-settings: "liga" on,"lnum" on
}
.browser-chrome .postArticle[lang=ja],.browser-chrome .postArticle[lang=ko],.browser-chrome .postArticle[lang=zh-Hant],.browser-chrome .postArticle[lang=zh-TW],.browser-chrome .postArticle[lang=zh] {
text-rendering: optimizeSpeed!important;
font-feature-settings: normal!important
}
.postArticle-content .graf--p {
margin-top: 38px
}
.graf--p.graf-after--blockquote,.postArticle-content .graf--p.graf-after--p,.postList+.graf--p {
margin-top: 29px
}
.graf--p.graf-after--h2 {
margin-top: 18px
}
.graf--p.graf-after--h3 {
margin-top: 8px
}
.graf--p.graf-after--h4 {
margin-top: 6px
}
.graf--p.graf-after--pullquote {
margin-top: 54px
}
.graf--blockquote {
margin-top: 38px
}
.graf--blockquote.graf-after--blockquote {
margin-top: 0;
padding-top: 27px
}
.postArticle-content .graf--blockquote.graf-after--p,.postList+.graf--blockquote {
margin-top: 29px
}
.graf--blockquote.graf-after--h2 {
margin-top: 18px
}
.graf--blockquote.graf-after--h3 {
margin-top: 12px
}
.graf--blockquote.graf-after--h4 {
margin-top: 10px
}
.graf--blockquote.graf-after--pullquote {
margin-top: 54px
}
.postList {
margin-top: 38px
}
.graf--blockquote+.postList,.postArticle-content .graf--p+.postList,.postList+.postList {
margin-top: 29px
}
.graf--h2+.postList {
margin-top: 18px
}
.graf--h3+.postList {
margin-top: 12px
}
.graf--h4+.postList {
margin-top: 10px
}
.graf--pullquote+.postList {
margin-top: 54px
}
.graf--pullquote {
margin-top: 64px
}
.graf--pullquote.graf-after--blockquote,.graf--pullquote.graf-after--p,.postList+.graf--pullquote {
margin-top: 55px
}
.graf--pullquote.graf-after--h2 {
margin-top: 58px
}
.graf--pullquote.graf-after--h3 {
margin-top: 28px
}
.graf--pullquote.graf-after--h4 {
margin-top: 28px
}
.graf--pullquote.graf-after--pullquote {
margin-top: 24px
}
.graf--h2 {
margin-top: 63px
}
.graf--h2.graf-after--blockquote,.graf--h2.graf-after--p,.postList+.graf--h2 {
margin-top: 54px
}
.graf--h2.graf-after--h3 {
margin-top: -3px
}
.graf--h2.graf-after--h4 {
margin-top: -3px
}
.graf--h2.graf-after--pullquote {
margin-top: 51px
}
.graf--h3 {
margin-top: 53px
}
.graf--h3.graf-after--blockquote,.graf--h3.graf-after--p,.postList+.graf--h3 {
margin-top: 56px
}
.graf--h3.graf-after--h2 {
margin-top: 1px
}
.graf--h3.graf-after--h4 {
margin-top: 31px
}
.graf--h3.graf-after--pullquote {
margin-top: 53px
}
.graf--h4 {
margin-top: 39px
}
.graf--h4.graf-after--blockquote,.graf--h4.graf-after--p,.postList+.graf--h4 {
margin-top: 30px
}
.graf--h4.graf-after--h2 {
margin-top: 3px
}
.graf--h4.graf-after--h3 {
margin-top: 31px
}
.graf--h4.graf-after--pullquote {
margin-top: 55px
}
.graf--title {
margin-top: 39px
}
.graf--kicker+.graf--title {
margin-top: 5px
}
.graf--subtitle.graf-after--h2,.graf--subtitle.graf-after--h3 {
margin-top: 5px;
margin-bottom: 22px
}
.graf--subtitle+.graf--h3 {
margin-top: 45px
}
.graf--title+.graf--p {
margin-top: 10px
}
.graf--subtitle+.graf--p {
margin-top: 10px
}
.graf--figure,.graf--mixtapeEmbed,.graf--pre {
margin-top: 52px
}
.graf--figure.graf-after--blockquote,.graf--figure.graf-after--p,.graf--mixtapeEmbed.graf-after--blockquote,.graf--mixtapeEmbed.graf-after--p,.graf--pre.graf-after--blockquote,.graf--pre.graf-after--p,.postList+.graf--figure,.postList+.graf--mixtapeEmbed,.postList+.graf--pre {
margin-top: 43px
}
.graf--figure.graf-after--h2,.graf--mixtapeEmbed.graf-after--h2,.graf--pre.graf-after--h2 {
margin-top: 46px
}
.graf--figure.graf-after--h3,.graf--mixtapeEmbed.graf-after--h3,.graf--pre.graf-after--h3 {
margin-top: 44px
}
.graf--figure.graf-after--h4,.graf--mixtapeEmbed.graf-after--h4,.graf--pre.graf-after--h4 {
margin-top: 44px
}
.graf--figure.graf-after--pullquote,.graf--mixtapeEmbed.graf-after--pullquote,.graf--pre.graf-after--pullquote {
margin-top: 68px
}
.graf--layoutFillWidth,.graf--layoutFillWidth.graf-after--blockquote,.graf--layoutFillWidth.graf-after--p,.postList+.graf--layoutFillWidth {
margin-top: 80px;
margin-bottom: 80px
}
.graf--layoutFillWidth+.graf--layoutFillWidth {
margin-top: -80px
}
hr.section-divider {
margin-top: 52px;
margin-bottom: 42px
}
section.is-backgrounded {
padding-top: 80px;
padding-bottom: 80px;
margin-top: 80px;
margin-bottom: 80px
}
section.is-imageBackgrounded {
padding-bottom: 80px
}
section.is-backgrounded+section.is-backgrounded,section[data-background-color]+section .graf--leading.graf--layoutFillWidth,section[data-background-color]:not(.section--first) .graf--leading.graf--layoutFillWidth {
margin-top: -80px
}
section.is-imageBackgrounded+section.is-imageBackgrounded {
margin-top: -81px
}
.section--cover+section .graf--leading {
margin-top: 13px
}
.sectionLayout--outsetColumn,.sectionLayout--outsetRow {
margin-top: 52px
}
.sectionLayout--outsetColumn+.sectionLayout--fullWidth,.sectionLayout--outsetColumn+.sectionLayout--insetColumn,.sectionLayout--outsetRow+.sectionLayout--fullWidth,.sectionLayout--outsetRow+.sectionLayout--insetColumn {
margin-top: 52px
}
.postArticle--short .postArticle-content .graf--p {
margin-top: 24px
}
.postArticle--short .graf--p.graf-after--blockquote,.postArticle--short .postArticle-content .graf--p.graf-after--p,.postArticle--short .postList+.graf--p {
margin-top: 15px
}
.postArticle--short .graf--p.graf-after--h2 {
margin-top: 14px
}
.postArticle--short .graf--p.graf-after--h3 {
margin-top: 6px
}
.postArticle--short .graf--p.graf-after--h4 {
margin-top: 4px
}
.postArticle--short .graf--p.graf-after--pullquote {
margin-top: 12px
}
.postArticle--short .graf--blockquote {
margin-top: 24px
}
.postArticle--short .graf--blockquote.graf-after--blockquote {
margin-top: 0;
padding-top: 13px
}
.postArticle--short .postArticle-content .graf--blockquote.graf-after--p,.postArticle--short .postList+.graf--blockquote {
margin-top: 15px
}
.postArticle--short .graf--blockquote.graf-after--h2 {
margin-top: 14px
}
.postArticle--short .graf--blockquote.graf-after--h3 {
margin-top: 8px
}
.postArticle--short .graf--blockquote.graf-after--h4 {
margin-top: 6px
}
.postArticle--short .graf--blockquote.graf-after--pullquote {
margin-top: 12px
}
.postArticle--short .postList {
margin-top: 24px
}
.postArticle--short .graf--blockquote+.postList,.postArticle--short .postArticle-content .graf--p+.postList,.postArticle--short .postList+.postList {
margin-top: 15px
}
.postArticle--short .graf--h2+.postList {
margin-top: 14px
}
.postArticle--short .graf--h3+.postList {
margin-top: 8px
}
.postArticle--short .graf--h4+.postList {
margin-top: 6px
}
.postArticle--short .graf--pullquote+.postList {
margin-top: 12px
}
.postArticle--short .graf--pullquote {
margin-top: 22px
}
.postArticle--short .graf--blockquote+.postList,.postArticle--short .graf--pullquote.graf-after--blockquote,.postArticle--short .graf--pullquote.graf-after--p {
margin-top: 13px
}
.postArticle--short .graf--pullquote.graf-after--h2 {
margin-top: 16px
}
.postArticle--short .graf--pullquote.graf-after--h3 {
margin-top: 20px
}
.postArticle--short .graf--pullquote.graf-after--h4 {
margin-top: 20px
}
.postArticle--short .graf--pullquote.graf-after--pullquote {
margin-top: 10px
}
.postArticle--short .graf--h2 {
margin-top: 21px
}
.postArticle--short .graf--h2.graf-after--blockquote,.postArticle--short .graf--h2.graf-after--p,.postArticle--short .postList+.graf--h2 {
margin-top: 12px
}
.postArticle--short .graf--h2.graf-after--h3 {
margin-top: -3px
}
.postArticle--short .graf--h2.graf-after--h4 {
margin-top: -3px
}
.postArticle--short .graf--h2.graf-after--pullquote {
margin-top: 9px
}
.postArticle--short .graf--h3 {
margin-top: 23px
}
.postArticle--short .graf--h3.graf-after--blockquote,.postArticle--short .graf--h3.graf-after--p,.postArticle--short .postList+.graf--h3 {
margin-top: 14px
}
.postArticle--short .graf--h3.graf-after--h2 {
margin-top: 1px
}
.postArticle--short .graf--h3.graf-after--h4 {
margin-top: 3px
}
.postArticle--short .graf--h3.graf-after--pullquote {
margin-top: 11px
}
.postArticle--short .graf--h4 {
margin-top: 25px
}
.postArticle--short .graf--h4.graf-after--blockquote,.postArticle--short .graf--h4.graf-after--p,.postArticle--short .postList+.graf--h4 {
margin-top: 16px
}
.postArticle--short .graf--h4.graf-after--h2 {
margin-top: 3px
}
.postArticle--short .graf--h4.graf-after--h3 {
margin-top: 9px
}
.postArticle--short .graf--h4.graf-after--pullquote {
margin-top: 13px
}
.postArticle--short .graf--figure,.postArticle--short .graf--mixtapeEmbed,.postArticle--short .graf--pre {
margin-top: 38px
}
.postArticle--short .graf--blockquote+.postList,.postArticle--short .graf--figure.graf-after--blockquote,.postArticle--short .graf--figure.graf-after--p,.postArticle--short .graf--mixtapeEmbed.graf-after--blockquote,.postArticle--short .graf--mixtapeEmbed.graf-after--p,.postArticle--short .graf--p+.postList,.postArticle--short .graf--pre.graf-after--blockquote,.postArticle--short .graf--pre.graf-after--p,.postArticle--short .postList+.graf--figure,.postArticle--short .postList+.graf--mixtapeEmbed,.postArticle--short .postList+.graf--pre,.postArticle--short .postList+.postList {
margin-top: 29px
}
.postArticle--short .graf--figure.graf-after--h2,.postArticle--short .graf--mixtapeEmbed.graf-after--h2,.postArticle--short .graf--pre.graf-after--h2 {
margin-top: 32px
}
.postArticle--short .graf--figure.graf-after--h3,.postArticle--short .graf--mixtapeEmbed.graf-after--h3,.postArticle--short .graf--pre.graf-after--h3 {
margin-top: 30px
}
.postArticle--short .graf--figure.graf-after--h4,.postArticle--short .graf--mixtapeEmbed.graf-after--h4,.postArticle--short .graf--pre.graf-after--h4 {
margin-top: 30px
}
.postArticle--short .graf--layoutFillWidth,.postArticle--short .graf--layoutFillWidth.graf-after--blockquote,.postArticle--short .graf--layoutFillWidth.graf-after--p {
margin-top: 29px;
margin-bottom: 29px
}
.postArticle--short .graf--figure.graf-after--pullquote,.postArticle--short .graf--mixtapeEmbed.graf-after--pullquote,.postArticle--short .graf--pre.graf-after--pullquote {
margin-top: 26px
}
.postArticle--short .graf--figure.is-partialWidth {
margin-top: 0
}
.postArticle--short .sectionLayout--outsetRow {
margin-top: 22px
}
.postArticle--short .section--first .sectionLayout--outsetRow:first-child {
margin-top: 0
}
.postArticle--short .sectionLayout--outsetColumn+.sectionLayout--fullWidth,.postArticle--short .sectionLayout--outsetColumn+.sectionLayout--insetColumn,.postArticle--short .sectionLayout--outsetRow+.sectionLayout--fullWidth,.postArticle--short .sectionLayout--outsetRow+.sectionLayout--insetColumn {
margin-top: 22px
}
.postArticle--short hr.section-divider {
margin-top: 38px;
margin-bottom: 28px
}
.postArticle--short .postArticle-content .section--first {
padding-top: 0
}
.postArticle--short .postArticle-content .graf--leading {
margin-top: 0
}
.postArticle--short .graf--title {
margin-top: 31px
}
.postArticle--short .graf--kicker+.graf--title {
margin-top: 5px
}
.postArticle--short .graf--subtitle.graf-after--h2,.postArticle--short .graf--subtitle.graf-after--h3 {
margin-top: 5px;
margin-bottom: 7px
}
.postArticle--short .graf--subtitle+.graf--h3 {
margin-top: 15px
}
.postArticle--short .graf--title+.graf--p {
margin-top: 10px
}
.postArticle--short .graf--subtitle+.graf--p {
margin-top: 10px
}
.postArticle--short .graf--leading {
margin-top: 0
}
@media (max-width: 767px) {
.postArticle-content .graf--p {
margin-top:30px
}
.graf--p.graf-after--blockquote,.postArticle-content .graf--p.graf-after--p,.postList+.graf--p {
margin-top: 21px
}
.graf--p.graf-after--h2 {
margin-top: 14px
}
.graf--p.graf-after--h3 {
margin-top: 8px
}
.graf--p.graf-after--h4 {
margin-top: 6px
}
.graf--p.graf-after--pullquote {
margin-top: 26px
}
.graf--blockquote {
margin-top: 30px
}
.graf--blockquote.graf-after--blockquote {
margin-top: 0;
padding-top: 19px
}
.postArticle-content .graf--blockquote.graf-after--p,.postList+.graf--blockquote {
margin-top: 21px
}
.graf--blockquote.graf-after--h2 {
margin-top: 14px
}
.graf--blockquote.graf-after--h3 {
margin-top: 8px
}
.graf--blockquote.graf-after--h4 {
margin-top: 6px
}
.graf--blockquote.graf-after--pullquote {
margin-top: 26px
}
.postList {
margin-top: 30px
}
.graf--blockquote+.postList,.postArticle-content .graf--p+.postList,.postList+.postList {
margin-top: 21px
}
.graf--h2+.postList {
margin-top: 14px
}
.graf--h3+.postList {
margin-top: 8px
}
.graf--h4+.postList {
margin-top: 6px
}
.graf--pullquote+.postList {
margin-top: 26px
}
.graf--pullquote {
margin-top: 36px
}
.graf--pullquote.graf-after--blockquote,.graf--pullquote.graf-after--p,.postList+.graf--pullquote {
margin-top: 27px
}
.graf--pullquote.graf-after--h2 {
margin-top: 30px
}
.graf--pullquote.graf-after--h3 {
margin-top: 20px
}
.graf--pullquote.graf-after--h4 {
margin-top: 20px
}
.graf--pullquote.graf-after--pullquote {
margin-top: 16px
}
.graf--h2 {
margin-top: 35px
}
.graf--h2.graf-after--blockquote,.graf--h2.graf-after--p,.postList+.graf--h2 {
margin-top: 26px
}
.graf--h2.graf-after--h3 {
margin-top: -3px
}
.graf--h2.graf-after--h4 {
margin-top: -3px
}
.graf--h2.graf-after--pullquote {
margin-top: 23px
}
.graf--h3 {
margin-top: 45px
}
.graf--h3.graf-after--blockquote,.graf--h3.graf-after--p,.postList+.graf--h3 {
margin-top: 28px
}
.graf--h3.graf-after--h2 {
margin-top: 1px
}
.graf--h3.graf-after--h4 {
margin-top: 23px
}
.graf--h3.graf-after--pullquote {
margin-top: 25px
}
.graf--h4 {
margin-top: 31px
}
.graf--h4.graf-after--blockquote,.graf--h4.graf-after--p,.postList+.graf--h4 {
margin-top: 22px
}
.graf--h4.graf-after--h2 {
margin-top: 3px
}
.graf--h4.graf-after--h3 {
margin-top: 23px
}
.graf--h4.graf-after--pullquote {
margin-top: 27px
}
.graf--figure,.graf--mixtapeEmbed,.graf--pre {
margin-top: 44px
}
.graf--figure.graf-after--blockquote,.graf--figure.graf-after--p,.graf--mixtapeEmbed.graf-after--blockquote,.graf--mixtapeEmbed.graf-after--p,.graf--pre.graf-after--blockquote,.graf--pre.graf-after--p,.postList+.graf--figure,.postList+.graf--mixtapeEmbed,.postList+.graf--pre {
margin-top: 35px
}
.graf--figure.graf-after--h2,.graf--mixtapeEmbed.graf-after--h2,.graf--pre.graf-after--h2 {
margin-top: 38px
}
.graf--figure.graf-after--h3,.graf--mixtapeEmbed.graf-after--h3,.graf--pre.graf-after--h3 {
margin-top: 36px
}
.graf--figure.graf-after--h4,.graf--mixtapeEmbed.graf-after--h4,.graf--pre.graf-after--h4 {
margin-top: 36px
}
.graf--figure.graf-after--pullquote,.graf--mixtapeEmbed.graf-after--pullquote,.graf--pre.graf-after--pullquote {
margin-top: 40px
}
.graf--layoutFillWidth,.graf--layoutFillWidth.graf-after--blockquote,.graf--layoutFillWidth.graf-after--p,.postList+.graf--layoutFillWidth {
margin-top: 52px;
margin-bottom: 52px
}
.graf--layoutFillWidth+.graf--layoutFillWidth {
margin-top: -52px
}
hr.section-divider {
margin-top: 44px;
margin-bottom: 34px
}
section.is-backgrounded {
padding-top: 52px;
padding-bottom: 52px;
margin-top: 52px;
margin-bottom: 52px
}
section.is-imageBackgrounded {
padding-bottom: 52px
}
section.is-backgrounded+section.is-backgrounded,section[data-background-color]+section .graf--leading.graf--layoutFillWidth,section[data-background-color]:not(.section--first) .graf--leading.graf--layoutFillWidth {
margin-top: -52px
}
section.is-imageBackgrounded+section.is-imageBackgrounded {
margin-top: -53px
}
.sectionLayout--outsetColumn,.sectionLayout--outsetRow {
margin-top: 44px
}
.sectionLayout--outsetColumn+.sectionLayout--fullWidth,.sectionLayout--outsetColumn+.sectionLayout--insetColumn,.sectionLayout--outsetRow+.sectionLayout--fullWidth,.sectionLayout--outsetRow+.sectionLayout--insetColumn {
margin-top: 44px
}
.graf--title {
margin-top: 31px
}
.graf--kicker+.graf--title {
margin-top: 5px
}
.graf--subtitle.graf-after--h2,.graf--subtitle.graf-after--h3 {
margin-top: 5px;
margin-bottom: 22px
}
.graf--subtitle+.graf--h3 {
margin-top: 37px
}
.graf--title+.graf--p {
margin-top: 10px
}
.graf--subtitle+.graf--p {
margin-top: 10px
}
}
.graf--layoutInsetLeft,.graf--layoutInsetRight,.graf--layoutOutsetLeft,.graf--leading.graf--layoutInsetLeft,.graf--leading.graf--layoutInsetRight,.graf--leading.graf--layoutOutsetLeft,.section--card .graf--leading,.section--first .graf--leading,.section--first .graf--leading.graf--layoutFillWidth,.section--first .graf--leading.graf--layoutFillWidthCroppedCover,.section--first.is-backgrounded,.section-image--aspectRatioViewport .graf--leading,.sectionLayout--outsetColumn .graf--figure,.sectionLayout--outsetColumn+.sectionLayout--outsetRow,.sectionLayout--outsetRow .graf--figure,.sectionLayout--outsetRow+.sectionLayout--outsetColumn,.sectionLayout--outsetRow+.sectionLayout--outsetRow {
--margin-top-multiplier:0;margin-top: 0
}
.section-image--aspectRatioViewport .graf--trailing,section.is-backgrounded:last-child,section[data-background-color] .graf--trailing.graf--layoutFillWidth {
margin-bottom: 0
}
@media print {
.graf--blockquote+.postList,.graf--blockquote.graf-after--blockquote,.graf--p.graf-after--blockquote,.postArticle-content .graf--blockquote.graf-after--p,.postArticle-content .graf--p+.postList,.postArticle-content .graf--p.graf-after--p,.postList+.graf--blockquote,.postList+.graf--p,.postList+.postList {
margin-top: 20px
}
}
.postArticle--series {
font-size: 16px
}
.postArticle--series .graf {
--font-size:1.125;--line-height:1.58;font-size: calc(1em * var(--font-size));
line-height: var(--line-height)
}
.postArticle--series .graf[data-align=center] {
text-align: center
}
.postArticle--series .graf--blockquote,.postArticle--series .graf--li,.postArticle--series .postArticle-content .graf--p {
--font-size:1.125;--line-height:1.58;letter-spacing: -.003em
}
.postArticle--series .graf--h2 {
--font-size:1.8125;--line-height:1.04;letter-spacing: -.03em;
margin-left: -.0625em
}
.postArticle--series .graf--h3 {
--font-size:2.5;--line-height:1.15;letter-spacing: -.02em;
margin-left: -.0625em
}
.postArticle--series .graf--h4 {
--font-size:1.75;--line-height:1.22;letter-spacing: -.018em;
margin-left: -.0625em
}
.postArticle--series .graf--title {
--font-size:1.8125;--line-height:1.04;letter-spacing: -.028em;
margin-left: -.0625em
}
.postArticle--series .graf--subtitle {
--font-size:1.4375;--line-height:1.22;letter-spacing: -.022em;
margin-left: -.0625em
}
.postArticle--series .graf--blockquote {
border-left: .1875em solid rgba(0,0,0,.8);
padding-left: .875em;
margin-left: -1.0625em;
padding-bottom: .125em
}
.postArticle--series .graf--pullquote {
--font-size:1.625;--line-height:1.48;padding-left: 0
}
.postArticle--series .postList>li:before {
width: 4.875em;
margin-left: -4.875em
}
.postArticle--series ol.postList>li:before {
padding-right: .75em
}
.postArticle--series ul.postList>li:before {
padding-top: .25em;
padding-right: .9375em
}
.postArticle--series .graf--li {
margin-left: 1.875em
}
@media (max-height: 820px) {
.postArticle--series {
font-size:16px
}
}
@media (max-height: 780px) {
.postArticle--series {
font-size:15px
}
}
@media (max-height: 740px) {
.postArticle--series {
font-size:14px
}
}
@media (max-height: 700px) {
.postArticle--series {
font-size:13px
}
}
@media (max-height: 660px) {
.postArticle--series {
font-size:12px
}
}
@media (max-height: 620px) {
.postArticle--series {
font-size:11px
}
}
@media (max-height: 580px) {
.postArticle--series {
font-size:10px
}
}
.postArticle--series {
--space-a:3.125;--space-b:2.375;--space-c:1.875;--margin-top-multiplier:1;--margin-bottom-multiplier:1;--padding-top-multiplier:0}
.postArticle--series .postArticle-content .postList {
margin-top: 0;
margin-bottom: 0
}
.postArticle--series .graf-after--blockquote.graf--blockquote {
padding-top: 0
}
.postArticle--series .section--card {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0
}
.postArticle--series .postArticle-content .graf {
margin-top: calc(1em * var(--margin-top-multiplier) * ((var(--space)/ var(--font-size)) - var(--x-height-multiplier) - ((var(--line-height) - 1)/ 2)));
margin-bottom: calc(-1em * var(--margin-bottom-multiplier) * (var(--baseline-multiplier) + ((var(--line-height) - 1)/ 2)));
padding-top: calc(1em * var(--padding-top-multiplier) * ((var(--space)/ var(--font-size)) - var(--x-height-multiplier) - ((var(--line-height) - 1)/ 2)))
}
.postArticle--series .graf {
--space:var(--space-b)}
.postArticle--series .graf--pullquote {
--space:var(--space-a)}
.postArticle--series .graf-after--pullquote.graf {
--space:var(--space-a)}
.postArticle--series .graf-after--pullquote.graf--pullquote,.postArticle--series .postList+.postList .graf--li:first-child {
--space:var(--space-b)}
.postArticle--series .graf-after--blockquote.graf--blockquote,.postArticle--series .graf-after--li.graf--li {
--space:var(--space-c)}
.postArticle--series .graf-after--blockquote.graf--blockquote {
--margin-top-multiplier:0;--padding-top-multiplier:1}
.postArticle--series .graf--trailing {
--margin-bottom-multiplier:0}
.markup--anchor {
text-decoration: underline
}
body.is-withMagicUnderlines .markup--anchor {
text-decoration: none;
background-image: linear-gradient(to bottom,rgba(0,0,0,.6) 50%,rgba(0,0,0,0) 50%);
background-repeat: repeat-x;
background-size: 2px .1em;
background-position: 0 1.07em
}
body.is-withMagicUnderlines .markup--h2-anchor,body.is-withMagicUnderlines .markup--h3-anchor,body.is-withMagicUnderlines .markup--h4-anchor {
background-image: linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,.8))
}
body.is-withMagicUnderlines .graf--kicker .markup--anchor,body.is-withMagicUnderlines .graf--subtitle .markup--anchor,body.is-withMagicUnderlines .markup--pullquote-anchor {
background-image: linear-gradient(to bottom,rgba(0,0,0,.44) 50%,rgba(0,0,0,0) 50%)
}
body.is-withMagicUnderlines .markup--figure-anchor {
background-image: linear-gradient(to bottom,#fff 50%,rgba(0,0,0,.44) 50%)
}
@media all and (max-width: 991px) {
body.is-withMagicUnderlines .markup--anchor {
background-size:2px 2px;
background-position: 0 1.03em
}
}
@media only screen and (max-width: 991px) and (min-device-pixel-ratio:2),only screen and (max-width:991px) and (-webkit-min-device-pixel-ratio:2),only screen and (max-width:991px) and (min-resolution:2dppx) {
body.is-withMagicUnderlines .markup--anchor {
background-size:2px 1px;
background-position: 0 1.03em
}
}
body.is-withMagicUnderlines .postArticle--short .markup--anchor {
background-size: 2px 2px;
background-position: 0 1.03em
}
@media only screen and (min-device-pixel-ratio: 2),only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:2dppx) {
body.is-withMagicUnderlines .postArticle--short .markup--anchor {
background-size:2px 1px;
background-position: 0 1.03em
}
}
body.is-withMagicUnderlines .markup--anchor.markup--h2-anchor,body.is-withMagicUnderlines .markup--anchor.markup--h3-anchor,body.is-withMagicUnderlines .markup--anchor.markup--pullquote-anchor {
background-size: 2px .115em;
background-position: 0 1.05em
}
body.is-withMagicUnderlines .markup--anchor.markup--h4-anchor {
background-size: 2px .12em;
background-position: 0 1.05em
}
body.is-withMagicUnderlines .markup--anchor.markup--figure-anchor {
background-size: 2px 2px;
background-position: 0 .98em
}
body.is-withMagicUnderlines .is-sectionUsingCanvas.is-imageBackgrounded>.section-inner .markup--anchor,body.is-withMagicUnderlines section[data-background-color]:not([data-background-color$=Light])>.section-inner .markup--anchor {
background-image: linear-gradient(to bottom,#fff 50%,rgba(255,255,255,0) 50%)
}
body.is-withMagicUnderlines .is-sectionUsingCanvas.is-imageBackgrounded>.section-inner .markup--h2-anchor,body.is-withMagicUnderlines .is-sectionUsingCanvas.is-imageBackgrounded>.section-inner .markup--h3-anchor,body.is-withMagicUnderlines section[data-background-color]:not([data-background-color$=Light])>.section-inner .markup--h2-anchor,body.is-withMagicUnderlines section[data-background-color]:not([data-background-color$=Light])>.section-inner .markup--h3-anchor {
background-image: linear-gradient(to bottom,#fff,#fff)
}
body.is-withMagicUnderlines section.is-darkBackgrounded .markup--anchor {
background-image: linear-gradient(to bottom,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 50%)
}
body.is-withMagicUnderlines section.is-darkBackgrounded .markup--h2-anchor,body.is-withMagicUnderlines section.is-darkBackgrounded .markup--h3-anchor {
background-image: linear-gradient(to bottom,rgba(255,255,255,.85) 50%,rgba(255,255,255,.85) 50%)
}
body.is-withMagicUnderlines .markup--code .markup--anchor,body.is-withMagicUnderlines .markup--pre-anchor,body.is-withMagicUnderlines .quoteResponses .markup--anchor,body.is-withMagicUnderlines section.is-darkBackgrounded .markup--pre-anchor,body.is-withMagicUnderlines section.section--card .markup--anchor {
text-decoration: underline;
background: 0 0
}
body.os-ios.is-withMagicUnderlines .markup--li-anchor,body.os-ios.is-withMagicUnderlines .markup--p-anchor {
text-shadow: 0 -1px 0 #fff,0 1px 0 #fff,-2px -1px 0 #fff,2px 1px 0 #fff,1px 1px 0 #fff,-1px 0 0 #fff
}
body.os-ios.is-withMagicUnderlines .markup--p-quote .markup--li-anchor,body.os-ios.is-withMagicUnderlines .markup--p-quote .markup--p-anchor,body.os-ios.is-withMagicUnderlines section.is-darkBackgrounded .markup--li-anchor,body.os-ios.is-withMagicUnderlines section.is-darkBackgrounded .markup--p-anchor {
text-shadow: none
}
.markup--anchor.markup--mixtapeEmbed-anchor {
background-image: none;
text-decoration: none
}
@media print {
.markup--anchor,.markup--figure-anchor,.markup--pre-anchor,.markup--pullquote-anchor,body.is-withMagicUnderlines .markup--figure-anchor,body.is-withMagicUnderlines .markup--pre-anchor,body.is-withMagicUnderlines .markup--pullquote-anchor {
text-decoration: none;
background: 0 0
}
}
.responsesStreamWrapper {
padding-bottom: 40px
}
.responsesStream-title {
margin-bottom: 15px
}
.responsesStream-title .heading-title {
font-size: 14px;
color: rgba(0,0,0,.6)
}
.responsesStream .streamItem-card--postPreview,.responsesStream .streamItemConversation,.responsesStream-showOtherResponses {
margin-top: 20px;
margin-bottom: 0
}
.responsesStream-editor {
margin-top: 5px;
padding: 5px 20px 0 20px;
box-shadow: 0 1px 4px rgba(0,0,0,.03)
}
.responsesStream-editor .inlineEditor.is-collapsed,.responsesStream-showOtherResponses {
height: 80px
}
.responsesStream-showOtherResponses.cardChromeless {
padding: 20px;
border: 1px solid rgba(0,0,0,.09)!important
}
.responsesStream-showOtherResponses.cardChromeless:hover {
border-color: rgba(0,0,0,.15)!important
}
.quoteResponses {
background-color: #fff;
width: 400px
}
.quoteResponses-section {
padding: 0 20px
}
.quoteResponses-section--fullBleed .quoteResponses-inner {
padding: 5px 20px 0
}
.quoteResponses-section:not(.quoteResponses-section--fullBleed):first-child {
padding-top: 20px
}
.quoteResponses-section:last-child {
padding-bottom: 10px
}
.quoteResponses .inlineNewPostControl {
margin-top: 10px
}
.quoteResponses .inlineEditor:last-child {
margin-bottom: 5px
}
.quoteResponses .inlineEditor-header .avatar-text,.quoteResponses .inlineEditor-placeholder {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
font-size: 16px
}
.quoteResponses .inlineEditor-header .avatar-text {
color: rgba(0,0,0,.8)
}
.quoteResponses .inlineEditor.is-collapsed {
height: 75px
}
.quoteResponses .inlineEditor-placeholder {
display: none
}
.quoteResponses .inlineEditor.is-collapsed .inlineEditor-placeholder {
display: block;
color: rgba(0,0,0,.44)
}
.quoteResponses .postArticle .graf--blockquote,.quoteResponses .postArticle .graf--li,.quoteResponses .postArticle .graf--p {
font-size: 16px
}
.quoteResponses-section:not(.is-withEditor) .block:first-child {
border-top: 0;
padding-top: 0
}
.privateNotes {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.privateNotes-editor,.privateNotes-list {
font-size: 14px;
margin-top: 10px
}
.privateNotes-content {
margin: 5px 0 0;
word-break: break-word;
word-wrap: break-word
}
.privateNotes-list>.privateNotes-item {
margin-bottom: 35px
}
.privateNotes-list>.privateNotes-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0
}
.privateNotes-item .privateNotes-item {
margin: 15px 0 0 20px
}
.privateNotes-actions {
margin: 10px 0 0;
padding: 10px 0;
border-top: solid 1px rgba(0,0,0,.05)
}
.privateNotes-editor--reply {
margin-left: 20px
}
.privateNotes-item.is-noteEditorVisible:last-child .privateNotes-actions:not(.privateNotes-actions--withDismiss),.privateNotes-list.is-empty+.privateNotes-actions {
border-top: 0;
padding-top: 0;
margin-top: 5px
}
.privateNotes-editor .avatar {
margin-bottom: 10px
}
.privateNotes-prompt:not(.button--primary) {
color: rgba(0,0,0,.6)
}
.privateNotes-editor .graf--p .defaultValue {
color: rgba(0,0,0,.44)
}
.privateNotes-actions.is-noteEditorVisible .privateNotes-prompt,.privateNotes-editor,.privateNotes-item.is-noteEditorVisible .privateNotes-prompt,.privateNotes-list:not(.is-empty)+.privateNotes-actions {
display: none
}
.privateNotes-actions.is-noteEditorVisible .privateNotes-editor,.privateNotes-item.is-noteEditorVisible .privateNotes-editor {
display: block
}
.privateNotes-editor .editable {
outline: 0
}
.heading--privateNotes .svgIcon {
fill: rgba(0,0,0,.44)
}
.heading--privateNotes {
color: rgba(0,0,0,.44)
}
.privateNotes-content a {
text-decoration: underline
}
.privateNotes-authorLockup,.privateNotes-item>.avatar {
display: inline-block;
vertical-align: middle
}
.privateNotes-authorLockup {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
margin-left: 10px;
line-height: 1.3
}
.privateNotes-delete,.privateNotes-supplemental {
color: rgba(0,0,0,.44);
font-size: 11px
}
.privateNotes-author {
color: rgba(0,0,0,.8)
}
.privateNotes-author--supplemental {
color: rgba(0,0,0,.44)
}
.privateNotes-actions .privateNotes-delete {
font-size: 14px
}
.quoteResponses-section--tips,.quoteResponses-section--tips:last-child {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
font-size: 14px;
background: #fafafa;
color: rgba(0,0,0,.6);
border: 1px solid rgba(0,0,0,.05);
height: 200px;
padding: 20px 0
}
.quoteResponses-section--tipsInner {
height: 200px
}
.quoteResponses-section--tipsContent {
display: inline-block;
width: 260px
}
.quoteResponses-tipAnimation {
margin-top: 20px;
width: 250px;
height: 120px
}
.notesPositionContainer {
position: relative;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.notesMarkers {
position: absolute;
top: 0;
right: 0
}
.notesPositionContainer>.notesMarkers {
z-index: 60;
overflow: visible
}
.notesMarker {
position: relative;
left: 0;
width: 20px;
height: 24px;
padding: 10px 0;
margin: -4px 0 0 -4px;
cursor: pointer;
display: inline-block;
vertical-align: top;
overflow: hidden
}
.notesMarker .svgIcon {
fill: rgba(0,0,0,.44)
}
.markup--highlight {
background: rgba(97,255,160,.8)
}
section.is-darkBackgrounded .markup--highlight {
background: rgba(255,255,255,.65)
}
@media screen and (max-width: 767px) {
.notesPositionContainer {
z-index:700
}
.markup--highlight {
position: relative;
z-index: 600
}
}
@media print {
.markup--highlight {
background: rgba(255,255,255,0)
}
}
.quoteItem {
padding: 28px 0
}
.quoteItem.cardChromeless {
padding: 28px 20px
}
.quoteItem .graf--p {
margin-bottom: 0
}
.quoteItem .markup--highlight {
background-color: rgba(39,243,106,.1)
}
.quoteItem-attribution {
color: rgba(0,0,0,.44);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 15px
}
.quoteItem-attributionTitle:hover {
color: rgba(0,0,0,.6)
}
.quoteItem-content {
padding-top: 10px;
display: block;
--x-height-multiplier:0.35;--baseline-multiplier:0.179;font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
letter-spacing: .01rem;
font-weight: 400;
font-style: normal;
font-size: 18px;
line-height: 1.45;
letter-spacing: .005rem
}
.paragraphControls {
position: absolute;
white-space: nowrap;
padding-left: 10px;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .3s,opacity .3s 0s
}
.paragraphControls.is-visible {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s,opacity .3s 0s
}
.paragraphControls .paragraphControls-itemText,.paragraphControls-itemText .button {
font-size: 12px;
line-height: 19px;
white-space: nowrap
}
.paragraphControls .paragraphControls-itemText,.paragraphControls-itemText .button {
color: rgba(0,0,0,.44)
}
.paragraphControls-itemText .button:focus,.paragraphControls-itemText .button:hover,.paragraphControls-itemText a:focus,.paragraphControls-itemText a:hover {
color: rgba(0,0,0,.8)
}
.paragraphControls.is-darkBackgrounded .paragraphControls-itemText,.paragraphControls.is-darkBackgrounded .paragraphControls-itemText .button {
color: rgba(255,255,255,.5)
}
.paragraphControls.is-darkBackgrounded .paragraphControls-itemText .button:focus,.paragraphControls.is-darkBackgrounded .paragraphControls-itemText .button:hover,.paragraphControls.is-darkBackgrounded .paragraphControls-itemText a:focus,.paragraphControls.is-darkBackgrounded .paragraphControls-itemText a:hover {
color: rgba(255,255,255,.85)
}
@media (max-width: 991px) {
.paragraphControls .paragraphControls-itemText {
display:none
}
}
@media (max-width: 767px) {
.paragraphControls {
margin-left:-30px;
margin-top: -5px
}
}
.postArticle-content[data-color-theme=seaweed] .graf--h2,.postArticle-content[data-color-theme=seaweed] .graf--h3 {
color: #47bcac
}
.postArticle-content[data-color-theme=midday] .graf--h2,.postArticle-content[data-color-theme=midday] .graf--h3 {
color: #2fa5c6
}
.postArticle-content[data-color-theme=midnight] .graf--h2,.postArticle-content[data-color-theme=midnight] .graf--h3 {
color: #5065a0
}
.postArticle-content[data-color-theme=grimace] .graf--h2,.postArticle-content[data-color-theme=grimace] .graf--h3 {
color: #8764ae
}
.postArticle-content[data-color-theme=magic] .graf--h2,.postArticle-content[data-color-theme=magic] .graf--h3 {
color: #a93f7f
}
.postArticle-content[data-color-theme=crush] .graf--h2,.postArticle-content[data-color-theme=crush] .graf--h3 {
color: #c7465e
}
.postArticle-content[data-color-theme=warm] .graf--h2,.postArticle-content[data-color-theme=warm] .graf--h3 {
color: #e57f4c
}
.postArticle-content[data-color-theme=lime] .graf--h2,.postArticle-content[data-color-theme=lime] .graf--h3 {
color: #98bc6b
}
.postArticle-content[data-color-theme=fresh] .graf--h2,.postArticle-content[data-color-theme=fresh] .graf--h3 {
color: #69cb91
}
.postArticle-content[data-color-theme=brook] .graf--h2,.postArticle-content[data-color-theme=brook] .graf--h3 {
color: #86a89d
}
.postArticle-content[data-color-theme=lipstick] .graf--h2,.postArticle-content[data-color-theme=lipstick] .graf--h3 {
color: #a84a4e
}
.postArticle-content[data-color-theme=seaweed] .is-darkBackgrounded .graf--h2,.postArticle-content[data-color-theme=seaweed] .is-darkBackgrounded .graf--h3 {
color: #a4ded6
}
.postArticle-content[data-color-theme=midday] .is-darkBackgrounded .graf--h2,.postArticle-content[data-color-theme=midday] .is-darkBackgrounded .graf--h3 {
color: #a4daea
}
.postArticle-content[data-color-theme=midnight] .is-darkBackgrounded .graf--h2,.postArticle-content[data-color-theme=midnight] .is-darkBackgrounded .graf--h3 {
color: #ccd6f0
}
.postArticle-content[data-color-theme=grimace] .is-darkBackgrounded .graf--h2,.postArticle-content[data-color-theme=grimace] .is-darkBackgrounded .graf--h3 {
color: #e2d9eb
}
.postArticle-content[data-color-theme=magic] .is-darkBackgrounded .graf--h2,.postArticle-content[data-color-theme=magic] .is-darkBackgrounded .graf--h3 {
color: #ebc9de
}
.postArticle-content[data-color-theme=crush] .is-darkBackgrounded .graf--h2,.postArticle-content[data-color-theme=crush] .is-darkBackgrounded .graf--h3 {
color: #f7c9d1
}
.postArticle-content[data-color-theme=warm] .is-darkBackgrounded .graf--h2,.postArticle-content[data-color-theme=warm] .is-darkBackgrounded .graf--h3 {
color: #fbdecf
}
.postArticle-content[data-color-theme=lime] .is-darkBackgrounded .graf--h2,.postArticle-content[data-color-theme=lime] .is-darkBackgrounded .graf--h3 {
color: #c9dcb1
}
.postArticle-content[data-color-theme=fresh] .is-darkBackgrounded .graf--h2,.postArticle-content[data-color-theme=fresh] .is-darkBackgrounded .graf--h3 {
color: #b5e5c9
}
.postArticle-content[data-color-theme=brook] .is-darkBackgrounded .graf--h2,.postArticle-content[data-color-theme=brook] .is-darkBackgrounded .graf--h3 {
color: #d0ddd9
}
.postArticle-content[data-color-theme=lipstick] .is-darkBackgrounded .graf--h2,.postArticle-content[data-color-theme=lipstick] .is-darkBackgrounded .graf--h3 {
color: #f2ccce
}
.postArticle-content[data-color-theme=seaweed] .graf--blockquote {
border-left-color: #47bcac
}
.postArticle-content[data-color-theme=midday] .graf--blockquote {
border-left-color: #2fa5c6
}
.postArticle-content[data-color-theme=midnight] .graf--blockquote {
border-left-color: #5065a0
}
.postArticle-content[data-color-theme=grimace] .graf--blockquote {
border-left-color: #8764ae
}
.postArticle-content[data-color-theme=magic] .graf--blockquote {
border-left-color: #a93f7f
}
.postArticle-content[data-color-theme=crush] .graf--blockquote {
border-left-color: #c7465e
}
.postArticle-content[data-color-theme=warm] .graf--blockquote {
border-left-color: #e57f4c
}
.postArticle-content[data-color-theme=lime] .graf--blockquote {
border-left-color: #98bc6b
}
.postArticle-content[data-color-theme=fresh] .graf--blockquote {
border-left-color: #69cb91
}
.postArticle-content[data-color-theme=brook] .graf--blockquote {
border-left-color: #86a89d
}
.postArticle-content[data-color-theme=lipstick] .graf--blockquote {
border-left-color: #a84a4e
}
.postArticle-content[data-color-theme=seaweed] .is-darkBackgrounded .graf--blockquote {
border-left-color: #a4ded6
}
.postArticle-content[data-color-theme=midday] .is-darkBackgrounded .graf--blockquote {
border-left-color: #a4daea
}
.postArticle-content[data-color-theme=midnight] .is-darkBackgrounded .graf--blockquote {
border-left-color: #ccd6f0
}
.postArticle-content[data-color-theme=grimace] .is-darkBackgrounded .graf--blockquote {
border-left-color: #e2d9eb
}
.postArticle-content[data-color-theme=magic] .is-darkBackgrounded .graf--blockquote {
border-left-color: #ebc9de
}
.postArticle-content[data-color-theme=crush] .is-darkBackgrounded .graf--blockquote {
border-left-color: #f7c9d1
}
.postArticle-content[data-color-theme=warm] .is-darkBackgrounded .graf--blockquote {
border-left-color: #fbdecf
}
.postArticle-content[data-color-theme=lime] .is-darkBackgrounded .graf--blockquote {
border-left-color: #c9dcb1
}
.postArticle-content[data-color-theme=fresh] .is-darkBackgrounded .graf--blockquote {
border-left-color: #b5e5c9
}
.postArticle-content[data-color-theme=brook] .is-darkBackgrounded .graf--blockquote {
border-left-color: #d0ddd9
}
.postArticle-content[data-color-theme=lipstick] .is-darkBackgrounded .graf--blockquote {
border-left-color: #f2ccce
}
.customTitleControl .inputGroup.inputGroup--selection {
margin-top: 5px;
white-space: normal;
line-height: 1.4
}
.customTitleControl-field {
font-size: 14px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal;
width: 238px;
padding: 5px 0 3px 0;
margin-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0,.15)
}
.editable .graf--sectionCaption,.editable .markup--anchor {
cursor: text
}
.editable>p {
margin-bottom: 0
}
.defaultValue {
color: #b3b3b1
}
.defaultValue--prompt {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 18px
}
.hero.is-imageBackgrounded .defaultValue,section.is-imageBackgrounded .defaultValue,section[data-background-color]:not([data-background-color$=Light]) .defaultValue {
color: rgba(255,255,255,.65)
}
.graf--sectionCaption.is-defaultValue .defaultValue {
color: rgba(0,0,0,.44)
}
.graf--sectionCaption.is-defaultValue,figure.is-defaultValue .imageCaption {
display: none
}
.graf--figure.is-defaultValue.is-selected .imageCaption,.graf--figure.is-mediaFocused .imageCaption,.graf--sectionCaption.is-defaultValue.is-selected,.section.is-sectionFocused .graf--sectionCaption {
display: block
}
.graf--figure.is-defaultValue.is-selected.is-partialWidth .imageCaption,.graf--figure.is-mediaFocused.is-partialWidth .imageCaption {
display: none
}
.graf--figure.is-defaultValue.is-selected.is-partialWidth:last-child .imageCaption,.is-mediaRowFocused>.graf--figure.is-partialWidth:last-child .imageCaption {
display: block
}
.is-postEditMode .graf-image:before,.is-postEditMode .iframeContainer:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 400;
content: ''
}
.is-postEditMode iframe {
border: 3px solid rgba(255,255,255,0)
}
.is-postEditMode .section--body .graf--figure .graf-image:hover {
box-shadow: 0 0 0 3px #b3ead6
}
.is-postEditMode .section--body .graf--figure.is-mediaFocused iframe {
border: 3px solid #02b875
}
.is-postEditMode .section--body .graf--figure.is-mediaFocused .graf-image {
box-shadow: 0 0 0 3px #02b875
}
.is-postEditMode .section--body .graf--figure.is-mediaFocused .graf-image[data-is-featured] {
box-shadow: 0 0 0 3px #00ab6b
}
.section-image--aspectRatioViewport.is-sectionFocused>.section-background {
box-shadow: 0 0 0 3px #02b875 inset
}
.section-image--aspectRatioViewport.is-sectionFocused>.section-background[data-is-featured] {
box-shadow: 0 0 0 3px #cc5454 inset
}
.graf--hasDropCap.is-dropCapFocused .graf-dropCap {
outline: 3px solid #02b875
}
.is-postEditMode .graf-dropCap::-moz-selection {
background-color: transparent
}
.is-postEditMode .graf-dropCap::selection {
background-color: transparent
}
.crosshair {
display: none;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
margin-top: -16.5px;
margin-left: -16.5px;
width: 30px;
height: 30px;
border: 3px solid #02b875;
border-radius: 30px
}
.graf-image[data-is-featured] .crosshair {
border-color: #cc5454
}
.graf--figure.is-mediaFocused.is-focusPointed .crosshair {
display: block
}
.markup--warning,.warning {
background-color: rgba(150,50,32,.2)
}
.is-postEditMode .graf--figure[data-purpose="2"] {
outline: 3px solid #e7af0e
}
.is-postEditMode .graf--figure[data-purpose="2"]::after {
content: "Advertising";
position: absolute;
left: 0;
bottom: 0;
padding: 2px 5px;
background: #f0f0f0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 16px
}
@media print {
.defaultValue {
display: none
}
}
.inlineEditor .block-streamText,.inlineEditor .postArticle-content,.inlineEditor-header {
cursor: text
}
.inlineEditor .postArticle {
padding-bottom: 10px
}
.inlineEditor .inlineEditor-actions {
padding-top: 10px;
padding-bottom: 15px
}
.inlineEditor .inlineEditor-actions:after,.inlineEditor .inlineEditor-actions:before {
display: table;
content: " "
}
.inlineEditor .inlineEditor-actions:after {
clear: both
}
.inlineEditor .postArticle-content {
min-height: 160px
}
.inlineEditor.is-collapsed {
height: 110px;
overflow: hidden
}
.inlineEditor.is-collapsed .block-streamText,.inlineEditor.is-collapsed .inlineEditor-actions {
opacity: 0
}
.inlineEditor .inlineEditor-actions .button--primary {
margin-right: 14px
}
.cardChromeless .inlineEditor.is-collapsed {
height: 76px
}
.inlineEditor-header {
height: 36px
}
.inlineEditor-avatar {
display: inline-block;
vertical-align: top
}
.inlineEditor-headerContent {
display: inline-block
}
.inlineEditor-author,.inlineEditor-placeholder {
line-height: 36px
}
.inlineEditor-placeholder {
color: rgba(0,0,0,.44);
font-size: 18px;
--x-height-multiplier:0.35;--baseline-multiplier:0.179;font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
letter-spacing: .01rem;
font-weight: 400;
font-style: normal
}
.inlineEditor-author {
color: #00ab6b;
font-size: 14px
}
.inlineEditor .inlineEditor-placeholder,.inlineEditor.is-collapsed .inlineEditor-author {
opacity: 0
}
.inlineEditor .inlineEditor-author,.inlineEditor.is-collapsed .inlineEditor-placeholder {
opacity: 1
}
.inlineEditor .inlineEditor-author,.inlineEditor .inlineEditor-placeholder {
transform: translateY(-36px)
}
.inlineEditor.is-collapsed .inlineEditor-author,.inlineEditor.is-collapsed .inlineEditor-placeholder {
transform: translateY(0)
}
.inlineEditor.is-transitioning {
transition: opacity .2s,height .15s
}
.inlineEditor .block-streamText,.inlineEditor .inlineEditor-actions {
transition: opacity .2s .15s
}
.inlineEditor .inlineEditor-author,.inlineEditor .inlineEditor-placeholder {
transition: transform .15s,opacity .15s
}
.inlineEditor.is-collapsed.is-transitioning {
transition: opacity .2s,height .2s
}
.inlineEditor.is-collapsed .block-streamText,.inlineEditor.is-collapsed .inlineEditor-actions {
transition: opacity .15s
}
.inlineEditor-actions {
width: 100%;
color: rgba(0,0,0,.44)
}
.inlineNewPostControl--borderedBottom {
border-bottom: 1px solid rgba(0,0,0,.1)
}
.inlineEditor--letters:not(.is-collapsed) .inlineEditor-header {
display: none
}
.block-streamText {
margin: 10px 0 0;
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate
}
.drawer {
background-color: #fafafa;
position: fixed;
left: 0;
bottom: 0;
right: 0;
z-index: 600;
transform: translate3d(0,0,0)
}
.screenContent.is-showingDrawer .postArticle {
margin-bottom: 250px;
box-sizing: border-box
}
.drawer,.drawer-inner {
height: 300px
}
.drawer-imageContainer {
position: relative;
height: 110px;
margin: 30px auto 0;
width: 550px
}
.drawer-image {
left: 0;
position: absolute;
width: 100%
}
.drawer-image--animated,.drawer:hover .drawer-image--static {
opacity: 0;
visibility: hidden
}
.drawer-image--static,.drawer:hover .drawer-image--animated {
opacity: 1;
visibility: visible
}
.drawer-content {
color: rgba(0,0,0,.6);
font-size: 24px;
letter-spacing: -.04em;
padding: 10px 50px;
width: 800px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 300;
font-style: normal
}
.drawer-list {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
font-size: 14px;
text-align: left;
margin: 20px auto 0
}
.drawer-listCell {
padding: 4px 10px
}
.drawer-listCell--keyboard {
white-space: nowrap
}
.drawer-listCell+.drawer-listCell--keyboard {
padding-left: 60px
}
.drawer-annotation {
display: block;
font-size: 12px;
color: rgba(0,0,0,.44)
}
.drawer-keyboardKey {
background: #fff;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid rgba(0,0,0,.15);
min-width: 20px;
text-align: center;
display: inline-block
}
@media (max-width: 991px),(max-height:750px) {
.drawer,.drawer-inner {
height:250px
}
.drawer-content {
font-size: 18px;
width: 500px;
padding: 10px 20px
}
.drawer-imageContainer {
height: 97px;
margin-top: 20px;
width: 473px
}
.drawer-content .button--circle {
width: 25px;
height: 25px;
line-height: 23px
}
.drawer-content .button--circle .svgIcon,.drawer-content .button--circle .svgIcon-use {
width: 19px;
height: 19px
}
.drawer-listCell {
padding: 2px 6px
}
.drawer-list {
font-size: 12px;
margin-top: 10px
}
.drawer-keyboardKey {
min-width: 15px;
padding: 3px 6px;
border-radius: 3px
}
.drawer-listCell+.drawer-listCell--keyboard {
padding-left: 20px
}
.drawer-annotation {
font-size: 11px
}
}
@media (max-width: 767px),(max-height:600px) {
.drawer,.drawer-inner {
height:150px
}
.drawer-content {
width: 400px
}
.drawer-imageContainer {
display: none
}
.drawer-list {
font-size: 11px;
margin-top: 5px
}
.drawer-keyboardKey {
color: rgba(0,0,0,.8);
background: 0 0;
padding: 0;
min-width: 0;
border: none
}
.drawer-annotation {
display: none
}
}
.highlightMenu {
position: absolute;
visibility: hidden;
display: none;
z-index: 500;
transition: none;
top: 0;
left: 0
}
.highlightMenu--quoteResponses {
z-index: 800
}
.highlightMenu-inner {
position: relative;
background-image: linear-gradient(to bottom,rgba(49,49,47,.99),#262625);
background-repeat: repeat-x;
border-radius: 5px
}
.buttonSet>.button--highlightMenu {
height: 44px;
line-height: 46px
}
.button--highlightMenu {
display: inline-block;
border: 0;
color: #fff;
box-sizing: content-box;
vertical-align: center
}
.button--highlightMenu .svgIcon {
margin-top: -3px
}
.buttonSet .button--highlightMenu:first-child {
padding-left: 18px
}
.buttonSet .button--highlightMenu:last-child {
padding-right: 18px
}
.button.button--highlightMenu .svgIcon {
fill: #fff
}
.button--highlightMenu.is-active .svgIcon {
fill: #48e79a
}
.button--highlightMenu.button--withSvgIcon .svgIcon {
margin-left: -3px;
margin-right: -3px
}
.button--highlightMenu.button--withSvgIcon .svgIcon--highlighter {
margin-left: -7px;
margin-right: -7px
}
.button--highlightMenu.button--withSvgIcon .svgIcon--italic {
margin-left: -9px;
margin-right: -9px
}
.buttonSet-separator {
display: inline-block;
vertical-align: middle;
width: 1px;
margin: 0 6px;
height: 24px;
background: rgba(255,255,255,.2)
}
.highlightMenu .highlightMenu-arrowClip {
position: absolute;
bottom: -10px;
left: 50%;
clip: rect(10px 20px 20px 0);
margin-left: -10px
}
.highlightMenu .highlightMenu-arrowClip .highlightMenu-arrow {
display: block;
width: 20px;
height: 20px;
background-color: #262625;
transform: rotate(45deg) scale(.5)
}
.highlightMenu.is-flushTop .highlightMenu-arrowClip {
display: none
}
.button--highlightMenu.is-active .svgIcon--blockquote {
fill: #fff
}
.button--highlightMenu.is-blockquoteMode .svgIcon--blockquote path:nth-child(1) {
fill: #48e79a
}
.button--highlightMenu.is-pullquoteMode .svgIcon--blockquote {
fill: #48e79a
}
.button--highlightMenu.is-active .svgIcon--tt {
fill: #fff
}
.button--highlightMenu.is-h4Mode .svgIcon--tt path:nth-child(1) {
fill: #48e79a
}
.button--highlightMenu.is-h3Mode .svgIcon--tt {
fill: #48e79a
}
.highlightMenu-linkinput {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.highlightMenu-linkinputField {
background: rgba(0,0,0,0);
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 13px 40px 11px 10px;
color: #fff;
border: none;
outline: 0;
font-size: 14px;
box-sizing: border-box;
border-radius: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on
}
.highlightMenu-linkinput>.button {
position: absolute;
top: 0;
right: 10px;
bottom: -3px
}
.highlightMenu--linkMode .buttonSet {
visibility: hidden
}
.highlightMenu--linkMode .highlightMenu-linkinput {
display: block;
animation: pop-upwards 180ms forwards linear
}
.highlightMenu--measure {
display: inline-block;
visibility: hidden
}
.highlightMenu--active {
display: inline-block;
visibility: visible;
transition: top 75ms ease-out,left 75ms ease-out;
animation: pop-upwards 180ms forwards linear
}
.inlineTooltip {
position: absolute;
top: 0;
margin-left: -58px;
margin-top: 5px;
padding: 0;
width: 40px;
height: 40px;
z-index: 400;
transition: visibility 0s linear 250ms,opacity .1s,width 0s linear 250ms;
visibility: hidden;
opacity: 0
}
.inlineTooltip.is-active {
transition: visibility 0s linear 0s,opacity .1s,width 0s linear 0s;
visibility: visible;
opacity: 1
}
.inlineTooltip.is-scaled {
width: 220px;
transition-delay: 0
}
.button--inlineTooltipControl {
transform: rotate(0);
transition: transform .1s
}
.inlineTooltip.is-scaled>.button--inlineTooltipControl {
transition: transform 250ms;
transform: rotate(45deg)
}
.inlineTooltip-menu {
display: inline-block;
visibility: hidden;
padding-left: 22px
}
.inlineTooltip.is-scaled .inlineTooltip-menu {
visibility: visible
}
.inlineTooltip.is-menuImmediatelyHidden .inlineTooltip-menu {
display: none
}
.inlineTooltip-menu .button {
margin-right: 9px
}
@media print {
.inlineTooltip {
display: none
}
}
.subscriptionsLanding {
max-width: 828px
}
.subscriptionsLanding-dropCap {
font-size: 128px;
line-height: 1;
letter-spacing: -1px!important;
margin-top: -10px;
margin-bottom: -15px;
margin-right: 15px
}
.subscriptionsLanding-intro {
font-size: 42px;
line-height: 1.3
}
.subscriptionsLanding-prompt {
font-size: 22px;
line-height: 38px
}
.subscriptionsLanding-sectionHeader {
font-size: 38px
}
@media all and (max-width: 767px) {
.subscriptionsLanding-prompt {
font-size:16px;
line-height: 1.3
}
.subscriptionsLanding-userPreview {
margin-left: -20px;
margin-right: -20px
}
}
.diagnostics {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
position: fixed;
text-align: left;
left: 0;
right: 0;
bottom: 0;
height: 50px;
box-sizing: border-box;
padding: 10px 20px;
background: #fff;
z-index: 900;
transition: .3s;
transform: translate3d(100%,0,0);
box-shadow: 0 0 1px rgba(0,0,0,.2)
}
body.is-diagnosticsVisible .diagnostics {
transform: translate3d(0,0,0)
}
.diagnostics,.diagnostics .button--link {
font-size: 12px;
line-height: 1.2;
color: rgba(0,0,0,.44)
}
@media (max-width: 767px) {
.diagnostics {
padding:12px 10px
}
.diagnostics,.diagnostics .button--link {
font-size: 11px
}
}
.plovr-error-report {
position: absolute;
z-index: 900;
top: 0
}
.variants {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal
}
.variants table {
width: 100%
}
.variants td {
width: 50%;
border-bottom: 1px dotted rgba(0,0,0,.44);
padding: 5px 0;
vertical-align: top
}
@media print {
.diagnostics {
display: none
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment