@charset "UTF-8";
.container-fluid,
.container {
  margin-right: auto;
  margin-left: auto;
}

.container-fluid {
  padding-right: 2rem;
  padding-left: 2rem;
}

.row {
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.row.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.col.reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.col-xs {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%;
}

.col-xs-1 {
  -ms-flex-preferred-size: 8.33333333%;
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

.col-xs-2 {
  -ms-flex-preferred-size: 16.66666667%;
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}

.col-xs-3 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  -ms-flex-preferred-size: 33.33333333%;
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

.col-xs-5 {
  -ms-flex-preferred-size: 41.66666667%;
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}

.col-xs-6 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  -ms-flex-preferred-size: 58.33333333%;
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}

.col-xs-8 {
  -ms-flex-preferred-size: 66.66666667%;
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

.col-xs-9 {
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  -ms-flex-preferred-size: 83.33333333%;
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}

.col-xs-11 {
  -ms-flex-preferred-size: 91.66666667%;
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}

.col-xs-12 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}

.col-xs-offset-0 {
  margin-left: 0;
}

.col-xs-offset-1 {
  margin-left: 8.33333333%;
}

.col-xs-offset-2 {
  margin-left: 16.66666667%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-4 {
  margin-left: 33.33333333%;
}

.col-xs-offset-5 {
  margin-left: 41.66666667%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-7 {
  margin-left: 58.33333333%;
}

.col-xs-offset-8 {
  margin-left: 66.66666667%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-10 {
  margin-left: 83.33333333%;
}

.col-xs-offset-11 {
  margin-left: 91.66666667%;
}

.start-xs {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  text-align: start;
}

.center-xs {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.end-xs {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  text-align: end;
}

.top-xs {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.middle-xs {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bottom-xs {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.around-xs {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.between-xs {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.first-xs {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.last-xs {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

@media only screen and (min-width: 48em) {
  .container {
    width: 49rem;
  }
  .col-sm,
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-offset-0,
  .col-sm-offset-1,
  .col-sm-offset-2,
  .col-sm-offset-3,
  .col-sm-offset-4,
  .col-sm-offset-5,
  .col-sm-offset-6,
  .col-sm-offset-7,
  .col-sm-offset-8,
  .col-sm-offset-9,
  .col-sm-offset-10,
  .col-sm-offset-11,
  .col-sm-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .col-sm {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-sm-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .col-sm-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .col-sm-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .col-sm-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .col-sm-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .col-sm-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .col-sm-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .col-sm-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .col-sm-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .start-sm {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start;
  }
  .center-sm {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }
  .end-sm {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end;
  }
  .top-sm {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .middle-sm {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .bottom-sm {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .around-sm {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .between-sm {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .first-sm {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .last-sm {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}
@media only screen and (min-width: 64em) {
  .container {
    width: 65rem;
  }
  .col-md,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-offset-0,
  .col-md-offset-1,
  .col-md-offset-2,
  .col-md-offset-3,
  .col-md-offset-4,
  .col-md-offset-5,
  .col-md-offset-6,
  .col-md-offset-7,
  .col-md-offset-8,
  .col-md-offset-9,
  .col-md-offset-10,
  .col-md-offset-11,
  .col-md-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .col-md {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-md-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .col-md-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .col-md-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .col-md-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .col-md-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .col-md-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .col-md-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .col-md-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .col-md-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .start-md {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start;
  }
  .center-md {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }
  .end-md {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end;
  }
  .top-md {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .middle-md {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .bottom-md {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .around-md {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .between-md {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .first-md {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .last-md {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}
@media only screen and (min-width: 75em) {
  .container {
    width: 76rem;
  }
  .col-lg,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-offset-0,
  .col-lg-offset-1,
  .col-lg-offset-2,
  .col-lg-offset-3,
  .col-lg-offset-4,
  .col-lg-offset-5,
  .col-lg-offset-6,
  .col-lg-offset-7,
  .col-lg-offset-8,
  .col-lg-offset-9,
  .col-lg-offset-10,
  .col-lg-offset-11,
  .col-lg-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .col-lg {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }
  .col-lg-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .col-lg-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .col-lg-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .col-lg-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .col-lg-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .col-lg-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .col-lg-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .col-lg-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .col-lg-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  .col-lg-offset-0 {
    margin-left: 0;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .start-lg {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start;
  }
  .center-lg {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }
  .end-lg {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end;
  }
  .top-lg {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .middle-lg {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .bottom-lg {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .around-lg {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .between-lg {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .first-lg {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .last-lg {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

audio, canvas, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

a {
  background: transparent;
}
a:focus {
  outline: 0;
}
a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

cite {
  font-style: normal;
  display: inline-block;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "“" "”" "‘" "’";
}

small {
  font-size: 80%;
}

sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  outline: 0;
}

legend {
  border: 0;
  padding: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button, input {
  line-height: normal;
}

button, select {
  text-transform: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0px;
  border: 0;
  outline: 0;
}

button, html input[type=button] {
  -webkit-appearance: button;
  cursor: pointer;
  border: 0;
  outline: 0;
  background: transparent;
}

input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
  border: 0;
  outline: 0;
  background: transparent;
}

button[disabled], html input[disabled] {
  cursor: default;
}

input {
  border: 0;
}
input[type=checkbox], input[type=radio] {
  padding: 0;
}
input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
input:focus {
  outline: 0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
  border: 0;
  outline: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul {
  margin: 0;
  border: 0;
  padding: 0;
  list-style: none;
}
ul li {
  border: 0;
  padding: 0;
  list-style: none;
}

ol {
  margin: 0;
  border: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  line-height: 1;
  font-weight: normal;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/**
 * * General base styles that should be applied as sensible defaults
 * */
html {
  position: relative;
  min-height: 100%;
  height: 100%;
}

body {
  background-color: #F2F2F2;
  font-size: 14px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

a,
a:visited {
  color: #6D6D6D;
  text-decoration: none;
  transition: color 0.3s ease;
}

ul,
ol {
  list-style-type: none;
}

::selection {
  background-color: #000000;
  color: #FFFFFF;
}

::moz-selection {
  background-color: #000000;
  color: #FFFFFF;
}

p {
  font-size: 1em;
  line-height: 1.3;
}

hr {
  border: none;
  height: 5px;
  width: 100%;
  color: #000000;
  background-color: #000000;
}

#react-legacy-header-wrapper {
  height: 128px;
  background-color: #FFFFFF;
}

.react-es6-component[data-component-name=nounproject_navigation_fort] {
  min-height: 130px;
}

#main-content {
  position: inherit;
  min-height: 15em;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
#main-content .container {
  position: relative;
}
@media (max-width: 767px) {
  #main-content {
    margin-top: 0px;
  }
}

body#signup-billing-for-mac #main-content {
  margin-top: 0;
}
@media (max-width: 768px) {
  body#signup-billing-for-mac #main-content {
    margin-top: 0;
  }
}

.with-top-banner #main-content {
  margin-top: 48px;
}
@media (max-width: 768px) {
  .with-top-banner #main-content {
    margin-top: 48px;
  }
}

.section-heading {
  font-size: 1.571em;
  margin: 0 0 4em 0;
}

#error-500 #main-content,
#error-404 #main-content,
#error-403 #main-content {
  padding-top: 0px;
}
#error-500 article,
#error-404 article,
#error-403 article {
  text-align: center;
  color: #BABABA;
}
#error-500 article h1,
#error-404 article h1,
#error-403 article h1 {
  font-size: 3.4285em;
}

#error-500 article img {
  margin-top: 50px;
}

.display-flex {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.flex-align-center {
  align-items: center;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-end {
  justify-content: flex-end;
}

/* * Generates standard, responsive set of margin and padding classes to be used throughout site.
 * *
 * * Examples
 * *
 * * Medium margin on all sides, large padding on top:
 * * <div class="margin-m padding-t-l"></div>
 * *
 * * Extra large margin on bottom, small padding on all sides:
 * * <a class="button margin-b-xl padding-s"></a>
 * */
.margin-xxs {
  margin: 2px;
}

.margin-xs {
  margin: 4px;
}

.margin-s {
  margin: 4px;
}

.margin-m {
  margin: 8px;
}

.margin-l {
  margin: 16px;
}

.margin-xl {
  margin: 24px;
}

.margin-xxl {
  margin: 40px;
}

.margin-t-xxs {
  margin-top: 2px;
}

.margin-t-xs {
  margin-top: 4px;
}

.margin-t-s {
  margin-top: 4px;
}

.margin-t-m {
  margin-top: 8px;
}

.margin-t-l {
  margin-top: 16px;
}

.margin-t-xl {
  margin-top: 24px;
}

.margin-t-xxl {
  margin-top: 40px;
}

.margin-r-xxs {
  margin-right: 2px;
}

.margin-r-xs {
  margin-right: 4px;
}

.margin-r-s {
  margin-right: 4px;
}

.margin-r-m {
  margin-right: 8px;
}

.margin-r-l {
  margin-right: 16px;
}

.margin-r-xl {
  margin-right: 24px;
}

.margin-r-xxl {
  margin-right: 40px;
}

.margin-b-xxs {
  margin-bottom: 2px;
}

.margin-b-xs {
  margin-bottom: 4px;
}

.margin-b-s {
  margin-bottom: 4px;
}

.margin-b-m {
  margin-bottom: 8px;
}

.margin-b-l {
  margin-bottom: 16px;
}

.margin-b-xl {
  margin-bottom: 24px;
}

.margin-b-xxl {
  margin-bottom: 40px;
}

.margin-l-xxs {
  margin-left: 2px;
}

.margin-l-xs {
  margin-left: 4px;
}

.margin-l-s {
  margin-left: 4px;
}

.margin-l-m {
  margin-left: 8px;
}

.margin-l-l {
  margin-left: 16px;
}

.margin-l-xl {
  margin-left: 24px;
}

.margin-l-xxl {
  margin-left: 40px;
}

.padding-xxs {
  padding: 2px;
}

.padding-xs {
  padding: 4px;
}

.padding-s {
  padding: 4px;
}

.padding-m {
  padding: 8px;
}

.padding-l {
  padding: 16px;
}

.padding-xl {
  padding: 24px;
}

.padding-xxl {
  padding: 40px;
}

.padding-t-xxs {
  padding-top: 2px;
}

.padding-t-xs {
  padding-top: 4px;
}

.padding-t-s {
  padding-top: 4px;
}

.padding-t-m {
  padding-top: 8px;
}

.padding-t-l {
  padding-top: 16px;
}

.padding-t-xl {
  padding-top: 24px;
}

.padding-t-xxl {
  padding-top: 40px;
}

.padding-r-xxs {
  padding-right: 2px;
}

.padding-r-xs {
  padding-right: 4px;
}

.padding-r-s {
  padding-right: 4px;
}

.padding-r-m {
  padding-right: 8px;
}

.padding-r-l {
  padding-right: 16px;
}

.padding-r-xl {
  padding-right: 24px;
}

.padding-r-xxl {
  padding-right: 40px;
}

.padding-b-xxs {
  padding-bottom: 2px;
}

.padding-b-xs {
  padding-bottom: 4px;
}

.padding-b-s {
  padding-bottom: 4px;
}

.padding-b-m {
  padding-bottom: 8px;
}

.padding-b-l {
  padding-bottom: 16px;
}

.padding-b-xl {
  padding-bottom: 24px;
}

.padding-b-xxl {
  padding-bottom: 40px;
}

.padding-l-xxs {
  padding-left: 2px;
}

.padding-l-xs {
  padding-left: 4px;
}

.padding-l-s {
  padding-left: 4px;
}

.padding-l-m {
  padding-left: 8px;
}

.padding-l-l {
  padding-left: 16px;
}

.padding-l-xl {
  padding-left: 24px;
}

.padding-l-xxl {
  padding-left: 40px;
}

.border-xxs {
  border-width: 2px;
}

.border-xs {
  border-width: 4px;
}

.border-s {
  border-width: 4px;
}

.border-m {
  border-width: 8px;
}

.border-l {
  border-width: 16px;
}

.border-xl {
  border-width: 24px;
}

.border-xxl {
  border-width: 40px;
}

.border-t-xxs {
  border-top-width: 2px;
}

.border-t-xs {
  border-top-width: 4px;
}

.border-t-s {
  border-top-width: 4px;
}

.border-t-m {
  border-top-width: 8px;
}

.border-t-l {
  border-top-width: 16px;
}

.border-t-xl {
  border-top-width: 24px;
}

.border-t-xxl {
  border-top-width: 40px;
}

.border-r-xxs {
  border-right-width: 2px;
}

.border-r-xs {
  border-right-width: 4px;
}

.border-r-s {
  border-right-width: 4px;
}

.border-r-m {
  border-right-width: 8px;
}

.border-r-l {
  border-right-width: 16px;
}

.border-r-xl {
  border-right-width: 24px;
}

.border-r-xxl {
  border-right-width: 40px;
}

.border-b-xxs {
  border-bottom-width: 2px;
}

.border-b-xs {
  border-bottom-width: 4px;
}

.border-b-s {
  border-bottom-width: 4px;
}

.border-b-m {
  border-bottom-width: 8px;
}

.border-b-l {
  border-bottom-width: 16px;
}

.border-b-xl {
  border-bottom-width: 24px;
}

.border-b-xxl {
  border-bottom-width: 40px;
}

.border-l-xxs {
  border-left-width: 2px;
}

.border-l-xs {
  border-left-width: 4px;
}

.border-l-s {
  border-left-width: 4px;
}

.border-l-m {
  border-left-width: 8px;
}

.border-l-l {
  border-left-width: 16px;
}

.border-l-xl {
  border-left-width: 24px;
}

.border-l-xxl {
  border-left-width: 40px;
}

@media screen and (min-width: 960px) {
  .margin-xxs {
    margin: 2px;
  }
  .margin-xs {
    margin: 4px;
  }
  .margin-s {
    margin: 8px;
  }
  .margin-m {
    margin: 16px;
  }
  .margin-l {
    margin: 24px;
  }
  .margin-xl {
    margin: 40px;
  }
  .margin-xxl {
    margin: 80px;
  }
  .margin-t-xxs {
    margin-top: 2px;
  }
  .margin-t-xs {
    margin-top: 4px;
  }
  .margin-t-s {
    margin-top: 8px;
  }
  .margin-t-m {
    margin-top: 16px;
  }
  .margin-t-l {
    margin-top: 24px;
  }
  .margin-t-xl {
    margin-top: 40px;
  }
  .margin-t-xxl {
    margin-top: 80px;
  }
  .margin-r-xxs {
    margin-right: 2px;
  }
  .margin-r-xs {
    margin-right: 4px;
  }
  .margin-r-s {
    margin-right: 8px;
  }
  .margin-r-m {
    margin-right: 16px;
  }
  .margin-r-l {
    margin-right: 24px;
  }
  .margin-r-xl {
    margin-right: 40px;
  }
  .margin-r-xxl {
    margin-right: 80px;
  }
  .margin-b-xxs {
    margin-bottom: 2px;
  }
  .margin-b-xs {
    margin-bottom: 4px;
  }
  .margin-b-s {
    margin-bottom: 8px;
  }
  .margin-b-m {
    margin-bottom: 16px;
  }
  .margin-b-l {
    margin-bottom: 24px;
  }
  .margin-b-xl {
    margin-bottom: 40px;
  }
  .margin-b-xxl {
    margin-bottom: 80px;
  }
  .margin-l-xxs {
    margin-left: 2px;
  }
  .margin-l-xs {
    margin-left: 4px;
  }
  .margin-l-s {
    margin-left: 8px;
  }
  .margin-l-m {
    margin-left: 16px;
  }
  .margin-l-l {
    margin-left: 24px;
  }
  .margin-l-xl {
    margin-left: 40px;
  }
  .margin-l-xxl {
    margin-left: 80px;
  }
  .padding-xxs {
    padding: 2px;
  }
  .padding-xs {
    padding: 4px;
  }
  .padding-s {
    padding: 8px;
  }
  .padding-m {
    padding: 16px;
  }
  .padding-l {
    padding: 24px;
  }
  .padding-xl {
    padding: 40px;
  }
  .padding-xxl {
    padding: 80px;
  }
  .padding-t-xxs {
    padding-top: 2px;
  }
  .padding-t-xs {
    padding-top: 4px;
  }
  .padding-t-s {
    padding-top: 8px;
  }
  .padding-t-m {
    padding-top: 16px;
  }
  .padding-t-l {
    padding-top: 24px;
  }
  .padding-t-xl {
    padding-top: 40px;
  }
  .padding-t-xxl {
    padding-top: 80px;
  }
  .padding-r-xxs {
    padding-right: 2px;
  }
  .padding-r-xs {
    padding-right: 4px;
  }
  .padding-r-s {
    padding-right: 8px;
  }
  .padding-r-m {
    padding-right: 16px;
  }
  .padding-r-l {
    padding-right: 24px;
  }
  .padding-r-xl {
    padding-right: 40px;
  }
  .padding-r-xxl {
    padding-right: 80px;
  }
  .padding-b-xxs {
    padding-bottom: 2px;
  }
  .padding-b-xs {
    padding-bottom: 4px;
  }
  .padding-b-s {
    padding-bottom: 8px;
  }
  .padding-b-m {
    padding-bottom: 16px;
  }
  .padding-b-l {
    padding-bottom: 24px;
  }
  .padding-b-xl {
    padding-bottom: 40px;
  }
  .padding-b-xxl {
    padding-bottom: 80px;
  }
  .padding-l-xxs {
    padding-left: 2px;
  }
  .padding-l-xs {
    padding-left: 4px;
  }
  .padding-l-s {
    padding-left: 8px;
  }
  .padding-l-m {
    padding-left: 16px;
  }
  .padding-l-l {
    padding-left: 24px;
  }
  .padding-l-xl {
    padding-left: 40px;
  }
  .padding-l-xxl {
    padding-left: 80px;
  }
  .border-xxs {
    border-width: 2px;
  }
  .border-xs {
    border-width: 4px;
  }
  .border-s {
    border-width: 8px;
  }
  .border-m {
    border-width: 16px;
  }
  .border-l {
    border-width: 24px;
  }
  .border-xl {
    border-width: 40px;
  }
  .border-xxl {
    border-width: 80px;
  }
  .border-t-xxs {
    border-top-width: 2px;
  }
  .border-t-xs {
    border-top-width: 4px;
  }
  .border-t-s {
    border-top-width: 8px;
  }
  .border-t-m {
    border-top-width: 16px;
  }
  .border-t-l {
    border-top-width: 24px;
  }
  .border-t-xl {
    border-top-width: 40px;
  }
  .border-t-xxl {
    border-top-width: 80px;
  }
  .border-r-xxs {
    border-right-width: 2px;
  }
  .border-r-xs {
    border-right-width: 4px;
  }
  .border-r-s {
    border-right-width: 8px;
  }
  .border-r-m {
    border-right-width: 16px;
  }
  .border-r-l {
    border-right-width: 24px;
  }
  .border-r-xl {
    border-right-width: 40px;
  }
  .border-r-xxl {
    border-right-width: 80px;
  }
  .border-b-xxs {
    border-bottom-width: 2px;
  }
  .border-b-xs {
    border-bottom-width: 4px;
  }
  .border-b-s {
    border-bottom-width: 8px;
  }
  .border-b-m {
    border-bottom-width: 16px;
  }
  .border-b-l {
    border-bottom-width: 24px;
  }
  .border-b-xl {
    border-bottom-width: 40px;
  }
  .border-b-xxl {
    border-bottom-width: 80px;
  }
  .border-l-xxs {
    border-left-width: 2px;
  }
  .border-l-xs {
    border-left-width: 4px;
  }
  .border-l-s {
    border-left-width: 8px;
  }
  .border-l-m {
    border-left-width: 16px;
  }
  .border-l-l {
    border-left-width: 24px;
  }
  .border-l-xl {
    border-left-width: 40px;
  }
  .border-l-xxl {
    border-left-width: 80px;
  }
}
@media (min-width: 768px) {
  .show-sm {
    display: none;
  }
}
@media (max-width: 767px) {
  .show-lg {
    display: none;
  }
}
@font-face {
  font-family: "ArbeitRegular";
  font-display: swap;
  font-style: normal;
  src: url("https://static.production.thenounproject.com/fonts/Arbeit-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "ArbeitRegular";
  font-display: swap;
  font-style: italic;
  src: url("https://static.production.thenounproject.com/fonts/Arbeit-RegularItalic.woff2") format("woff2");
}
@font-face {
  font-family: "ArbeitMedium";
  font-display: swap;
  font-style: normal;
  src: url("https://static.production.thenounproject.com/fonts/Arbeit-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "ArbeitMedium";
  font-display: swap;
  font-style: italic;
  src: url("https://static.production.thenounproject.com/fonts/Arbeit-SemiBoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "ArbeitBold";
  src: url("https://static.production.thenounproject.com/fonts/Arbeit-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "The-Noun-Project-UI";
  src: url("https://static.production.thenounproject.com/fonts/The-Noun-Project-UI.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
/**
 * * This file is for common typographic lock ups.
 * */
a.text-link,
.text-link {
  border-bottom: solid 1px;
  color: #6D6D6D;
  display: inline-block;
  transition: color 0.3s ease;
  text-decoration: none;
}
a.text-link:hover,
.text-link:hover {
  color: #000000;
}
a.text-link.light:hover,
.text-link.light:hover {
  color: #000000;
}
a.text-link.dark:hover,
.text-link.dark:hover {
  color: #FFFFFF;
}
a.text-link.core-link,
.text-link.core-link {
  cursor: pointer;
  background: transparent;
  text-decoration: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top: none;
  border-right: none;
  border-left: none;
  padding: 0;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
a.text-link.core-link.lightMode.primary,
.text-link.core-link.lightMode.primary {
  border-bottom-color: #0533B8;
  color: #0533B8;
}
a.text-link.core-link.lightMode.primary:hover,
.text-link.core-link.lightMode.primary:hover {
  border-bottom-color: #527DFA;
  color: #527DFA;
}
a.text-link.core-link.lightMode.primary:active,
.text-link.core-link.lightMode.primary:active {
  border-bottom-color: #15346F;
  color: #15346F;
}
a.text-link.core-link.lightMode.primary:visited,
.text-link.core-link.lightMode.primary:visited {
  border-bottom-color: #D8D8DF;
  color: #575861;
}
a.text-link.core-link.lightMode.primary:visited:hover,
.text-link.core-link.lightMode.primary:visited:hover {
  border-bottom-color: #527DFA;
  color: #527DFA;
}
a.text-link.core-link.lightMode.primary[aria-disabled=true],
.text-link.core-link.lightMode.primary[aria-disabled=true] {
  pointer-events: none;
  color: #ADAFB3;
  border-bottom-color: #ADAFB3;
}
a.text-link.core-link.lightMode.secondary,
.text-link.core-link.lightMode.secondary {
  border-bottom-color: transparent;
  color: #141824;
}
a.text-link.core-link.lightMode.secondary:hover,
.text-link.core-link.lightMode.secondary:hover {
  border-bottom-color: #141824;
  color: #141824;
}
a.text-link.core-link.lightMode.secondary:active,
.text-link.core-link.lightMode.secondary:active {
  border-bottom-color: #D8D8DF;
  color: #575861;
}
a.text-link.core-link.lightMode.secondary:visited,
.text-link.core-link.lightMode.secondary:visited {
  border-bottom-color: transparent;
  color: #575861;
}
a.text-link.core-link.lightMode.secondary:visited:hover,
.text-link.core-link.lightMode.secondary:visited:hover {
  border-bottom-color: #141824;
  color: #141824;
}
a.text-link.core-link.lightMode.secondary[aria-disabled=true],
.text-link.core-link.lightMode.secondary[aria-disabled=true] {
  pointer-events: none;
  color: #ADAFB3;
  border-bottom-color: #ADAFB3;
}
a.text-link.core-link.darkMode.primary,
.text-link.core-link.darkMode.primary {
  border-bottom-color: #94B2EB;
  color: #94B2EB;
}
a.text-link.core-link.darkMode.primary:hover,
.text-link.core-link.darkMode.primary:hover {
  border-bottom-color: #D0DDF6;
  color: #D0DDF6;
}
a.text-link.core-link.darkMode.primary:active,
.text-link.core-link.darkMode.primary:active {
  border-bottom-color: #3A70D9;
  color: #3A70D9;
}
a.text-link.core-link.darkMode.primary:visited,
.text-link.core-link.darkMode.primary:visited {
  border-bottom-color: #575861;
  color: #ADAFB3;
}
a.text-link.core-link.darkMode.primary:visited:hover,
.text-link.core-link.darkMode.primary:visited:hover {
  border-bottom-color: #D0DDF6;
  color: #D0DDF6;
}
a.text-link.core-link.darkMode.primary[aria-disabled=true],
.text-link.core-link.darkMode.primary[aria-disabled=true] {
  pointer-events: none;
  color: #ADAFB3;
  border-bottom-color: #ADAFB3;
}
a.text-link.core-link.darkMode.secondary,
.text-link.core-link.darkMode.secondary {
  border-bottom-color: transparent;
  color: #F4F4F6;
}
a.text-link.core-link.darkMode.secondary:hover,
.text-link.core-link.darkMode.secondary:hover {
  border-bottom-color: #F4F4F6;
  color: #F4F4F6;
}
a.text-link.core-link.darkMode.secondary:active,
.text-link.core-link.darkMode.secondary:active {
  border-bottom-color: #575861;
  color: #ADAFB3;
}
a.text-link.core-link.darkMode.secondary:visited,
.text-link.core-link.darkMode.secondary:visited {
  border-bottom-color: transparent;
  color: #ADAFB3;
}
a.text-link.core-link.darkMode.secondary:visited:hover,
.text-link.core-link.darkMode.secondary:visited:hover {
  border-bottom-color: #ADAFB3;
  color: #ADAFB3;
}
a.text-link.core-link.darkMode.secondary[aria-disabled=true],
.text-link.core-link.darkMode.secondary[aria-disabled=true] {
  pointer-events: none;
  color: #ADAFB3;
  border-bottom-color: #ADAFB3;
}

.text-link.text-link-inline {
  display: inline;
}

.icon-link {
  font-size: 16px;
}
.icon-link:before {
  margin-right: 10px;
}

.headline {
  color: #FFFFFF;
  display: block;
  font-size: 48px;
  line-height: 54px;
  margin: 72px auto 24px;
  max-width: 600px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

.subhead {
  clear: both;
  color: #6D6D6D;
  display: block;
  font-size: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin: 24px auto;
  text-align: center;
}

.subhead-dashboard {
  margin-bottom: 0;
  padding-top: 30px;
  text-align: left;
}

.align-center {
  text-align: center;
}

.font-xsmall {
  font-size: 13px;
  line-height: 13px;
}

.font-small {
  font-size: 14px;
  line-height: 18px;
}

.font-medium {
  font-size: 18px;
  line-height: 24px;
}

.font-large {
  font-size: 24px;
  line-height: 32px;
}

.font-xlarge {
  font-size: 32px;
  line-height: 36px;
}

.font-xxlarge {
  font-size: 48px;
  line-height: 52px;
}

.textXs {
  font-family: "ArbeitMedium", "Helvetica", Arial, sans-serif;
  font-size: 12px;
  line-height: 160%;
  letter-spacing: 0;
}

.textSm {
  font-family: "ArbeitMedium", "Helvetica", Arial, sans-serif;
  font-size: 13px;
  line-height: 160%;
  letter-spacing: 0;
}

.textMd {
  font-family: "ArbeitRegular", "Helvetica", Arial, sans-serif;
  font-size: 15px;
  line-height: 160%;
  letter-spacing: 0;
}

.textLg {
  font-family: "ArbeitRegular", "Helvetica", Arial, sans-serif;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0;
}

.textXl {
  font-family: "ArbeitRegular", "Helvetica", Arial, sans-serif;
  font-size: 18px;
  line-height: 160%;
  letter-spacing: 0;
}

.weight-light {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.weight-medium {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.color-black, a.color-black {
  color: #000000;
}

.color-almost-black, a.color-almost-black {
  color: #1F1F1F;
}

.color-slate, a.color-slate {
  color: #333333;
}

.color-grey, a.color-grey {
  color: #6D6D6D;
}

.color-stone, a.color-stone {
  color: #BABABA;
}

.color-offwhite, a.color-offwhite {
  color: #F2F2F2;
}

.color-white, a.color-white {
  color: #FFFFFF;
}

[class*=ui_]:before,
[data-icon]:before,
[class*=ui_]:after,
[data-icon]:after,
.ui-font:before,
.moderator-filter:before,
.nounproject-icon-hero .button .license-icon:before,
.ui-font:after,
.moderator-filter:after,
.nounproject-icon-hero .button .license-icon:after {
  font-family: "The-Noun-Project-UI", sans-serif;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 1.3em;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-icon]:before {
  content: attr(data-icon);
}

.ui_icon.flip {
  transform: scaleY(-1);
}

.ui_icon-receipt:before {
  content: "\e909";
}

.ui_logo:before {
  content: "∴";
  font-size: 40px;
  top: -4px;
}

.ui_payment:before {
  content: "\e908";
}

.ui_down-triangle-after:after,
.ui_down-drop-arrow-after:after,
.moderator-filter:after {
  content: "y";
}

.ui_palette:before {
  content: "\e906";
}

.ui_history:before {
  content: "\e907";
}

.ui_eye-dropper:before {
  content: "\e901";
}

.ui_expand:before {
  content: "\e900";
  color: #000;
}

.ui_clock:before {
  content: "\e902";
}

.ui_notes:before {
  content: "\e903";
}

.ui_important:before {
  content: "!";
}

.ui_dollar-sign-circle-filled:before {
  content: "$";
}

.ui_bell:before {
  content: "*";
}

.ui_plus-circle-filled:before {
  content: "+";
}

.ui_dollar-sign-with-arrow:before {
  content: ".";
}

.ui_power:before {
  content: "0";
}

.ui_book:before {
  content: "4";
}

.ui_account-settings:before {
  content: "5";
}

.ui_city:before {
  content: "6";
}

.ui_credit-card:before {
  content: "7";
}

.ui_dollar-sign:before {
  content: "9";
}

.ui_help:before {
  content: "?";
}

.ui_email:before {
  content: "@";
}

.ui_agency:before {
  content: "A";
}

.ui_collections:before {
  content: "C";
}

.ui_enterprise:before {
  content: "E";
}

.ui_clipboard:before {
  content: "H";
}

.ui_save:before {
  content: "J";
}

.ui_playground:before {
  content: "K";
}

.ui_lock:before {
  content: "M";
}

.ui_move-circle:before {
  content: "N";
}

.ui_description:before {
  content: "O";
}

.ui_pin:before {
  content: "R";
}

.ui_customer-service:before {
  content: "S";
}

.ui_team:before {
  content: "T";
}

.ui_globe:before {
  content: "W";
}

.ui_website:before {
  content: "Y";
}

.ui_translate:before {
  content: "Z";
}

.ui_ipad:before {
  content: "_";
}

.ui_curvy-arrow:before {
  content: "a";
}

.ui_cog:before {
  content: "c";
}

.ui_dashboard:before {
  content: "d";
}

.ui_embed:before {
  content: "e";
}

.ui_statistics:before {
  content: "g";
}

.ui_cloud-download:before {
  content: "h";
}

.ui_information:before {
  content: "i";
}

.ui_key:before {
  content: "k";
}

.ui_professional:before {
  content: "p";
}

.ui_poster:before {
  content: "q";
}

.ui_magazine:before {
  content: "r";
}

.ui_earth:before {
  content: "w";
}

.ui_leave:before {
  content: "x";
}

.ui_down-triangle:before {
  content: "y";
}

.ui_speech-bubble:before {
  content: "{";
}

.ui_phone:before {
  content: "~";
}

.ui_news:before {
  content: "´";
}

.ui_list-with-pencil:before {
  content: "µ";
}

.ui_dev:before {
  content: "¶";
}

.ui_businesses:before {
  content: "¸";
}

.ui_notice:before {
  content: "•";
}

.ui_discount:before {
  content: "‰";
}

.ui_pinterest:before {
  content: "℗";
}

.ui_move:before {
  content: "⇲";
}

.ui_logo:before {
  content: "∴";
}

.ui_plus-circle-no-fill:before {
  content: "⊕";
}

.ui_deny:before {
  content: "⊗";
}

.ui_grid:before {
  content: "⊞";
}

.ui_more:before {
  content: "⋰";
}

.ui_personal:before {
  content: "⌂";
}

.ui_icecream:before {
  content: "⌧";
}

.ui_arrow-left-line:before {
  content: "⍇";
}

.ui_arrow-right-line:before {
  content: "⍈";
}

.ui_down-drop-arrow:before {
  content: "⍌";
}

.ui_arrow-up-line:before {
  content: "⍐";
}

.ui_up-arrow:before {
  content: "⍓";
}

.ui_down-arrow-line:before {
  content: "⍗";
}

.ui_vector:before {
  content: "⎋";
}

.ui_receipt:before {
  content: "⎙";
}

.ui_video:before {
  content: "⎚";
}

.ui_packdog:before {
  content: "Ⓓ";
}

.ui_github:before {
  content: "Ⓖ";
}

.ui_linkedin:before {
  content: "Ⓛ";
}

.ui_paypal:before {
  content: "Ⓟ";
}

.ui_tumblr:before {
  content: "Ⓣ";
}

.ui_behance:before {
  content: "ⓑ";
}

.ui_dribbble:before {
  content: "ⓓ";
}

.ui_facebook:before {
  content: "ⓕ";
}

.ui_instagram:before {
  content: "ⓘ";
}

.ui_twitter:before {
  content: "ⓣ";
}

.ui_hardhat:before {
  content: "◓";
}

.ui_eye:before {
  content: "☀";
}

.ui_cloud-upload:before {
  content: "☁";
}

.ui_voice:before {
  content: "☄";
}

.ui_star:before {
  content: "★";
}

.ui_sad:before {
  content: "☹";
}

.ui_user:before {
  content: "☺";
}

.ui_sign-up:before {
  content: "☻";
}

.ui_eye-off:before {
  content: "☼";
}

.ui_organization:before {
  content: "♗";
}

.ui_crown-circle:before {
  content: "♛";
}

.ui_member:before {
  content: "♝";
}

.ui_broken-heart:before {
  content: "♡";
}

.ui_recycle:before {
  content: "♻";
}

.ui_animation:before {
  content: "⚅";
}

.ui_flag:before {
  content: "⚑";
}

.ui_pro-accounts:before {
  content: "⚒";
}

.ui_balance:before {
  content: "⚖";
}

.ui_search:before {
  content: "⚯";
}

.ui_rastor:before {
  content: "⚰";
}

.ui_resend:before {
  content: "✉";
}

.ui_share:before {
  content: "✍";
}

.ui_pencil:before {
  content: "✎";
}

.ui_pencil-pen:before {
  content: "✐";
}

.ui_checkmark:before {
  content: "✓";
}

.ui_close:before {
  content: "✖";
}

.ui_plus:before {
  content: "✚";
}

.ui_magazine-2:before {
  content: "✜";
}

.ui_quote:before {
  content: "❝";
}

.ui_heart:before {
  content: "❤";
}

.ui_thin-arrow-left:before {
  content: "❬";
}

.ui_thin-arrow-right:before {
  content: "❭";
}

.ui_left-arrow:before {
  content: "❮";
}

.ui_right-arrow:before {
  content: "❯";
}

.ui_public-domain:before {
  content: "➀";
}

.ui_cc:before {
  content: "➁";
}

.ui_link:before {
  content: "➝";
}

.ui_download:before {
  content: "⬇";
}

.ui_kit:before {
  content: "⬓";
}

.ui_unlock:before {
  content: "⸚";
}

.ui_upload:before {
  content: "\e600";
}

.ui_devices:before {
  content: "\e601";
}

.ui_collaborative_collections:before {
  content: "\e602";
}

.ui_network:before {
  content: "\e603";
}

.ui_check-mark:before {
  content: "\e604";
}

.ui_style:before {
  content: "\e605";
}

.ui_doctor:before {
  content: "\e606";
}

.ui_airplane:before {
  content: "\e607";
}

.ui_no-results:before {
  content: "\e608";
}

.ui_bezier:before {
  content: "\e609";
}

.ui_components:before {
  content: "\e60a";
}

.ui_video-play:before {
  content: "\e60b";
}

.ui_minus-circle-filled:before {
  content: "\e60c";
}

.ui_tablet:before {
  content: "\e60d";
}

.ui_open-book:before {
  content: "\e60e";
}

.ui_cc-fill:before {
  content: "\e60f";
}

.ui_simplified-poster:before {
  content: "\e610";
}

.ui_public-domain-fill:before {
  content: "\e611";
}

.ui_desktop:before {
  content: "\e612";
}

.ui_starter:before {
  content: "\e613";
}

.ui_ribbon:before {
  content: "\e614";
}

.ui_person:before {
  content: "\e615";
}

.ui_user_to_facebook:before {
  content: "\e616";
}

.ui_login_to_facebook:before {
  content: "\e617";
}

.ui_crown:before {
  content: "\e618";
}

.ui_metrics:before {
  content: "\e619";
}

.ui_royalties:before {
  content: "\e61a";
}

.ui_filter:before {
  content: "\e61b";
}

.ui_name:before {
  content: "\e61c";
}

.ui_kit-open:before {
  content: "\e61d";
}

.ui_trashcan:before {
  content: "\e61e";
}

.ui_resources:before {
  content: "\e61f";
}

.ui_principle:before {
  content: "\e620";
}

.ui_approve:before {
  content: "\e621";
}

.ui_notifications:before {
  content: "\e622";
}

.ui_view-more:before {
  content: "\e623";
}

.ui_folder:before {
  content: "\e624";
}

.ui_devil:before {
  content: "\e625";
}

.ui_flagged:before {
  content: "\e626";
}

.ui_savior:before {
  content: "\e627";
}

.ui_trademarked:before {
  content: "\e628";
}

.ui_handcuffs:before {
  content: "\e629";
}

.ui_homes:before {
  content: "\e62b";
}

.ui_tag:before {
  content: "\e62c";
}

.ui_cart:before {
  content: "\e62d";
}

.ui_seat:before {
  content: "\e62e";
}

.ui_basic-accounts:before {
  content: "\e630";
}

.ui_team-accounts:before {
  content: "\e632";
}

.ui_plug:before {
  content: "\e633";
}

.ui_checkbox:before {
  content: "\e634";
}

.ui_seat-add:before {
  content: "\e635";
}

.ui_web:before {
  content: "\e637";
}

.ui_diamond:before {
  content: "\e63b";
}

.ui_calendar:before {
  content: "\e640";
}

.ui_mobile-icon:before {
  content: "\e904";
}

.ui_alert-icon:before {
  content: "\e905";
}

.ui_wallet:before {
  content: "\e908";
}

.ui_icons_icon:before {
  content: "\e909";
}

.ui_photo:before {
  content: "\e90a";
}

.ui_history:before {
  content: "\e907";
}

/**
 * * This file is for common color stylings.
 * */
.bg-black {
  background-color: #000000;
}

.bg-almost-black {
  background-color: #1F1F1F;
}

.bg-slate {
  background-color: #333333;
}

.bg-grey {
  background-color: #6D6D6D;
}

.bg-stone {
  background-color: #BABABA;
}

.bg-offwhite {
  background-color: #F2F2F2;
}

.bg-bgwhite {
  background-color: #FAFAFA;
}

.bg-white {
  background-color: #FFFFFF;
}

.container {
  max-width: 940px;
  margin: 0 auto;
  -webkit-margin-collapse: separate;
}
.container.fluid-container {
  width: 100%;
}
.container.fluid-container .row {
  margin-left: 0;
  margin-right: 0;
}

.container,
.row {
  zoom: 1;
}
.container:before, .container:after,
.row:before,
.row:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.container:after,
.row:after {
  clear: both;
}

@media (min-width: 481px) {
  .columns {
    float: left;
    margin: 0 0 0 2.1276595745%;
    width: 6.3829787%;
  }
  .columns:first-child {
    margin-left: 0;
  }
  .columns.two {
    width: 14.8936169745%;
  }
  .columns.three, .columns.one-fourth {
    width: 23.4042552489%;
  }
  .columns.four, .columns.one-third {
    width: 31.9148935234%;
  }
  .columns.five {
    width: 40.4255317979%;
  }
  .columns.six, .columns.one-half {
    width: 48.9361700723%;
  }
  .columns.seven {
    width: 57.4468083468%;
  }
  .columns.eight, .columns.two-thirds {
    width: 65.9574466213%;
  }
  .columns.nine, .columns.three-fourths {
    width: 74.4680848957%;
  }
  .columns.ten {
    width: 82.9787231702%;
  }
  .columns.eleven {
    width: 91.4893614447%;
  }
  .columns.twelve, .columns.full {
    width: 99.9999997191%;
  }
  .columns.offset-one {
    margin-left: 10.6382978489%;
  }
  .columns.offset-one:first-child {
    margin-left: 8.5106382745%;
  }
  .columns.offset-two {
    margin-left: 19.1489361234%;
  }
  .columns.offset-two:first-child {
    margin-left: 17.0212765489%;
  }
  .columns.offset-three {
    margin-left: 27.6595743979%;
  }
  .columns.offset-three:first-child {
    margin-left: 25.5319148234%;
  }
  .columns.offset-four {
    margin-left: 36.1702126723%;
  }
  .columns.offset-four:first-child {
    margin-left: 34.0425530979%;
  }
  .columns.offset-five {
    margin-left: 44.6808509468%;
  }
  .columns.offset-five:first-child {
    margin-left: 42.5531913723%;
  }
  .columns.offset-six {
    margin-left: 53.1914892213%;
  }
  .columns.offset-six:first-child {
    margin-left: 51.0638296468%;
  }
  .columns.offset-seven {
    margin-left: 61.7021274957%;
  }
  .columns.offset-seven:first-child {
    margin-left: 59.5744679213%;
  }
  .columns.offset-eight {
    margin-left: 70.2127657702%;
  }
  .columns.offset-eight:first-child {
    margin-left: 68.0851061957%;
  }
  .columns.offset-nine {
    margin-left: 78.7234040447%;
  }
  .columns.offset-nine:first-child {
    margin-left: 76.5957444702%;
  }
  .columns.offset-ten {
    margin-left: 87.2340423191%;
  }
  .columns.offset-ten:first-child {
    margin-left: 85.1063827447%;
  }
  .columns.offset-eleven {
    margin-left: 95.7446805936%;
  }
  .columns.offset-eleven:first-child {
    margin-left: 93.6170210191%;
  }
}
.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

#main-content {
  padding: 0px;
}

.org-nav {
  background: #1f1f1f;
}

/**
 * * Submodule of page-header for numerous user settings & profile pages
 * * @group modules
 * * @todo Create page header module
 * */
.page-header-accounts {
  background: #1f1f1f;
  width: 100%;
  padding: 30px;
  text-align: center;
}
.page-header-accounts h2 {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 3.429em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  line-height: 1.5em;
  color: #FFFFFF;
  margin: 0 auto;
  max-width: 65%;
}
.page-header-accounts h2:before {
  display: block;
}
.page-header-accounts h3.plan-type {
  font-size: 24px;
  padding: 0 0 9px 0;
  color: #FFFFFF;
}
.page-header-accounts p.plan-description {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #FFFFFF;
  max-width: 750px;
  margin: auto;
  padding-bottom: 0.5rem;
}
.page-header-accounts img {
  border-radius: 50%;
  display: block;
  margin: 0 auto 2em auto;
  width: 80px;
  height: 80px;
}
.page-header-accounts .messages {
  font-size: 1.5em;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
  margin: 0em 0 2em 0;
}

.settings-page .page-header-accounts img, #dashboard .page-header-accounts img {
  border: solid 4px white;
  width: 150px;
  height: 150px;
}

#accounts-login {
  background-color: #1F1F1F;
}

.spotlight {
  text-align: center;
  padding: 29px 0px;
}

.spotlight figure,
.page-header-accounts figure {
  margin: auto;
  display: block;
  position: relative;
  width: 150px;
}
.spotlight figure img,
.page-header-accounts figure img {
  border: solid 4px #FFFFFF;
}
.spotlight figure i,
.page-header-accounts figure i {
  color: #FFFFFF;
  font-size: 6em;
}
.spotlight img,
.page-header-accounts img {
  border-radius: 50%;
  background: #1F1F1F;
  outline: #1F1F1F;
  text-align: center;
  margin-bottom: 0;
}
.spotlight figcaption,
.page-header-accounts figcaption {
  position: absolute;
  display: block;
  bottom: 6px;
  right: 0px;
}
.spotlight figcaption a,
.page-header-accounts figcaption a {
  font-size: 15px;
  color: #FFFFFF;
  border-radius: 50%;
  padding: 11px;
  width: 40px;
  height: 40px;
  text-align: center;
  transition: all 0.2s ease;
}
.spotlight figcaption a:hover,
.page-header-accounts figcaption a:hover {
  width: 50px;
  height: 50px;
  padding: 16px;
}
.spotlight .upgrade-link,
.page-header-accounts .upgrade-link {
  display: block;
}
.spotlight .upgrade-link :not(last-of-type),
.page-header-accounts .upgrade-link :not(last-of-type) {
  margin-bottom: 8px;
}

#user-info {
  background: #1F1F1F;
  color: #FFFFFF;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#user-info ::selection {
  background-color: #FFFFFF;
  color: #000000;
}
#user-info ::moz-selection {
  background-color: #FFFFFF;
  color: #000000;
}
#user-info h2 {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 3.429em;
  font-weight: normal;
  max-width: 60%;
  margin: 35px auto 0px;
}
#user-info h2 a {
  color: #F2F2F2;
}
#user-info h2 a:hover {
  color: #FFFFFF;
}
#user-info .description {
  font-size: 1.2857em;
  max-width: 600px;
  margin: 24px auto;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#user-info a:hover {
  color: #FFFFFF;
}

#personal-info li {
  color: #6D6D6D;
  display: inline-block;
  float: left;
  margin-bottom: 12px;
  margin-right: 2em;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#personal-info li:before {
  margin-right: 0.5em;
  font-size: 0.9em;
}
#personal-info li a {
  color: #6D6D6D;
}
#personal-info li a:before {
  margin-right: 0.5em;
  font-size: 0.9em;
}
#personal-info li li {
  margin-right: 1em;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#personal-info li:last-child {
  margin-right: 0;
}
#personal-info li.right {
  float: right;
}
#personal-info li span:before {
  margin-right: 0.5em;
  font-size: 14px;
}
#personal-info li .upgrade-button {
  margin-left: 1em;
}

.section-nav {
  width: 100%;
  overflow: hidden;
  z-index: 90;
  background-color: #333333;
}
.section-nav ul {
  text-align: center;
  width: 100%;
  position: relative;
}
.section-nav ul:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  content: "";
  display: block;
  z-index: -1;
}
.section-nav li {
  display: inline-block;
  font-size: 1.2857em;
}
.section-nav li a {
  transition: color 0.3s ease;
  padding: 1.75em 20px;
  display: block;
  width: 100%;
  height: 100%;
  color: #BABABA;
}
.section-nav li a:before {
  margin-right: 0.7em;
  font-size: 0.8em;
}
.section-nav li a:hover {
  color: #FFFFFF;
}
.section-nav li.current {
  position: relative;
}
.section-nav li.current a {
  color: #FFFFFF;
}
.section-nav.stuck {
  animation: slideDown 0.3s;
  position: fixed;
  top: 95px;
  font-size: 0.85em;
}
.section-nav.stuck ul {
  height: 36px;
  background-color: #333333;
}
.section-nav.stuck li a {
  padding: 0.675em 20px;
}
.section-nav.stuck li a::before {
  font-size: 0.85em;
}
@media (max-width: 768px) {
  .section-nav.stuck {
    top: 60px;
  }
}
.section-nav.stuck {
  overflow: visible;
}

section.profile-section,
section.infinite-page {
  padding: 30px 0;
}
section.profile-section header,
section.infinite-page header {
  padding: 0 0 3em 0;
  justify-content: space-between;
}
section.profile-section header.nope,
section.infinite-page header.nope {
  padding: 0;
}
section.profile-section header h3,
section.infinite-page header h3 {
  float: left;
  margin: 0 0 0 2.1276595745%;
  width: 6.3829787%;
  width: 48.9361700723%;
  font-size: 1.7142em;
  line-height: 48px;
  color: #333333;
}
section.profile-section header h3:first-child,
section.infinite-page header h3:first-child {
  margin-left: 0;
}
section.profile-section header h3::before,
section.infinite-page header h3::before {
  font-size: 1em;
  margin-right: 0.4em;
}
section.profile-section header .back-link,
section.profile-section header .nope,
section.infinite-page header .back-link,
section.infinite-page header .nope {
  color: #6D6D6D;
  text-align: right;
  transition: color, 0.3s, ease;
}
section.profile-section header .back-link:not(:first-of-type),
section.infinite-page header .back-link:not(:first-of-type) {
  margin-left: 1em;
}
section.profile-section header .back-link a,
section.infinite-page header .back-link a {
  border-bottom: solid 1px;
  color: #6D6D6D;
  margin-left: 2em;
  text-transform: capitalize;
}
section.profile-section header .back-link a:hover,
section.infinite-page header .back-link a:hover {
  color: #000000;
}
section.profile-section.public-profile header,
section.infinite-page.public-profile header {
  padding: 0;
}

section.profile-section#activity header {
  padding-bottom: 0.5rem;
}

.profile-detail header h3 {
  font-size: 1.7142em;
  line-height: 4rem;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.profile-detail header h3:before {
  font-size: 0.75em;
  margin-right: 0.5em;
}
.profile-detail header .back-link {
  transition: color, 0.3s, ease;
  text-align: right;
  line-height: 4rem;
  text-transform: capitalize;
}
.profile-detail header .back-link:hover {
  color: #000000;
}

.upload-new {
  display: block;
  color: #6D6D6D;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  padding: 60px 0;
  text-align: center;
  font-size: 1.8rem;
  line-height: 2.75rem;
  transition: all, 0.3s, ease;
}
.upload-new.dark {
  background: #F2F2F2;
}
.upload-new.light {
  background: white;
}
.upload-new::before {
  font-size: 1em;
  margin-right: 0.5em;
  margin-left: 0.3em;
  top: -4px;
  color: #6D6D6D;
}
.upload-new:hover {
  font-size: 1.9rem;
  color: #333;
}
.upload-new:hover::before {
  color: #333;
}

#dashboard #kit-cards .card .front {
  border: 1px solid #BABABA;
}
#dashboard #user-activity div.nope {
  color: #BABABA;
  padding: 60px 0;
}

#public-profile .icon-card, #dashboard .icon-card {
  position: relative;
  height: 220px;
}
#public-profile .icon-card .icon-meta, #dashboard .icon-card .icon-meta {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#public-profile .icon-card .icon-card-inner, #dashboard .icon-card .icon-card-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#public-profile .icon-card .icon-card-inner a, #dashboard .icon-card .icon-card-inner a {
  position: relative;
  height: 84px;
  width: 84px;
  margin: 40px auto;
  padding-top: 20px;
  display: block;
}
#public-profile .search-by-creator, #dashboard .search-by-creator {
  width: 100%;
  margin: 1.9375rem 0 0.625rem 0;
  position: relative;
}
#public-profile .search-by-creator .search-icon, #dashboard .search-by-creator .search-icon {
  position: absolute;
  top: 1.125rem;
  left: 0.9375rem;
}
#public-profile .search-by-creator input[type=search], #dashboard .search-by-creator input[type=search] {
  width: 100%;
  padding: 0.9375rem;
  padding-left: 2.4375rem;
  border: 3px solid #F2F2F2;
  box-sizing: border-box;
}

#dashboard .icon-card-inner {
  background: #F2F2F2;
}

#public-profile #user-download {
  background: #BABABA;
}

.warning {
  text-align: center;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 1.25em;
  color: #F44E4E;
  border: none;
  padding: 1.5em;
  margin: 0px 0px 3em;
  border: 4px solid #BABABA;
}
.warning h3 {
  font-size: 2em;
}
.warning p {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
.warning a {
  color: #FDEBEC;
  border-bottom: solid 1px;
}
.warning a:hover {
  color: #F44E4E;
}

#past-due {
  margin: 0 !important;
}

#paypal-link {
  color: #F44E4E !important;
}

.loading {
  margin: 0 auto;
}

#user-purchases {
  background: #FFFFFF;
}

/**
 * * List of users on team profile
 * * @group modules
 * * @todo move this to a module file
 * */
.users > li {
  display: inline-block;
  position: relative;
  text-align: center;
  margin-bottom: 2em;
  height: 180px;
}
.users > li:nth-child(7) {
  margin-left: 0;
}
.users > li .ui_arrow-right:before,
.users > li .ui_close:before,
.users > li img,
.users > li i.ui_email {
  position: relative;
  border-radius: 50%;
  display: block;
  background-color: #BABABA;
  color: #FFFFFF;
  line-height: 120px;
  width: 120px;
  text-align: center;
  font-size: 2em;
  margin: auto;
}
.users > li i.ui_email {
  background-color: #BABABA;
}
.users > li .ui_arrow-right:before,
.users > li .ui_close:before {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  top: 0px;
}
.users > li > a:hover > img,
.users > li > a:hover > i {
  opacity: 0;
}
.users > li > a:hover:before {
  visibility: visible;
  opacity: 1;
  left: 8px;
}
.users > li h3 {
  font-size: 13px;
  padding: 1em 0px 0px;
  color: #BABABA;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.users > li h3 a {
  color: #BABABA;
  line-height: 2em;
}
.users > li h3 a:hover {
  color: #333333;
}
.users > li h3:before {
  font-size: 0.75em;
}
.users > li .resend-invitation {
  display: block;
}
.users > li ul li {
  margin-bottom: 0px;
  font-size: 0.65em;
  display: inline-block;
}
.users > li ul li a {
  color: #BABABA;
}
.users > li ul li a:hover {
  color: #333333;
}
.users > li .add-new-user {
  color: #FFFFFF;
  text-align: center;
  font-size: 2em;
}
.users > li .add-new-user:hover {
  background: #333333;
}
.users > li .invitation {
  opacity: 0.5;
}
.users > li .loading {
  display: block;
  border-radius: 50%;
  background: #BABABA;
  height: 120px;
  width: 120px;
  position: absolute;
  top: 0px;
  margin-left: 8px;
}
.users > li .loading div {
  margin-left: 33%;
  margin-top: 48%;
  background-color: #FFFFFF;
}

#mailbox {
  text-align: center;
  margin: 9em auto 4em auto;
}
#mailbox header h3 {
  margin-bottom: 30px;
  color: #FFFFFF;
}
#mailbox .mailbox-flag {
  fill: black;
  animation-name: raiseMailboxFlag;
  animation-delay: 1.25s;
  animation-duration: 0.5s;
  transform-origin: 12% 25% 0;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#mailbox svg {
  width: 260px;
  height: 260px;
  fill: #FFFFFF;
}

.mailbox-text {
  text-align: center;
}
.mailbox-text a {
  border-bottom: 1px solid;
}
.mailbox-text p {
  font-size: 18px;
  color: #F2F2F2;
}

.edit-image {
  position: relative;
  display: inline-block;
}
.edit-image img {
  background: #BABABA;
}
.edit-image:before {
  font-size: 4em;
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 2.75em;
  left: 0px;
  top: 0px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  border-radius: 50%;
  transform: scale(0);
  transform: rotate(180deg);
  transition: all 0.3s ease;
}
.edit-image:hover img {
  opacity: 0;
}
.edit-image:hover:before {
  background: #333333;
  color: #FFFFFF;
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transform: rotate(0deg);
}

.multi-function-modal .visible[data-show=confirmation] {
  padding-top: 16em;
  text-align: center;
}
.multi-function-modal .visible[data-show=confirmation] .columns {
  margin-top: 15%;
}
.multi-function-modal .visible[data-show=confirmation] h3 {
  font-size: 1.714em;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
}
.multi-function-modal .visible[data-show=confirmation] .button-hold {
  margin-top: 2em;
}
.multi-function-modal .visible[data-show=confirmation] button {
  border: none;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  color: #FFFFFF;
  background: #BABABA;
  padding: 25px 80px;
  display: inline-block;
  transition: all 0.3s ease;
  margin-right: 0.5em;
  transition: background-color 0.3s ease;
}
.multi-function-modal .visible[data-show=confirmation] button img {
  margin-right: 24px;
}
.multi-function-modal .visible[data-show=confirmation] button:last-child {
  margin-right: 0;
}
.multi-function-modal .visible[data-show=confirmation] button:hover {
  background-color: #6D6D6D;
}

li.default-view {
  margin: 2em;
  text-align: center;
  font-size: 3em;
  color: #BABABA;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
li.default-view i {
  display: block;
  font-size: 150px;
  color: #BABABA;
}

body.settings-page {
  background: #333333;
}
body.settings-page .account-fields {
  padding: 20px 78px;
  width: 100%;
}
body.settings-page .account-fields header {
  padding: 8px 0 26px;
}
body.settings-page .account-fields header h3 {
  display: inline-block;
}
body.settings-page .account-fields header a, body.settings-page .account-fields header button {
  color: #6D6D6D;
  float: right;
  line-height: 32px;
  text-align: right;
  display: inline-block;
  border-bottom: solid 1px transparent;
}
body.settings-page .account-fields header button {
  transition: all 0.3s ease;
}
body.settings-page .account-fields header button:hover {
  color: #000000;
  border-bottom-color: #000000;
}
body.settings-page .settings-footer {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 60px;
}
body.settings-page .settings-footer a {
  border-bottom: solid 1px;
}
body.settings-page .settings-footer a:hover {
  color: #FFFFFF;
}
body.settings-page .half {
  width: 47.5%;
}
body.settings-page .address-part-1,
body.settings-page .address-part-2 {
  width: 100%;
}
body.settings-page .alpha {
  margin-left: 0px;
}

@media (max-width: 768px) {
  body.settings-page .account-fields {
    padding: 20px;
  }
}
body.basic .settings-prepaid .StripeElement--focus {
  color: #000000;
  outline: none;
}
body.basic .settings-prepaid .StripeElement--focus:not(.StripeElement--invalid) {
  border-left: 8px solid #7AC943;
}
body.basic .settings-prepaid .StripeElement:hover {
  outline: 1px solid #7AC943 !important;
}

body.pro .settings-prepaid .StripeElement:hover {
  outline: 1px solid;
}

.settings-prepaid section.balance {
  margin-bottom: 34px;
}
.settings-prepaid h4 {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
.settings-prepaid .message-to-user {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  color: #3ea9f5;
  font-size: 17px;
  margin-bottom: 34px;
}
.settings-prepaid .message-to-user .ui_wallet {
  font-size: 31px;
  margin-right: 17px;
}
.settings-prepaid .balance-input-section {
  margin-bottom: 40px;
}
.settings-prepaid .balance-input-section h4 {
  margin-bottom: 5px;
}
.settings-prepaid .balance-input-section .text {
  font-size: 13px;
  color: #bebebe;
}
.settings-prepaid .balance-input-section .price-per-icon {
  font-size: 10px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #6D6D6D;
  margin-bottom: 10px;
  font-size: 13px;
}
.settings-prepaid .balance-input-section .pro-blue {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #3EA9F5;
}
.settings-prepaid .balance-input-section .plan-price {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #6D6D6D;
}
.settings-prepaid .balance-input-section .plan-price, .settings-prepaid .balance-input-section .plan-text {
  font-size: 18px;
}
.settings-prepaid .balance-input-section input[type=number] {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  color: #000000;
  display: inline-block;
  background-color: #F2F2F2;
  text-align: center;
  width: 100%;
  max-width: 80px;
  padding: 20px 0;
}
.settings-prepaid .balance-input-section input[type=number].error {
  padding: 20px 0 12px 0 !important;
}
.settings-prepaid .balance-input-section input[type=number].error:hover {
  outline: transparent;
}
.settings-prepaid .balance-input-section input[type=number].error:focus {
  border-left: 0 !important;
  padding-bottom: 20px !important;
}
.settings-prepaid .balance-input-section input[type=number]::-webkit-inner-spin-button, .settings-prepaid .balance-input-section input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
.settings-prepaid .current-balance {
  font-size: 14px;
  color: #707070;
  padding: 16px 0;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  margin-bottom: 32px;
}
.settings-prepaid form header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
}
.settings-prepaid form .save-card label {
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}
.settings-prepaid form .checkbox-container {
  border: solid 1px #bababa;
  margin-right: 6px;
  position: relative;
  width: 15px;
  height: 15px;
}
.settings-prepaid form .checkbox-container .ui_check-mark {
  position: absolute;
  font-size: 10px;
  opacity: 0;
}
.settings-prepaid form .checkbox-container .ui_check-mark.checked {
  opacity: 1;
}
.settings-prepaid form .success-message-container {
  text-align: center;
  min-height: 1rem;
  margin-top: 0;
  margin-bottom: 0.125rem;
}
.settings-prepaid form .success-message-container .success-message {
  color: #7AC943;
}
.settings-prepaid form .success-message-container .add-more-icons-cta {
  color: #6D6D6D;
  text-decoration: underline;
  display: inline-block;
}
.settings-prepaid form .charged-today {
  display: flex;
  justify-content: space-between;
  margin-bottom: 45px;
  padding-top: 16px;
  border-top: 1px solid #dddddd;
}
.settings-prepaid form .charged-today h4 {
  font-size: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.settings-prepaid form .charged-today .total {
  display: flex;
  align-items: center;
}
.settings-prepaid form .charged-today .total .currency {
  font-size: 13px;
  color: #999999;
  margin-right: 8px;
}
.settings-prepaid form .charged-today .total .amount {
  font-size: 20px;
}

/**
 * * Side navigation for user settings pages
 * * @group modules
 * * @todo move to own module file
 * */
.settings-subnav {
  padding-top: 1.5rem;
}
.settings-subnav a {
  color: #BABABA;
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
}
.settings-subnav i {
  font-size: 24px;
  display: block;
  padding-bottom: 4px;
  font-weight: 100;
}
.settings-subnav .current {
  position: relative;
}
.settings-subnav .current a {
  color: #FFFFFF;
}
.settings-subnav .current:before {
  content: "";
  border: solid 24px transparent;
  border-right-color: #FFFFFF;
  position: absolute;
  width: 20px;
  height: 20px;
  display: block;
  right: -22px;
  top: -4px;
}

.current-plan {
  font-size: 18px;
  padding: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  background: #F2F2F2;
  border: solid 2px #BABABA;
}
.current-plan em {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
}
.current-plan .next-payment {
  float: right;
  font-size: 18px;
}

.current-plan.ui_discount {
  font-size: 13px;
}
.current-plan.ui_discount:before {
  font-size: 36px;
  float: left;
  margin-right: 10px;
}

.current-plan.upsell {
  margin-bottom: 1.5rem;
}
.current-plan.upsell .current-plan-top {
  display: flex;
  justify-content: space-between;
}
.current-plan.upsell .current-plan-top .button {
  font-size: 1rem;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  margin-bottom: 0;
  height: auto;
  padding: 0.75rem 1rem;
}
.current-plan.upsell .learn-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 1rem;
}

.accounts-tab li {
  display: inline-block;
  float: left;
  margin: 0px 12px 0 0;
  padding: 0px;
}
.accounts-tab li:last-child {
  margin: 0px;
  float: right;
}
.accounts-tab li a {
  padding: 22px 22px;
  font-size: 18px;
  text-align: center;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  background: #333333;
  color: #BABABA;
  transition: all 0.3s ease;
}
.accounts-tab li a:hover {
  background: #BABABA;
  color: #000000;
}
.accounts-tab li.current a {
  background: #F2F2F2;
  color: #000000;
}
.accounts-tab.teams-times-5 li {
  width: 15.9%;
  margin-right: 7px;
}
.accounts-tab.teams-times-5 li:last-child {
  margin: 0;
}
.accounts-tab.teams-times-4 li {
  width: 19%;
  margin-right: 9px;
}
.accounts-tab.teams-times-4 li:last-child {
  margin: 0;
}
.accounts-tab.teams-times-3 li {
  width: 24%;
  margin-right: 10px;
}
.accounts-tab.teams-times-3 li:last-child {
  margin: 0;
}
.accounts-tab.teams-times-2 li {
  width: 32.25%;
}
.accounts-tab.teams-times-1 li {
  width: 49%;
}

.new-custom-name button.ui_save {
  padding: 0;
}

#create-team {
  background: #000;
}
#create-team .page-header {
  padding: 0;
}
#create-team .create-team h1 {
  color: #fff;
  margin: 40px 0;
  font-size: 48px;
  text-align: center;
}
#create-team .create-team p {
  color: #929292;
  font-size: 18px;
  text-align: center;
}
#create-team .create-team form#create-team {
  margin-top: 30px;
}
#create-team .create-team #team_name {
  margin-bottom: 30px;
}

.icon-meta {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #BABABA;
  display: inline;
  margin-left: 20px;
  margin-top: 10px;
  float: left;
}

.more-information {
  padding: 0;
}

.settings-plan .stripe-split-form .StripeElement {
  max-width: none;
}

.upgrade-thank-you-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body#public-profile #main-content.banner-removed,
body#public-profile #user-info.banner-removed,
body#public-profile section.infinite-page.user-icons.public-profile.banner-removed {
  margin-top: 0px;
}
@media (max-width: 768px) {
  body#public-profile #main-content.banner-removed,
  body#public-profile #user-info.banner-removed,
  body#public-profile section.infinite-page.user-icons.public-profile.banner-removed {
    margin-top: 0px;
  }
}

body.settings-page.with-top-banner .page-header-accounts,
body.settings-page.with-top-banner #user-info,
body.settings-page.with-top-banner #uploads,
body.settings-page.with-top-banner section#activity,
body.settings-page.with-top-banner #organization-members.users.infinite-page,
body#dashboard.with-top-banner .page-header-accounts,
body#dashboard.with-top-banner #user-info,
body#dashboard.with-top-banner #uploads,
body#dashboard.with-top-banner section#activity,
body#dashboard.with-top-banner #organization-members.users.infinite-page,
body#public-profile.with-top-banner .page-header-accounts,
body#public-profile.with-top-banner #user-info,
body#public-profile.with-top-banner #uploads,
body#public-profile.with-top-banner section#activity,
body#public-profile.with-top-banner #organization-members.users.infinite-page {
  margin-top: 48px;
}
@media (max-width: 768px) {
  body.settings-page.with-top-banner .page-header-accounts,
  body.settings-page.with-top-banner #user-info,
  body.settings-page.with-top-banner #uploads,
  body.settings-page.with-top-banner section#activity,
  body.settings-page.with-top-banner #organization-members.users.infinite-page,
  body#dashboard.with-top-banner .page-header-accounts,
  body#dashboard.with-top-banner #user-info,
  body#dashboard.with-top-banner #uploads,
  body#dashboard.with-top-banner section#activity,
  body#dashboard.with-top-banner #organization-members.users.infinite-page,
  body#public-profile.with-top-banner .page-header-accounts,
  body#public-profile.with-top-banner #user-info,
  body#public-profile.with-top-banner #uploads,
  body#public-profile.with-top-banner section#activity,
  body#public-profile.with-top-banner #organization-members.users.infinite-page {
    margin-top: 48px;
  }
}

.divider {
  border-top: 1px solid #333333;
  margin: 36px 0;
}

@keyframes reveal {
  from {
    transform: scale(0.001);
  }
  to {
    transform: scale(1);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInDelay {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInAndUpDelay {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
    top: 10px;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide {
  to {
    transform: translateX(15px);
  }
}
@keyframes loadIcon {
  from {
    transform: scale(0.001);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes raiseMailboxFlag {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-500px);
  }
  30% {
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes slideOutFromLeft {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateX(300px);
    opacity: 0;
  }
}
@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(300px);
  }
  50% {
    opacity: 0;
    transform: translateX(300px);
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes slideInFromLeftShort {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  30% {
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes slideOutFromRight {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateX(-300px);
    opacity: 0;
  }
}
@keyframes beat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.5);
  }
  75% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
@keyframes jetpack {
  0% {
    transform: translate(100px, 500px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes mobile-sprite {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1068px 0;
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
@keyframes kitswap {
  0% {
    background-image: url(https://static.production.thenounproject.com/assets/bundles/e20681e79d80cf679981.svg);
  }
  50% {
    background-image: none;
  }
  100% {
    background-image: url(https://static.production.thenounproject.com/assets/bundles/348d19affe3618727523.svg);
  }
}
@keyframes addtokit {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(90deg) scale(1.5);
  }
}
@keyframes addtokit-reverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
@keyframes fill {
  1% {
    fill: #2a2a2a;
  }
  50% {
    fill: #ffffff;
  }
  0%, 99%, 100% {
    fill: transparent;
  }
}
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin-continuous-centered {
  0% {
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    left: 50%;
    transform: translateX(-50%) rotate(360deg);
  }
}
@keyframes reveal2 {
  50% {
    color: transparent;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
    color: transparent;
    opacity: 0;
  }
}
@keyframes blackout {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.75);
  }
}
@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes pop-in-centered {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(-50%);
  }
}
@keyframes coins_one {
  from {
    top: 0;
    opacity: 0;
    width: 10px;
  }
  to {
    top: -100px;
    opacity: 1;
    width: 24px;
  }
}
@keyframes coins_two {
  from {
    top: 0;
    opacity: 0;
    width: 10px;
  }
  to {
    top: -70px;
    left: 52%;
    opacity: 1;
    width: 18px;
  }
}
@keyframes coins_three {
  from {
    top: 0;
    opacity: 0;
    width: 10px;
  }
  to {
    left: 48%;
    top: -85px;
    opacity: 1;
    width: 18px;
  }
}
@keyframes move-down-in-place {
  0% {
    top: -20px;
  }
  100% {
    top: 0;
  }
}
@keyframes poof {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}
@keyframes processing {
  0% {
    background-color: rgba(0, 0, 0, 0.25);
    width: 0%;
  }
  25% {
    width: 75%;
  }
  100% {
    background-color: rgba(0, 0, 0, 0.25);
    width: 95%;
  }
}
@keyframes reactSlideIn {
  0% {
    max-height: 0;
  }
  100% {
    max-height: 99em;
  }
}
@keyframes loadingPulse {
  0% {
    background-color: rgba(186, 186, 186, 0.15);
  }
  50% {
    background-color: rgba(186, 186, 186, 0.35);
  }
  0% {
    background-color: rgba(186, 186, 186, 0.15);
  }
}
@keyframes insertIcon {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.25);
  }
  25% {
    transform: scale(0);
  }
  75% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes animateUpBackgroundImage {
  0% {
    background-position-y: 0%;
    background-repeat-y: inherit;
  }
  100% {
    background-position-y: 500%;
    background-repeat-y: inherit;
  }
}
@keyframes letter-in {
  0% {
    top: 200px;
  }
  100% {
    top: 0;
  }
}
.list-of-apps-header {
  background: #F2F2F2;
  color: #000000;
  font-size: 14px;
  margin-top: 40px;
  padding: 8px;
  text-align: center;
  width: 100%;
}

.list-of-apps {
  border: solid 3px #F2F2F2;
  font-size: 18px;
  margin: 0 0 40px 0;
  padding: 16px 8px 8px 8px;
}
.list-of-apps li {
  margin-bottom: 8px;
}
.list-of-apps a {
  align-items: center;
  justify-content: flex-start;
  padding: 8px;
  text-align: left;
  transition: all 0.3s ease-out;
}
.list-of-apps a:hover {
  background: #F2F2F2;
  border-radius: 4px;
}
.list-of-apps img {
  display: inline;
  height: 24px;
  margin: 0 16px 0 0;
  width: 24px;
}

/** For displaying avatars and .
 * *  @group modules
 * *  @example html
 * *       <figure class="team-member-avatar ui_checkmark">
 * *           <a href="/meganb/">
 * *               <img src="" alt="< username >" width="80" height="80">
 * *           </a>
 * *       </figure>
 * *
 * *       <div class="user-avatar">
 * *          <img src="" alt="<Full name>" />
 * *          <span class="user-avatar-name">Users Full Name</span>
 * *       </div>
 * *
 * *  @todo Bring all avatar styles into this module
 * */
.user-avatar img {
  border: solid 2px #FFFFFF;
  border-radius: 50%;
  display: block;
  margin: auto;
}

.user_avatar .avatar {
  border-radius: 50%;
  margin: 0 auto 1em;
  width: 120px;
  height: 120px;
  transition: all ease 0.1s;
}
.user_avatar .avatar img {
  margin: 0;
  padding: 0;
}
.user_avatar .avatar:hover img {
  animation: swing 1s ease infinite;
}
.user_avatar .avatar:active {
  transform: scale(0.95);
}

/** For displaying temporary messages to users at top of page.
 * *  @group modules
 * *  @example html
 * *    <section class="banner">
 * *        <div class="container row">
 * *            <a class="dismiss-banner" href="#" title="dismiss banner">×</a>
 * *            <span class="info">From now on, The Noun Project will only be accepting pizza icons.</span>
 * *        </div>
 * *     </section>
 * *  @todo Incorporate icon hover tooltip as a submodule
 * */
.banner {
  transition: all 0.3s ease;
  text-align: center;
  overflow: hidden;
  color: #333;
  background-color: #F2F2F2;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
}
.banner a, .banner a:visited {
  color: #FFFFFF;
}
.banner.dismissed {
  height: 0px;
}
.banner.error {
  background-color: #FDEBEC;
  color: #FFFFFF;
}
.banner.alert {
  background-color: #FFBF43;
  color: #FFFFFF;
}
.banner.promo, .banner.info {
  background-color: #000000;
  color: #FFFFFF;
  position: fixed;
  z-index: 999;
}
.banner.promo a, .banner.promo a:visited, .banner.info a, .banner.info a:visited {
  color: #FFFFFF;
}
.banner.promo + section#site-header, .banner.info + section#site-header {
  margin-top: 50px;
}
.banner.promo.banner-flex .row, .banner.info.banner-flex .row {
  margin-left: 0;
  margin-right: 0;
}
.banner.promo.banner-flex .info, .banner.info.banner-flex .info {
  justify-content: center;
}
.banner.promo .ui_close, .banner.info .ui_close {
  left: 97%;
}
.banner.info {
  background-color: #81B5E7;
  color: #16161D;
}
.banner.info a, .banner.info a:visited {
  color: #16161D;
}
.banner.info .dismiss-banner {
  color: #16161D;
}
.banner.info span.info {
  margin-left: auto;
  margin-right: auto;
}
.banner.info span.info a {
  text-decoration: underline;
}
.banner.info span.info a:hover {
  text-decoration: none;
}
.banner.promotional {
  background-color: #9FD774;
  color: #141824;
  position: fixed;
  z-index: 999;
}
.banner.promotional a, .banner.promotional a:visited {
  color: #16161D;
}
.banner.promotional .dismiss-banner {
  color: #16161D;
}
.banner.promotional span.info {
  margin-left: auto;
  margin-right: auto;
}
.banner.promotional span.info a {
  text-decoration: underline;
}
.banner.promotional span.info a:hover {
  text-decoration: none;
}
.banner.promotional + section#site-header {
  margin-top: 50px;
}
.banner.promotional.banner-flex .row {
  margin-left: 0;
  margin-right: 0;
}
.banner.promotional.banner-flex .info {
  justify-content: center;
}
.banner.promotional.banner-flex span.content {
  width: calc(100% - 20px);
}
.banner.promotional .ui_close {
  left: 97%;
}
.banner.success {
  background-color: #7AC943;
  color: #FFFFFF;
}
.banner.payment-declined {
  background-color: #B73B3B;
  color: #FFFFFF;
}
.banner:not(.banner-flex) .container.row {
  margin-top: 15px;
}
.banner:not(.banner-flex) .info {
  margin: 0 40px 10px 0;
  display: block;
  min-height: 25px;
}
.banner:not(.banner-flex) a, .banner:not(.banner-flex) a:visited {
  text-decoration: underline;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.banner:not(.banner-flex) .dismiss-banner {
  margin-top: -3px;
  position: absolute;
  right: 0;
}
.banner.banner-flex .row, .banner.banner-flex .info {
  display: flex;
  align-items: center;
}
.banner.banner-flex .info {
  margin: 8px 0;
}
.banner.banner-flex .info img {
  margin-right: 7px;
}
.banner.full-banner-link .row > a, .banner.full-banner-link .row > .content {
  flex-grow: 1;
}
.banner .banner-grid {
  position: relative;
}
.banner .dismiss-banner {
  cursor: pointer;
  color: #FFFFFF;
  display: block;
  font-size: 28px;
  text-decoration: none;
  font-size: 0.769rem;
}
.banner .dismiss-text {
  text-decoration: underline;
  margin: 0;
}
#plugin-body .banner.site-only {
  display: none;
}
.banner.banner-flex .info {
  min-height: 34px;
}
@media (max-width: 769px) {
  .banner {
    padding: 0 5px;
  }
}
@media (min-width: 769px) {
  .banner .ui_close {
    position: absolute;
  }
}

.underline {
  text-decoration: underline;
}

.no-decoration {
  text-decoration: none;
}

.toast-container {
  z-index: 210;
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 16px 24px;
  background: white;
  box-shadow: 0px 10px 20px rgba(51, 51, 51, 0.25);
  border-radius: 5px;
  overflow: hidden;
}
.toast-container .toast-header {
  margin-top: 4px;
  margin-bottom: 4px;
}
.toast-container .toast-body {
  font-size: 14px;
  padding-bottom: 4px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.toast-container .ui_close {
  font-size: 13px;
  position: absolute;
  right: 5px;
  top: 5px;
}

#a-la-carte-selection {
  margin-top: 12px;
  padding-top: 12px;
  margin-bottom: 20px;
  padding-bottom: 36px;
  border-top: 1px solid #F2F2F2;
  border-bottom: 1px solid #F2F2F2;
}
#a-la-carte-selection label {
  color: #333333;
  height: 71px;
  padding-top: 23px;
  border-color: #3EA9F5;
}
#a-la-carte-selection input:checked + label {
  color: #000000;
  opacity: 1;
}

.billing-form .subscription-header {
  margin-top: 36px;
  font-size: 16px;
  color: #3EA9F5;
}
.billing-form .a-la-carte-header {
  font-size: 16px;
  color: #3EA9F5;
}
.billing-form .subscription-description {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  margin-top: 12px;
}
.billing-form #plan-selection .call-out {
  color: #3EA9F5;
  cursor: pointer;
  display: block;
  font-size: 13px;
  height: auto;
  padding: 12px 0;
  text-align: center;
}
.billing-form #id_save_card,
.billing-form #id_show_billing_info,
.billing-form #yearly_pro {
  display: none;
}
.billing-form #id_save_card:focus + .checkbox-fillin,
.billing-form #id_show_billing_info:focus + .checkbox-fillin,
.billing-form #yearly_pro:focus + .checkbox-fillin {
  border-color: transparent;
  outline: none;
}
.billing-form #id_save_card:checked + .checkbox-fillin,
.billing-form #id_show_billing_info:checked + .checkbox-fillin,
.billing-form #yearly_pro:checked + .checkbox-fillin {
  border-color: transparent;
  outline: none;
}
.billing-form #id_save_card:checked + .checkbox-fillin i,
.billing-form #id_show_billing_info:checked + .checkbox-fillin i,
.billing-form #yearly_pro:checked + .checkbox-fillin i {
  opacity: 1;
}
.billing-form .checkbox-fillin {
  position: relative;
  opacity: 1;
  bottom: auto;
  top: auto;
  left: auto;
  display: inline-block;
  width: 20px;
  height: 19px;
  background: #FFFFFF;
  margin-right: 6px;
  cursor: pointer;
  border: solid 1px #333333;
  height: 23px;
  margin-left: 0;
  margin-right: 12px;
  width: 23px;
}
.billing-form .checkbox-fillin:hover {
  border-color: #3EA9F5;
}
.billing-form .checkbox-fillin i {
  color: #3EA9F5;
  font-size: 18px;
  opacity: 0;
}
.billing-form .save-payment-option {
  cursor: pointer;
  text-align: left;
}
.billing-form .price-status {
  display: flex;
  font-size: 24px;
  justify-content: space-between;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  width: 380px;
}
.billing-form .price-status #dash {
  display: inline-flex;
  flex-grow: 1;
  margin: 16px;
  width: auto;
}
.billing-form label[for=card-number] {
  overflow: visible !important;
}
.billing-form .visa + label[for=card-number]:before {
  content: "Visa";
}
.billing-form .mastercard + label[for=card-number]:before {
  content: "Mastercard";
}
.billing-form .amex + label[for=card-number]:before {
  content: "Amex";
}
.billing-form .dinersclub + label[for=card-number]:before {
  content: "Diners Club";
}
.billing-form .discover + label[for=card-number]:before {
  content: "Discover";
}
.billing-form .unionpay + label[for=card-number]:before {
  content: "UnionPay";
}
.billing-form .jcb + label[for=card-number]:before {
  content: "JCB";
}
.billing-form input + label[for=card-number]:before {
  color: black;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
  position: absolute;
  background-color: transparent;
  width: 50px;
  height: 10px;
  display: block;
  text-transform: uppercase;
  top: -44px;
  left: 278px;
}
.billing-form button.ui_download {
  margin-left: 0;
  margin-right: 0;
}
.billing-form .upgrade_disclaimer {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #BABABA;
  width: 380px;
}
.billing-form #plan-selection {
  width: 100%;
}
.billing-form #plan-selection .plan {
  margin-bottom: 0;
}

.end-billing {
  margin-bottom: 50px;
}

.react-modal {
  overflow-x: hidden !important;
}
.react-modal #plan-selection .call-out {
  color: #3EA9F5;
  cursor: pointer;
  display: block;
  font-size: 13px;
  height: auto;
  padding: 12px 0;
  text-align: center;
}
.react-modal .what-you-get {
  margin-bottom: 18px;
}
.react-modal .what-you-get li {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
.react-modal .save-payment-option {
  cursor: pointer;
  text-align: left;
}
.react-modal #save-payment .text-link {
  border-bottom: solid 1px;
}
.react-modal #save-payment i {
  color: #3EA9F5;
  font-size: 18px;
}
.react-modal .show-optional-billing {
  color: #BABABA;
  font-size: 18px;
  margin: 18px 0;
}
.react-modal .price-status {
  display: flex;
  font-size: 24px;
  justify-content: space-between;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  width: 380px;
}
.react-modal .price-status #dash {
  display: inline-flex;
  flex-grow: 1;
  margin: 16px;
  width: auto;
}

/** For making things look like buttons
 * *  @group modules
 * *  @example html
 * *    <a class="button">I look like a button!</a>
 * *  @todo We should make it easier to remove margin-bottom (currently changes processing styles)
 * */
.button {
  border: none;
  border-radius: 4px;
  backface-visibility: hidden;
  background-color: #BABABA;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  height: 70px;
  line-height: 18px;
  margin: 0 auto 24px;
  overflow: hidden;
  position: relative;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  transition: all 0.25s ease-in;
  width: 300px;
  user-select: none;
}
.button span {
  color: #FFFFFF;
}
.button.square {
  border-radius: 0;
}
.button.align-left {
  margin: 0 0 24px 0;
}
.button.small {
  font-size: 18px;
  height: 50px;
  width: 200px;
}
.button.small span {
  top: -2px;
}
.button.wide {
  width: 380px;
}
.button.full-width {
  width: 100%;
}
.button:focus {
  border-solid: 1px;
}
.button.failure:not(:disabled), .button.success:not(:disabled), .button:not(:disabled):hover {
  background-color: #BABABA;
}
.button.failure:not(:disabled)[class*=ui_] span, .button.success:not(:disabled)[class*=ui_] span, .button:not(:disabled):hover[class*=ui_] span {
  transform: translateX(200%);
  color: transparent;
}
.button.failure:not(:disabled):before, .button.success:not(:disabled):before, .button:not(:disabled):hover:before {
  left: 0;
}
.button.success:before {
  content: "\e604";
}
.button.failure:before {
  background-color: #F44E4E;
  content: "✖";
}
.button:visited {
  color: #FFFFFF;
}
.button:active {
  background-color: #000000;
}
.button[class*=ui_] span {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.25s ease-in;
  backface-visibility: hidden;
}
.button:after {
  content: "";
  position: absolute;
  transition: all 0.25s ease-in;
  z-index: -1;
}
.button:before {
  font-family: "The-Noun-Project-UI";
  height: 100%;
  left: -100%;
  line-height: 1;
  font-size: 1.25em;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant: normal;
  font-weight: normal;
  text-transform: none;
  padding: 20px;
  position: absolute;
  speak: none;
  top: 0;
  transition: all 0.25s ease-in;
  width: 100%;
}
.button.small:before {
  padding: 13px;
}
.button.button-icon {
  padding-left: 70px;
  position: relative;
}
.button.button-icon:before {
  background-color: rgba(0, 0, 0, 0.25);
  height: 70px;
  left: 0px;
  padding: 20px;
  position: absolute;
  top: 0;
  width: 70px;
}
.button.button-icon[class*=ui_] span {
  height: 70px;
  left: 0px;
  padding: 24px 24px 24px 70px;
  position: absolute;
  top: 0;
}
.button.button-icon:hover:before {
  width: 100%;
}
.button.white {
  background-color: #FFFFFF;
  color: #000000;
}
.button.white:hover {
  background-color: #F2F2F2;
}
.button.white.disabled, .button.white.disabled span {
  color: #FFFFFF;
}
.button.green {
  background-color: #7AC943;
}
.button.green:hover {
  background-color: #5C9533;
}
.button.green.disabled, .button.green.disabled span {
  color: #7AC943;
}
.button.blue {
  background-color: #3EA9F5;
}
.button.blue:hover {
  background-color: #2E80B7;
}
.button.blue.disabled, .button.blue.disabled span {
  color: #3EA9F5;
}
.button.purple {
  background-color: #AE8DFF;
}
.button.purple:hover {
  background-color: #816BBE;
}
.button.purple.disabled, .button.purple.disabled span {
  color: #AE8DFF;
}
.button.red {
  background-color: #F44E4E;
}
.button.red:hover {
  background-color: #B73B3B;
}
.button.red.disabled, .button.red.disabled span {
  color: #F44E4E;
}
.button.yellow {
  background-color: #FFBF43;
}
.button.yellow:not(:disabled):hover {
  background-color: #926F21;
}
.button.yellow.disabled, .button.yellow.disabled span {
  color: #FFBF43;
}
.button.facebook {
  background-color: #3B5998;
}
.button.facebook.disabled, .button.facebook.disabled span {
  color: #3B5998;
}
.button.black {
  background-color: #333333;
}
.button.black:hover {
  background-color: #000000;
}
.button.black.disabled, .button.black.disabled span {
  color: #000000;
}
.button.disabled {
  color: #BABABA;
  background-color: transparent;
  border: solid 1px;
  cursor: not-allowed;
}
.button.error {
  animation: shake 0.45s;
}
.button.split {
  margin: 0;
  padding-left: 50px;
  position: absolute;
  top: 0;
  width: 50%;
  z-index: 2;
}
.button.split:before {
  font-size: 24px;
  left: 0;
  padding: 24px 20px;
  width: auto;
}
.button.split:hover {
  background-color: #333333;
}
.button.split.small {
  padding: 16px;
}
.button.split:first-child {
  left: -50%;
  right: auto;
}
.button.split:last-child {
  border-left: 4px solid #F2F2F2;
  right: -50%;
  left: auto;
}
.button.split.visible:first-child {
  left: 0;
}
.button.split.visible:last-child {
  right: 0;
}
.button.wait, .button.wait:hover, .button.wait:before, .button.wait span {
  background: transparent;
  border-color: transparent !important;
  color: transparent;
  pointer-events: none;
}

.button-process {
  margin: 0 auto 24px;
  top: 0;
}
.button-process.processing {
  height: 24px;
  margin-bottom: 70px;
  padding: 0;
  pointer-events: none;
  position: relative;
  top: 24px;
  transition: all 0.25s ease-in, width 0.25s 0.3s ease-in, color none;
}
.button-process.processing:before {
  visibility: hidden;
  opacity: 0;
}
.button-process.processing:hover span,
.button-process.processing span {
  line-height: 1;
  animation: processing 10s 0.5s ease;
  color: rgba(255, 255, 255, 0);
  left: 0;
  position: absolute;
  selection: transparent, transparent;
  top: 0;
  transform: translateX(0);
}
.button-process.processing.small {
  margin-bottom: 50px;
}
.button-process.processing.small span {
  bottom: 0;
}

.auth-form-container .process-button-wrapper {
  height: 70px;
  position: relative;
}
.auth-form-container .process-button-wrapper .button-process {
  position: absolute;
}

.split-button-container {
  background-color: #BABABA;
  display: inline-block;
  height: 70px;
  margin: 0 0 24px;
  overflow: hidden;
  position: relative;
  top: 0;
  transition: all 0.25s ease-in;
  width: 300px;
}
.split-button-container.wide {
  width: 380px;
}
.split-button-container.small {
  height: 60px;
  width: 250px;
}
.split-button-container.processing {
  background: none;
  height: 24px;
  top: 24px;
  margin-bottom: 71px;
}
.split-button-container .processing {
  top: 0;
}
.split-button-container .first-state {
  z-index: 1;
}

.button.small.sign-in-button {
  width: auto;
  position: absolute;
  top: 24px;
  right: 24px;
  min-width: 0;
  padding-left: 24px;
  padding-right: 24px;
}

.newbutton {
  font-family: "ArbeitRegular", "Helvetica", Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  width: auto;
  border-radius: 0.25rem;
  border: none;
  transition: all 0.6s;
}
.newbutton:focus {
  transition: all 0.1s;
  outline: none;
  box-shadow: 0 0 0 3px #288FF0;
}
.newbutton.xs {
  height: 1.5rem;
  font-size: 0.8125rem;
  line-height: 0.8125rem;
  padding: 0 0.375rem;
}
.newbutton.xs.outline-lightmode {
  box-shadow: inset 0px 0px 0px 1px #D8D8DF;
}
.newbutton.xs.outline-lightmode:hover {
  box-shadow: inset 0px 0px 0px 1px #bababa;
}
.newbutton.xs.outline-darkmode {
  box-shadow: inset 0px 0px 0px 1px #43434B;
}
.newbutton.xs.outline-darkmode:hover {
  box-shadow: inset 0px 0px 0px 1px transparent;
}
.newbutton.sm {
  height: 1.75rem;
  font-size: 0.8125rem;
  line-height: 0.8125rem;
  padding: 0 0.5rem;
}
.newbutton.sm.outline-lightmode {
  box-shadow: inset 0px 0px 0px 1px #D8D8DF;
}
.newbutton.sm.outline-lightmode:hover {
  box-shadow: inset 0px 0px 0px 1px #bababa;
}
.newbutton.sm.outline-darkmode {
  box-shadow: inset 0px 0px 0px 1px #43434B;
}
.newbutton.sm.outline-darkmode:hover {
  box-shadow: inset 0px 0px 0px 1px transparent;
}
.newbutton.md {
  height: 2.5rem;
  font-size: 0.813rem;
  line-height: 0.813rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.newbutton.md.outline-lightmode {
  box-shadow: inset 0px 0px 0px 1px #D8D8DF;
}
.newbutton.md.outline-lightmode:hover {
  box-shadow: inset 0px 0px 0px 1px #bababa;
}
.newbutton.md.outline-darkmode {
  box-shadow: inset 0px 0px 0px 1px #43434B;
}
.newbutton.md.outline-darkmode:hover {
  box-shadow: inset 0px 0px 0px 1px transparent;
}
.newbutton.lg {
  height: 3rem;
  font-size: 0.938rem;
  line-height: 0.938rem;
  padding: 0 1rem;
}
.newbutton.lg.outline-lightmode {
  box-shadow: inset 0px 0px 0px 2px #D8D8DF;
}
.newbutton.lg.outline-lightmode:hover {
  box-shadow: inset 0px 0px 0px 2px #bababa;
}
.newbutton.lg.outline-darkmode {
  box-shadow: inset 0px 0px 0px 2px #43434B;
}
.newbutton.lg.outline-darkmode:hover {
  box-shadow: inset 0px 0px 0px 2px transparent;
}
.newbutton.solid-lightmode {
  background: #141824;
  color: #F4F4F6;
}
.newbutton.solid-lightmode:hover {
  background: #43434B;
  box-shadow: none;
}
.newbutton.solid-darkmode {
  background: #F4F4F6;
  color: #111115;
}
.newbutton.solid-darkmode:hover {
  background: #43434B;
  color: #F4F4F6;
  box-shadow: none;
}
.newbutton.outline-lightmode {
  background: transparent;
  color: #141824;
}
.newbutton.outline-lightmode:hover {
  background: #dedede;
  color: #141824;
}
.newbutton.outline-darkmode {
  background: transparent;
  color: #F4F4F6;
}
.newbutton.outline-darkmode:hover {
  background: #43434B;
  color: #F4F4F6;
}
.newbutton.cta-lightmode {
  background: #0225cf;
  color: #F4F4F6;
}
.newbutton.cta-lightmode:hover {
  background: #4e66dd;
  color: #F4F4F6;
}
.newbutton.cta-darkmode {
  background: #81B5E7;
  color: #141824;
}
.newbutton.cta-darkmode:hover {
  background: #5085B8;
  color: #F4F4F6;
}
.newbutton.text-lightmode {
  background: transparent;
  color: #767676;
}
.newbutton.text-lightmode:hover {
  background: #EEEEF1;
  color: #141824;
}
.newbutton.text-darkmode {
  background: transparent;
  color: #F4F4F6;
}
.newbutton.text-darkmode:hover {
  background: transparent;
  color: #767676;
}

.card-item {
  opacity: 0;
  animation-name: pop-in;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.card-item:nth-of-type(1) {
  animation-delay: 0s;
}

.card-item:nth-of-type(2) {
  animation-delay: 0.1s;
}

.card-item:nth-of-type(3) {
  animation-delay: 0.2s;
}

.card-link {
  transition: all 0.3s ease-out;
  border-bottom: solid 1px transparent;
}
.card-link:hover {
  color: #000000;
  border-bottom: solid 1px #000000;
}

.card-item {
  max-width: 350px;
  margin-right: 24px;
}

.slide .carousel-inner > .item {
  transition: left 0.6s cubic-bezier(1, 0, 0, 1);
}

.carousel {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #1F1F1F;
}

.carousel-inner > .item {
  display: none;
  position: relative;
  transform: translate3d(0, 0, 0);
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
  line-height: 1;
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}

.carousel-inner > .active {
  left: 0;
}

.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner > .next {
  left: 100%;
}

.carousel-inner > .prev {
  left: -100%;
}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}

.carousel-inner > .active.left {
  left: -100%;
}

.carousel-inner > .active.right {
  left: 100%;
}

@media (max-width: 960px) {
  .carousel {
    max-width: 768px;
    justify-content: center;
  }
  .collection-list_arrow.right-arrow {
    right: 0px;
  }
  .collection-list_arrow.left-arrow {
    left: 0px;
  }
}
@media (max-width: 767px) {
  .carousel {
    max-width: 350px;
    margin: auto;
  }
  .collection-list_arrow.right-arrow {
    right: 0px;
    top: 100%;
    z-index: 10;
    margin-top: 8px;
  }
  .collection-list_arrow.left-arrow {
    left: 0px;
    top: 100%;
    z-index: 10;
    margin-top: 8px;
  }
}
.header-collection {
  background-color: #000000;
  color: #FFFFFF;
  position: relative;
  background-color: #000000;
  display: block;
  padding: 20px;
}

.header-collection-inner {
  padding: 0px;
}

.headline-collection {
  font-size: 18px;
  margin-bottom: 10px;
}

.collection-avatar {
  background-color: #FFFFFF;
  border-radius: 50%;
  width: 84px;
}
.collection-avatar img {
  border-radius: 50%;
  border: solid 2px #FFFFFF;
  display: block;
  height: 84px;
  margin: 0 auto;
  width: 84px;
}

.sponsored-collection img {
  padding: 10px;
}

.subhead-collection {
  font-size: 14px;
  color: #BABABA;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-top: 24px;
}
.subhead-collection a,
.subhead-collection .sponsor-name {
  color: #F2F2F2;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
}

.hero-sponsor-logo {
  position: relative;
  top: 4px;
}

.created-by {
  padding-top: 5px;
}
.created-by a:hover {
  border-bottom: solid 1px;
}

.collection {
  background: #FFFFFF;
  padding: 50px 100px;
  margin-bottom: 50px;
  position: relative;
}
.collection header {
  margin-bottom: 1em;
}
.collection header a {
  color: #BABABA;
}
.collection header a:hover {
  color: #000000;
}
.collection header p {
  margin: 0;
}
.collection header h3 {
  font-size: 2em;
  float: none;
}
.collection header .view-all {
  text-align: right;
  float: right;
}
.collection .results {
  margin-top: 3em;
}
.collection .share-collection {
  position: absolute;
  right: 2em;
  bottom: 2em;
  color: #BABABA;
  padding: 0;
  background: transparent;
}
.collection .nope {
  color: #ccc;
  font-size: 24px;
  text-align: center;
  padding: 40px 0 100px;
}

section.profile-section .collection header h3 {
  float: none;
}

@media (min-width: 960px) {
  .headline-collection {
    font-size: 36px;
    margin-bottom: 40px;
  }
  .header-collection-inner {
    padding: 40px;
  }
}
.react-es6-component[data-component-name=collectionlist]:last-child {
  min-height: 600px;
}

.collection-list {
  text-align: center;
}
.collection-list.dark {
  background-color: #000000;
}
.collection-list.dark .collection-show-more {
  color: #BABABA;
}
.collection-list.dark .collection-show-more:hover {
  color: #F2F2F2;
}
.collection-list.multi-row .collection-list-content {
  flex-wrap: wrap;
  max-height: none;
}
.collection-list .collection-show-more {
  border-bottom: 1px solid;
}

.collection-list-content {
  justify-content: space-between;
  max-height: 254px;
  overflow: hidden;
  display: flex;
}
.collection-list-content:after, .collection-list-content:before {
  content: none;
}

.card-item {
  display: flex;
  flex-grow: 1;
  flex-basis: 223px;
  transition: background-color 0.2s ease;
  transition: border-color 0.2s ease;
  background: #FFFFFF;
  border: 3px solid #F2F2F2;
  min-width: 290px;
  max-width: 290px;
  margin-bottom: 24px;
  width: 290px;
  height: 254px;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  text-transform: capitalize;
}
.card-item:last-child {
  margin-right: 0;
}
.card-item .heading {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.card-item .subhead {
  color: #6D6D6D;
}
.card-item .card-icon-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.card-item .card-icon-item {
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  min-width: 84px;
  margin-bottom: 8px;
}
.card-item .card-icon-item.icon-dummy {
  width: 36px;
  height: 36px;
}
.card-item .card-icon-item img {
  max-width: 36px;
  max-height: 36px;
}
.card-item .card-icon-item .card-icon-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  transition: all 0.3s ease-out;
}
.card-item .card-icon-item .card-icon-link:hover {
  background: #F2F2F2;
}

.card-item.card-dummy {
  background: #F2F2F2;
  border: none;
}

.carousel .card-item.card-dummy {
  background: #333333;
}

.collection-list_arrow {
  transition: color 0.2s ease;
  user-select: none;
  color: #BABABA;
  cursor: pointer;
  font-size: 20px;
  padding: 8px;
  position: absolute;
  top: 45%;
}
.collection-list_arrow:hover {
  color: #FFFFFF;
}
.collection-list_arrow.left-arrow {
  left: -40px;
}
.collection-list_arrow.right-arrow {
  right: -40px;
}
.collection-list_arrow.disabled {
  cursor: default;
  color: transparent;
}

@media (max-width: 1024px) {
  .collection-list-content {
    justify-content: center;
  }
}
@media (min-width: 1024px) {
  .multi-row .card-item {
    max-width: 290px;
  }
  .card-item {
    margin-right: 24px;
  }
  .card-item:nth-child(3n+3) {
    margin-right: 0;
  }
}
/**
 * * Box for error messages - hidden by default
 * * @group modules
 * */
.error-box {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  background: #FDEBEC;
  color: #333;
  display: none;
  font-size: 22px;
  padding: 1px;
  text-align: center;
}

.error-box-upload,
.error-box-upload-limit,
.error-box-ratelimit {
  margin: auto;
  margin-top: 15px;
  width: 700px;
}

#upload-page .carousel .error-box-upload-limit a {
  font-weight: bold;
  color: #333;
  text-decoration: none;
  border-bottom: 2px solid #333;
  transition: all 0.6s;
}
#upload-page .carousel .error-box-upload-limit a:hover {
  color: #333;
  text-decoration: none;
  border-color: transparent;
}

.account-fields {
  margin-top: 0;
}
.account-fields .error-hold {
  display: none;
}

.log-in {
  padding-bottom: 20px;
}
.log-in button[type=submit].icon-login:before {
  left: -142%;
}

.ui_user_to_facebook,
.ui_login_to_facebook {
  width: 200px;
  display: block;
  margin: 0 auto 31px;
  text-align: center;
}
.ui_user_to_facebook:before,
.ui_login_to_facebook:before {
  font-size: 110px;
  display: block;
  margin-bottom: -20px;
}

#clean-error {
  display: block;
}

.feature-space {
  display: none;
}

@media (min-width: 960px) {
  .feature-space {
    display: block;
    font-size: 30px;
    line-height: 38px;
    overflow: hidden;
    height: 355px;
    color: #FFFFFF;
  }
  .feature-space.blue {
    background: #3EA9F5;
  }
  .feature-space .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .feature-space .info {
    display: inline-flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 60px 40px 40px;
  }
  .feature-space .info h3 {
    font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    font-size: 18px;
  }
  .feature-space .info p {
    width: 500px;
    margin: 20px 0 40px;
  }
  .feature-space .info .call-to-action {
    margin: 0;
    background-color: #333333;
  }
  .feature-space .info .call-to-action:before {
    background-color: #000000;
  }
  .feature-space .image-container {
    display: inline-flex;
    flex-direction: column;
    flex-grow: 1;
  }
  .feature-space .image-container .product-image {
    background: url(https://static.production.thenounproject.com/assets/bundles/static/media/mac_app_feature_space.6925b87c.png) top right no-repeat transparent;
    background-size: 304px 455px;
    margin-top: 50px;
    height: 455px;
    width: 304px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin-left: auto;
  }
}
/**
 * * Main site footer
 * * @group modules
 * * @todo This could possibly be broken into smaller modules
 * */
#footer {
  background: #000000;
  color: #BABABA;
  font-size: 18px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 80px;
}
#footer ::selection {
  background-color: #FFFFFF;
  color: #000000;
}
#footer ::moz-selection {
  background-color: #FFFFFF;
  color: #000000;
}
#footer .footer-navigation {
  text-align: center;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
  margin-bottom: 24px;
}
#footer .footer-navigation li {
  margin-top: 8px;
}
#footer .footer-navigation li:first-child {
  padding-bottom: 8px;
}
#footer .footer-navigation a {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
  transition: all 0.3s ease-out;
  display: block;
  background: #1F1F1F;
  padding: 16px;
  max-width: 400px;
  margin: auto;
}
#footer .footer-navigation a:hover {
  color: #FFFFFF;
  background: #333333;
}
#footer .footer_logo {
  font-size: 24px;
  color: #FFFFFF;
  text-align: center;
}
#footer .footer_logo .ui_logo {
  padding: 0 24px 0 0;
}
#footer .footer_logo .ui_logo::before {
  font-size: 50px;
}
#footer .email-signup {
  margin-top: 24px;
}
#footer .email-signup input {
  background-color: #1F1F1F;
  border: 3px solid #979797;
  padding: 21px;
  font-size: 24px;
  width: 100%;
  margin: 0 auto;
  display: block;
  color: #FFFFFF;
}
#footer .email-signup label {
  font-size: 18px;
  margin-top: 8px;
  display: block;
  color: #FFFFFF;
}
#footer .email-signup .email-signup-feedback {
  font-size: 24px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#footer .social {
  font-size: 18px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 20px;
  width: 100%;
}
#footer .social span {
  display: block;
  text-align: center;
}
#footer .social li {
  margin-left: 24px;
}
#footer .social li:first-child {
  margin: 0;
}
#footer .social li a {
  display: block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #333333;
}
#footer .social li a span {
  display: none;
}
#footer .social li a:hover {
  color: #FFFFFF;
}
#footer .social li a:before {
  left: 10px;
  top: 6px;
  font-size: 20px;
}
#footer .footer-extra-links {
  font-size: 14px;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
#footer .footer-extra-links li {
  margin: 24px 0 0 24px;
}
#footer .footer-extra-links a {
  color: #BABABA;
}
#footer .footer-extra-links a:hover {
  color: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

@media (min-width: 768px) {
  #footer .footer_logo {
    text-align: left;
  }
  #footer .footer-navigation {
    text-align: left;
  }
  #footer .footer-navigation a {
    display: inline;
    background: none;
    padding: 0;
  }
  #footer .footer-navigation a:hover {
    border-bottom: 1px solid #FFFFFF;
  }
  #footer .social {
    justify-content: flex-end;
  }
  #footer .email-signup {
    margin-top: 0;
  }
  #footer .footer-extra-links {
    justify-content: flex-end;
    text-align: right;
  }
}
/**
 * * Settings and user info forms
 * * @group modules
 * * @todo This contains a lot of unused styles & is not really a proper module
 * */
.account-fields {
  background: #FFFFFF;
  min-height: 775px;
}
.account-fields header {
  padding: 1em 0;
  color: #6D6D6D;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.account-fields header h3 {
  font-size: 24px;
  color: #000000;
}
.account-fields header h5 {
  color: #1F1F1F;
  position: relative;
}
.account-fields header h5:before {
  position: absolute;
  padding-right: 0.35em;
  left: -2.25em;
  top: -0.15em;
}
.account-fields .public-private {
  color: #6D6D6D;
  position: absolute;
  right: 22px;
  top: 26px;
  z-index: 2;
}
.account-fields .public-private label,
.account-fields .public-private label.show {
  top: 0px;
  position: relative;
  font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
}
.account-fields .public-private input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.account-fields .public-private .private {
  display: none;
}
.account-fields .public-private input:checked + label .private {
  display: inline;
}
.account-fields .public-private input:checked + label .public {
  display: none;
}
.account-fields .prefilled {
  font-size: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 24px;
  left: 55px;
}
.account-fields .prefilled + input {
  padding-right: 110px;
}
.account-fields #id_facebook {
  padding-left: 9.75em;
}
.account-fields #id_twitter {
  padding-left: 8.5em;
}
.account-fields #id_dribbble {
  padding-left: 9.25em;
}
.account-fields #id_behance {
  padding-left: 9.5em;
}
.account-fields #id_linkedin {
  padding-left: 9em;
}
.account-fields #id_instagram {
  padding-left: 10em;
}
.account-fields h2 {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #333333;
  padding: 30px;
  margin: 0px;
  outline: solid 1px;
}
.account-fields .error {
  color: #F44E4E;
}
.account-fields .error input[type=text], .account-fields .error label {
  color: #F44E4E;
  display: block;
}
.account-fields .error input[type=text]::-webkit-input-placeholder, .account-fields .error label::-webkit-input-placeholder {
  color: #F44E4E;
}
.account-fields .error input[type=text]:-moz-placeholder, .account-fields .error label:-moz-placeholder {
  color: #F44E4E;
}
.account-fields .error input[type=text]::-moz-placeholder, .account-fields .error label::-moz-placeholder {
  color: #F44E4E;
}
.account-fields .error input[type=text]:-ms-input-placeholder, .account-fields .error label:-ms-input-placeholder {
  color: #F44E4E;
}
.account-fields .message {
  text-align: center;
  color: #F44E4E;
}
.account-fields .error-hold {
  font-size: 0.9em;
  width: 6.3829787%;
  left: -150px;
  position: absolute;
  width: 150px;
  top: 0px;
  padding: 1.5em 1em;
  height: 100%;
  text-align: left;
  background: #F2F2F2;
  color: #6D6D6D;
}
.account-fields .error-hold i {
  display: block;
  float: left;
  border: 2px;
  border-radius: 50%;
  margin-right: 1em;
}
.account-fields .error-hold + i {
  margin-left: 50px;
}
.account-fields .error-hold + i + input {
  margin-left: 50px;
  width: 90%;
}
.account-fields .error-hold ul,
.account-fields .error-hold li {
  border: 0;
}
.account-fields p a:hover {
  border-bottom: solid 1px;
}

.account-fields {
  padding: 0;
  margin-bottom: 50px;
  display: block;
  position: relative;
  z-index: 1;
}
.account-fields input[type=radio] {
  visibility: hidden;
}
.account-fields input {
  background: none;
}
.account-fields header {
  padding: 1em 2em;
}
.account-fields header h5 {
  padding: 1em 0;
}
.account-fields header h5:before {
  position: relative;
  left: inherit;
  top: inherit;
  padding-right: 1em;
}

.fat-input {
  position: relative;
}
.fat-input:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  background: rgba(186, 186, 186, 0.3);
  height: 1px;
  z-index: 2;
}
.fat-input input[type=text],
.fat-input input[type=email],
.fat-input input[type=password],
.fat-input input,
.fat-input select,
.fat-input textarea {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 1.714em;
  padding: 1em 3em;
  border-left: 1px solid transparent;
  transition: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) all;
}
.fat-input input[type=text]:hover,
.fat-input input[type=email]:hover,
.fat-input input[type=password]:hover,
.fat-input input:hover,
.fat-input select:hover,
.fat-input textarea:hover {
  border-left: 2px solid #000000;
}
.fat-input input[type=text]:hover:focus,
.fat-input input[type=email]:hover:focus,
.fat-input input[type=password]:hover:focus,
.fat-input input:hover:focus,
.fat-input select:hover:focus,
.fat-input textarea:hover:focus {
  border-left: 8px solid #000000;
}
.fat-input input[type=text]:hover:focus + .icon-label,
.fat-input input[type=email]:hover:focus + .icon-label,
.fat-input input[type=password]:hover:focus + .icon-label,
.fat-input input:hover:focus + .icon-label,
.fat-input select:hover:focus + .icon-label,
.fat-input textarea:hover:focus + .icon-label {
  color: #000000;
}
.fat-input input[type=text]:focus,
.fat-input input[type=email]:focus,
.fat-input input[type=password]:focus,
.fat-input input:focus,
.fat-input select:focus,
.fat-input textarea:focus {
  color: #333333;
  border-left: 8px solid #000000;
}
.fat-input input[type=text]:focus + .icon-label,
.fat-input input[type=email]:focus + .icon-label,
.fat-input input[type=password]:focus + .icon-label,
.fat-input input:focus + .icon-label,
.fat-input select:focus + .icon-label,
.fat-input textarea:focus + .icon-label {
  color: #000000;
}
.fat-input input[type=text]:disabled,
.fat-input input[type=email]:disabled,
.fat-input input[type=password]:disabled,
.fat-input input:disabled,
.fat-input select:disabled,
.fat-input textarea:disabled {
  color: #BABABA;
  pointer-events: none;
}
.fat-input input[type=text]:disabled + label,
.fat-input input[type=email]:disabled + label,
.fat-input input[type=password]:disabled + label,
.fat-input input:disabled + label,
.fat-input select:disabled + label,
.fat-input textarea:disabled + label {
  color: #BABABA;
  pointer-events: none;
}
.fat-input textarea {
  white-space: normal;
  min-height: 60px;
}
.fat-input .select-hold.ui_down-triangle:after {
  font-size: 1.5em;
  position: absolute;
  top: 32px;
  right: 1em;
  color: #BABABA;
  transition: color 0.3s ease;
}
.fat-input .select-hold.ui_down-triangle:hover:after {
  color: #000000;
}
.fat-input .select-hold.ui_down-triangle select {
  cursor: pointer;
  padding-right: 1.75em;
  position: relative;
  z-index: 1;
  background: transparent;
  -moz-appearance: none;
  text-indent: 0.01px;
  line-height: 1em;
}
.fat-input .select-hold.ui_down-triangle select option {
  color: black;
}
.fat-input .select-hold.ui_down-triangle select option:selected {
  color: red;
}
.fat-input .prefilled {
  font-size: 1.714em;
  color: #333333;
  position: absolute;
  left: 3em;
  top: 22px;
}
.fat-input .icon-label {
  width: 4em;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 3em;
  height: 100%;
  font-size: 0.75em;
  color: #BABABA;
  transition: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) color;
}
.fat-input .icon-label span {
  font-size: 1em;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  top: 3em;
  left: 2em;
  position: absolute;
}
.fat-input .icon-label:before {
  position: relative;
  font-size: 1.3em;
  top: 1.75rem;
  left: 1.75em;
  color: inherit;
}
.fat-input button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0 2em;
  color: #F2F2F2;
}
.fat-input button:hover {
  color: #FFFFFF;
}

.half {
  float: left;
  width: 50%;
  margin-right: 0px;
}
.half:last-child {
  margin-right: 0px;
}
.half .half {
  border-left: 1px solid #F2F2F2;
}
.half .half select {
  padding: 22px;
}
.half .half input {
  padding: 23px 22px 24px 50px;
}
.half .half + li {
  clear: inherit;
}
.half + li {
  clear: both;
}
.half p {
  padding: 1em 1em 0 1em;
}

.line-under {
  position: relative;
}
.line-under:after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 100%;
  background: rgba(186, 186, 186, 0.3);
  height: 1px;
  z-index: 2;
}
.line-under .fat-input:after {
  background: transparent;
  height: 0;
}

.allcaps {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  color: #6D6D6D;
  display: block;
  margin-top: 3em;
}
.allcaps a {
  color: #BABABA;
  border-bottom: 1px solid;
}
.allcaps a:hover {
  color: #333333;
}

.input-description {
  color: #BABABA;
  font-size: 0.857em;
  margin-left: 2em;
}

.ghost-input {
  background: transparent;
  border-bottom: 1px solid #333333;
  width: 100%;
  font-size: 2.571em;
  line-height: 1.2;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
  padding-bottom: 0.25em;
}
.ghost-input::-webkit-input-placeholder {
  color: #333333;
}
.ghost-input:-moz-placeholder {
  color: #333333;
}
.ghost-input::-moz-placeholder {
  color: #333333;
}
.ghost-input:-ms-input-placeholder {
  color: #333333;
}

.captcha-error,
.signup-errors {
  display: block;
  font-size: 14px;
  margin-top: 14px;
  color: #F44E4E;
}
.captcha-error.general-error,
.signup-errors.general-error {
  text-align: left;
  margin-top: 0;
}
.captcha-error.general-error:not(:empty),
.signup-errors.general-error:not(:empty) {
  margin-bottom: 13px;
}

.return-errors {
  padding: 40px 90px;
  background: #FFFFFF;
  color: #F44E4E;
}
.return-errors h3 {
  font-size: 1.25em;
  width: 350px;
  padding-bottom: 10px;
}
.return-errors h3:before {
  content: "!";
  font-family: "The-Noun-Project-UI";
  margin: 0px 24px 0 -50px;
  font-size: 1.5em;
}
.return-errors p {
  margin-top: 0px;
}
.return-errors a {
  color: #F44E4E;
  border-bottom: 1px solid;
}

.button.slide-in-icon,
button.slide-in-icon {
  margin: 50px auto 0 auto;
  padding: 25px 0;
  background: #333333;
  text-align: center;
  display: block;
  cursor: pointer;
  color: #F2F2F2;
  width: 100%;
  height: 70px;
  min-width: 220px;
  font-size: 20px;
  overflow: hidden;
  backface-visibility: hidden;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.button.slide-in-icon:after,
button.slide-in-icon:after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease;
}
.button.slide-in-icon:hover,
button.slide-in-icon:hover {
  color: #F2F2F2;
  background: #333333;
}
.button.slide-in-icon:hover:before,
button.slide-in-icon:hover:before {
  left: 0;
}
.button.slide-in-icon:hover span,
button.slide-in-icon:hover span {
  transform: translateX(200%);
}
.button.slide-in-icon:before,
button.slide-in-icon:before {
  font-family: "The-Noun-Project-UI";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  top: -5px;
  left: -100%;
  height: 100%;
  width: 100%;
  font-size: 1.25em;
  transition: all 0.3s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.button.slide-in-icon:before:hover,
button.slide-in-icon:before:hover {
  left: 0;
}
.button.slide-in-icon:active,
button.slide-in-icon:active {
  background: #BABABA;
  top: 2px;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.button.slide-in-icon:active span,
button.slide-in-icon:active span {
  top: -36px;
}
.button.slide-in-icon:active:before,
button.slide-in-icon:active:before {
  color: #FFFFFF;
  font-size: 1.75em;
  top: -7px;
}
.button.slide-in-icon span,
button.slide-in-icon span {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
  top: -29px;
  transition: all 0.3s;
  backface-visibility: hidden;
}

.drop-down {
  position: relative;
  display: inline-block;
  padding-right: 24px;
  height: 64px;
}
.drop-down:after {
  position: absolute;
  right: 0;
  top: 4px;
}
.drop-down:hover label {
  max-height: 100px;
  padding: 6px 0;
}
.drop-down input[type=radio] {
  visibility: hidden;
  height: 0;
  display: none;
}
.drop-down input + label {
  max-height: 0;
  display: block;
  transition: all 0.3s ease;
  overflow: hidden;
  opacity: 1;
}
.drop-down input + label:hover {
  color: #BABABA;
}
.drop-down input:checked + label {
  max-height: 100px;
  padding: 6px 0;
}

.new-form li {
  position: relative;
  margin-bottom: 20px;
}
.new-form textarea,
.new-form select,
.new-form input {
  padding: 20px 42px;
  line-height: 1.5em;
}
.new-form textarea ::selection,
.new-form select ::selection,
.new-form input ::selection {
  background-color: #000000;
  color: #FFFFFF;
}
.new-form textarea ::moz-selection,
.new-form select ::moz-selection,
.new-form input ::moz-selection {
  background-color: #000000;
  color: #FFFFFF;
}
.new-form textarea + label,
.new-form select + label,
.new-form input:not([type=radio]):not([type=checkbox]) + label {
  position: absolute;
  bottom: -19px;
  left: 0;
  font-size: 12px;
  height: 14px;
  width: 100%;
  color: #BABABA;
  transition: all 0.1s linear;
  opacity: 0;
  text-align: left;
}
.new-form textarea + label.on,
.new-form select + label.on,
.new-form input:not([type=radio]):not([type=checkbox]) + label.on {
  color: #BABABA;
}
.new-form textarea + label.show,
.new-form select + label.show,
.new-form input:not([type=radio]):not([type=checkbox]) + label.show {
  top: 69px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  opacity: 0;
}
.new-form textarea + label.error,
.new-form select + label.error,
.new-form input:not([type=radio]):not([type=checkbox]) + label.error {
  color: #F44E4E;
  margin-top: 5px;
  white-space: nowrap;
  opacity: 1;
}
.new-form div.error.on {
  color: #F44E4E;
  margin-top: 5px;
  opacity: 1;
}
.new-form div.error.on:not(.stripe-error) {
  white-space: nowrap;
}
.new-form textarea {
  min-height: 200px;
}
.new-form input#i-agree-to-the-terms[type=checkbox] {
  width: 0;
  visibility: hidden;
}
.new-form input#i-agree-to-the-terms[type=checkbox] .checkbox-fillin,
.new-form input#i-agree-to-the-terms[type=checkbox] + label {
  display: inline-block;
  height: 23px;
  margin: 0 12px 0 0;
  padding: 0;
  width: 23px;
}
.new-form input#i-agree-to-the-terms[type=checkbox] .checkbox-fillin i,
.new-form input#i-agree-to-the-terms[type=checkbox] + label i {
  cursor: pointer;
  opacity: 0;
  transition: all 0.25s ease;
}
.new-form input#i-agree-to-the-terms[type=checkbox] + label + label,
.new-form input#i-agree-to-the-terms[type=checkbox] + label + span {
  cursor: pointer;
}
.new-form input#i-agree-to-the-terms[type=checkbox]:checked + label i {
  opacity: 1;
}
.new-form textarea,
.new-form select,
.new-form input:not([type=radio]):not([type=checkbox]) {
  transition: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) all;
  background-color: #F2F2F2;
  border-left: 1px solid transparent;
  resize: none;
  width: 100%;
  font-size: 18px;
  outline-offset: -1px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.new-form textarea::-webkit-input-placeholder,
.new-form select::-webkit-input-placeholder,
.new-form input:not([type=radio]):not([type=checkbox])::-webkit-input-placeholder {
  color: #BABABA;
}
.new-form textarea:-moz-placeholder,
.new-form select:-moz-placeholder,
.new-form input:not([type=radio]):not([type=checkbox]):-moz-placeholder {
  color: #BABABA;
}
.new-form textarea::-moz-placeholder,
.new-form select::-moz-placeholder,
.new-form input:not([type=radio]):not([type=checkbox])::-moz-placeholder {
  color: #BABABA;
}
.new-form textarea:-ms-input-placeholder,
.new-form select:-ms-input-placeholder,
.new-form input:not([type=radio]):not([type=checkbox]):-ms-input-placeholder {
  color: #BABABA;
}
.new-form textarea:hover,
.new-form select:hover,
.new-form input:not([type=radio]):not([type=checkbox]):hover {
  outline: solid 1px;
}
.new-form textarea:hover:focus,
.new-form select:hover:focus,
.new-form input:not([type=radio]):not([type=checkbox]):hover:focus {
  outline: none;
}
.new-form textarea[disabled],
.new-form select[disabled],
.new-form input:not([type=radio]):not([type=checkbox])[disabled] {
  background: #FFFFFF;
  outline: solid 1px #BABABA;
  color: #333333;
}
.new-form textarea[disabled]:hover,
.new-form select[disabled]:hover,
.new-form input:not([type=radio]):not([type=checkbox])[disabled]:hover {
  outline: solid 1px #BABABA;
}
.new-form textarea[disabled] + label.show,
.new-form select[disabled] + label.show,
.new-form input:not([type=radio]):not([type=checkbox])[disabled] + label.show {
  opacity: 0;
}
.new-form textarea:focus + label.show, .new-form textarea:hover + label.show,
.new-form select:focus + label.show,
.new-form select:hover + label.show,
.new-form input:not([type=radio]):not([type=checkbox]):focus + label.show,
.new-form input:not([type=radio]):not([type=checkbox]):hover + label.show {
  opacity: 1;
}
.new-form textarea.error,
.new-form select.error,
.new-form input:not([type=radio]):not([type=checkbox]).error {
  border-bottom: 8px solid #F44E4E;
  background-color: #FDEBEC;
  border-left: 0px;
  padding: 22px 42px 14px 42px;
  animation: shake 0.45s;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  transition: none;
}
.new-form textarea.error:focus,
.new-form select.error:focus,
.new-form input:not([type=radio]):not([type=checkbox]).error:focus {
  border-bottom: none;
  padding-bottom: 22px;
}
.new-form textarea:focus,
.new-form select:focus,
.new-form input:not([type=radio]):not([type=checkbox]):focus {
  color: #000000;
  outline: none;
  border-left: 8px solid #BABABA;
}
.new-form textarea:focus + label + label.ui_icon:before,
.new-form select:focus + label + label.ui_icon:before,
.new-form input:not([type=radio]):not([type=checkbox]):focus + label + label.ui_icon:before {
  left: 8px;
}
.new-form textarea + label,
.new-form select + label,
.new-form input:not([type=radio]):not([type=checkbox]) + label {
  position: absolute;
  bottom: -13px;
  left: 0;
  font-size: 12px;
  color: #BABABA;
  transition: all 0.1s linear;
  opacity: 0;
}
.new-form textarea + label.on,
.new-form select + label.on,
.new-form input:not([type=radio]):not([type=checkbox]) + label.on {
  color: #BABABA;
}
.new-form textarea + label.error,
.new-form select + label.error,
.new-form input:not([type=radio]):not([type=checkbox]) + label.error {
  color: #F44E4E;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-top: 5px;
  white-space: nowrap;
  opacity: 1;
}
.new-form textarea + label + label.ui_icon,
.new-form select + label + label.ui_icon,
.new-form input:not([type=radio]):not([type=checkbox]) + label + label.ui_icon {
  cursor: pointer;
  color: #BABABA;
  text-align: center;
}
.new-form textarea + label + em,
.new-form select + label + em,
.new-form input:not([type=radio]):not([type=checkbox]) + label + em {
  position: absolute;
  text-transform: uppercase;
  top: 27px;
  right: 20px;
  font-style: normal;
  font-size: 14px;
  color: #BABABA;
}
.new-form textarea.optional + label + em,
.new-form select.optional + label + em,
.new-form input:not([type=radio]):not([type=checkbox]).optional + label + em {
  font-size: 10px;
}
.new-form textarea + label.show {
  top: auto;
  bottom: -16px;
}
.new-form .ui_down-triangle-after:after {
  pointer-events: none;
  font-size: 1.5em;
  position: absolute;
  top: 24px;
  right: 1em;
  color: #BABABA;
  z-index: 2;
  transition: color 0.3s ease;
}
.new-form .ui_down-triangle-after:hover:after {
  color: #000000;
}
.new-form .ui_down-triangle-after select {
  cursor: pointer;
  padding-right: 1.75em;
  position: relative;
  z-index: 1;
  -moz-appearance: none;
  text-indent: 0.01px;
  margin-bottom: -3px;
}
.new-form .half {
  display: inline-block;
  float: none;
  width: 48%;
}
.new-form .half input {
  min-width: 80px;
}
.new-form .half + .half {
  float: right;
}
.new-form .form-info {
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #333333;
}
.new-form .form-info.padded {
  padding: 15px 15px 15px 0;
}
.new-form .form-info a {
  border-bottom: solid 1px;
  color: #333333;
}
.new-form .form-info a:hover {
  color: #000000;
}
.new-form .ui_icon:before {
  color: #BABABA;
  position: absolute;
  top: 24px;
  left: 4px;
  width: 42px;
  font-size: 16px;
  transition: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) all;
}
.new-form.dark-form textarea + label.error,
.new-form.dark-form select + label.error,
.new-form.dark-form input:not([type=checkbox]) + label.error {
  color: #FFFFFF;
}
.new-form.dark-form a:hover {
  color: #F2F2F2;
}
.new-form .address-part-1.nine {
  width: 72.25%;
  margin-right: 2%;
}
.new-form .coupon-duration {
  color: #F2F2F2;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.new-form .cost-total .cost-full {
  text-decoration: line-through;
}
.new-form input[type=radio].input-radio {
  opacity: 0;
}
.new-form input[type=radio].input-radio + label {
  display: block;
  font-size: 18px;
  opacity: 1;
  position: relative;
  top: 0;
  border: 1px solid transparent;
  padding: 22px 20px;
  padding-left: 42px;
  background-color: #F2F2F2;
  cursor: pointer;
  outline-color: transparent;
  cursor: pointer;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #333333;
}
.new-form input[type=radio].input-radio + label:hover {
  outline: solid 1px;
  outline-offset: -1px;
}
.new-form input[type=radio].input-radio + label:before {
  content: "";
  position: absolute;
  left: 16px;
  top: 26px;
  display: block;
  width: 15px;
  height: 15px;
  background: #FFFFFF;
  border: 2px solid #3EA9F5;
  border-radius: 50%;
  transition: color 0.3s ease;
}
.new-form input[type=radio].input-radio.plan-yearly + label em {
  position: absolute;
  pointer-events: none;
  right: 45px;
  top: 22px;
  font-size: 14px;
  line-height: 22px;
  font-style: normal;
}
.new-form input[type=radio].input-radio:checked + label {
  color: #000000;
}
.new-form .seat-container {
  color: #BABABA;
  font-size: 18px;
  padding-top: 20px;
}
.new-form .seat-container .seat-label {
  line-height: 1;
  padding: 15px 0;
  display: block;
}
.new-form .seat-container .seat-label.enterprise {
  line-height: 35px;
}
.new-form .seat-container .seat-label.enterprise .label-note {
  font-size: 16px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.new-form #card-type {
  color: #BABABA;
  position: absolute;
  top: 24px;
  right: 20px;
  text-transform: uppercase;
}
.new-form .price-status {
  display: flex;
  font-size: 24px;
  justify-content: space-between;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}
.new-form .price-status #dash {
  flex-grow: 1;
  margin: 16px;
  width: auto;
  border-top: 1px solid #FFFFFF;
}
.new-form .price-status #dash.black {
  border-top: 1px solid #000000;
}
.new-form .price-status.has-coupon #dash {
  width: 20px;
}
.new-form .or {
  color: #6D6D6D;
  display: block;
  font-size: 16px;
  padding: 10px 0;
  position: relative;
  text-align: center;
}
.new-form .or:before, .new-form .or:after {
  content: "";
  position: absolute;
  display: block;
  width: 40%;
  top: 20px;
  border-bottom: solid 1px #6D6D6D;
}
.new-form .or:after {
  right: 0;
}
.new-form textarea {
  white-space: normal;
  overflow: scroll;
}

.auth-form-container .or {
  margin: 21px 0;
}
.auth-form-container .captcha-container {
  margin-bottom: 54px;
}
.auth-form-container .captcha-container.with-error {
  margin-bottom: 24px;
}

.signup-form-container li.accept-terms-container {
  min-height: 77px;
  margin-bottom: 0;
  position: relative;
}
.signup-form-container li.accept-terms-container label.signup-errors {
  position: absolute;
}
.signup-form-container li.text-input-container {
  margin-bottom: 0;
  min-height: 88px;
}
.signup-form-container li.text-input-container input {
  position: absolute;
}
.signup-form-container li.receive-updates-container {
  margin-top: 26px;
}
.signup-form-container .sign-up-buttons {
  margin-top: 0;
}

.plugin-form textarea,
.plugin-form select,
.plugin-form input {
  padding: 20px 20px 20px 42px;
  -ms-overflow-style: none;
}

.button-container {
  margin: auto auto 24px auto;
  float: none;
}

.new-form.no-ui-icon textarea,
.new-form.no-ui-icon select,
.new-form.no-ui-icon input {
  padding: 22px 20px;
}
.new-form.no-ui-icon textarea.error,
.new-form.no-ui-icon select.error,
.new-form.no-ui-icon input.error {
  padding: 22px 20px 14px 20px;
}
.new-form.no-ui-icon textarea.optional,
.new-form.no-ui-icon select.optional,
.new-form.no-ui-icon input.optional {
  padding-right: 92px;
}
.new-form.no-ui-icon textarea.optional-vat,
.new-form.no-ui-icon select.optional-vat,
.new-form.no-ui-icon input.optional-vat {
  min-height: auto;
}
.new-form.no-ui-icon textarea + label.show,
.new-form.no-ui-icon select + label.show,
.new-form.no-ui-icon input + label.show {
  margin-top: 4px;
}

.address-part-1,
.address-part-2 {
  position: relative;
}

.disclaimer {
  color: #BABABA;
}
.disclaimer a {
  color: #F2F2F2;
}
.disclaimer a:hover {
  color: #FFFFFF;
  border-bottom: solid 1px;
}

.pro-upgrade-billing textarea,
.team-signup-form textarea {
  padding: 20px 92px 20px 20px;
}

.input-toggle-container {
  display: flex;
  width: 100%;
  text-align: center;
}
.input-toggle-container .input-toggle {
  width: 50%;
  font-size: 24px;
  height: 70px;
  line-height: 18px;
  overflow: hidden;
  color: #BABABA;
  background-color: #F2F2F2;
}
.input-toggle-container .input-toggle label.input-toggle-label {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  height: 71px;
  position: relative;
}
.input-toggle-container .input-toggle input[type=radio] {
  position: absolute;
  visibility: hidden;
}
.input-toggle-container .input-toggle input[type=radio]:checked + label {
  background: #3EA9F5;
  color: #FFFFFF;
}
.input-toggle-container .input-toggle input[type=radio]:checked + label.bg-color-purple {
  background: #AE8DFF;
}

.dollar-value {
  color: #BABABA;
  padding: 12px;
  text-align: center;
  width: 50%;
}

.checkbox-input {
  display: none;
}
.checkbox-input:focus + .checkbox-fillin {
  border-color: transparent;
  outline: none;
}
.checkbox-input:checked + .checkbox-fillin {
  border-color: transparent;
  outline: none;
}
.checkbox-input:checked + .checkbox-fillin i {
  opacity: 1;
}

.check-box-label-container {
  cursor: pointer;
}

.checkbox-fillin {
  position: relative;
  opacity: 1;
  bottom: auto;
  top: auto;
  left: auto;
  display: inline-block;
  width: 20px;
  height: 19px;
  background: #FFFFFF;
  margin-right: 6px;
  cursor: pointer;
  border: solid 3px #F2F2F2;
  height: 23px;
  margin-left: 0;
  margin-right: 12px;
  width: 23px;
}
.checkbox-fillin:hover {
  border-color: #3EA9F5;
}
.checkbox-fillin i {
  color: #333333;
  font-size: 13px;
  opacity: 0;
}

.api-fields button.slide-in-icon {
  margin-top: 1.5rem;
}

.api-mailing-list-checkbox {
  margin: 1.5rem 0 0 0;
}
.api-mailing-list-checkbox > label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/**
 * * This contains the top nav, dropdown, user info, etc included on every page.
 * * @group modules
 * * @todo This should be broken into smaller modules, and audited for unused styles.
 * */
#header {
  transition: opacity 0.3s ease;
  display: none;
  position: relative;
  background: #000000;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #FFFFFF;
  overflow: visible;
  width: 100%;
  z-index: 101;
  top: 0px;
  transition: top 0.3s ease;
}
#header ::selection {
  background-color: #FFFFFF;
  color: #000000;
}
#header ::moz-selection {
  background-color: #FFFFFF;
  color: #000000;
}
#header:after {
  opacity: 0;
  font-family: "The-Noun-Project-UI";
  content: "∴";
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 0.1em;
  line-height: 0.65em;
  pointer-events: none;
}
#header nav {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-fill-mode: fill;
  display: flex;
  flex-direction: row;
}
#header nav > ul {
  justify-content: flex-start;
  flex-direction: row;
  display: flex;
}
#header nav > ul > li > a {
  transition: opacity 0.3s ease;
  padding: 0 10px;
  line-height: 3em;
  display: inline-block;
  height: 40px;
}
#header nav > ul > li > a:before {
  padding-right: 7px;
}
#header nav > ul > li > a:hover, #header nav > ul > li > a.active {
  background: #333333;
}
#header nav a {
  color: #F2F2F2;
  transition: color background 0.3s ease;
}
#header nav a:hover {
  color: #FFFFFF;
}
#header .static-nav .homepage-logo {
  margin-left: -10px;
}
#header .static-nav .ui_logo:before {
  top: -1px;
}
#header .static-nav .ui_view-more:before {
  font-size: 24px;
  padding-right: 0;
  left: 1px;
}
#header .user-nav {
  justify-content: flex-end;
  display: inline-flex;
  flex-grow: 1;
}
#header .user-nav li {
  min-width: 40px;
}
#header .user-nav li a {
  display: block;
  height: 40px;
}
#header .user-nav .avatar.active {
  background: #333333;
}
#header .user-nav .avatar img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 0px;
  margin-top: 10px;
  overflow: hidden;
  background-color: #FFFFFF;
}
#header .user-nav .notifications-list,
#header .user-nav .show-user-menu {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-fill-mode: fill;
  position: absolute;
  overflow: hidden;
  box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.4);
}
#header .user-nav .ui_notifications {
  font-size: 18px;
}
#header .user-nav .ui_notifications:before {
  top: -7px;
  left: 4px;
}
#header .user-nav .ui_upload:before {
  left: 5px;
}
#header .user-nav .ui_key:before {
  font-size: 26px;
}
#header .user-nav .notifications-list {
  background: #333333;
  padding: 0 20px 10px 20px;
  max-width: 300px;
}
#header .user-nav .notifications-list li a {
  display: inline;
  height: inherit;
}
#header .user-nav .notifications-list li .icon-term {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  display: inline;
  max-width: 130px;
  position: relative;
}
#header .user-nav .show-user-menu {
  background: #333333;
}
#header .user-nav .show-user-menu li {
  border-bottom: 1px solid #6D6D6D;
  margin: 0;
}
#header .user-nav .show-user-menu li:last-child {
  border-bottom: none;
}
#header .user-nav .show-user-menu li a {
  padding: 20px 48px 0px 15px;
  height: 60px;
  display: inline-block;
  width: 100%;
}
#header .user-nav .show-user-menu li a:before {
  padding-right: 10px;
}
#header .user-nav .hide-user-menu {
  display: none;
}

.stuck #header {
  position: relative;
  height: 41px;
  transform: translate3d(0, -24px, 0);
}
.stuck #header .overflow-menu {
  display: none;
}
.stuck #header nav > ul,
.stuck #header .overflow-menu {
  opacity: 0;
}
.stuck #header:after {
  transition: all 0.05s ease;
  opacity: 1;
  font-size: 28px;
  bottom: 2px;
}
.stuck #header:hover {
  top: 24px;
  max-height: 100%;
}
.stuck #header:hover:after {
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.stuck #header:hover nav > ul,
.stuck #header:hover .overflow-menu {
  opacity: 1;
}
.stuck #header:hover .overflow-menu {
  display: block;
}
.stuck #header:hover + .stuck {
  margin-top: 24px;
}

.overflow-menu {
  background: #333333;
  position: relative;
  width: 100%;
  height: 40px;
  left: 0;
  border-bottom: 1px solid #000000;
}
.overflow-menu ul {
  justify-content: space-between;
  flex-direction: row;
  display: flex;
  height: 40px;
}
.overflow-menu .ui_close {
  font-size: 7px;
  padding-top: 16px;
}
.overflow-menu a {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-fill-mode: fill;
  border-bottom: 0;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #BABABA;
  display: inline-block;
  padding: 10px 12px 10px;
}
.overflow-menu a:hover .menu-link {
  color: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}
.overflow-menu .bolder {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.menu-link:hover {
  color: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

@media (min-width: 960px) {
  #header {
    display: block;
  }
  .static-nav {
    width: 668px;
  }
}
.help-container {
  position: relative;
}
.help-container.within-input {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -8px;
}

.help-tip {
  color: #BABABA;
  cursor: help;
  font-size: 14px;
}

.help-adjacent {
  display: inline-block;
  vertical-align: middle;
}
.help-adjacent + .help-container {
  display: inline-block;
  margin-left: 20px;
  vertical-align: middle;
}

.help-box {
  background-color: #333333;
  border: solid 1px transparent;
  bottom: 30px;
  color: #BABABA;
  display: block;
  left: -140px;
  min-height: 150px;
  opacity: 0;
  padding: 20px;
  position: absolute;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  transform: scale(0.1);
  text-align: left;
  transition: all 0.25s 0.3s cubic-bezier(0.02, 1.365, 0.39, 0.97);
  transform-origin: 50% 100%;
  visibility: hidden;
  width: 300px;
  z-index: 999;
}
.help-box:after {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #333333;
  bottom: -20px;
}
.help-box:before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: transparent;
  bottom: -21px;
}
.help-box.at-top {
  bottom: auto;
  left: -142px;
  top: 30px;
  transform-origin: 50% 0;
}
.help-box.at-top:after {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-bottom-color: #333333;
  top: -20px;
}
.help-box.at-top:before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-bottom-color: transparent;
  top: -22px;
}
.help-box.on-left {
  left: -22px;
  transform-origin: 0 100%;
}
.help-box.on-left:after {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #333333;
  left: 20px;
  bottom: -20px;
}
.help-box.on-left:before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: transparent;
  left: 20px;
  bottom: -22px;
}
.help-box.on-right {
  left: auto;
  right: -22px;
  transform-origin: 100% 100%;
}
.help-box.on-right:after {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #333333;
  left: auto;
  right: 5px;
  bottom: -20px;
}
.help-box.on-right:before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: transparent;
  left: auto;
  right: 5px;
  bottom: -22px;
}
.help-box .help-headline {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 8px;
  margin-top: 0;
  padding: 0;
}
.help-box .help-headline:before {
  color: #FFFFFF;
  font-size: 22px;
  margin-right: 0.5em;
  position: relative;
}
.help-box .help-body-copy {
  font-size: 14px;
  line-height: 18px;
  margin: 0 0 14px 0;
}
.help-box a {
  color: #BABABA;
}
.help-box a:hover {
  color: #FFFFFF;
}

.hover-context:hover + .hover-context-box,
.hover-context-box:hover,
.help-box:hover,
.help-tip:hover + .help-box {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.hover-context-container {
  position: relative;
}

.hover-context {
  color: #BABABA;
  cursor: default;
  font-size: 13px;
}

.hover-context-box {
  background-color: #FAFAFA;
  border: solid 1px #F2F2F2;
  color: #1F1F1F;
  display: block;
  left: 30px;
  top: 0;
  opacity: 0;
  padding: 16px;
  position: absolute;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  transform: scale(0.1);
  text-align: left;
  transition: all 0.25s 0.3s cubic-bezier(0.02, 1.365, 0.39, 0.97);
  transform-origin: 50% 100%;
  visibility: hidden;
  width: 250px;
  z-index: 80;
}
.hover-context-box:after {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-right-color: #FAFAFA;
  top: 14px;
  left: -18px;
  margin-left: 0;
}
.hover-context-box:before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-right-color: #F2F2F2;
  top: 14px;
  left: -20px;
  margin-left: 0;
}
.hover-context-box.at-top {
  bottom: auto;
  left: -117px;
  top: 32px;
  transform-origin: 50% 0;
}
.hover-context-box.at-top:after {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-bottom-color: #FAFAFA;
  top: -20px;
}
.hover-context-box.at-top:before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-bottom-color: #F2F2F2;
  top: -22px;
}
.hover-context-box.on-left {
  left: 30px;
  top: -18px;
  transform-origin: 0 100%;
}
.hover-context-box.on-left:after {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-right-color: #FAFAFA;
  top: 14px;
  left: -18px;
  margin-left: 0;
}
.hover-context-box.on-left:before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-right-color: #F2F2F2;
  top: 14px;
  left: -20px;
  margin-left: 0;
}
.hover-context-box.on-right {
  left: auto;
  right: -22px;
  transform-origin: 100% 100%;
}
.hover-context-box.on-right:after {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #FAFAFA;
  left: auto;
  right: 5px;
  bottom: -20px;
}
.hover-context-box.on-right:before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #F2F2F2;
  left: auto;
  right: 5px;
  bottom: -22px;
}
.hover-context-box .help-headline {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin: 0 0 8px 0;
}
.hover-context-box .help-body-copy {
  font-size: 14px;
  line-height: 18px;
  margin: 0 0 8px 0;
}

/**
 * * Hero styling
 * *
 * * @group modules
 * **/
/* Temp styles for hero */
.hero-container {
  background: #FFFFFF;
  padding: 50px 0 20px;
  position: relative;
  width: 100%;
}
.hero-container .hero-page-width-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin: auto;
  max-width: 940px;
  position: relative;
}
.hero-container .hero-meta {
  display: inline-flex;
  flex-direction: column;
  max-width: 45%;
  width: 100%;
}
.hero-container .esc-page {
  left: auto;
  right: -30px;
  top: 6px;
}
.hero-container .hero-basic-info {
  min-height: 195px;
}
.hero-container .hero-basic-info .designer {
  font-size: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.hero-container .hero-basic-info .designer a {
  border-bottom: solid 1px;
}
.hero-container .hero-basic-info .designer a:hover {
  color: #000000;
}
.hero-container .hero-basic-info .hero-collections {
  color: #BABABA;
  font-size: 16px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-top: 18px;
}
.hero-container .hero-basic-info .hero-collections a {
  border-bottom: solid 1px;
}
.hero-container .hero-basic-info .hero-collections a:hover {
  color: #333333;
}
.hero-container .hero-actions .help-container {
  margin-left: 24px;
  vertical-align: middle;
  display: inline-block;
}
.hero-container .hero-tag {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 16px;
}
.hero-container .hero-tag:last-child {
  margin: 0;
}
.hero-container .split-button-container,
.hero-container .button {
  margin-bottom: 0;
}
.hero-container .split-button-container.processing,
.hero-container .button.processing {
  margin-bottom: 47px;
}
.hero-container .split-button-container {
  vertical-align: middle;
}
.hero-container .sponsored-collection {
  font-size: 13px;
  color: #BABABA;
  position: absolute;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #000000;
  right: 8px;
  top: -4px;
  text-align: left;
  display: flex;
  align-items: center;
  z-index: 20;
  border-radius: 0 0 8px 8px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.75);
}
.hero-container .sponsored-collection img {
  margin-left: 8px;
  padding: 0;
}

.hero-container > .container {
  height: 100%;
}

.hero-container h1 {
  font-size: 36px;
  margin-bottom: 15px;
  text-transform: capitalize;
}

.hero-icon {
  display: inline-flex;
  justify-content: flex-end;
  height: 360px;
  margin-top: 31px;
  text-align: center;
  transform: scale(0.85);
  transition: all 0.2s cubic-bezier(0.19, 0.92, 0.35, 1.07);
  width: 360px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.hero-icon.imgLoaded {
  transform: scale(1);
}

.hero-icon-scale-tip {
  color: #BABABA;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
}
.hero-icon-scale-tip .key-container {
  background: #BABABA;
  color: #FFFFFF;
  display: inline-block;
  height: 18px;
  width: 18px;
  text-align: center;
  line-height: 17px;
}

.esc-page, .auth-modal-container .close {
  color: #BABABA;
  position: absolute;
  right: 40px;
  top: 40px;
  z-index: 10;
}

#sign-up-view .esc-page {
  z-index: 99;
}

#download {
  margin: 10px 0;
}

.kit-share-container {
  height: 20px;
  margin-top: 20px;
}
.kit-share-container a {
  color: #BABABA;
  cursor: pointer;
}
.kit-share-container a:hover {
  color: #333333;
}

.view-more_arrow.disabled {
  color: #F2F2F2;
  pointer-events: none;
}

.kit-wrapper {
  display: inline-block;
  position: relative;
}

@media (max-width: 768px) {
  .hero-container {
    height: 100%;
    overflow: auto;
    padding: 0;
    position: fixed;
    top: 0;
    z-index: 100;
  }
  .hero-container .hero-basic-info {
    height: auto;
    min-height: inherit;
    margin-bottom: 20px;
  }
  .hero-container .hero-page-width-container {
    display: block;
  }
  .hero-container .esc-page {
    font-size: 28px;
    padding: 12px;
    z-index: 999;
    top: 0;
    right: 0;
  }
  .hero-container .hero-meta {
    max-width: 100%;
    padding: 0 20px 20px;
  }
  .hero-container .color-upsell,
  .hero-container .hero-color-picker,
  .hero-container .hero-actions {
    display: none;
  }
  .hero-container .hero-icon {
    margin: 50px 20px;
    width: calc(100% - 40px);
    height: 300px;
  }
  .sponsored-collection {
    top: 11px;
    right: 64px;
  }
}
.icon-license-container .hover-context-box {
  top: -18px;
  left: 36px;
}

.card-notifications {
  bottom: 30px;
  position: fixed;
  right: 30px;
  width: 450px;
  z-index: 1000;
}

.card-notification {
  animation: slide-in 0.3s 1s forwards;
  background: white;
  display: flex;
  right: -120%;
  opacity: 0;
  position: relative;
  transition: all 0.3s ease-out;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 16px 0px;
}
.card-notification figure {
  background-color: #4065BF;
  background-size: 50%;
  padding: 35px;
  width: 160px;
  border-radius: 2px 0 0 2px;
}
.card-notification figcaption {
  background-color: #FF6161;
  border-radius: 2px 2px 0 0;
  padding: 16px 20px;
  width: 290px;
}
.card-notification h3 {
  font-family: "ArbeitBold", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  color: #FFFFFF;
}
.card-notification .card-notification-text {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
}
.card-notification .call-to-action {
  color: #FFFFFF;
}
.card-notification .dont-show-this-again {
  color: #FFFFFF;
  font-size: 13px;
  margin: 0 8px;
}
.card-notification .dont-show-this-again:before {
  content: "";
  display: inline-block;
  border: solid 1px #FFFFFF;
  font-size: 13px;
  margin: 0 8px;
  padding: 0px 2px;
  vertical-align: middle;
  min-height: 16px;
  min-width: 16px;
}
.card-notification .dont-show-this-again.checked:before {
  content: " ✔ ";
}
.card-notification .close {
  font-size: 24px;
  position: absolute;
  right: 10px;
  top: 0;
  color: #FFFFFF;
}
.card-notification.closed {
  animation: slide-out 0.3s linear 0s forwards;
}

.related-icon {
  opacity: 0;
}

.view-more.animate .related-icon {
  animation-duration: 3.5s;
  animation-timing-function: ease-out;
  transform: scale(0);
  animation-name: slide-up-in;
  animation-fill-mode: forwards;
  position: relative;
}
.view-more.animate .related-icon:nth-child(0) {
  animation-delay: 0s;
}
.view-more.animate .related-icon:nth-child(1) {
  animation-delay: 0.1s;
}
.view-more.animate .related-icon:nth-child(2) {
  animation-delay: 0.2s;
}
.view-more.animate .related-icon:nth-child(3) {
  animation-delay: 0.3s;
}
.view-more.animate .related-icon:nth-child(4) {
  animation-delay: 0.4s;
}
.view-more.animate .related-icon:nth-child(5) {
  animation-delay: 0.5s;
}
.view-more.animate .related-icon:nth-child(6) {
  animation-delay: 0.6s;
}
.view-more.animate .related-icon:nth-child(7) {
  animation-delay: 0.7s;
}
.view-more.animate .related-icon:nth-child(8) {
  animation-delay: 0.8s;
}
.view-more.animate .related-icon:nth-child(9) {
  animation-delay: 0.9s;
}
.view-more.animate .related-icon:nth-child(10) {
  animation-delay: 1s;
}
.view-more.animate .related-icon:nth-child(11) {
  animation-delay: 1.1s;
}
.view-more.animate.reversed .related-icon:nth-child(0) {
  animation-delay: 1s;
}
.view-more.animate.reversed .related-icon:nth-child(1) {
  animation-delay: 0.9s;
}
.view-more.animate.reversed .related-icon:nth-child(2) {
  animation-delay: 0.8s;
}
.view-more.animate.reversed .related-icon:nth-child(3) {
  animation-delay: 0.7s;
}
.view-more.animate.reversed .related-icon:nth-child(4) {
  animation-delay: 0.6s;
}
.view-more.animate.reversed .related-icon:nth-child(5) {
  animation-delay: 0.5s;
}
.view-more.animate.reversed .related-icon:nth-child(6) {
  animation-delay: 0.4s;
}
.view-more.animate.reversed .related-icon:nth-child(7) {
  animation-delay: 0.3s;
}
.view-more.animate.reversed .related-icon:nth-child(8) {
  animation-delay: 0.2s;
}
.view-more.animate.reversed .related-icon:nth-child(9) {
  animation-delay: 0.1s;
}
.view-more.animate.reversed .related-icon:nth-child(10) {
  animation-delay: 0s;
}
.view-more.animate.reversed .related-icon:nth-child(11) {
  animation-delay: -0.1s;
}

@keyframes slide-up-in {
  0% {
    opacity: 0;
    transform: translateY(100%) scale(0.6) scaleY(0.5);
  }
  5% {
    opacity: 1;
    transform: translateY(-7%) scale(1) scaleY(1.12);
  }
  7% {
    opacity: 1;
    transform: translateY(3%) scale(1) scaleY(1);
  }
  10% {
    opacity: 1;
    transform: translateY(0%) scale(1) scaleY(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0%) scale(1) scaleY(1);
  }
}
@keyframes slide-in {
  0% {
    right: -120%;
    opacity: 0;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}
@keyframes slide-out {
  0% {
    right: 0;
    opacity: 1;
  }
  10% {
    opacity: 0.5;
  }
  100% {
    right: -120%;
    opacity: 0;
  }
}
/**
 * * Hero styling
 * *
 * * @group modules
 * **/
.link-action {
  display: inline-block;
  color: #6D6D6D;
  text-decoration: underline;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.link-action:hover {
  text-decoration: none;
}

.nounproject-icon-hero .link-to-prepaid {
  padding: 30px 0 30px 25px;
  border: 3px solid #F2F2F2;
  display: flex;
  align-items: center;
  color: #333333;
}
.nounproject-icon-hero .link-to-prepaid .ui_icon-receipt {
  font-size: 32px;
  margin-right: 18px;
}
.nounproject-icon-hero .link-to-prepaid .ui_icon-receipt .text-container {
  margin-top: -5px;
}
.nounproject-icon-hero .link-to-prepaid .ui_icon-receipt p {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #000000;
  margin-bottom: 2px;
}
.nounproject-icon-hero .link-to-prepaid .ui_icon-receipt a {
  font-size: 13px;
  text-decoration: underline;
}
.nounproject-icon-hero .link-to-prepaid .ui_icon-receipt a:hover {
  text-decoration: none;
}
.nounproject-icon-hero .link-to-prepaid h1 {
  margin-bottom: 16px;
}
.nounproject-icon-hero .link-to-prepaid h1, .nounproject-icon-hero .link-to-prepaid h2 {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
}
.nounproject-icon-hero .link-to-prepaid .pro-blue {
  color: #3EA9F5;
}
.nounproject-icon-hero .link-to-prepaid p, .nounproject-icon-hero .link-to-prepaid li, .nounproject-icon-hero .link-to-prepaid .text {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
.nounproject-icon-hero .link-to-prepaid .error, .nounproject-icon-hero .link-to-prepaid .error a {
  color: #F44E4E;
}
.nounproject-icon-hero .link-to-prepaid .error a {
  text-decoration: underline;
}
.nounproject-icon-hero .link-to-prepaid .designer, .nounproject-icon-hero .link-to-prepaid .designer a, .nounproject-icon-hero .link-to-prepaid .designer a:visited, .nounproject-icon-hero .link-to-prepaid .hero-collections, .nounproject-icon-hero .link-to-prepaid .hero-collections a, .nounproject-icon-hero .link-to-prepaid .hero-collections a:visited, .nounproject-icon-hero .link-to-prepaid .related-searches, .nounproject-icon-hero .link-to-prepaid .related-searches a, .nounproject-icon-hero .link-to-prepaid .related-searches a:visited {
  color: #6D6D6D;
  font-size: 14px;
}
.nounproject-icon-hero .link-to-prepaid .designer a:hover, .nounproject-icon-hero .link-to-prepaid .designer a:visited:hover {
  text-decoration: underline;
}
.nounproject-icon-hero .link-to-prepaid .link-action .download-repurchase-help-container {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(25px);
}
.nounproject-icon-hero .link-to-prepaid .hero-collections {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.nounproject-icon-hero .link-to-prepaid .hero-collections a {
  text-decoration: underline;
}
.nounproject-icon-hero .link-to-prepaid button, .nounproject-icon-hero .link-to-prepaid .kit-share-container, .nounproject-icon-hero .link-to-prepaid .button {
  font-size: 18px;
}
.nounproject-icon-hero .link-to-prepaid button.lightgray, .nounproject-icon-hero .link-to-prepaid .button.lightgray {
  background: rgba(216, 216, 216, 0.5);
  color: white;
}
.nounproject-icon-hero .link-to-prepaid .attribution-types li, .nounproject-icon-hero .link-to-prepaid .purchase-types li, .nounproject-icon-hero .link-to-prepaid .format-options li {
  font-size: 18px;
  color: #6D6D6D;
}
.nounproject-icon-hero .link-to-prepaid .attribution-types li.current, .nounproject-icon-hero .link-to-prepaid .purchase-types li.current, .nounproject-icon-hero .link-to-prepaid .format-options li.current {
  color: #000000;
}
.nounproject-icon-hero .link-to-prepaid .selected-attribution {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.nounproject-icon-hero .link-to-prepaid .selected-attribution .title {
  font-size: 18px;
}
.nounproject-icon-hero .link-to-prepaid .format-options {
  text-transform: uppercase;
}
.nounproject-icon-hero .link-to-prepaid .format-options li {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.nounproject-icon-hero .link-to-prepaid .license-choice h2 {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.nounproject-icon-hero .link-to-prepaid .license-choice p {
  font-size: 13px;
  color: #6D6D6D;
}
.nounproject-icon-hero .link-to-prepaid .license-choice-notes {
  color: #6D6D6D;
}
.nounproject-icon-hero .link-to-prepaid .license-choice-notes li {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  white-space: nowrap;
}
.nounproject-icon-hero .link-to-prepaid .license-strip {
  color: #6D6D6D;
  font-size: 14px;
}
.nounproject-icon-hero .link-to-prepaid .phase-select-license .license-selected .license-choice {
  color: #6D6D6D;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .text {
  font-size: 13px;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .purchase-types .pro-info {
  font-size: 10px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #6D6D6D;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .purchase-types .pro-blue {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #3EA9F5;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .purchase-types .plan-price {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #6D6D6D;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .purchase-types .plan-price .pro-info {
  text-align: right;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .purchase-types .plan-price, .nounproject-icon-hero .link-to-prepaid .billing-form .purchase-types .plan-text {
  font-size: 16px;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .disclaimer {
  font-size: 13px;
  color: #333333;
  margin: 0;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .billing-header {
  color: #6D6D6D;
  margin-bottom: 8px;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .save-card-section {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .saved-card {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .saved-card .card-title {
  line-height: 1.9em;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .saved-card-action {
  color: #333333;
}
.nounproject-icon-hero .link-to-prepaid .billing-form p {
  font-size: 14px;
}
.nounproject-icon-hero .link-to-prepaid .billing-form .pro-description {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
.nounproject-icon-hero .link-to-prepaid .phase-use-prepaid .price-row {
  display: flex;
  justify-content: space-between;
}
.nounproject-icon-hero .link-to-prepaid .phase-use-prepaid .balance-calculation {
  border-top: 3px solid #F2F2F2;
  border-bottom: 3px solid #F2F2F2;
  padding: 16px 0;
  margin: 16px 0;
}
.nounproject-icon-hero .link-to-prepaid .phase-use-prepaid .balance-calculation h4:first-child {
  margin-bottom: 10px;
}
.nounproject-icon-hero .link-to-prepaid .phase-use-prepaid .button {
  margin-top: 45px;
}
.nounproject-icon-hero .link-to-prepaid .phase-use-prepaid .price-display {
  white-space: nowrap;
  margin-left: 7px;
}
.nounproject-icon-hero .link-to-prepaid .phase-download-ready h4 {
  color: #6D6D6D;
  margin-bottom: 8px;
}
.nounproject-icon-hero .link-to-prepaid .phase-download-ready .attribution-instructions a {
  text-decoration: underline;
  display: inline-block;
}
.nounproject-icon-hero .link-to-prepaid .phase-download-ready .attribution-instructions a, .nounproject-icon-hero .link-to-prepaid .phase-download-ready .attribution-instructions a:visited {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.nounproject-icon-hero .link-to-prepaid .download-icon-actions a, .nounproject-icon-hero .link-to-prepaid .download-icon-actions a:visited, .nounproject-icon-hero .link-to-prepaid .download-icon-actions > div {
  cursor: pointer;
}
.nounproject-icon-hero .link-to-prepaid .download-icon-actions a:before, .nounproject-icon-hero .link-to-prepaid .download-icon-actions a:visited:before, .nounproject-icon-hero .link-to-prepaid .download-icon-actions > div:before {
  font-size: 32px;
  color: #6D6D6D;
}

.nounproject-icon-hero {
  padding: 24px 8px 20px;
  background: #FFFFFF;
  position: relative;
  width: 100%;
}
.nounproject-icon-hero .download-flow.with-collection .hero-collections {
  margin-bottom: 20px;
}
.nounproject-icon-hero .download-flow.no-collection .designer, .nounproject-icon-hero .download-flow.with-collection:not(.phase-initial):not(.phase-download-ready) .designer, .nounproject-icon-hero .download-flow.with-license-creative-commons.phase-download-ready .designer {
  margin-bottom: 20px;
}
.nounproject-icon-hero .download-flow .hero-collections {
  margin-bottom: 3px;
}
.nounproject-icon-hero .download-flow .hero-page-width-container {
  display: flex;
}
.nounproject-icon-hero .download-flow .view-container {
  height: auto;
  min-height: 468px;
}
.nounproject-icon-hero .download-flow .view-container .loading {
  margin-top: 45%;
}
.nounproject-icon-hero .download-flow .download-actions {
  margin-top: 32px;
  margin-bottom: 8px;
  display: block;
}
.nounproject-icon-hero .download-flow .download-actions button.download-flow-start-button {
  margin-bottom: 8px;
}
.nounproject-icon-hero .download-flow .phase-download-ready.with-license-creative-commons .download-actions {
  margin-top: 2px;
}
.nounproject-icon-hero .download-flow .button, .nounproject-icon-hero .download-flow .kit-wrapper, .nounproject-icon-hero .download-flow .download-actions {
  display: block;
  width: 100%;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}
.nounproject-icon-hero .download-flow .kit-share-container {
  height: auto;
  font-size: 14px;
}
.nounproject-icon-hero .download-flow .kit-share-container .ui_kit-open:before {
  display: none;
}
.nounproject-icon-hero .download-flow .download-icon-actions {
  z-index: 5;
  position: absolute;
  right: 15px;
  top: 15px;
}
.nounproject-icon-hero .download-flow .download-icon-actions .esc-page {
  display: block;
  position: static;
  margin-bottom: 25px;
}
.nounproject-icon-hero .download-flow .mobile-tags {
  padding: 20px 0px;
}
.nounproject-icon-hero .download-flow .mobile-tags .hero-tag {
  padding-top: 5px;
}
.nounproject-icon-hero .download-flow .download-flow {
  position: relative;
}
.nounproject-icon-hero .download-flow .download-flow:not(.phase-initial) button {
  margin-top: 25px;
  margin-bottom: 5px;
}
.nounproject-icon-hero .download-flow p {
  margin: 2px 0 7px;
}
.nounproject-icon-hero .download-flow .phase-select-license h3 {
  margin-bottom: 8px;
}
.nounproject-icon-hero .download-flow .phase-select-license .license-choices {
  min-width: 350px;
}
.nounproject-icon-hero .download-flow .phase-upsell .upsell-container {
  background: #FAFAFA;
  border: 3px solid #F2F2F2;
  padding: 16px 16px;
  min-width: 350px;
}
.nounproject-icon-hero .download-flow .phase-upsell .upsell-container .header {
  margin-bottom: 0.5em;
}
.nounproject-icon-hero .download-flow .phase-upsell .upsell-container .download-actions .button:first-child {
  margin-bottom: 8px;
}
.nounproject-icon-hero .download-flow .phase-upsell .upsell-container .download-actions .button:last-child {
  margin-bottom: 0px;
}
.nounproject-icon-hero .download-flow .phase-upsell .upsell-container .license-icon {
  display: none;
}
.nounproject-icon-hero .download-flow .license-choices .license-choice {
  align-items: flex-start;
  padding: 8px 0;
}
.nounproject-icon-hero .download-flow .license-choices .license-choice:after {
  margin-left: auto;
}
.nounproject-icon-hero .download-flow .license-choices .license-choice:before {
  margin-top: 3px;
  margin-right: 8px;
}
.nounproject-icon-hero .download-flow .bubble-choices {
  margin-top: 8px;
  margin-bottom: 16px;
}
.nounproject-icon-hero .download-flow .bubble-choices > li, .nounproject-icon-hero .download-flow .bubble-choices .bubble-choice {
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
}
.nounproject-icon-hero .download-flow .bubble-choices > li:before, .nounproject-icon-hero .download-flow .bubble-choices .bubble-choice:before {
  content: " ";
  display: block;
  height: 14px;
  width: 14px;
  border: 3px solid #BABABA;
  border-radius: 100%;
  margin-right: 8px;
}
.nounproject-icon-hero .download-flow .bubble-choices > li.current:before, .nounproject-icon-hero .download-flow .bubble-choices .bubble-choice.current:before {
  background: #7AC943;
  border-color: #5C9533;
}
.nounproject-icon-hero .download-flow .bubble-choices.blue-choices > li.current:before, .nounproject-icon-hero .download-flow .bubble-choices > li.blue-choice.current:before, .nounproject-icon-hero .download-flow .bubble-choices.blue-choices .bubble-choice.current:before {
  background: #3EA9F5;
  border-color: #2E80B7;
}
.nounproject-icon-hero .download-flow .download-flow-license-switch {
  margin-bottom: 11px;
}
.nounproject-icon-hero .download-flow .download-flow-license-switch .nounproject-tool-tip {
  visibility: hidden;
  position: absolute;
}
.nounproject-icon-hero .download-flow .billing-form {
  margin-bottom: 20px;
}
.nounproject-icon-hero .download-flow .billing-form .pay-as-you-go-description {
  margin-bottom: 21px;
}
.nounproject-icon-hero .download-flow .billing-form .strikeout {
  color: #BABABA;
  text-decoration: line-through;
}
.nounproject-icon-hero .download-flow .billing-form .purchase-types {
  margin-top: 0;
  padding-bottom: 9px;
}
.nounproject-icon-hero .download-flow .billing-form .purchase-types .bubble-choice + .text, .nounproject-icon-hero .download-flow .billing-form .purchase-types + .choose-another {
  margin-left: 22px;
  margin-right: 53px;
  margin-bottom: 16px;
}
.nounproject-icon-hero .download-flow .billing-form .purchase-types .purchase-type:not(:last-child) {
  border-bottom: 1px solid #F2F2F2;
}
.nounproject-icon-hero .download-flow .billing-form .purchase-types .purchase-type input[type=number] {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  color: #797979;
  display: inline-block;
  border: 3px solid #F2F2F2;
  border-radius: 4px;
  text-align: center;
  margin-left: 11px;
  max-width: 70px;
}
.nounproject-icon-hero .download-flow .billing-form .purchase-types .bubble-choice {
  margin-top: 11px;
  padding-bottom: 10px;
  margin-bottom: 0px;
  justify-content: space-between;
  align-items: flex-start;
}
.nounproject-icon-hero .download-flow .billing-form .purchase-types .bubble-choice:before {
  margin-top: 4px;
}
.nounproject-icon-hero .download-flow .billing-form .purchase-types .bubble-choice .plan-price {
  margin-left: auto;
  text-align: right;
}
.nounproject-icon-hero .download-flow .billing-form .card-section {
  margin-top: 16px;
  margin-bottom: 26px;
}
.nounproject-icon-hero .download-flow .billing-form .card-section .billing-header {
  display: flex;
  justify-content: space-between;
}
.nounproject-icon-hero .download-flow .billing-form .save-card-section .fancy-checkbox {
  margin-right: 0;
  margin-left: 8px;
}
.nounproject-icon-hero .download-flow .billing-form .saved-card {
  display: flex;
  justify-content: space-between;
  padding: 14px 8px 15px;
  margin-bottom: 20px;
  background: #FAFAFA;
  border-radius: 4px;
}
.nounproject-icon-hero .download-flow .billing-form .saved-card-action {
  margin-bottom: 16px;
}
.nounproject-icon-hero .download-flow .purchase-total {
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
}
.nounproject-icon-hero .download-flow .billing-info.billing-info-empty textarea {
  height: 42px;
  min-height: 42px;
  overflow: hidden;
  padding-top: 10px;
}
.nounproject-icon-hero .download-flow .billing-info textarea {
  resize: vertical;
}
.nounproject-icon-hero .download-flow .disclaimer {
  padding: 8px 0px;
  border-bottom: 3px solid #F2F2F2;
}
.nounproject-icon-hero .download-flow .billing-form.with-stripe-error .card-section {
  margin-bottom: 10px;
}
.nounproject-icon-hero .download-flow .phase-payment .billing-form .purchase-types, .nounproject-icon-hero .download-flow .phase-payment .billing-form .purchase-types .text {
  margin-bottom: 0;
}
.nounproject-icon-hero .download-flow textarea {
  background: #FAFAFA;
  border: 3px solid #F2F2F2;
  width: 100%;
  min-height: 95px;
  padding: 14px 8px;
  color: #6D6D6D;
}
.nounproject-icon-hero .download-flow textarea:focus {
  border-color: #F2F2F2 !important;
}
.nounproject-icon-hero .download-flow textarea::placeholder {
  color: #aab7c4;
}
.nounproject-icon-hero .download-flow .purchase-type .marker {
  display: none;
}
.nounproject-icon-hero .download-flow .purchase-type-prepaid {
  position: relative;
}
.nounproject-icon-hero .download-flow .purchase-type-prepaid .marker {
  animation: slideInFromLeftShort 0.3s;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1;
  padding: 7px 10px 5px 8px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  color: white;
  background: #3EA9F5;
  position: absolute;
  left: -75px;
  top: 0;
  margin-top: -2px;
}
.nounproject-icon-hero .download-flow .purchase-type-prepaid .marker:before {
  content: "NEW";
}
.nounproject-icon-hero .download-flow .purchase-type-prepaid .marker:after {
  position: absolute;
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-left-color: #3EA9F5;
  border-width: 13px;
  margin-top: -13px;
}
.nounproject-icon-hero .download-flow .phase-select-purchase-type .purchase-type-prepaid .marker {
  display: block;
}
.nounproject-icon-hero .download-flow .phase-download-ready .attribution-instructions {
  margin-top: 20px;
  padding-bottom: 12px;
}
.nounproject-icon-hero .download-flow .phase-download-ready .attribution-instructions p {
  margin: 20px 0;
}
.nounproject-icon-hero .download-flow .phase-download-ready .attribution-instructions ul {
  padding-left: 16px;
  margin: 15px 0;
}
.nounproject-icon-hero .download-flow .phase-download-ready .attribution-instructions ul li {
  list-style: disc outside none;
  margin-bottom: 8px;
}
.nounproject-icon-hero .download-flow .phase-download-ready .attribution-instructions ul + a {
  margin-bottom: 40px;
}
.nounproject-icon-hero .download-flow .phase-download-ready .attribution-instructions textarea {
  resize: none;
  margin-top: 5px;
}
.nounproject-icon-hero .download-flow .phase-download-ready .attribution-instructions .copy-attribution + p {
  margin: 30px 0;
}
.nounproject-icon-hero .download-flow .phase-download-ready .selected-attribution {
  margin-bottom: 16px;
}
.nounproject-icon-hero .download-flow .phase-download-ready .selected-attribution:before {
  margin-right: 12px;
}
.nounproject-icon-hero .download-flow .phase-download-ready .repurchase-license {
  margin: 0px 0 16px 32px;
}
.nounproject-icon-hero .download-flow .phase-download-ready .format-options {
  display: flex;
  justify-content: space-between;
}
.nounproject-icon-hero .download-flow .phase-download-ready .format-options .button {
  color: white;
  display: inline-block;
  width: auto;
  margin: 0;
  padding-left: 50px;
  padding-right: 50px;
}
.nounproject-icon-hero .download-flow .phase-download-ready .format-options .button .button-context {
  display: inline-block;
  font-size: 13px;
  text-transform: none;
  min-width: 41px;
}
.nounproject-icon-hero .download-flow .phase-download-ready .format-options .button.with-options {
  display: flex;
  padding: 0;
  justify-content: space-between;
  min-width: 137px;
  align-items: center;
}
.nounproject-icon-hero .download-flow .phase-download-ready .format-options .button.with-options .button-target {
  width: 75%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nounproject-icon-hero .download-flow .phase-download-ready .format-options .button.with-options .editor-action {
  background: rgba(0, 0, 0, 0.1);
  width: 25%;
  height: 100%;
}
.nounproject-icon-hero .download-flow .phase-download-ready .format-options .button.with-options .editor-action:hover {
  background: rgba(0, 0, 0, 0.2);
}
.nounproject-icon-hero .download-flow .phase-download-ready .format-options .button.with-options .editor-action > [data-tippy] {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nounproject-icon-hero .download-flow .phase-download-ready .format-options .button.with-options .editor-action i:before {
  font-size: 14px;
}
.nounproject-icon-hero .download-flow .phase-download-ready .format-options .button {
  background-color: #7AC943;
}
.nounproject-icon-hero .download-flow .phase-download-ready.with-pro-license .format-options .button {
  background-color: #3EA9F5;
}
.nounproject-icon-hero .download-flow .phase-download-ready .processing .format-options .format-option.current {
  background-color: #6D6D6D;
}
.nounproject-icon-hero .download-flow .nounproject-tool-tip.default-tool-tip > [data-tippy] {
  margin-left: 16px;
}

.pill-options {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}
.pill-options > li {
  flex: 1;
  color: #6D6D6D;
  background: #FAFAFA;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 12px 10px 10px;
  display: inline-block;
  text-align: center;
  transition: all 0.3s ease-out;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.pill-options > li:hover {
  background: #BABABA;
  color: #FFFFFF;
}
.pill-options > li.current {
  background: #6D6D6D;
  color: #FFFFFF;
}

.nounproject-icon-hero {
  background: #FFFFFF;
}
.nounproject-icon-hero .button {
  user-select: none;
  border-radius: 4px;
}
.nounproject-icon-hero .button .download-flow-navigation:before {
  display: block;
  height: 3px;
  background: #F2F2F2;
  content: " ";
  width: 83%;
  margin: 0 auto 9px;
}
.nounproject-icon-hero .button .license-choices h2 {
  margin-bottom: 8px;
}
.nounproject-icon-hero .button .license-choices .license-choice {
  user-select: none;
  padding: 16px;
  margin: 8px -16px 0 -16px;
  transition: all 0.3s ease-out;
}
.nounproject-icon-hero .button .license-choices .license-choice.current {
  color: black;
}
.nounproject-icon-hero .button .license-choices .license-choice h2 {
  display: inline-block;
}
.nounproject-icon-hero .button .license-choices .license-choice .license-icon:after {
  font-size: 18px;
  color: #000000;
  display: inline-block;
  margin-top: 0;
  margin-left: 9px;
}
.nounproject-icon-hero .button .license-choices .license-choice .license-royalty-free:after {
  width: 27px;
  height: 25px;
}
.nounproject-icon-hero .button .license-choices.bubble-choices .license-choice {
  cursor: pointer;
}
.nounproject-icon-hero .button .license-choices.bubble-choices .license-choice:before {
  flex-shrink: 0;
}
.nounproject-icon-hero .button .license-choices.bubble-choices .license-choice:hover {
  background: #F2F2F2;
  border-radius: 8px;
}
.nounproject-icon-hero .button .license-choices.bubble-choices .license-choice:first-child {
  border-bottom: 3px solid #F2F2F2;
  border-radius: 8px 8px 0 0;
}
.nounproject-icon-hero .button .license-choices .license-choice-notes li {
  display: flex;
  margin-bottom: 8px;
}
.nounproject-icon-hero .button .license-choices .license-choice-notes li span {
  white-space: pre-line;
}
.nounproject-icon-hero .button .license-choices .license-choice-notes li.nowrap span {
  white-space: nowrap;
}
.nounproject-icon-hero .button .license-choices .license-choice-notes li:before {
  margin-top: 2px;
  margin-right: 8px;
  font-size: 8px;
}
.nounproject-icon-hero .button .license-choices .license-choice-notes li.ui_close:before {
  margin-top: 4px;
}
.nounproject-icon-hero .button .license-choices .license-choice-notes li.ui_eye-dropper:before {
  font-size: 13px;
  margin-right: 6px;
  margin-left: -3px;
}
.nounproject-icon-hero .button .license-choices .license-choice-notes li:not(.with-class):before {
  flex: 0 0 8px;
  content: " ";
  display: inline-block;
  background: #6D6D6D;
  border-radius: 100%;
  width: 8px;
  height: 8px;
}
.nounproject-icon-hero .button .license-icon.license-creative-commons:after, .nounproject-icon-hero .button .license-icon.license-creative-commons.license-icon-before:before {
  content: "➁";
}
.nounproject-icon-hero .button .license-icon.license-public-domain:after, .nounproject-icon-hero .button .license-icon.license-public-domain.license-icon-before:before {
  content: "➀";
}
.nounproject-icon-hero .button .license-icon.license-pro:after, .nounproject-icon-hero .button .license-icon.license-pro.license-icon-before:before {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAMHElEQVR42u2dT3LayhaHfyflWQZwV2BlBSYrsLyC8FZgZZAqz+KsIGQF4c5S5UHwCi5eQeQVPFjBxSt4MPC430Dt+6g8A5JoQUt8XxWTmEDrz8c5p7vVbc45AcDrvOEUACAIAIIAIAgAggAgCACCACAIAIIAIAgAIAgAggAgCACCACAIAIIAIAgAggAgCACCAACCACAIAIIAIAgAggAgCACCACAIAIIAAIIAIAgAggAgCACCACAIAIIAIAgAggAgCAAgCACCACAIAIIAHJuztjXYzDJJP7l0nePKOZcTQZADSLGQAxAEOQBBkAMQBDkA2iUIckAMnHVMjrmkWy5rtPxCkONGjmWMfenwz7UlxSKtAmqQ48ox57LBSaVYFeT4KCmRdMGlg5OIIFXkcM5NuGRwMoIgByAIcgCCIAcgCHIAgkQgx0rSe+ToJPdqWTf9WYRypM65GfdS93DOZWv3QyppKClVxN32Z8jRLDd3zwNJmaSBf/X8n+aSFpKmkqY/Pr1dnpgsuaTc3x+JpCiP35xzrZLDzEaSvm7486NzLo1EjFTSRNJ5ibevJI0ljU9NlJOuQU4xctzcPfdv7p4nKmaunpf8bz0v/cxHHOi6IKcqh08brmt+xLmkf9/cPWexH6uZJWaW+lcfQZCjDJNABefPWCOJFyKX9LePkr8k/cfMZmaWdU2WN8gRLHrcSvoQ8COnPiLFJMfIC3H5yp8v/HVfmNnYF96t5ww5gqVWo8Afe67i6chRJHJMSqaOPUmfJX02swefcq5f61RSX0WPXn8t4s79e8fOuUXnBDnxcY5b/a/7NvTnjlokx+98qBBVL/wrM7PbWAaK3yBHEJoqqns3d8/DlspR+5gl/TSzKGqwswAncKByc6tGkvp+BHUfosptb+6eE5Xvzq1DqmIw8dBiJP57jzXKPTWzgXNu2WpBfB5Zhu/qJk0LOziwGC8j/1lDaWOVGmykI69ScyaIXZBDCJH616DhaFiVz2Z21KIdQU5QEJ8+jVRMFuxF3tyJl7e9RfqJk7dMjpGKQb7rFsghSZdmdosg7WXZls/3N9rXFp7j0bF6tUix9uTHp7ezm7vnVYO/xnkgOZoYzHzhUcXU/d9rhZcBwcGe56cnKTezzDk3RZD2MVVzYwWhboiQ9cbc1wZ52XGttc6ATPW6jnuS/jKze0mjQxXuhxDkqkPpzrZCsglB7n98ersIKMje7VExFaTyYK//PzNJ47VOgjrn7FrS0MzGvi2NXvO9H5jyA3+/tpyY9q1YXIObu+epwk5WlKR3oQQxs4Xqd+E+SspC/2p7UcZ7nLeVjyZjivT4yfwFC8WXgNFDNeVYSfrinEubSGmccwvn3FDSv2qeu56k736qfR9B4i7Wlz7HDiHJ/Y9Pb4P9Ktac3vOkYu7cuOlz5wvvgeqveHLhi/g+gsQtycxL8rTHx/z549PbLHDTkhpF+OCQE0t9hEr3lOQWQdohycAXtFV/sa9+fHrbxKBYWlGO9BiTBP137iNJ6B8WivSGC/fE/6oNt9QADyqW/Zk01Q4zW6pcF+9KUnLsGbQ+VcpVozs49P2GIIeVZT3VWfpo0/TNdqvyM6nfx/K8jh83yVVx7AZBoMq1SVSMPZS5yb4550aRtb+K3I3cb9Qg3ZWjr2IUvowcT7HJ4W/2sYoxmKOBIN1lXCGHH0V8HCMEgdDRY6zy0zieYl5J36/hWzaKzBEEdsmRqVh2pxW/0BWiYRmWCAK7ivKqI9/T2I/Lj7Q/HeO7EaRbjFStW/Th2GMesYuMIN2i6vTxvEXHVqatAwSBTelVWuO/zTomSM/MhggCQQpU30PUCnwqWGam9C2CwGs30Cns61jmGC9DriyPIN3iocJ7Hzt8HkYIAq8x5hRIkq5DRREE6VaalXc8Mhw8ikSx7I+fWMfmlSWL8R31xkhbZlevkXT8PA07I4iX4xf3funaId0WRczsSbsXaThv4bFXeea8Z2bpvj11pFgnnF60cB/Bg+9VgiDt47JELTKpELlbQYCNlxAE/i8V20XaouOpKvMqxEAogrSQkr+mi0MVsgciq/j+IF3eCNJOQqVG58dKXSr+ICQV6495qEeIEaS7gpQtwLMWHG+VNq5CRkZWNeluGpaXKeg97465D+CO4+j7dLHsul5BtxongnSXpMJ7RxEfx63KPwSWhZ60iSDdpcpA4HWMtYivPcpOX//WxO5TCAIvjJvaQmAPJiWjx7ypdb0QBF64UESzgf1uvGVrqMZ2wUWQ7lJnFZDrY265vCZHpvK78T41+WQkgnSXujfNd3+DHlOOnwc4zlIw3b39LDZ00Y5Uf2fbn2bWP8TuUnvKITW98IRzbq+Xivk8btMrxGfw2vrKt5zXoYrFHOp+9kRSf997pMT17/vvqtPGtMm2kWK1n8tNXbS+2zNV/TVrryXNmuwC9p+dq/422o1GEATpBuMtGcLMOTeQ9FH1Nhg9l/TLzPKQophZYmYTFbMw6j7nsWp6ZUgE6QYXu3qf/DMiiaRvNUW5XBMlqztmYmZDM5tK+nuPqHGQAl2KZC7Wrs+Acr+mKrm/4NrmOpd7fuejv0lzf63z36OElzL1nTBpzU6DTXxsfOsGivROvaYVr92kxcc6a7rzgCK9e3yoMobhnMtUbbG5mKJldogvYrr7iePTrZnas8rJo4pZu4tDfBkR5MTxNcttxE1c+Sj3RcVzK+khn1054xYB59zUzB4DFO2hePCdCPmxH+RCEHghU9H1emwxsph2vSLFgpcosvBpzLH46JwbxrYlHILAuiRjSfdHqDGuqo5nHGpVSFIs+F2SzMwW2v0s+PrCdInq9YKVXmTB95a+DDYOVCzkkDZ9PujmhU3Xtb92Q0pFV/BSxQDd8pX3D3wdkynQCiQ+Soy0YUrKIe4tBEGEQeiVQPxg5a02T0LcOZbhhct3yHbV9D6LZwe4ACm34dHZtqdI7rcJCCaJrycm/iYfrkWhhYrpMGVWH0lLRKIXiVpdgzAJ8fjca/PUjJ6XZBB6zMFLV1e8MrOFG38KlV6s02CyI7r3JE0jW/YnDfQeBIGtbFv1Y12IC0kLM4tlxfcysp43LTXdvN1nWiFF6Un6y8zmPurMXrlpByq6dZO1f19ImtQpmM0s2ZDalX3KsNk6pOnnQXgd/TU44PMgC1/r9Esu1DCVNHrlb0mF7xzxPAjsk15tK5KTwN93rmLZnoWZTfzjtcnvEcOvmriQ9EHF2Mo+7Wq0DiHFOt30qsleoJ6Kwb1rL4VUrKzyWto027Ndg6gF8Xkng4HtpHfA79pUUyxqFuj/HMOWOoZeLKhHLAO4G27sqm1r7FgQ5HSJYcxjHqhtAwSB0MSwFvKyYjqGIHAwkgjakL+S+tVp1yWCQBcFWYZqV1M1FYKQYh2TWcB2DRAEQtKLoA2LgJ0HRBAIQ8e6eIkgEJwudfG+0MjMXgSh/oipQJfq7xXSSJqFIKdJEkEb8ldSvyQ28REEQWKKIPu2iwgCnUmxZg20iwgCQehaF+8/x+VXUkEQqEdHu3gbiyIIcnrE3MW7RBCg/tgggnNuKOm9ilXm6+7tniII7EMSQRvyLanXzDk39nu7/6Fif/cHld+6+gJBoO2ClEqlnHNL59zE7xvSl3Ql6U9JT4eqsxCEFOsY1FqO1DmXO+dunXOJpHc+FXtssqF7r+4O7cLMYrjg70IusuDnYKUqFspeqlgra4kgUPVGShXBYuJt2hKDFOu0iLmLF0GA+kNhxjoQBBohiaANOYIAghBBgBSrFjMEgViJdRZvtLC6+4mwx+jySsU+IlOfoqXasC1zGZpaZBpBYF+qdvE+SRqr2DlqvW6YmFmuYh+QqszbdtJIsag/XruJPzrnEj9pcPlKFJiomHW7qtiGJYJArCQ7/v4g6co5N/AC7EqVZj7dqhIVcgSBtglyr2Ju1LDqJpw1JCGCQCtYSfom6Q/nXLZP4eynpA+8aLuYte1EUaSfDi9p06RMClVDlMzMFpK+bnnbom0njdm8EPaGMsu0oYerTbN4SbGgEbb0cM3beDwIAk1IMlPRrTxvc4GOINCkJAsVPVwvj8SOW5kyUoMAEEEAEAQAQQAQBABBABAEAEEAEAQAQQAAQQAQBABBABAEAEEAEAQAQQAQBOAE+C/qph4DLtMD9gAAAABJRU5ErkJggg==);
  width: 68px;
  height: 60px;
  content: " ";
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 46px;
  margin-right: 0;
  display: block;
}
.nounproject-icon-hero .button .license-icon.license-pro.license-icon-small:after, .nounproject-icon-hero .button .license-icon.license-pro.license-icon-small:before {
  width: 24px;
  height: 24px;
  font-size: 16px;
}
.nounproject-icon-hero .button .license-icon.license-icon-before:after {
  display: none;
}
.nounproject-icon-hero .button .license-strip.license-icon.license-icon-before:before {
  display: inline-block;
  margin-left: 0;
  margin-right: 8px;
}
.nounproject-icon-hero .button .license-strip .icon-license-container {
  margin: 0;
  cursor: pointer;
}
.nounproject-icon-hero .button .purchase-total {
  border-top: 3px solid #F2F2F2;
}
.nounproject-icon-hero .button .StripeElement {
  display: block;
  margin: 0;
  max-width: 500px;
  padding: 13px 13px 10px;
  background: white;
  background: #FAFAFA;
  border: 3px solid #F2F2F2;
  color: #6D6D6D;
}
.nounproject-icon-hero .button .StripeElement::placeholder {
  color: #6D6D6D;
}
.nounproject-icon-hero .button .phase-download-ready .selected-attribution {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.nounproject-icon-hero .button .phase-download-ready .selected-attribution:before {
  content: " ";
  display: block;
  height: 14px;
  width: 14px;
  border: 3px solid #BABABA;
  border-radius: 100%;
  margin-right: 8px;
}
.nounproject-icon-hero .button .phase-download-ready .selected-attribution.current:before {
  background: #7AC943;
  border-color: #5C9533;
}
.nounproject-icon-hero .button .phase-download-ready .selected-attribution:before {
  background: #7AC943;
  border-color: #5C9533;
}
.nounproject-icon-hero .button .phase-download-ready ol {
  counter-reset: attribution-list;
}
.nounproject-icon-hero .button .phase-download-ready ol li {
  list-style: none;
}
.nounproject-icon-hero .button .phase-download-ready ol li:not(.no-list-decoration):before {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  content: counter(attribution-list, upper-alpha) ":";
  counter-increment: attribution-list;
  padding-right: 6px;
}
.nounproject-icon-hero .button .phase-download-ready .export-info {
  color: #6D6D6D;
  margin-top: 8px;
  font-size: 13px;
  max-width: 146px;
  text-align: center;
}
.nounproject-icon-hero .button .billing-form .save-card-section label {
  cursor: pointer;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox {
  width: 14px;
  height: 14px;
  position: relative;
  display: inline-block;
  margin-right: 8px;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox, .nounproject-icon-hero .button .billing-form .fancy-checkbox + label {
  cursor: pointer;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox.green label:after {
  border-color: #fcfff4;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox.green label:hover {
  outline-color: #5C9533;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox.green input[type=checkbox]:checked + label {
  outline-color: #5C9533;
  background: #7AC943;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox.blue label:after {
  border-color: #fcfff4;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox.blue label:hover {
  outline-color: #2E80B7;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox.blue input[type=checkbox]:checked + label {
  outline-color: #2E80B7;
  background: #3EA9F5;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox label {
  width: 9px;
  height: 9px;
  cursor: pointer;
  position: absolute;
  left: 3px;
  top: 4px;
  background: white;
  outline: 3px solid #BABABA;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox label:after {
  content: "";
  width: 7px;
  height: 4px;
  position: absolute;
  top: 2px;
  left: 1px;
  border: 2px solid #6D6D6D;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  transform: rotate(-45deg);
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox label:hover {
  outline-color: #6D6D6D;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox label:hover:after {
  opacity: 0.3;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox input[type=checkbox] {
  visibility: hidden;
  position: absolute;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox input[type=checkbox]:checked + label {
  outline-color: #6D6D6D;
  background: #FAFAFA;
}
.nounproject-icon-hero .button .billing-form .fancy-checkbox input[type=checkbox]:checked + label:after {
  opacity: 1;
}

.team-signup-form .input-toggle-container .input-toggle input[type=radio]:checked + label {
  background: #AE8DFF;
}
.team-signup-form .stripe-split-form .StripeElement.StripeElement--focus:not(.StripeElement--invalid) {
  border-left: 8px solid #AE8DFF;
}

.new-form .stripe-error.error.on {
  text-align: center;
  min-height: 16px;
  margin-top: 0px;
  margin-bottom: 2px;
}

.stripe-split-form li {
  margin-bottom: 0;
}
.stripe-split-form > li {
  margin-bottom: 20px;
}
.stripe-split-form .display-flex li {
  width: 100%;
}
.stripe-split-form .display-flex li:first-child {
  margin-right: 24px;
}
.stripe-split-form input.input:not([type=radio]):not([type=checkbox]) {
  padding: 20px 42px 20px 20px;
}
.stripe-split-form input.input:not([type=radio]):not([type=checkbox]) + label {
  margin-top: 1px;
}
.stripe-split-form input.input:not([type=radio]):not([type=checkbox]).error {
  padding-bottom: 12px;
}
.stripe-split-form input.input:not([type=radio]):not([type=checkbox]).error:hover {
  outline: transparent;
}
.stripe-split-form input.input:not([type=radio]):not([type=checkbox]).error:focus {
  padding-bottom: 20px;
}
.stripe-split-form .input, .stripe-split-form .StripeElement {
  padding: 20px 42px 20px 20px;
}
.stripe-split-form .input.error:focus, .stripe-split-form .StripeElement.error:focus {
  border-left: 0 !important;
}
.stripe-split-form .input + label, .stripe-split-form .StripeElement + label {
  position: absolute;
  left: 0;
  font-size: 12px;
  color: #BABABA;
  transition: opacity 0.1s linear;
  opacity: 0;
  margin-top: 3px;
}
.stripe-split-form .input + label.error.show, .stripe-split-form .StripeElement + label.error.show {
  color: #F44E4E !important;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  opacity: 1;
}
.stripe-split-form .input + label.show, .stripe-split-form .StripeElement + label.show {
  opacity: 0;
}
.stripe-split-form.form-disabled .input, .stripe-split-form.form-disabled .StripeElement {
  background: #FFFFFF;
  outline: solid 1px #BABABA;
  color: #333333;
}
.stripe-split-form .StripeElement {
  width: 100%;
  transition: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) border, 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) outline;
  border-left: 0px solid transparent;
  border-bottom: 0px solid transparent;
  display: block;
  margin: 0;
  max-width: 500px;
  background: #F2F2F2;
  color: #6D6D6D;
}
.stripe-split-form .StripeElement::placeholder {
  color: #6D6D6D;
}
.stripe-split-form .StripeElement--invalid {
  border-bottom: 8px solid #F44E4E;
  background-color: #FDEBEC;
  border-left: 0px;
  animation: shake 0.45s;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  transition: none;
}
.stripe-split-form .StripeElement--invalid:not(.StripeElement--focus) {
  padding: 20px 42px 12px 20px;
}
.stripe-split-form .StripeElement--invalid.StripeElement--focus {
  border-bottom: none;
}
.stripe-split-form .StripeElement--focus {
  color: #000000;
  outline: none;
}
.stripe-split-form .StripeElement--focus:not(.StripeElement--invalid) {
  border-left: 8px solid #3EA9F5;
}
.stripe-split-form .StripeElement--focus + label.show, .stripe-split-form .StripeElement:hover + label.show {
  opacity: 1;
}
.stripe-split-form .StripeElement:hover {
  outline-offset: -1px;
  outline-color: #98CEF4 !important;
}

.tippy-templates {
  display: none;
}

body .tippy-popper .tippy-tooltip.light-theme {
  background: white;
  border: 3px solid #F2F2F2;
  box-shadow: none;
  padding: 0px;
  color: #000000;
}

body .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow {
  border-right-color: #F2F2F2;
}

body .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme .tippy-arrow {
  border-top-color: #F2F2F2;
}

.plugin-form .StripeElement {
  max-width: none;
}

.noun-pro-info-section {
  padding: 0px;
}
.tippy-tooltip .noun-pro-info-section p, .noun-pro-info-section p {
  background: #F2F2F2;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #000000;
  margin-top: 0;
  margin: 0;
  padding: 8px 9px;
  margin-bottom: 8px;
}
.tippy-tooltip .noun-pro-info-section p a, .tippy-tooltip .noun-pro-info-section p a:visited, .tippy-tooltip .noun-pro-info-section p a:hover, .noun-pro-info-section p a, .noun-pro-info-section p a:visited, .noun-pro-info-section p a:hover {
  color: #3EA9F5;
  text-decoration: underline;
}

.icon-list .row-container .nounproject-icon-hero .iconPreview {
  animation-name: fadeIn;
  animation-duration: 0.5s;
}

.download-flow-modal-container {
  animation-name: fadeIn;
  animation-duration: 0.2s;
}

body.modal-activated.modal-download-flow .navigation-header {
  z-index: 205;
}
body.modal-activated.modal-download-flow .side-menu {
  z-index: 204;
}
body.modal-activated.modal-download-flow.modal-icon-share .icon-share-modal-container {
  z-index: 205;
}
body.modal-activated .nounproject-icon-hero .view-more .related-icon {
  animation-duration: 0s;
}

@media (max-width: 768px) {
  .nounproject-icon-hero .license-icon.license-creative-commons:before {
    margin-right: 45px;
    margin-left: 30px;
  }
  .nounproject-icon-hero .view-container {
    flex-direction: column;
    height: auto;
  }
  .nounproject-icon-hero .view-container .plugin-select-color {
    position: static;
    max-width: 451px;
  }
  .nounproject-icon-hero .view-container .plugin-select-color .user-colors {
    height: auto;
  }
  .nounproject-icon-hero .view-container .plugin-select-color .color {
    width: 37px;
    height: 37px;
  }
  .nounproject-icon-hero .view-container .plugin-select-color .color.ui_plus:before {
    top: 5px;
  }
  .download-upsell-modal .columns.three {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .nounproject-icon-hero {
    padding: 50px 8px 20px;
  }
  .nounproject-icon-hero .download-flow {
    margin: 18px 28px 10px;
    width: 295px;
    margin: 0;
  }
  .nounproject-icon-hero .download-flow.phase-initial {
    max-width: 366px;
  }
  .nounproject-icon-hero .download-flow.phase-initial .relative-wrapper {
    position: relative;
  }
  .nounproject-icon-hero .download-flow .button, .nounproject-icon-hero .download-flow .kit-wrapper {
    width: 100%;
  }
  .nounproject-icon-hero .download-flow .iconPreview.with-attribution {
    background-position: center 78%;
  }
  .nounproject-icon-hero .download-flow .iconPreview.no-attribution {
    background-size: 69%;
  }
  .nounproject-icon-hero .download-flow .the-icon-container.edited .iconPreview {
    background-size: contain;
  }
  .nounproject-icon-hero .download-flow .download-actions {
    margin-right: 60px;
  }
  .nounproject-icon-hero .download-flow .download-actions button, .nounproject-icon-hero .download-flow .download-actions .kit-share-container {
    margin: 0;
  }
  .nounproject-icon-hero .download-flow .download-actions .kit-wrapper > button, .nounproject-icon-hero .download-flow .download-actions .kit-wrapper > .button, .nounproject-icon-hero .download-flow .download-actions .icon-save-for-later {
    margin-top: 16px;
  }
  .nounproject-icon-hero .download-flow .download-actions .kit-wrapper .kit-container button {
    margin: 0;
    width: 100%;
    max-width: 100%;
  }
  .nounproject-icon-hero .download-flow .download-flow-license-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nounproject-icon-hero .download-flow .download-flow-license-switch .nounproject-tool-tip {
    visibility: visible;
    position: static;
  }
  .nounproject-icon-hero .download-flow .hero-page-width-container {
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: auto;
    position: relative;
    max-width: 922px;
  }
  .nounproject-icon-hero .download-flow .download-actions {
    position: relative;
    display: inline-block;
    margin-top: 27px;
    margin-bottom: 9px;
    width: 100%;
  }
  .nounproject-icon-hero .download-flow .related-searches {
    margin-top: 52px;
    margin-bottom: 16px;
  }
  .nounproject-icon-hero .download-flow .pill-options {
    display: inline-block;
  }
  .nounproject-icon-hero .download-flow .pill-options > li {
    padding: 8px 16px;
  }
}
@media (min-width: 1000px) {
  .nounproject-icon-hero .download-icon-actions {
    top: 0;
    right: -25px;
  }
  .nounproject-icon-hero .download-icon-actions a:before, .nounproject-icon-hero .download-icon-actions > div:before {
    font-size: 1.3em;
  }
}
@media (max-width: 767px) {
  .nounproject-icon-hero .hero-page-width-container {
    flex-direction: column-reverse;
  }
  .nounproject-icon-hero .download-flow .phase-container, .nounproject-icon-hero .hero-color-picker, .nounproject-icon-hero .nounproject-icon-editor-controls {
    display: none;
  }
}
/* Preview / Editor Alignment */
.view-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 470px;
  max-width: 470px;
  position: relative;
}

/* Preview Container */
.the-icon-container {
  background: #FAFAFA;
  border-radius: 8px;
  padding: 25px;
  position: relative;
  transition: all 0.3s ease-out;
  max-width: 430px;
  max-height: 430px;
  min-height: 430px;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.the-icon-container.edited {
  padding: 0;
}
.the-icon-container:after {
  border-radius: 8px;
}

.the-icon-container:after, .editor-color-swatch:after {
  pointer-events: none;
  background-size: 10px;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease-out;
  width: 100%;
  z-index: 0;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADhCAYAAADRcblEAAAKv2lDQ1BJQ0MgUHJvZmlsZQAASImVlwdUU2kWx7/3XjoJLRCKlNCb9A7SawAB6SAqIYEQSggpqNgQGRzBsSAigsqIjoAoOBZABhURxcIgoGB3QAYFdRws2FCZByxhZ/fs7tn/Ofe8X26+d9+9L993zj8AkEeZfH46LAtABk8kCPPzpMfExtHxQwACCCCiYcNkCfkeoaFBANXc9e96P4CuRnXLdLrWv3//XyXHThKyAIBCUU5kC1kZKJ9Go5vFF4gAQPLRvM5KEX+aa1BWEKANotw6zZxZ7pnmxFn+fWZNRJgXyh8BIJCZTAEHADIGzdOzWRy0DlkXZQsem8tDOQJlV1YKk41yCcoLMzIyp7kNZcPEf6rD+VvNRElNJpMj4dlZZkTw5gr56czV/+fr+N/KSBfPPUMbDXKKwD8Mveqj76wmLTNQwrzE4JA55rJn1s9witg/co5ZQq+4OWYzvQPnWJwW6THHTMH8vVwRI2KOBZlhkvq89OAgSf0khoSThD7hc5zM9WXMcU5KRPQcZ3OjgudYmBYeOL/GS5IXiMMkPScLfCUzZgjne2Mx558lSonwn+8hRtIPO8nbR5LnRUrW80Wekpr89ND5/tP9JHlhdrjkXhG6weY4lRkQOl8nVPJ+QARIAWLAA2yQBAQgEWSCdCACdOANuEAI+OgnJkC3hyhplWh6CK9M/moBl5MionugpyiJzuCxzBbSrSws7QGYPpOzP/lb2sxZg2jX53NZbQA4FqJJznyOqQPA2acAUN/P53TeoNtlBwDnelhiQfZsbnrbAiwgARmgAFSABtABhsAUWAE74AzcgQ8IACHoJLFgOWCh82Sgk6wEa8FGUACKwA6wG5SDSnAI1IDj4CRoAq3gIrgCboAe0A8egEEwAl6AcfAeTEIQhIcoEBVSgTQhPcgEsoIcIFfIBwqCwqBYKAHiQDxIDK2FNkFFUDFUDh2EaqGfobPQRega1Avdg4agMegN9BlGYDKsAKvD+rA57AB7wIFwBLwM5sBZcA6cD2+Dy+Aq+BjcCF+Eb8D98CD8Ap5AACKF0BAtxBRxQLyQECQOSUYEyHqkEClFqpB6pAXpRG4hg8hL5BMGh6Fi6BhTjDPGHxOJYWGyMOsxWzHlmBpMI6YDcwszhBnHfMNSsGpYE6wTloGNwXKwK7EF2FLsEewZ7GVsP3YE+x6Hw9FwBjh7nD8uFpeKW4PbituPa8C14Xpxw7gJPB6vgjfBu+BD8Ey8CF+A34s/hr+A78OP4D8SpAiaBCuCLyGOwCPkEUoJRwnnCX2EZ4RJoixRj+hEDCGyiauJ24mHiS3Em8QR4iRJjmRAciFFkFJJG0llpHrSZdJD0lspKSltKUepJVJcqVypMqkTUlelhqQ+keXJxmQvcjxZTN5Gria3ke+R31IoFH2KOyWOIqJso9RSLlEeUz5KU6XNpBnSbOkN0hXSjdJ90q9kiDJ6Mh4yy2VyZEplTsnclHkpS5TVl/WSZcqul62QPSt7R3ZCjipnKRcilyG3Ve6o3DW5UXm8vL68jzxbPl/+kPwl+WEqQtWhelFZ1E3Uw9TL1BEFnIKBAkMhVaFI4bhCt8K4oryijWKU4irFCsVzioM0hKZPY9DSadtpJ2kDtM9K6koeSklKW5TqlfqUPigvUHZXTlIuVG5Q7lf+rEJX8VFJU9mp0qTySBWjaqy6RHWl6gHVy6ovFygscF7AWlC44OSC+2qwmrFamNoatUNqXWoT6hrqfup89b3ql9RfatA03DVSNUo0zmuMaVI1XTW5miWaFzSf0xXpHvR0ehm9gz6upablryXWOqjVrTWpbaAdqZ2n3aD9SIek46CTrFOi064zrqupu1h3rW6d7n09op6DXoreHr1OvQ/6BvrR+pv1m/RHDZQNGAY5BnUGDw0phm6GWYZVhreNcEYORmlG+416jGFjW+MU4wrjmyawiZ0J12S/Se9C7ELHhbyFVQvvmJJNPUyzTetMh8xoZkFmeWZNZq/Mdc3jzHead5p/s7C1SLc4bPHAUt4ywDLPssXyjZWxFcuqwuq2NcXa13qDdbP1axsTmySbAzZ3bam2i20327bbfrWztxPY1duN2evaJ9jvs7/joOAQ6rDV4aoj1tHTcYNjq+MnJzsnkdNJpz+dTZ3TnI86jy4yWJS06PCiYRdtF6bLQZdBV7prguuProNuWm5Mtyq3J+467mz3I+7PPIw8Uj2OebzytPAUeJ7x/ODl5LXOq80b8fbzLvTu9pH3ifQp93nsq+3L8a3zHfez9Vvj1+aP9Q/03+l/h6HOYDFqGeMB9gHrAjoCyYHhgeWBT4KMgwRBLYvhxQGLdy1+GKwXzAtuCgEhjJBdIY9CDUKzQn9ZglsSuqRiydMwy7C1YZ3h1PAV4UfD30d4RmyPeBBpGCmObI+SiYqPqo36EO0dXRw9GGMesy7mRqxqLDe2OQ4fFxV3JG5iqc/S3UtH4m3jC+IHlhksW7Xs2nLV5enLz62QWcFccSoBmxCdcDThCzOEWcWcSGQk7kscZ3mx9rBesN3ZJeyxJJek4qRnyS7JxcmjHBfOLs5YiltKacpLrhe3nPs61T+1MvVDWkhaddpUenR6QwYhIyHjLE+el8bryNTIXJXZyzfhF/AHs5yydmeNCwIFR4SQcJmwWaSAmp8usaH4O/FQtmt2RfbHlVErT62SW8Vb1bXaePWW1c9yfHN+WoNZw1rTvlZr7ca1Q+s81h1cD61PXN++QWdD/oaRXL/cmo2kjWkbf82zyCvOe7cpelNLvnp+bv7wd37f1RVIFwgK7mx23lz5PeZ77vfdW6y37N3yrZBdeL3Ioqi06MtW1tbrP1j+UPbD1Lbkbd3b7bYf2IHbwdsxsNNtZ02xXHFO8fCuxbsaS+glhSXvdq/Yfa3UprRyD2mPeM9gWVBZ817dvTv2filPKe+v8Kxo2Ke2b8u+D/vZ+/sOuB+or1SvLKr8/CP3x7sH/Q42VulXlR7CHco+9PRw1OHOnxx+qj2ieqToyNdqXvVgTVhNR619be1RtaPb6+A6cd3YsfhjPce9jzfXm9YfbKA1FJ0AJ8Qnnv+c8PPAycCT7accTtWf1ju97wz1TGEj1Li6cbwppWmwOba592zA2fYW55Yzv5j9Ut2q1VpxTvHc9vOk8/nnpy7kXJho47e9vMi5ONy+ov3BpZhLtzuWdHRfDrx89YrvlUudHp0Xrrpcbb3mdO3sdYfrTTfsbjR22Xad+dX21zPddt2NN+1vNvc49rT0Luo93+fWd/GW960rtxm3b/QH9/cORA7cvRN/Z/Au++7ovfR7r+9n3598kPsQ+7Dwkeyj0sdqj6t+M/qtYdBu8NyQ91DXk/AnD4ZZwy9+F/7+ZST/KeVp6TPNZ7WjVqOtY75jPc+XPh95wX8x+bLgD7k/9r0yfHX6T/c/u8ZjxkdeC15Pvdn6VuVt9Tubd+0ToROP32e8n/xQ+FHlY80nh0+dn6M/P5tc+QX/peyr0deWb4HfHk5lTE3xmQLmjBVA0ICTkwF4Uw0AJRb1DqivJknPeuYZQbM+f4bAf+JZXz0jOwCq3QGIzAUgCPUoB9DQy5311tOWKcIdwNbWkviHhMnWVrO1yKjzxH6cmnqrDgC+BYCvgqmpyf1TU18Po83eA6Ata9arTwuH/oMpNlDWpHbd/PoU/Kv+AuqoDMiaqlDHAAABnWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4yMjQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MjI1PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CtOC8CcAAAcXSURBVHgB7ddRbhpZGETh29ACoxBNnib73108isiLJQYs6NDJIkqt+iJZylvdOvUfjKcfP96X8/nL8G9bBJZlGZ+fn+Pnz8u43W7berzXjmmaxtvbcczX63VcLr8g2RiB135jv5/Ht2//jMPhsLHXe+4Yy+uD8z7mx+MxPj4+ENkYgb+foG9/5Pv69byx13vu8/kc67eYHRQIIJAjQMAce8kI+A3oBhBIEvAbMElfdj0BAtafAABJAgRM0pddT4CA9ScAQJIAAZP0ZdcTIGD9CQCQJEDAJH3Z9QQIWH8CACQJEDBJX3Y9AQLWnwAASQIETNKXXU+AgPUnAECSAAGT9GXXEyBg/QkAkCRAwCR92fUECFh/AgAkCRAwSV92PQEC1p8AAEkCBEzSl11PgID1JwBAkgABk/Rl1xMgYP0JAJAkQMAkfdn1BAhYfwIAJAkQMElfdj0BAtafAABJAgRM0pddT4CA9ScAQJIAAZP0ZdcTIGD9CQCQJEDAJH3Z9QQIWH8CACQJEDBJX3Y9AQLWnwAASQIETNKXXU+AgPUnAECSAAGT9GXXEyBg/QkAkCRAwCR92fUECFh/AgAkCRAwSV92PQEC1p8AAEkCBEzSl11PgID1JwBAkgABk/Rl1xMgYP0JAJAkQMAkfdn1BAhYfwIAJAkQMElfdj0BAtafAABJAgRM0pddT4CA9ScAQJIAAZP0ZdcTIGD9CQCQJEDAJH3Z9QQIWH8CACQJEDBJX3Y9AQLWnwAASQIETNKXXU+AgPUnAECSAAGT9GXXEyBg/QkAkCRAwCR92fUECFh/AgAkCRAwSV92PQEC1p8AAEkCBEzSl11PgID1JwBAkgABk/Rl1xMgYP0JAJAkQMAkfdn1BAhYfwIAJAkQMElfdj0BAtafAABJAgRM0pddT4CA9ScAQJIAAZP0ZdcTIGD9CQCQJEDAJH3Z9QQIWH8CACQJEDBJX3Y9AQLWnwAASQIETNKXXU+AgPUnAECSAAGT9GXXEyBg/QkAkCRAwCR92fUECFh/AgAkCRAwSV92PQEC1p8AAEkCBEzSl11PgID1JwBAkgABk/Rl1xMgYP0JAJAkQMAkfdn1BAhYfwIAJAkQMElfdj0BAtafAABJAgRM0pddT4CA9ScAQJIAAZP0ZdcTIGD9CQCQJEDAJH3Z9QQIWH8CACQJEDBJX3Y9gXmMaex2PNzaJUzTNNafMZbxfD639vz6966bLcsy5nnej/P5Sz2Q7QGYXuPtx+12/zPk9t7f/eJVvvv9c8yn02l8//5vN40Ntv874H28v/83rtf/N9ig+8nrt5fVvXn9z+Fw6KaxwfargOvXmMfj+fokvW+wQfeT1z/7jsfD8Mdf9x1oHyZAwPAA4rsJELB7f+3DBAgYHkB8NwECdu+vfZgAAcMDiO8mQMDu/bUPEyBgeADx3QQI2L2/9mECBAwPIL6bAAG799c+TICA4QHEdxMgYPf+2ocJEDA8gPhuAgTs3l/7MAEChgcQ302AgN37ax8mQMDwAOK7CRCwe3/twwQIGB5AfDcBAnbvr32YAAHDA4jvJkDA7v21DxMgYHgA8d0ECNi9v/ZhAgQMDyC+mwABu/fXPkyAgOEBxHcTIGD3/tqHCRAwPID4bgIE7N5f+zABAoYHEN9NgIDd+2sfJkDA8ADiuwkQsHt/7cMECBgeQHw3AQJ27699mAABwwOI7yZAwO79tQ8TIGB4APHdBAjYvb/2YQIEDA8gvpsAAbv31z5MgIDhAcR3EyBg9/7ahwkQMDyA+G4CBOzeX/swAQKGBxDfTYCA3ftrHyZAwPAA4rsJELB7f+3DBAgYHkB8NwECdu+vfZgAAcMDiO8mQMDu/bUPEyBgeADx3QQI2L2/9mECBAwPIL6bAAG799c+TICA4QHEdxMgYPf+2ocJEDA8gPhuAgTs3l/7MAEChgcQ302AgN37ax8mQMDwAOK7CRCwe3/twwQIGB5AfDcBAnbvr32YAAHDA4jvJkDA7v21DxMgYHgA8d0ECNi9v/ZhAgQMDyC+mwABu/fXPkyAgOEBxHcTIGD3/tqHCRAwPID4bgIE7N5f+zABAoYHEN9NgIDd+2sfJkDA8ADiuwkQsHt/7cMECBgeQHw3AQJ27699mAABwwOI7yZAwO79tQ8TIGB4APHdBAjYvb/2YQIEDA8gvpsAAbv31z5MgIDhAcR3EyBg9/7ahwkQMDyA+G4CBOzeX/swAQKGBxDfTYCA3ftrHyZAwPAA4rsJELB7f+3DBAgYHkB8NwECdu+vfZgAAcMDiO8mQMDu/bUPEyBgeADx3QQI2L2/9mECBAwPIL6bAAG799c+TICA4QHEdxOY1/qPx6ObwgbbL8syns/nmKZp7HY+R7c24brZut18v9/H5fJra+/33heBVcDT6TSOxwMemyMwjf1+N34DXCJneJ7nIBYAAAAASUVORK5CYII=");
}
.the-icon-container.updated:after, .the-icon-container.color-transparent:after, .editor-color-swatch.updated:after, .editor-color-swatch.color-transparent:after {
  opacity: 0.5;
}

.icon-box {
  height: 100%;
  width: 100%;
}

.iconPreview,
.transitionIconPreview {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 80%;
  height: 100%;
  max-height: 430px;
  max-width: 430px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.iconPreview {
  z-index: 2;
}

.iconPreview.insertIconNow {
  animation-duration: 1s;
  animation-name: insertIcon;
  animation-timing-function: linear;
}

.transitionIconPreview {
  animation-direction: reverse;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: fadeIn;
  animation-timing-function: linear;
  z-index: 3;
}

/* Color Picker */
.plugin-select-box {
  width: 100%;
  display: flex;
  margin-top: 8px;
  justify-content: flex-end;
  align-items: baseline;
  cursor: pointer;
}

.plugin-select-box-options {
  background: #F2F2F2;
  border-radius: 1px;
  border: solid 1px #D8D8D8;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 99;
}

.plugin-select-box-options li {
  cursor: pointer;
  padding: 4px 8px;
}

.plugin-select-box-options li.no-hover-style {
  border-top: solid 1px #D8D8D8;
}

.plugin-select-box-options li:not(.no-hover-style):hover,
.plugin-select-box-options li.selected {
  background: #6D6D6D;
  color: #FFFFFF;
}

.plugin-select-box-options li input {
  padding: 4px;
  margin: 4px 0;
  max-width: 100%;
}

.hero-color-picker {
  align-items: center;
  align-self: flex-end;
  display: flex;
  justify-content: centered;
  position: relative;
  z-index: 10;
}
.hero-color-picker .default-color:nth-of-type(2) {
  margin-right: 8px;
}
.hero-color-picker .color-swatch-tip {
  bottom: 34px;
  border: solid 1px #000000;
  opacity: 0;
  padding: 8px;
  text-align: center;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  position: absolute;
  background: #1F1F1F;
  transition: all 0.25s 0.3s cubic-bezier(0.02, 1.365, 0.39, 0.97);
  left: 12px;
  transform: translate(-50%, 0) scale(0.1);
}
.hero-color-picker .color-swatch-tip:after {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #1F1F1F;
  bottom: -20px;
}
.hero-color-picker .color-swatch-tip:before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #000000;
  bottom: -21px;
}
.hero-color-picker .color {
  background: #F2F2F2;
  border: solid 1px transparent;
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  height: 24px;
  margin: 0;
  padding: 0;
  position: relative;
  width: 24px;
}
.hero-color-picker .color.selected:after {
  background: #1F1F1F;
  bottom: -5px;
  content: "";
  display: block;
  height: 2px;
  left: -1px;
  position: absolute;
  width: 24px;
}
.hero-color-picker .color.light-color {
  border-color: #BABABA;
}
.hero-color-picker .color.ui_plus {
  font-size: 10px;
  color: #FFFFFF;
  padding: 4px;
  text-align: center;
}
.hero-color-picker .color:hover .color-swatch-tip {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

#plugin-body .color.ui_plus .color-swatch-tip {
  color: #FFFFFF;
  transform: translate(-100%, 0) scale(0.1);
  left: 28px;
}
#plugin-body .color.ui_plus .color-swatch-tip:after {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #1F1F1F;
  left: auto;
  right: 5px;
  bottom: -20px;
}
#plugin-body .color.ui_plus .color-swatch-tip:before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid transparent;
  width: 10px;
  height: 10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #000000;
  left: auto;
  right: 5px;
  bottom: -22px;
}

#plugin-body .color.ui_plus:hover .color-swatch-tip {
  transform: translate(-100%, 0) scale(1);
}

.custom-color-picker-container {
  height: 156px;
  position: absolute;
  top: -156px;
  visibility: hidden;
  width: 168px;
}
.custom-color-picker-container .color-row {
  display: flex;
}

.color:hover .custom-color-picker-container {
  visibility: visible;
}

.user-colors {
  height: 24px;
  display: flex;
}

.user-colors .selectable:before {
  border-style: solid;
  border-width: 12px;
  content: "";
  height: 0;
  position: absolute;
  top: -12px;
  visibility: hidden;
  width: 0;
  z-index: 1;
}

.user-colors .selectable:hover:before {
  visibility: visible;
}

.selected-hex {
  display: inline-block;
  flex-shrink: 0;
  height: 46px;
  width: 46px;
}

.hex-container {
  border: solid 1px #000000;
  display: flex;
}

.hex {
  background: #F2F2F2;
  border: none;
  box-sizing: border-box;
  font-size: 16px;
  height: 46px;
  outline: none;
  padding: 0 12px;
  text-transform: uppercase;
  width: 120px;
}

.chosen-color.seletable {
  margin-left: 12px;
}

.default-color-picker-container {
  position: absolute;
  right: 12px;
  top: 12px;
}

/* Upsell */
.color-upsell {
  align-items: center;
  background-color: #1F1F1F;
  bottom: 0;
  border-radius: 0 0 8px 8px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  opacity: 0;
  padding: 20px 50px;
  position: absolute;
  text-align: center;
  transform: translate(0, 64px);
  transition: all 0.3s ease-out;
  visibility: hidden;
  width: 100%;
  z-index: 10;
}
.color-upsell a {
  border-bottom: solid 1px;
  color: #3EA9F5;
  cursor: pointer;
  display: inline-block;
  margin-top: 8px;
}
.color-upsell a :hover {
  color: #C6E0F3;
}
.color-upsell.visible {
  opacity: 1;
  transform: translate(0, 0);
  visibility: visible;
}

#plugin-body .the-icon-container {
  max-width: 250px;
  max-height: 250px;
  min-height: 250px;
}

@media (max-width: 768px) {
  .the-icon-container {
    padding: 60px 0 0;
    margin-bottom: 8px;
  }
  .hero-color-picker {
    align-self: flex-start;
  }
  #color-picker {
    display: none;
  }
  .view-container {
    margin: auto;
    max-width: 470px;
  }
  #icon {
    height: 430px;
    max-width: 430px;
    width: 100%;
  }
}
/**
 * * Hover tip - container element for tooltip that shows on hover
 * *
 * * @group modules
 * * @example html
 * * <th class="hover-tip">Title
 * *     <div class="tooltip tooltip-top tooltip-align-left">
 * *         <p>Here’s some important information about some thing.</p>
 * *     </div>
 * * </th>
 * * @todo Incorporate icon hover tooltip as a submodule
 * */
.hover-tip {
  color: inherit;
  position: relative;
}
.hover-tip:hover .tooltip {
  opacity: 1;
  transform: scale(1);
}

/**
 * *  Info-button is used in form fields to give more information.
 * *  Contains .tooltip-info-button
 * *  @group modules
 * *  @example html
 * *  <th class="hover-tip">Title
 * *      <div class="tooltip tooltip-top tooltip-info-button">
 * *          <p>Here’s some important information about some thing.</p>
 * *      </div>
 * *  </th>
 * */
.hover-tip-info-btn {
  position: absolute;
  right: 15px;
  top: 19px;
  font-size: 14px;
  color: #BABABA;
  padding: 5px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  cursor: help;
  transition: all 0.3s ease;
}
.hover-tip-info-btn:hover {
  color: #000000;
}

/**
 * *  Tooltip is what displays when user hovers on hover-tip
 * *  @group modules
 * *  @example html
 * *  <th class="hover-tip">Title
 * *      <div class="tooltip tooltip-top tooltip-align-left">
 * *          <p>Here’s some important information about some thing.</p>
 * *      </div>
 * *  </th>
 * */
.tooltip {
  opacity: 0;
  transition: all 0.3s ease;
  transform: scale(0.01);
  background: #000000;
  color: #FFFFFF;
  font-size: 14px;
  padding: 20px 20px 24px 20px;
  position: absolute;
  text-align: left;
  width: 300px;
  z-index: 1000;
}
.tooltip h3 {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
  line-height: 28px;
  padding-bottom: 6px;
}
.tooltip p {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  margin: 0;
}

.tooltip-light {
  color: #333333;
  background: #F2F2F2;
}
.tooltip-light:after {
  border-top-color: #F2F2F2 !important;
}

.tooltip-top {
  bottom: calc(100% + 20px);
  transform-origin: 50% 120% 0;
}
.tooltip-top:after {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  bottom: -40px;
  left: 50%;
  margin-left: -20px;
  border-top-color: #000000;
}

.tooltip-top.tooltip-align-left {
  transform-origin: 0 120% 0;
  left: -10px;
}
.tooltip-top.tooltip-align-left:after {
  left: 30px;
}

.tooltip-top.tooltip-align-right {
  transform-origin: 100% 120% 0;
  right: 0;
}
.tooltip-top.tooltip-align-right:after {
  left: calc(100% - 30px);
}

.tooltip-top.tooltip-info-btn {
  transform-origin: 50% 110% 0;
  color: #FFFFFF;
  left: -136px;
  padding: 30px;
}

.tippy-popper .tippy-tooltip {
  text-align: left;
  font-size: 13px;
  line-height: 14px;
  padding: 16px;
}
.tippy-popper .tippy-tooltip p {
  margin: 0 0 8px 0;
}
.tippy-popper .tippy-tooltip a, .tippy-popper .tippy-tooltip a:visited {
  color: #FFFFFF;
}

/**
 * * Generates a list of icons, including tooltips, etc
 * * @group modules
 * * @todo break up into smaller modules, merge tooltip into tooltip module
 * */
.list-of-icons li.icon:nth-of-type(12n+1) {
  margin-left: 0;
}

li.icon {
  float: left;
  margin: 0 0 0 2.1276595745%;
  width: 6.3829787%;
  position: relative;
  text-align: center;
  margin-bottom: 2.75em;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-iteration-count: 1;
}
li.icon:first-child {
  margin-left: 0;
}
li.icon.preview_url_42 {
  position: relative;
  height: 42px;
  margin-bottom: 36px;
  width: 6.3829787%;
}
li.icon.preview_url_42 .tip-container {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  position: absolute;
  left: 0px;
  padding: 0 20px;
}
li.icon.preview_url_42 .tip-container::after {
  content: " ";
  position: absolute;
  display: block;
  background: transparent;
  width: 100%;
  height: 35px;
  top: -35px;
  left: 0px;
}
li.icon.preview_url_42 .tip {
  box-shadow: 0 0 10px #ECE9E9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  width: 220px;
  min-height: 50px;
  left: 50%;
  margin: 30px 0 0 -110px;
  top: 100%;
  padding: 35px;
  background: #FFFFFF;
  visibility: hidden;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #000000;
  opacity: 0;
  transform: scale(0);
  z-index: 50;
  border: solid 2px #F2F2F2;
  transform-origin: 50% 0;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
li.icon.preview_url_42 .tip:after {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #FFFFFF;
  top: -40px;
}
li.icon.preview_url_42 .tip:before {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #F2F2F2;
  top: -42px;
}
li.icon.preview_url_42 .tip a {
  font-size: 14px;
  display: inline-block;
  color: #BABABA;
}
li.icon.preview_url_42 .tip a:hover {
  color: #000000;
}
li.icon.preview_url_42 .tip .term {
  display: block;
}
li.icon.preview_url_42 .tip .term a {
  color: #6D6D6D;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  margin-bottom: 0.25em;
  font-size: 20px;
}
li.icon.preview_url_42 .tip .term a:hover {
  color: #000000;
}
li.icon.preview_url_42 .tip .designer {
  display: block;
}
li.icon.preview_url_42 .tip .designer a {
  font-size: 1em;
  margin-bottom: 1em;
  color: #BABABA;
}
li.icon.preview_url_42 .tip .designer a:hover {
  color: #333333;
}
li.icon.preview_url_42 .tip li a {
  color: #BABABA;
}
li.icon.preview_url_42 .tip li a:before {
  margin: 0 0.5em;
  font-size: 1em;
}
li.icon.preview_url_42 .tip li a:hover {
  color: #000000;
}
li.icon.preview_url_42.active .tip, li.icon.preview_url_42:hover .tip {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
li.icon.preview_url_42 .tip {
  min-height: 145px;
}
li.icon.preview_url_42 .tip {
  margin-top: 30px;
}
li.icon.preview_url_42 .tip:after {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #FFFFFF;
  top: -40px;
}
li.icon.preview_url_42 .tip:before {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #F2F2F2;
  top: -42px;
}
li.icon.preview_url_42 .kit-container {
  top: 72px;
}
li.icon.preview_url_42 .kit-container:after {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #FFFFFF;
  top: -40px;
}
li.icon.preview_url_42 .kit-container:before {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #F2F2F2;
  top: -42px;
}
li.icon.preview_url_42 .kit-container .loading {
  margin: 2em auto;
}
li.icon.preview_url_42 .kit-container .get-more-kits,
li.icon.preview_url_42 .kit-container .kit-name {
  max-width: 368px;
}
li.icon.preview_url_42 .kit-container .get-more-kits a:before,
li.icon.preview_url_42 .kit-container .kit-name a:before {
  top: 1.5em;
  right: 1.5em;
}
li.icon.preview_url_42 .kit-container ul {
  max-height: 224px;
}
li.icon.preview_url_42 img {
  max-height: 42px;
  margin-left: -21px;
  margin-top: -21px;
  width: 42px;
  height: 42px;
}
li.icon.preview_url_42 .kit-container {
  width: 370px;
  transform-origin: 50% -20% 0;
}
li.icon.preview_url_42 .kit-container .get-more-kits,
li.icon.preview_url_42 .kit-container .kit-name {
  font-size: 1.5em;
  max-width: 370px;
}
li.icon.preview_url_42 .kit-container ul {
  transition: height 0.3s ease;
}
li.icon.preview_url_42:nth-of-type(12n+1) {
  margin-left: 0;
}
li.icon.preview_url_42:nth-of-type(12n+1) .tip {
  left: 0;
  margin-left: 0;
  transform-origin: 10% -20% 0;
}
li.icon.preview_url_42:nth-of-type(12n+1) .tip:before, li.icon.preview_url_42:nth-of-type(12n+1) .tip:after {
  margin: 0;
  left: 5px;
  right: auto;
}
li.icon.preview_url_42:nth-of-type(12n+1) .kit-container.visible {
  left: 0;
  transform: translateX(0) scale(1);
  transform-origin: 10% -20% 0;
}
li.icon.preview_url_42:nth-of-type(12n+1) .kit-container.visible:before, li.icon.preview_url_42:nth-of-type(12n+1) .kit-container.visible:after {
  margin: 0;
  left: 5px;
  right: auto;
}
li.icon.preview_url_42:nth-of-type(12n+2) .kit-container.visible {
  left: -78px;
  transform: translateX(0) scale(1);
}
li.icon.preview_url_42:nth-of-type(12n+2) .kit-container.visible:before, li.icon.preview_url_42:nth-of-type(12n+2) .kit-container.visible:after {
  left: 50%;
  left: 104px;
}
li.icon.preview_url_42:nth-of-type(12n-1) .kit-container.visible {
  left: inherit;
  right: -78px;
  transform: translateX(0) scale(1);
}
li.icon.preview_url_42:nth-of-type(12n-1) .kit-container.visible:before, li.icon.preview_url_42:nth-of-type(12n-1) .kit-container.visible:after {
  right: 84px;
  left: auto;
}
li.icon.preview_url_42:nth-of-type(12n) .tip {
  left: auto;
  right: 0;
  transform-origin: 90% -20% 0;
}
li.icon.preview_url_42:nth-of-type(12n) .tip:before, li.icon.preview_url_42:nth-of-type(12n) .tip:after {
  margin: 0;
  left: auto;
  right: 5px;
}
li.icon.preview_url_42:nth-of-type(12n) .kit-container.visible {
  left: auto;
  right: 0;
  transform: translateX(0) scale(1);
  transform-origin: 90% -20% 0;
}
li.icon.preview_url_42:nth-of-type(12n) .kit-container.visible:before, li.icon.preview_url_42:nth-of-type(12n) .kit-container.visible:after {
  margin: 0;
  left: auto;
  right: 5px;
}
li.icon.preview_url_84 {
  position: relative;
  height: 84px;
  margin-bottom: 78px;
  width: 14.8936169745%;
}
li.icon.preview_url_84 .tip-container {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  position: absolute;
  left: 0px;
  padding: 0 20px;
}
li.icon.preview_url_84 .tip-container::after {
  content: " ";
  position: absolute;
  display: block;
  background: transparent;
  width: 100%;
  height: 35px;
  top: -35px;
  left: 0px;
}
li.icon.preview_url_84 .tip {
  box-shadow: 0 0 10px #ECE9E9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  width: 292px;
  min-height: 50px;
  left: 50%;
  margin: 30px 0 0 -146px;
  top: 100%;
  padding: 35px;
  background: #FFFFFF;
  visibility: hidden;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #000000;
  opacity: 0;
  transform: scale(0);
  z-index: 50;
  border: solid 2px #F2F2F2;
  transform-origin: 50% 0;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
li.icon.preview_url_84 .tip:after {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #FFFFFF;
  top: -40px;
}
li.icon.preview_url_84 .tip:before {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #F2F2F2;
  top: -42px;
}
li.icon.preview_url_84 .tip a {
  font-size: 14px;
  display: inline-block;
  color: #BABABA;
}
li.icon.preview_url_84 .tip a:hover {
  color: #000000;
}
li.icon.preview_url_84 .tip .term {
  display: block;
}
li.icon.preview_url_84 .tip .term a {
  color: #6D6D6D;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  margin-bottom: 0.25em;
  font-size: 20px;
}
li.icon.preview_url_84 .tip .term a:hover {
  color: #000000;
}
li.icon.preview_url_84 .tip .designer {
  display: block;
}
li.icon.preview_url_84 .tip .designer a {
  font-size: 1em;
  margin-bottom: 1em;
  color: #BABABA;
}
li.icon.preview_url_84 .tip .designer a:hover {
  color: #333333;
}
li.icon.preview_url_84 .tip li a {
  color: #BABABA;
}
li.icon.preview_url_84 .tip li a:before {
  margin: 0 0.5em;
  font-size: 1em;
}
li.icon.preview_url_84 .tip li a:hover {
  color: #000000;
}
li.icon.preview_url_84.active .tip, li.icon.preview_url_84:hover .tip {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
li.icon.preview_url_84 .tip {
  min-height: 145px;
}
li.icon.preview_url_84 .tip {
  margin-top: 47px;
}
li.icon.preview_url_84 .tip:after {
  content: "";
  position: absolute;
  display: block;
  border: 40px solid transparent;
  width: 40px;
  height: 40px;
  left: 50%;
  margin-left: -40px;
  border-bottom-color: #FFFFFF;
  top: -80px;
}
li.icon.preview_url_84 .tip:before {
  content: "";
  position: absolute;
  display: block;
  border: 40px solid transparent;
  width: 40px;
  height: 40px;
  left: 50%;
  margin-left: -40px;
  border-bottom-color: #F2F2F2;
  top: -82px;
}
li.icon.preview_url_84 .tip .tip-container:after {
  top: -88px;
  height: 68px;
}
li.icon.preview_url_84 .kit-container {
  margin-top: 47px;
  top: 84px;
  min-height: 150px;
}
li.icon.preview_url_84 .kit-container:after {
  content: "";
  position: absolute;
  display: block;
  border: 40px solid transparent;
  width: 40px;
  height: 40px;
  left: 50%;
  margin-left: -40px;
  border-bottom-color: #FFFFFF;
  top: -80px;
}
li.icon.preview_url_84 .kit-container:before {
  content: "";
  position: absolute;
  display: block;
  border: 40px solid transparent;
  width: 40px;
  height: 40px;
  left: 50%;
  margin-left: -40px;
  border-bottom-color: #F2F2F2;
  top: -82px;
}
li.icon.preview_url_84 .kit-container .get-more-kits,
li.icon.preview_url_84 .kit-container .kit-name {
  max-width: 446px;
  font-size: 1.5em;
}
li.icon.preview_url_84 .kit-container .get-more-kits a,
li.icon.preview_url_84 .kit-container .kit-name a {
  padding: 1.25em 1.5em 1.25em 0.75em;
}
li.icon.preview_url_84 .kit-container .get-more-kits.keeper a,
li.icon.preview_url_84 .kit-container .kit-name.keeper a {
  padding: 2.75em 1.5em;
}
li.icon.preview_url_84 .kit-container .fat-input:after {
  left: 0;
}
li.icon.preview_url_84 .kit-container .fat-input a.ui_plus {
  height: 100%;
  line-height: 3.5em;
  padding: 1em 2em;
}
li.icon.preview_url_84 .kit-container .fat-input input[type=search] {
  font-size: 1.5em;
  padding: 1.25em 1.5em 1.25em 0.75em;
}
li.icon.preview_url_84 .kit-container .loading {
  margin-top: 4.5em;
}
li.icon.preview_url_84 .kit-container .keeper a:before {
  background: none;
  right: 2em;
  top: 3.75em;
}
li.icon.preview_url_84 .kit-container .kits_list ul {
  max-height: 224px;
}
li.icon.preview_url_84 .kit-container .get-more-kits a {
  padding: 2.25em 1.5em 2.25em 0.75em;
}
li.icon.preview_url_84 .kit-container .get-more-kits a:before {
  top: 3.2em;
}
li.icon.preview_url_84 .kit-container ul {
  max-height: 334px;
  min-height: 36px;
}
li.icon.preview_url_84 img {
  max-height: 84px;
  margin-left: -42px;
  margin-top: -42px;
  width: 84px;
  height: 84px;
}
li.icon.preview_url_84 .kit-container {
  width: 448px;
  transform-origin: 50% -20% 0;
}
li.icon.preview_url_84 .kit-container .get-more-kits,
li.icon.preview_url_84 .kit-container .kit-name {
  font-size: 1.5em;
  max-width: 448px;
}
li.icon.preview_url_84 .kit-container ul {
  transition: height 0.3s ease;
}
li.icon.preview_url_84:nth-of-type(6n+1) {
  margin-left: 0;
}
li.icon.preview_url_84:nth-of-type(6n+1) .tip {
  left: 0;
  margin-left: 0;
  transform-origin: 10% -20% 0;
}
li.icon.preview_url_84:nth-of-type(6n+1) .tip:before, li.icon.preview_url_84:nth-of-type(6n+1) .tip:after {
  margin: 0;
  left: 26px;
  right: auto;
}
li.icon.preview_url_84:nth-of-type(6n+1) .kit-container.visible {
  left: 0;
  transform: translateX(0) scale(1);
  transform-origin: 10% -20% 0;
}
li.icon.preview_url_84:nth-of-type(6n+1) .kit-container.visible:before, li.icon.preview_url_84:nth-of-type(6n+1) .kit-container.visible:after {
  margin: 0;
  left: 26px;
  right: auto;
}
li.icon.preview_url_84:nth-of-type(6n+2) .tip {
  left: 0;
  margin-left: -156px;
}
li.icon.preview_url_84:nth-of-type(6n+2) .tip:before, li.icon.preview_url_84:nth-of-type(6n+2) .tip:after {
  margin: 0;
  left: auto;
  right: 26px;
}
li.icon.preview_url_84:nth-of-type(6n+2) .kit-container.visible {
  left: -156px;
  transform: translateX(0) scale(1);
}
li.icon.preview_url_84:nth-of-type(6n+2) .kit-container.visible:before, li.icon.preview_url_84:nth-of-type(6n+2) .kit-container.visible:after {
  left: 50%;
}
li.icon.preview_url_84:nth-of-type(6n+3) .tip {
  left: 0;
  margin-left: 0;
}
li.icon.preview_url_84:nth-of-type(6n+3) .tip:before, li.icon.preview_url_84:nth-of-type(6n+3) .tip:after {
  margin: 0;
  left: 26px;
  right: auto;
}
li.icon.preview_url_84:nth-of-type(6n+3) .kit-container.visible {
  left: inherit;
  right: -156px;
  transform: translateX(0) scale(1);
}
li.icon.preview_url_84:nth-of-type(6n+3) .kit-container.visible:before, li.icon.preview_url_84:nth-of-type(6n+3) .kit-container.visible:after {
  left: 50%;
}
li.icon.preview_url_84:nth-of-type(6n-2) .tip {
  left: 0;
  margin-left: -156px;
}
li.icon.preview_url_84:nth-of-type(6n-2) .tip:before, li.icon.preview_url_84:nth-of-type(6n-2) .tip:after {
  margin: 0;
  left: auto;
  right: 26px;
}
li.icon.preview_url_84:nth-of-type(6n-2) .kit-container.visible {
  left: inherit;
  right: -154px;
  transform: translateX(0) scale(1);
}
li.icon.preview_url_84:nth-of-type(6n-2) .kit-container.visible:before, li.icon.preview_url_84:nth-of-type(6n-2) .kit-container.visible:after {
  left: 50%;
}
li.icon.preview_url_84:nth-of-type(6n-1) .tip {
  left: auto;
  right: -156px;
}
li.icon.preview_url_84:nth-of-type(6n-1) .tip:before, li.icon.preview_url_84:nth-of-type(6n-1) .tip:after {
  margin: 0;
  left: 26px;
  right: auto;
}
li.icon.preview_url_84:nth-of-type(6n-1) .kit-container.visible {
  left: inherit;
  right: -156px;
  transform: translateX(0) scale(1);
}
li.icon.preview_url_84:nth-of-type(6n) .tip {
  left: auto;
  right: 0;
  transform-origin: 90% -20% 0;
}
li.icon.preview_url_84:nth-of-type(6n) .tip:before, li.icon.preview_url_84:nth-of-type(6n) .tip:after {
  margin: 0;
  left: auto;
  right: 26px;
}
li.icon.preview_url_84:nth-of-type(6n) .kit-container.visible {
  left: auto;
  right: 0;
  transform: translateX(0) scale(1);
  transform-origin: 90% -20% 0;
}
li.icon.preview_url_84:nth-of-type(6n) .kit-container.visible:before, li.icon.preview_url_84:nth-of-type(6n) .kit-container.visible:after {
  margin: 0;
  left: auto;
  right: 26px;
}
li.icon a {
  display: block;
  height: 100%;
}
li.icon img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  width: 42px;
  height: 42px;
}
li.icon.active {
  border: solid 1px rgba(186, 186, 186, 0.5);
  background-color: #BABABA;
  border-radius: 5px;
}
li.icon .inactive {
  opacity: 0.25;
}
li.icon ul {
  text-align: center;
}
li.icon ul ::selection {
  background-color: #FFFFFF;
  color: #000000;
}
li.icon ul ::moz-selection {
  background-color: #FFFFFF;
  color: #000000;
}

.collection .icon.preview_url_42 {
  width: 57px;
}
.collection .icon.preview_url_42:nth-of-type(12n+1) {
  margin-left: 2.12766%;
}
.collection .icon.preview_url_42:nth-of-type(10n+1) {
  margin-left: 0;
}

#pending-uploads.dashboard-user,
#flagged-uploads.dashboard-user,
#icons-uploaded.dashboard-user,
#icons-pending.dashboard-user,
#kit-detail .dashboard-user {
  margin-top: 1em;
}
#pending-uploads.dashboard-user .icon,
#flagged-uploads.dashboard-user .icon,
#icons-uploaded.dashboard-user .icon,
#icons-pending.dashboard-user .icon,
#kit-detail .dashboard-user .icon {
  width: 23.4042552489%;
  position: relative;
  background: #FFFFFF;
  margin-bottom: 2.12766%;
}
#pending-uploads.dashboard-user .icon:nth-child(4n+1),
#flagged-uploads.dashboard-user .icon:nth-child(4n+1),
#icons-uploaded.dashboard-user .icon:nth-child(4n+1),
#icons-pending.dashboard-user .icon:nth-child(4n+1),
#kit-detail .dashboard-user .icon:nth-child(4n+1) {
  margin-left: 0;
}
#pending-uploads.dashboard-user .icon .front > a,
#pending-uploads.dashboard-user .icon > a,
#flagged-uploads.dashboard-user .icon .front > a,
#flagged-uploads.dashboard-user .icon > a,
#icons-uploaded.dashboard-user .icon .front > a,
#icons-uploaded.dashboard-user .icon > a,
#icons-pending.dashboard-user .icon .front > a,
#icons-pending.dashboard-user .icon > a,
#kit-detail .dashboard-user .icon .front > a,
#kit-detail .dashboard-user .icon > a {
  position: relative;
  height: 84px;
  width: 84px;
  margin: 20px auto;
  display: block;
}
#pending-uploads.dashboard-user .icon.deleting,
#flagged-uploads.dashboard-user .icon.deleting,
#icons-uploaded.dashboard-user .icon.deleting,
#icons-pending.dashboard-user .icon.deleting,
#kit-detail .dashboard-user .icon.deleting {
  opacity: 0.5;
}
#pending-uploads.dashboard-user .icon img,
#flagged-uploads.dashboard-user .icon img,
#icons-uploaded.dashboard-user .icon img,
#icons-pending.dashboard-user .icon img,
#kit-detail .dashboard-user .icon img {
  position: relative;
  width: 84px;
  height: 84px;
  max-height: 120px;
  max-width: 120px;
  top: auto;
  left: auto;
  margin: 0;
}
#pending-uploads.dashboard-user .icon button,
#flagged-uploads.dashboard-user .icon button,
#icons-uploaded.dashboard-user .icon button,
#icons-pending.dashboard-user .icon button,
#kit-detail .dashboard-user .icon button {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  outline: none;
  border: none;
  background-color: transparent;
  color: #BABABA;
  transition: background-color 0.3s ease;
  position: relative;
  vertical-align: middle;
  margin: 0 6px 6px 6px;
  font-size: 23px;
  padding: 0;
}
#pending-uploads.dashboard-user .icon button .tip-container,
#flagged-uploads.dashboard-user .icon button .tip-container,
#icons-uploaded.dashboard-user .icon button .tip-container,
#icons-pending.dashboard-user .icon button .tip-container,
#kit-detail .dashboard-user .icon button .tip-container {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  position: absolute;
  left: 0px;
  padding: 0 20px;
}
#pending-uploads.dashboard-user .icon button .tip-container::after,
#flagged-uploads.dashboard-user .icon button .tip-container::after,
#icons-uploaded.dashboard-user .icon button .tip-container::after,
#icons-pending.dashboard-user .icon button .tip-container::after,
#kit-detail .dashboard-user .icon button .tip-container::after {
  content: " ";
  position: absolute;
  display: block;
  background: transparent;
  width: 100%;
  height: 35px;
  top: -35px;
  left: 0px;
}
#pending-uploads.dashboard-user .icon button .tip,
#flagged-uploads.dashboard-user .icon button .tip,
#icons-uploaded.dashboard-user .icon button .tip,
#icons-pending.dashboard-user .icon button .tip,
#kit-detail .dashboard-user .icon button .tip {
  box-shadow: 0 0 10px #ECE9E9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  width: 220px;
  min-height: 50px;
  left: 50%;
  margin: 30px 0 0 -110px;
  top: 100%;
  padding: 12px;
  background: #FFFFFF;
  visibility: hidden;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #000000;
  opacity: 0;
  transform: scale(0);
  z-index: 50;
  border: solid 2px #F2F2F2;
  transform-origin: 50% 0;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
#pending-uploads.dashboard-user .icon button .tip:after,
#flagged-uploads.dashboard-user .icon button .tip:after,
#icons-uploaded.dashboard-user .icon button .tip:after,
#icons-pending.dashboard-user .icon button .tip:after,
#kit-detail .dashboard-user .icon button .tip:after {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #FFFFFF;
  top: -40px;
}
#pending-uploads.dashboard-user .icon button .tip:before,
#flagged-uploads.dashboard-user .icon button .tip:before,
#icons-uploaded.dashboard-user .icon button .tip:before,
#icons-pending.dashboard-user .icon button .tip:before,
#kit-detail .dashboard-user .icon button .tip:before {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #F2F2F2;
  top: -42px;
}
#pending-uploads.dashboard-user .icon button .tip a,
#flagged-uploads.dashboard-user .icon button .tip a,
#icons-uploaded.dashboard-user .icon button .tip a,
#icons-pending.dashboard-user .icon button .tip a,
#kit-detail .dashboard-user .icon button .tip a {
  font-size: 14px;
  display: inline-block;
  color: #BABABA;
}
#pending-uploads.dashboard-user .icon button .tip a:hover,
#flagged-uploads.dashboard-user .icon button .tip a:hover,
#icons-uploaded.dashboard-user .icon button .tip a:hover,
#icons-pending.dashboard-user .icon button .tip a:hover,
#kit-detail .dashboard-user .icon button .tip a:hover {
  color: #000000;
}
#pending-uploads.dashboard-user .icon button .tip .term,
#flagged-uploads.dashboard-user .icon button .tip .term,
#icons-uploaded.dashboard-user .icon button .tip .term,
#icons-pending.dashboard-user .icon button .tip .term,
#kit-detail .dashboard-user .icon button .tip .term {
  display: block;
}
#pending-uploads.dashboard-user .icon button .tip .term a,
#flagged-uploads.dashboard-user .icon button .tip .term a,
#icons-uploaded.dashboard-user .icon button .tip .term a,
#icons-pending.dashboard-user .icon button .tip .term a,
#kit-detail .dashboard-user .icon button .tip .term a {
  color: #6D6D6D;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  margin-bottom: 0.25em;
  font-size: 20px;
}
#pending-uploads.dashboard-user .icon button .tip .term a:hover,
#flagged-uploads.dashboard-user .icon button .tip .term a:hover,
#icons-uploaded.dashboard-user .icon button .tip .term a:hover,
#icons-pending.dashboard-user .icon button .tip .term a:hover,
#kit-detail .dashboard-user .icon button .tip .term a:hover {
  color: #000000;
}
#pending-uploads.dashboard-user .icon button .tip .designer,
#flagged-uploads.dashboard-user .icon button .tip .designer,
#icons-uploaded.dashboard-user .icon button .tip .designer,
#icons-pending.dashboard-user .icon button .tip .designer,
#kit-detail .dashboard-user .icon button .tip .designer {
  display: block;
}
#pending-uploads.dashboard-user .icon button .tip .designer a,
#flagged-uploads.dashboard-user .icon button .tip .designer a,
#icons-uploaded.dashboard-user .icon button .tip .designer a,
#icons-pending.dashboard-user .icon button .tip .designer a,
#kit-detail .dashboard-user .icon button .tip .designer a {
  font-size: 1em;
  margin-bottom: 1em;
  color: #BABABA;
}
#pending-uploads.dashboard-user .icon button .tip .designer a:hover,
#flagged-uploads.dashboard-user .icon button .tip .designer a:hover,
#icons-uploaded.dashboard-user .icon button .tip .designer a:hover,
#icons-pending.dashboard-user .icon button .tip .designer a:hover,
#kit-detail .dashboard-user .icon button .tip .designer a:hover {
  color: #333333;
}
#pending-uploads.dashboard-user .icon button .tip li a,
#flagged-uploads.dashboard-user .icon button .tip li a,
#icons-uploaded.dashboard-user .icon button .tip li a,
#icons-pending.dashboard-user .icon button .tip li a,
#kit-detail .dashboard-user .icon button .tip li a {
  color: #BABABA;
}
#pending-uploads.dashboard-user .icon button .tip li a:before,
#flagged-uploads.dashboard-user .icon button .tip li a:before,
#icons-uploaded.dashboard-user .icon button .tip li a:before,
#icons-pending.dashboard-user .icon button .tip li a:before,
#kit-detail .dashboard-user .icon button .tip li a:before {
  margin: 0 0.5em;
  font-size: 1em;
}
#pending-uploads.dashboard-user .icon button .tip li a:hover,
#flagged-uploads.dashboard-user .icon button .tip li a:hover,
#icons-uploaded.dashboard-user .icon button .tip li a:hover,
#icons-pending.dashboard-user .icon button .tip li a:hover,
#kit-detail .dashboard-user .icon button .tip li a:hover {
  color: #000000;
}
#pending-uploads.dashboard-user .icon button.active .tip, #pending-uploads.dashboard-user .icon button:hover .tip,
#flagged-uploads.dashboard-user .icon button.active .tip,
#flagged-uploads.dashboard-user .icon button:hover .tip,
#icons-uploaded.dashboard-user .icon button.active .tip,
#icons-uploaded.dashboard-user .icon button:hover .tip,
#icons-pending.dashboard-user .icon button.active .tip,
#icons-pending.dashboard-user .icon button:hover .tip,
#kit-detail .dashboard-user .icon button.active .tip,
#kit-detail .dashboard-user .icon button:hover .tip {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
#pending-uploads.dashboard-user .icon button:before,
#flagged-uploads.dashboard-user .icon button:before,
#icons-uploaded.dashboard-user .icon button:before,
#icons-pending.dashboard-user .icon button:before,
#kit-detail .dashboard-user .icon button:before {
  font-size: 0.9em;
}
#pending-uploads.dashboard-user .icon .icon-actions,
#flagged-uploads.dashboard-user .icon .icon-actions,
#icons-uploaded.dashboard-user .icon .icon-actions,
#icons-pending.dashboard-user .icon .icon-actions,
#kit-detail .dashboard-user .icon .icon-actions {
  z-index: 2;
  width: 100%;
  bottom: 55px;
  backface-visibility: hidden;
  padding-top: 0.5em;
  padding-left: 0.5em;
  display: flex;
  justify-content: space-between;
}
#pending-uploads.dashboard-user .icon .icon-actions li,
#flagged-uploads.dashboard-user .icon .icon-actions li,
#icons-uploaded.dashboard-user .icon .icon-actions li,
#icons-pending.dashboard-user .icon .icon-actions li,
#kit-detail .dashboard-user .icon .icon-actions li {
  display: inline-block;
}
#pending-uploads.dashboard-user .icon .icon-actions .tooltip,
#flagged-uploads.dashboard-user .icon .icon-actions .tooltip,
#icons-uploaded.dashboard-user .icon .icon-actions .tooltip,
#icons-pending.dashboard-user .icon .icon-actions .tooltip,
#kit-detail .dashboard-user .icon .icon-actions .tooltip {
  width: auto;
}
#pending-uploads.dashboard-user .icon:hover .delete-icon,
#flagged-uploads.dashboard-user .icon:hover .delete-icon,
#icons-uploaded.dashboard-user .icon:hover .delete-icon,
#icons-pending.dashboard-user .icon:hover .delete-icon,
#kit-detail .dashboard-user .icon:hover .delete-icon {
  opacity: 1;
}
#pending-uploads.dashboard-user .icon .icon-info,
#flagged-uploads.dashboard-user .icon .icon-info,
#icons-uploaded.dashboard-user .icon .icon-info,
#icons-pending.dashboard-user .icon .icon-info,
#kit-detail .dashboard-user .icon .icon-info {
  float: right;
  margin-top: 10px;
}
#pending-uploads.dashboard-user .icon .icon-info .ui_approve,
#flagged-uploads.dashboard-user .icon .icon-info .ui_approve,
#icons-uploaded.dashboard-user .icon .icon-info .ui_approve,
#icons-pending.dashboard-user .icon .icon-info .ui_approve,
#kit-detail .dashboard-user .icon .icon-info .ui_approve {
  color: #7AC943;
  font-size: 14px;
}
#pending-uploads.dashboard-user .icon .icon-info .ui_close,
#flagged-uploads.dashboard-user .icon .icon-info .ui_close,
#icons-uploaded.dashboard-user .icon .icon-info .ui_close,
#icons-pending.dashboard-user .icon .icon-info .ui_close,
#kit-detail .dashboard-user .icon .icon-info .ui_close {
  color: #F44E4E;
  font-size: 14px;
}
#pending-uploads.dashboard-user .icon .icon-stats,
#flagged-uploads.dashboard-user .icon .icon-stats,
#icons-uploaded.dashboard-user .icon .icon-stats,
#icons-pending.dashboard-user .icon .icon-stats,
#kit-detail .dashboard-user .icon .icon-stats {
  margin-top: 0.5em;
}
#pending-uploads.dashboard-user .icon .icon-stats li,
#flagged-uploads.dashboard-user .icon .icon-stats li,
#icons-uploaded.dashboard-user .icon .icon-stats li,
#icons-pending.dashboard-user .icon .icon-stats li,
#kit-detail .dashboard-user .icon .icon-stats li {
  display: inline-block;
  margin-right: 0.75em;
  font-size: 0.8em;
  color: #6D6D6D;
}
#pending-uploads.dashboard-user .icon .icon-stats li ::selection,
#flagged-uploads.dashboard-user .icon .icon-stats li ::selection,
#icons-uploaded.dashboard-user .icon .icon-stats li ::selection,
#icons-pending.dashboard-user .icon .icon-stats li ::selection,
#kit-detail .dashboard-user .icon .icon-stats li ::selection {
  background-color: #000000;
  color: #FFFFFF;
}
#pending-uploads.dashboard-user .icon .icon-stats li ::moz-selection,
#flagged-uploads.dashboard-user .icon .icon-stats li ::moz-selection,
#icons-uploaded.dashboard-user .icon .icon-stats li ::moz-selection,
#icons-pending.dashboard-user .icon .icon-stats li ::moz-selection,
#kit-detail .dashboard-user .icon .icon-stats li ::moz-selection {
  background-color: #000000;
  color: #FFFFFF;
}
#pending-uploads.dashboard-user .icon .icon-stats li:last-child,
#flagged-uploads.dashboard-user .icon .icon-stats li:last-child,
#icons-uploaded.dashboard-user .icon .icon-stats li:last-child,
#icons-pending.dashboard-user .icon .icon-stats li:last-child,
#kit-detail .dashboard-user .icon .icon-stats li:last-child {
  margin-right: 0;
}
#pending-uploads.dashboard-user .icon .icon-stats li.ui_down-arrow:before, #pending-uploads.dashboard-user .icon .icon-stats li.ui_dollar-sign:before, #pending-uploads.dashboard-user .icon .icon-stats li.ui_heart:before,
#flagged-uploads.dashboard-user .icon .icon-stats li.ui_down-arrow:before,
#flagged-uploads.dashboard-user .icon .icon-stats li.ui_dollar-sign:before,
#flagged-uploads.dashboard-user .icon .icon-stats li.ui_heart:before,
#icons-uploaded.dashboard-user .icon .icon-stats li.ui_down-arrow:before,
#icons-uploaded.dashboard-user .icon .icon-stats li.ui_dollar-sign:before,
#icons-uploaded.dashboard-user .icon .icon-stats li.ui_heart:before,
#icons-pending.dashboard-user .icon .icon-stats li.ui_down-arrow:before,
#icons-pending.dashboard-user .icon .icon-stats li.ui_dollar-sign:before,
#icons-pending.dashboard-user .icon .icon-stats li.ui_heart:before,
#kit-detail .dashboard-user .icon .icon-stats li.ui_down-arrow:before,
#kit-detail .dashboard-user .icon .icon-stats li.ui_dollar-sign:before,
#kit-detail .dashboard-user .icon .icon-stats li.ui_heart:before {
  font-size: 0.9em;
}
#pending-uploads.dashboard-user .icon .icon-stats li:before,
#flagged-uploads.dashboard-user .icon .icon-stats li:before,
#icons-uploaded.dashboard-user .icon .icon-stats li:before,
#icons-pending.dashboard-user .icon .icon-stats li:before,
#kit-detail .dashboard-user .icon .icon-stats li:before {
  margin-right: 0.25em;
}
#pending-uploads.dashboard-user .pending img,
#flagged-uploads.dashboard-user .pending img,
#icons-uploaded.dashboard-user .pending img,
#icons-pending.dashboard-user .pending img,
#kit-detail .dashboard-user .pending img {
  opacity: 0.2;
}
#pending-uploads.dashboard-user .pending h3,
#flagged-uploads.dashboard-user .pending h3,
#icons-uploaded.dashboard-user .pending h3,
#icons-pending.dashboard-user .pending h3,
#kit-detail .dashboard-user .pending h3 {
  margin-top: 1em;
  color: #BABABA;
}
#pending-uploads.dashboard-user .term,
#flagged-uploads.dashboard-user .term,
#icons-uploaded.dashboard-user .term,
#icons-pending.dashboard-user .term,
#kit-detail .dashboard-user .term {
  padding-top: 1em;
}
#pending-uploads.dashboard-user .term small,
#flagged-uploads.dashboard-user .term small,
#icons-uploaded.dashboard-user .term small,
#icons-pending.dashboard-user .term small,
#kit-detail .dashboard-user .term small {
  bottom: 6px;
  display: block;
  font-size: 10px;
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}
#pending-uploads.dashboard-user .ui_pencil,
#flagged-uploads.dashboard-user .ui_pencil,
#icons-uploaded.dashboard-user .ui_pencil,
#icons-pending.dashboard-user .ui_pencil,
#kit-detail .dashboard-user .ui_pencil {
  font-size: 0.75em;
  display: inline;
  margin-right: -2em;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#pending-uploads.dashboard-user .new-custom-name,
#flagged-uploads.dashboard-user .new-custom-name,
#icons-uploaded.dashboard-user .new-custom-name,
#icons-pending.dashboard-user .new-custom-name,
#kit-detail .dashboard-user .new-custom-name {
  display: none;
}
#pending-uploads.dashboard-user .new-custom-name input,
#flagged-uploads.dashboard-user .new-custom-name input,
#icons-uploaded.dashboard-user .new-custom-name input,
#icons-pending.dashboard-user .new-custom-name input,
#kit-detail .dashboard-user .new-custom-name input {
  padding: 20px 60px 20px 10px;
  width: 100%;
  border: solid 1px #000000;
}
#pending-uploads.dashboard-user .new-custom-name input:focus,
#flagged-uploads.dashboard-user .new-custom-name input:focus,
#icons-uploaded.dashboard-user .new-custom-name input:focus,
#icons-pending.dashboard-user .new-custom-name input:focus,
#kit-detail .dashboard-user .new-custom-name input:focus {
  border-left: 6px solid #000000;
}
#pending-uploads.dashboard-user .new-custom-name button,
#flagged-uploads.dashboard-user .new-custom-name button,
#icons-uploaded.dashboard-user .new-custom-name button,
#icons-pending.dashboard-user .new-custom-name button,
#kit-detail .dashboard-user .new-custom-name button {
  position: absolute;
  height: 100%;
  width: 50px;
  right: 1px;
  bottom: -1px;
  margin: 0;
  border-radius: 0;
}

#kit-detail .dashboard-user .icon footer {
  padding: 0;
}

#information-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  text-align: center;
  color: #6D6D6D;
}
#information-modal .close-information-modal {
  position: absolute;
  top: 2em;
  right: 2em;
}
#information-modal .icon {
  display: block;
  float: none;
  margin: 2em auto;
}
#information-modal i.ui_icon {
  font-size: 72px;
}
#information-modal h3 {
  font-size: 2.571em;
  line-height: 1.2;
}
#information-modal p {
  font-size: 1.5em;
  line-height: 1.5em;
  text-align: left;
  max-width: 600px;
  margin: 1em auto;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  white-space: pre-wrap;
}
#information-modal .tags {
  margin: 1em auto;
  max-width: 600px;
}
#information-modal .tag {
  display: inline-block;
  border-radius: 5px;
  font-size: 1.5em;
  background: #F2F2F2;
  color: #BABABA;
  margin: 0.25em;
}
#information-modal .tag a {
  padding: 0.5em 1em;
  display: block;
}
#information-modal .tag:hover {
  background: #F2F2F2;
  color: #6D6D6D;
}

.flagged-uploads {
  transform: perspective(1000);
}

#flagged-uploads.dashboard-user .icon.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  background: transparent;
}

.flipper.icon {
  height: 220px;
}
.flipper .front, .flipper .back {
  backface-visibility: hidden;
  position: absolute;
  background: #FFFFFF;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.flipper .front {
  transform: rotateY(0deg);
  z-index: 3;
}
.flipper .back {
  transform: rotateY(180deg);
  padding: 1em;
  z-index: 2;
}
.flipper .back .delete-icon {
  top: 1em;
  bottom: 1em;
  min-width: initial !important;
  max-width: 100% !important;
}
.flipper .back .nevermind {
  display: inline-block;
  margin-top: 2em;
}
.flipper .back .nevermind:hover {
  border-bottom: solid 1px;
}
.flipper.flipped {
  transform: rotateY(180deg);
}

/**
 * * Icon List styling
 * *
 * * @group modules
 * **/
.react-es6-component[data-component-name=nounproject] {
  min-height: 600px;
  min-height: 56vh;
}

.search-title-container {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin: 10px auto;
  padding: 0 10px;
  color: #6D6D6D;
}

.icon-total {
  float: right;
  line-height: 35px;
}

.original-icon-container {
  cursor: pointer;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 50%;
  height: 24px;
  margin-left: 5px;
  padding: 5px;
  width: 24px;
}

.original-icon {
  position: relative;
  top: 5px;
  height: 24px;
  width: 24px;
}

.icon-list .Grid-cell-row {
  display: flex;
  flex-wrap: wrap;
}
.icon-list .Grid-cell {
  display: inline-flex;
  flex-grow: 1;
  height: 110px;
  justify-content: center;
  position: relative;
  height: auto;
  min-height: inherit;
  cursor: default;
  transition: background-color 0.2s ease-in;
}
.icon-list .Grid-cell:before {
  background-color: rgba(186, 186, 186, 0.15);
  content: "";
  cursor: wait;
  display: inline-flex;
  border-radius: 50%;
  transform: translateY(50%) scale(1);
  transform-origin: center center 0;
  transition: transform 0.2s ease-in-out;
}
.icon-list .Grid-cell img {
  transform: translateY(50%) scale(0);
  transform-origin: center center 0;
  transition: all 1s cubic-bezier(0.19, 0.92, 0.35, 1.07);
}
.icon-list .Grid-cell.loaded {
  cursor: pointer;
}
.icon-list .Grid-cell.loaded.spacer {
  cursor: auto;
}
.icon-list .Grid-cell.loaded:before {
  transform: translateY(43%) scale(0);
}
.icon-list .Grid-cell.loaded img {
  transform: translateY(43%) scale(1);
}
.icon-list .Grid-cell.selected {
  background-color: #F2F2F2;
}
.icon-list .Grid-cell.selected:after {
  animation-name: move-down-in-place;
  animation-duration: 0.5s;
  animation-delay: 0.25s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  border: 20px solid transparent;
  border-top-color: #FFFFFF;
  content: "";
  left: 50%;
  position: absolute;
  top: -20px;
  transform: translateX(-50%);
}
.icon-list .spacer {
  cursor: inherit;
}
.icon-list ._12 {
  min-height: 78px;
}
.icon-list ._12 .Grid-cell:before {
  height: 42px;
}
.icon-list ._12 .Grid-cell img {
  height: 42px;
  min-width: 42px;
}
.icon-list ._12 .Grid-cell:after {
  border: 10px solid transparent;
  border-top-color: #FFFFFF;
}
.icon-list ._12 .no-img:before {
  width: 42px;
  margin-left: 0;
}
.icon-list ._12 .spacer {
  height: 42px;
  width: 42px;
}
.icon-list ._6 {
  min-height: 156px;
}
.icon-list ._6 .Grid-cell {
  min-width: 101px;
}
.icon-list ._6 .Grid-cell img {
  min-width: 84px;
  height: 84px;
}
.icon-list ._6 .Grid-cell:before {
  height: 101px;
}
.icon-list ._6 .Grid-cell:after {
  border: 20px solid transparent;
  border-top-color: #FFFFFF;
}
.icon-list ._6 .no-img:before {
  width: 101px;
  height: 101px;
  margin-left: 0;
}
.icon-list .ad-iframe {
  background: none repeat scroll 0% 0% transparent;
  display: block;
  height: 90px;
  width: 728px;
  margin-top: 22px;
  margin-bottom: 3px;
  margin-left: auto;
  margin-right: auto;
  color: #BABABA;
  border: none;
}

@media (max-width: 568px) {
  .icon-list ._6 .Grid-cell {
    min-width: 143px;
  }
}
@media (min-width: 960px) {
  .search-title-container {
    padding: 0;
  }
  .icon-list .Grid-cell:before {
    display: block;
    left: 50%;
    position: absolute;
  }
  .icon-list .Grid-cell > a {
    left: 50%;
    position: absolute;
  }
  .icon-list ._12 .Grid-cell {
    min-width: 25%;
  }
  .icon-list ._12 .Grid-cell > a {
    margin-left: -21px;
  }
  .icon-list ._12 .Grid-cell:before {
    height: 42px;
    margin-left: -21px;
    width: 42px;
  }
  .icon-list ._12 .no-img:before {
    margin-left: -21px;
  }
  .icon-list ._6 .Grid-cell {
    min-width: 33%;
  }
  .icon-list ._6 .Grid-cell > a {
    margin-left: -42px;
  }
  .icon-list ._6 .Grid-cell:before {
    height: 84px;
    margin-left: -42px;
    width: 84px;
  }
  .icon-list ._6 .no-img:before {
    height: 84px;
    margin-left: -42px;
    width: 84px;
  }
  .icon-list .Grid-cell,
  .icon-list ._12 .Grid-cell,
  .icon-list ._6 .Grid-cell {
    min-width: 8%;
  }
}
.kit-container {
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
  min-width: 300px;
  min-height: 30px;
  display: block;
  position: absolute;
  z-index: 98;
  top: 90px;
  left: 50%;
  visibility: visible;
  transform-origin: 50% 120% 0;
  visibility: hidden;
  transform: translateX(-50%) scale(1);
  transition: transform 0.3s ease, max-height 0.3s ease;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 0 12px #ECE9E9;
  color: #6D6D6D;
}
.kit-container:after {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #FFFFFF;
  top: -40px;
}
.kit-container:before {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #F2F2F2;
  top: -42px;
}
.kit-container.visible {
  visibility: visible;
}
.kit-container .loading {
  margin: 2em auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.kit-container ul {
  max-height: 201px;
  margin-top: 1px;
  overflow: scroll;
  border-bottom: solid 1px #F2F2F2;
  border-top: solid 1px #F2F2F2;
  transition: height 0.3s ease;
}
.kit-container .kits_list .fat-input:after {
  background: transparent;
}
.kit-container .popup-kits-list {
  overflow-x: hidden;
  overflow-y: auto;
}
.kit-container form#create-new-kit .message.error {
  display: block;
  padding: 14px;
  background: #FFFFFF;
  color: #F44E4E;
  border-top: solid 2px #F44E4E;
}
.kit-container li.get-more-kits,
.kit-container li.kit-name {
  font-size: 18px;
  border-top: solid 1px #F2F2F2;
  max-width: 300px;
  position: relative;
  list-style: none;
}
.kit-container li.get-more-kits:first-child,
.kit-container li.kit-name:first-child {
  border-top: none;
}
.kit-container li.get-more-kits.not-a-match,
.kit-container li.kit-name.not-a-match {
  display: none;
}
.kit-container li.get-more-kits.match a,
.kit-container li.kit-name.match a {
  background-color: #F2F2F2;
  color: #333333;
}
.kit-container li.get-more-kits.added, .kit-container li.get-more-kits.keeper,
.kit-container li.kit-name.added,
.kit-container li.kit-name.keeper {
  border: none;
  background-color: #FFFFFF;
}
.kit-container li.get-more-kits.added a, .kit-container li.get-more-kits.keeper a,
.kit-container li.kit-name.added a,
.kit-container li.kit-name.keeper a {
  background-color: #FFFFFF;
  color: #333333;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.kit-container li.get-more-kits i,
.kit-container li.kit-name i {
  padding-left: 0.5em;
  color: #BABABA;
  font-size: 14px;
}
.kit-container li.get-more-kits label,
.kit-container li.get-more-kits a,
.kit-container li.kit-name label,
.kit-container li.kit-name a {
  position: relative;
  display: block;
  width: 100%;
  padding: 14px;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  color: #BABABA;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  transition: background-color 0.3s ease;
}
.kit-container li.get-more-kits label.ui_plus-circle-filled:before, .kit-container li.get-more-kits label.ui_kit:before,
.kit-container li.get-more-kits a.ui_plus-circle-filled:before,
.kit-container li.get-more-kits a.ui_kit:before,
.kit-container li.kit-name label.ui_plus-circle-filled:before,
.kit-container li.kit-name label.ui_kit:before,
.kit-container li.kit-name a.ui_plus-circle-filled:before,
.kit-container li.kit-name a.ui_kit:before {
  position: absolute;
  right: 26px;
  top: 18px;
  font-size: 14px;
  color: #333333;
}
.kit-container li.get-more-kits label:hover,
.kit-container li.get-more-kits a:hover,
.kit-container li.kit-name label:hover,
.kit-container li.kit-name a:hover {
  background-color: #F2F2F2;
  color: #333333;
}
.kit-container li.get-more-kits label.ui_kit:hover,
.kit-container li.get-more-kits a.ui_kit:hover,
.kit-container li.kit-name label.ui_kit:hover,
.kit-container li.kit-name a.ui_kit:hover {
  background-color: none;
}
.kit-container .fat-input {
  font-size: 14px;
}
.kit-container .fat-input .select-hold.ui_down-triangle-after {
  background: #FFFFFF;
  cursor: pointer;
}
.kit-container .fat-input .select-hold.ui_down-triangle-after:after {
  top: 17px;
  position: absolute;
  right: 22px;
}
.kit-container .fat-input .select-hold.ui_down-triangle-after select {
  padding-right: 2.5em;
}
.kit-container .fat-input .icon-label:before {
  left: 17px;
  font-size: 14px;
  top: 14px;
}
.kit-container input[type=radio] {
  visibility: hidden;
  position: absolute;
}
.kit-container input[type=radio]:checked + label {
  background: #F2F2F2;
}
.kit-container input[type=search],
.kit-container input[type=text],
.kit-container select,
.kit-container textarea {
  width: 100%;
  padding: 14px;
  font-size: 18px;
  box-sizing: border-box;
  -webkit-appearance: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  border: none !important;
}
.kit-container input[type=search]::-webkit-input-placeholder,
.kit-container input[type=text]::-webkit-input-placeholder,
.kit-container select::-webkit-input-placeholder,
.kit-container textarea::-webkit-input-placeholder {
  color: #BABABA;
}
.kit-container input[type=search]:-moz-placeholder,
.kit-container input[type=text]:-moz-placeholder,
.kit-container select:-moz-placeholder,
.kit-container textarea:-moz-placeholder {
  color: #BABABA;
}
.kit-container input[type=search]::-moz-placeholder,
.kit-container input[type=text]::-moz-placeholder,
.kit-container select::-moz-placeholder,
.kit-container textarea::-moz-placeholder {
  color: #BABABA;
}
.kit-container input[type=search]:-ms-input-placeholder,
.kit-container input[type=text]:-ms-input-placeholder,
.kit-container select:-ms-input-placeholder,
.kit-container textarea:-ms-input-placeholder {
  color: #BABABA;
}
.kit-container input[type=search] option,
.kit-container input[type=text] option,
.kit-container select option,
.kit-container textarea option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.kit-container textarea {
  white-space: initial;
  padding: 0.75em;
  text-indent: 1.2em;
  min-height: 100px;
  resize: none;
}
.kit-container button {
  color: #F2F2F2;
  background: #6D6D6D;
  max-width: 90%;
  margin: 1em;
}
.kit-container .icon-label {
  position: absolute;
  font-size: 14px;
  display: block;
  width: 0px;
  left: -4px;
  top: 0px;
}
.kit-container a.ui_plus, .kit-container a.ui_search {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  font-size: 14px;
  color: #BABABA;
  padding: 14px 24px 0;
  height: 100%;
}
.kit-container a.ui_plus:hover, .kit-container a.ui_search:hover {
  color: #333333;
}
.kit-container fieldset {
  display: none;
}
.kit-container fieldset.visible {
  display: block;
}

.new_kit .fat-input {
  margin: 0px;
}
.new_kit input[type=text],
.new_kit select {
  padding-left: 2em;
  padding-right: 2em;
  margin-bottom: 0;
  background: #FFFFFF;
}
.new_kit textarea {
  margin-bottom: 0;
  background: #FFFFFF;
}
.new_kit #new-kit-is_public {
  visibility: hidden;
  display: none;
}
.new_kit #new-kit-is_public i {
  position: relative;
}
.new_kit #new-kit-is_public i ::selection {
  background-color: transparent;
  color: inherit;
}
.new_kit #new-kit-is_public i ::moz-selection {
  background-color: transparent;
  color: inherit;
}
.new_kit #new-kit-is_public i .tip-container {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  position: absolute;
  left: 0px;
  padding: 0 20px;
}
.new_kit #new-kit-is_public i .tip-container::after {
  content: " ";
  position: absolute;
  display: block;
  background: transparent;
  width: 100%;
  height: 35px;
  top: -35px;
  left: 0px;
}
.new_kit #new-kit-is_public i .tip {
  box-shadow: 0 0 10px #ECE9E9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  width: 220px;
  min-height: 50px;
  left: 50%;
  margin: 30px 0 0 -110px;
  top: 100%;
  padding: 12px;
  background: #FFFFFF;
  visibility: hidden;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #000000;
  opacity: 0;
  transform: scale(0);
  z-index: 50;
  border: solid 2px #F2F2F2;
  transform-origin: 50% 0;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.new_kit #new-kit-is_public i .tip:after {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #FFFFFF;
  top: -40px;
}
.new_kit #new-kit-is_public i .tip:before {
  content: "";
  position: absolute;
  display: block;
  border: 20px solid transparent;
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -20px;
  border-bottom-color: #F2F2F2;
  top: -42px;
}
.new_kit #new-kit-is_public i .tip a {
  font-size: 14px;
  display: inline-block;
  color: #BABABA;
}
.new_kit #new-kit-is_public i .tip a:hover {
  color: #000000;
}
.new_kit #new-kit-is_public i .tip .term {
  display: block;
}
.new_kit #new-kit-is_public i .tip .term a {
  color: #6D6D6D;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  margin-bottom: 0.25em;
  font-size: 20px;
}
.new_kit #new-kit-is_public i .tip .term a:hover {
  color: #000000;
}
.new_kit #new-kit-is_public i .tip .designer {
  display: block;
}
.new_kit #new-kit-is_public i .tip .designer a {
  font-size: 1em;
  margin-bottom: 1em;
  color: #BABABA;
}
.new_kit #new-kit-is_public i .tip .designer a:hover {
  color: #333333;
}
.new_kit #new-kit-is_public i .tip li a {
  color: #BABABA;
}
.new_kit #new-kit-is_public i .tip li a:before {
  margin: 0 0.5em;
  font-size: 1em;
}
.new_kit #new-kit-is_public i .tip li a:hover {
  color: #000000;
}
.new_kit #new-kit-is_public i.active .tip, .new_kit #new-kit-is_public i:hover .tip {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.new_kit #new-kit-is_public + label {
  font-size: 18px;
  position: absolute;
  right: 0;
  left: auto;
  top: 0;
  width: 42px;
  line-height: 3em;
}
.new_kit #new-kit-is_public + label ::selection {
  background-color: transparent;
  color: inherit;
}
.new_kit #new-kit-is_public + label ::moz-selection {
  background-color: transparent;
  color: inherit;
}
.new_kit #new-kit-is_public + label .ui_eye {
  display: none;
}
.new_kit #new-kit-is_public:checked + label .ui_eye {
  display: block;
}
.new_kit #new-kit-is_public:checked + label .ui_eye-off {
  display: none;
}

body.kit-open .tip {
  display: none;
}

.icon.container.kit-open .tip {
  display: none;
}
.icon.container.kit-open .kit-container {
  bottom: inherit;
}

.card {
  width: 100%;
  height: 420px;
  position: relative;
  margin-bottom: 1.5em;
  list-style: none;
  transform: perspective(1000);
}
.card.blank {
  padding: 0px;
}
.card:nth-of-type(2n+1) {
  margin-left: 0;
}
.card .flipper {
  transition: all 0.6s ease;
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
}
.card .front {
  z-index: 2;
}
.card .back {
  padding: 0;
  transform: rotateY(180deg);
}
.card .back .card-information.ui_close {
  position: absolute;
  z-index: 1;
  top: 2em;
  right: 2em;
  color: #F2F2F2;
}
.card .back form {
  display: none;
}
.card .back form input {
  padding: 1em 2.5em;
}
.card .back form textarea {
  min-height: 180px;
  padding: 1em 2.5em;
  resize: none;
}
.card .back form button.confirm-edit-kit {
  margin-top: 24px;
  border-radius: 4px;
  width: auto;
}
.card .back form .deny-edit-kit {
  width: 100%;
  margin-top: 1em;
  text-align: center;
  background: none;
  color: #333333;
}
.card .back form .deny-edit-kit:hover {
  color: #000000;
}
.card .front, .card .back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  background: #FFFFFF;
  width: 100%;
  height: 420px;
  top: 0;
  left: 0;
}
.card.flip .flipper {
  transform: rotateY(180deg);
}
.card.flip .flipper .back {
  z-index: 3;
}
.card h4 {
  padding: 10px 25px;
}
.card h2 {
  padding: 20px 25px 0;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 36px;
  max-width: 445px;
}
.card .number-of-icons {
  color: #BABABA;
  float: right;
  font-size: 16px;
}
.card ul.icons {
  padding: 25px;
  height: 260px;
  overflow: hidden;
}
.card ul.icons li.default-view {
  color: #F2F2F2;
  text-align: center;
  width: 100%;
  font-size: 18px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
.card ul.icons li.default-view i {
  display: block;
  font-size: 120px;
  margin-top: 26px;
}
.card .loading:before {
  content: "…";
}
.card li.icon {
  width: 23.4042552489%;
}
.card li.icon:nth-child(5) {
  margin: 0px;
}
.card li.icon.preview_url_42 {
  margin-bottom: 60px;
}
.card footer {
  display: block;
  width: 100%;
  padding: 1em 2em;
  position: absolute;
  bottom: 1.5em;
}
.card footer a {
  margin-right: 1em;
  font-size: 14px;
  color: #BABABA;
}
.card footer a:hover {
  color: #000000;
}
.card footer .loading:before {
  content: "…";
}
.card footer .ui_share {
  color: #BABABA;
}
.card footer .ui_share.hide {
  display: none;
}
.card footer .ui_share:hover {
  color: #000000;
}
.card .description {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 1.75em;
  line-height: 1.5em;
  padding: 80px;
  margin: 0;
  height: 100%;
  background: #333333;
  overflow: auto;
  color: #F2F2F2;
}
.card .description a {
  position: absolute;
  display: block;
  text-align: center;
  bottom: 1em;
  left: 49%;
}
.card .description .haiku {
  letter-spacing: -0.02em;
  color: #BABABA;
}
.card .delete-confirmation {
  display: none;
  padding-top: 80px;
}
.card .delete-confirmation h2 {
  text-align: center;
  line-height: 1.25em;
}
.card .delete-confirmation button {
  text-align: center;
  display: block;
  margin: auto;
  width: auto;
}
.card .delete-confirmation .confirm-delete-kit {
  margin-top: 80px;
  margin-bottom: 18px;
}
.card .delete-confirmation .deny-delete-kit {
  color: #6D6D6D;
  background: none;
}
.card .delete-confirmation .deny-delete-kit:hover {
  color: #000000;
}
.card .get-more-kits,
.card .create-new-kit {
  background: #FFFFFF;
  text-align: center;
  color: #BABABA;
  display: block;
  margin-bottom: 20px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.card .get-more-kits h2,
.card .create-new-kit h2 {
  padding: 100px 0;
  display: inline-block;
  text-align: center;
  letter-spacing: -0.025em;
  color: #BABABA;
}
.card .get-more-kits h2 i:before,
.card .create-new-kit h2 i:before {
  display: block;
  font-size: 155px;
}
.card .get-more-kits .ui_kit-open,
.card .create-new-kit .ui_kit-open {
  display: none;
}
.card .get-more-kits .ui_kit,
.card .create-new-kit .ui_kit {
  display: block;
}
.card .get-more-kits:hover .ui_kit-open,
.card .create-new-kit:hover .ui_kit-open {
  display: block;
}
.card .get-more-kits:hover .ui_kit,
.card .create-new-kit:hover .ui_kit {
  display: none;
}
.card form#create-new-kit {
  visibility: hidden;
  display: none;
}
.card form#create-new-kit.visible {
  visibility: visible;
  display: block;
}
.card form#create-new-kit .select-hold {
  background: #FFFFFF;
}
.card form#create-new-kit #new-kit-name {
  padding-right: 3em;
}
.card form#create-new-kit #new-kit-is_public + label {
  line-height: 3.5em;
}
.card form#create-new-kit .message {
  padding: 14px;
  display: block;
  background: #FFFFFF;
  color: #F44E4E;
  border-top: solid 2px;
  width: 100%;
}
.card form#create-new-kit .message:before {
  padding-right: 0.5em;
}
.card form#create-new-kit textarea {
  resize: none;
  height: 197px;
  padding: 1em;
  text-indent: 1em;
}
.card form#create-new-kit button {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

#kit-detail .kiticon-name,
#kit-list .kiticon-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
#kit-detail .kit-avatar-image,
#kit-list .kit-avatar-image {
  font-size: 32px;
  text-align: center;
}
#kit-detail .subhead-collection,
#kit-list .subhead-collection {
  margin-top: 0;
}
#kit-detail .kit-detail-list,
#kit-list .kit-detail-list {
  display: block;
  margin-top: 40px;
}
#kit-detail .kit-detail-list:not(.dashboard-user) li.kit-icon,
#kit-list .kit-detail-list:not(.dashboard-user) li.kit-icon {
  width: 14.8936169745%;
}
#kit-detail .kit-detail-list:not(.dashboard-user) li.kit-icon:nth-child(6n+1),
#kit-list .kit-detail-list:not(.dashboard-user) li.kit-icon:nth-child(6n+1) {
  margin: 0px;
}
#kit-detail .kit-detail-list .kit-icon,
#kit-list .kit-detail-list .kit-icon {
  width: 23.4042552489%;
  display: inline-block;
  position: relative;
  background: #FFFFFF;
  margin-bottom: 2.12766%;
  margin-left: 1.5%;
  vertical-align: top;
}
#kit-detail .kit-detail-list .kit-icon:nth-child(4n+1),
#kit-list .kit-detail-list .kit-icon:nth-child(4n+1) {
  margin-left: 0;
}
#kit-detail .kit-detail-list .kit-icon .icon,
#kit-list .kit-detail-list .kit-icon .icon {
  position: relative;
  height: 84px;
  width: 84px;
  margin: 40px auto;
  display: block;
}
#kit-detail .kit-detail-list .kit-icon .delete-icon,
#kit-list .kit-detail-list .kit-icon .delete-icon {
  color: #BABABA;
  opacity: 0;
  position: absolute;
  right: 10px;
  top: 10px;
}
#kit-detail .kit-detail-list .kit-icon .delete-icon:hover,
#kit-list .kit-detail-list .kit-icon .delete-icon:hover {
  color: #000000;
}
#kit-detail .kit-detail-list .kit-icon:hover .delete-icon,
#kit-list .kit-detail-list .kit-icon:hover .delete-icon {
  opacity: 1;
}
#kit-detail .kit-detail-list .kit-icon footer,
#kit-list .kit-detail-list .kit-icon footer {
  background: #333333;
  color: #FFFFFF;
  text-align: center;
  padding: 0.5em 0.25em;
  height: 56px;
  position: relative;
}
#kit-detail .kit-detail-list .kit-icon footer span,
#kit-list .kit-detail-list .kit-icon footer span {
  color: #FFFFFF;
}
#kit-detail .kit-detail-list .kit-icon footer .kiticon-name,
#kit-list .kit-detail-list .kit-icon footer .kiticon-name {
  display: block;
  font-size: 18px;
  line-height: 36px;
  padding: 0 1.5em;
  text-align: center;
}
#kit-detail .kit-detail-list .kit-icon footer .ui_pencil,
#kit-list .kit-detail-list .kit-icon footer .ui_pencil {
  position: absolute;
  right: 38px;
  bottom: 24px;
  color: #F2F2F2;
}
#kit-detail .kit-detail-list .kit-icon footer label,
#kit-list .kit-detail-list .kit-icon footer label {
  font-size: 14px;
}
#kit-detail .kit-detail-list .kit-icon footer:hover .ui_pencil,
#kit-list .kit-detail-list .kit-icon footer:hover .ui_pencil {
  opacity: 1;
}
#kit-detail .new-custom-name-input,
#kit-list .new-custom-name-input {
  height: 56px;
  left: 0;
  padding: 10px;
  position: absolute;
  top: 0;
}
#kit-detail div.default-view,
#kit-list div.default-view {
  margin: 2em;
  text-align: center;
  font-size: 3em;
  color: #F2F2F2;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#kit-detail div.default-view i,
#kit-list div.default-view i {
  display: block;
  font-size: 150px;
  color: #F2F2F2;
}

#kit-detail header {
  padding: 50px 0 0 0;
}
#kit-detail header h3 {
  font-size: 2.5714em;
}
#kit-detail header h3 .by {
  margin: 9px 0;
  line-height: 2.5714em;
  font-size: 0.35em;
}

.container.kit-detail a.back-link, .container.kit-edit a.back-link {
  border-bottom: solid 1px;
  display: inline-block;
  float: right;
  text-align: right;
  width: auto;
}

#term-detail .kit-container ul,
#term-detail .kit-container ul {
  border-top: none;
}

/**
 * * Loading (aka spinner) module. Used to indicate AJAX operation in progress.
 * *
 * * @group modules
 * * @example html
 * * <div class="loading clearfix visible">
 * *     <div class="dot dot1"></div>
 * *     <div class="dot dot2"></div>
 * *     <div class="dot dot3"></div>
 * *     <div class="dot dot4"></div>
 * * </div>
 * */
.loading {
  position: relative;
  width: 40px;
  margin: 2em auto;
  clear: both;
}
.loading .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #BABABA;
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
.loading .dot1,
.loading .dot2 {
  left: 0;
}
.loading .dot3 {
  left: 15px;
}
.loading .dot4 {
  left: 30px;
}
.loading .dot1 {
  animation-name: reveal;
}
.loading .dot2,
.loading .dot3 {
  animation-name: slide;
}
.loading .dot4 {
  animation-name: reveal;
  animation-direction: reverse;
}

/**
 * * Modal overlays used for social sharing, icon upload information, etc.
 * *
 * * @group modules
 * **/
.modal {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  top: 0px;
  height: 0px;
  overflow: hidden;
}
.modal.visible {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  overflow: inherit;
  z-index: 9999;
  display: block;
}
.modal .close-button {
  color: #333333;
  font-size: 1.25em;
  position: fixed;
  top: 3em;
  right: 3em;
  transition: color 0.3s ease;
}
.modal .close-button:hover {
  color: #FFFFFF;
}
.modal .table {
  height: 100%;
  width: 100%;
  display: table;
}
.modal .hidden {
  display: block;
  position: relative;
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
.modal .hidden .tip {
  visibility: hidden;
}

.modal[data-style=full-black] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1F1F1F;
  padding-top: 44px;
}

.modal[data-type=share] h2 {
  font-size: 3.429em;
  line-height: 1.2;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  line-height: 1.2em;
  color: #FFFFFF;
  margin-bottom: 3em;
}
.modal[data-type=share] .social_links {
  margin-top: 50px;
  text-align: center;
  min-height: 450px;
  margin: 0 auto;
}
.modal[data-type=share] a[type=button] {
  float: left;
  text-align: center;
  display: table;
  background-color: #BABABA;
  border-radius: 50%;
  width: 10.714em;
  height: 10.714em;
  transition: background-color 0.3s ease;
}
.modal[data-type=share] a[type=button]::before {
  display: table-cell;
  height: 100%;
  font-size: 4em;
  color: #000000;
}
.modal[data-type=share] a[type=button]:hover {
  background-color: #FFFFFF;
}
.modal[data-type=share] a[type=button]:not(:last-child) {
  margin-right: 100px;
}

.react-modal {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: auto;
  opacity: 1;
  overflow: auto;
  z-index: 600;
  display: block;
}
.react-modal.download-modal {
  padding-top: 89px;
}
.react-modal .modal-close-button {
  color: #6D6D6D;
  font-size: 1.25em;
  position: fixed;
  top: 3em;
  right: 3em;
  transition: color 0.3s ease;
}
.react-modal .modal-close-button:hover {
  color: #000000;
}

.react-modal.full-black {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1F1F1F;
  padding-top: 44px;
}

.react-modal.split-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1F1F1F;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #000000;
  min-height: 500px;
}
.react-modal.split-modal::before {
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  background: #1F1F1F;
  height: 100%;
  width: 50%;
}
.react-modal.split-modal .close {
  cursor: pointer;
}

.modal[data-style=full-blur] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1F1F1F;
}

.react-modal.full-transparent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  animation-name: fadeIn;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.modal,
.react-modal {
  z-index: 999;
}
.modal.full-white,
.react-modal.full-white {
  overflow: scroll;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  animation-name: fadeIn;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

body.modal-activated {
  overflow: hidden;
}

.modern-modal.modal-background {
  background: rgba(42, 42, 42, 0.9);
  display: block;
  height: 100%;
  left: 0;
  margin: 0;
  overflow: auto;
  padding: 160px 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}
@media (max-width: 768px) {
  .modern-modal.modal-background {
    padding-top: 60px;
  }
}
.modern-modal.modal-background.flex-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modern-modal.modal-background.flex-modal.welcome-modal {
  z-index: 9999;
}
.modern-modal .modal-content {
  background: #FFFFFF;
  border-radius: 2px;
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.08);
  height: 100%;
  left: 0;
  margin: 0 auto;
  padding: 36px 24px;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 999;
}
.modern-modal.no-close .close {
  display: none;
}
.modern-modal.no-close .modal-background-closer {
  pointer-events: none;
}
.modern-modal.no-bg-close .modal-background-closer {
  pointer-events: none;
  cursor: default;
}
.modern-modal.no-bg-modal .modal-content {
  box-shadow: none;
  background: transparent;
  width: auto;
}
.modern-modal.no-bg-modal .close {
  color: #FFFFFF;
}
.modern-modal.full-white {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
}
.modern-modal.full-white.download-flow-modal-container {
  padding-top: 75px;
}
@media (max-width: 768px) {
  .modern-modal.full-white.download-flow-modal-container {
    margin-top: 40px;
  }
}
.modern-modal.full-white .modal-content {
  position: relative;
  min-height: auto;
  padding: 0;
  width: auto;
  box-shadow: none;
  text-align: left;
}
.modern-modal .close {
  font-size: 32px;
  font-weight: normal;
  color: #2A2A2A;
  position: absolute;
  right: 16px;
  top: 8px;
  cursor: pointer;
}
@media (min-width: 768px) {
  .modern-modal .modal-content {
    height: auto;
    min-height: 300px;
    left: inherit;
    padding: 64px 98px;
    position: relative;
    width: 750px;
  }
  .modern-modal .modal-background-closer {
    background: transparent;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .modern-modal .close {
    font-size: 24px;
  }
  .modern-modal .cancel {
    color: #7AC943;
  }
  .modern-modal .modal-title {
    margin-bottom: 24px;
  }
  .modern-modal .modal-body-copy {
    line-height: 1.5;
    margin: 0;
  }
}

.welcome-modal .close {
  right: 26px;
  top: 21px;
}

.two-million-modal-container.modal-background {
  display: flex;
  align-items: center;
}
.two-million-modal-container.modal-background .close {
  display: none;
}
.two-million-modal-container.modal-background .modal-background-closer {
  background: transparent;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.two-million-modal-container.modal-background .modal-content {
  height: auto;
  left: inherit;
  position: relative;
  overflow: hidden;
  padding: 47px 43px 43px 30px;
  max-width: 625px;
  min-height: auto;
}
.two-million-modal-container.modal-background .button {
  margin: 0;
}
.two-million-modal-container.modal-background .balloon-container {
  display: flex;
  justify-content: center;
}
.two-million-modal-container.modal-background .balloon-container .balloon-wrapper, .two-million-modal-container.modal-background .balloon-container .balloon-body {
  position: static;
}

.react-modal.share h2, .modern-modal.share h2 {
  font-size: 3.429em;
  line-height: 1.2;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  line-height: 1.2em;
  color: #FFFFFF;
  margin-bottom: 3em;
}
.react-modal.share .social_links, .modern-modal.share .social_links {
  display: flex;
  flex-wrap: wrap;
}
.react-modal.share .social_links li, .modern-modal.share .social_links li {
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  margin-bottom: 40px;
}
.react-modal.share a[type=button], .modern-modal.share a[type=button] {
  background-color: #BABABA;
  border-radius: 50%;
  width: 10.714em;
  height: 10.714em;
  transition: background-color 0.3s ease;
}
.react-modal.share a[type=button]::before, .modern-modal.share a[type=button]::before {
  display: block;
  top: 50px;
  text-align: center;
  font-size: 4em;
  color: #000000;
}
.react-modal.share a[type=button]:hover, .modern-modal.share a[type=button]:hover {
  background-color: #FFFFFF;
}
.react-modal.share a[type=button]:not(:last-child), .modern-modal.share a[type=button]:not(:last-child) {
  margin-right: 100px;
}

#main-content {
  padding: 0px;
}

#downgrade button:hover {
  background-color: #333333;
}
#downgrade button.charge {
  background-color: #B6DE9B;
}
#downgrade button.charge:hover {
  background-color: #7AC943;
}
#downgrade button.charging {
  background-color: #B6DE9B;
  cursor: auto;
}
#downgrade button.charging:hover {
  background-color: #B6DE9B;
}
#downgrade button.disabled {
  background-color: #333333;
  cursor: auto;
}

#more-info {
  text-align: center;
}
#more-info .headline {
  color: #333333;
}
#more-info h4 {
  font-size: 24px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#more-info h5 {
  font-size: 14px;
  margin-top: 10px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
  color: #BABABA;
  padding-bottom: 10px;
}
#more-info ul {
  margin-top: 24px;
}
#more-info ul .description {
  min-height: 100px;
  text-align: left;
}
#more-info ul .points {
  min-height: 220px;
}
#more-info ul p {
  color: #BABABA;
  font-size: 14px;
  margin: 20px auto;
  text-align: justify;
  width: 87%;
}
#more-info ul b {
  color: #6D6D6D;
  display: block;
  font-size: 18px;
  font-weight: normal;
}
#more-info ul button {
  width: 100%;
  font-size: 24px;
}
#more-info ul button:hover {
  background: #333333;
}

.license {
  text-align: center;
  color: #BABABA;
  padding: 24px 0;
  margin: 0;
  font-size: 14px;
}
.license a {
  color: #BABABA;
}
.license i {
  display: block;
  margin-top: 8px;
}

#share-buttons {
  text-align: center;
  padding: 50px 0 0;
}
#share-buttons h3 {
  font-size: 18px;
  color: #BABABA;
}
#share-buttons ul {
  padding: 24px;
}
#share-buttons li {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  background: #BABABA;
  border-radius: 50%;
  margin-right: 30px;
  padding: 11px;
  transition: all 0.3s ease;
}
#share-buttons li a {
  color: #FFFFFF;
  display: block;
  width: 100%;
  height: 100%;
}
#share-buttons li:hover {
  background: #333333;
}
#share-buttons li:last-child {
  margin: 0;
}

.modal-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  min-height: 450px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.75);
  animation-name: blackout;
  animation-duration: 0.05s;
}
.modal-overlay .container {
  height: 100%;
}
.modal-overlay .inner {
  background: white;
  min-height: 450px;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  text-align: center;
  cursor: default;
  animation-name: pop-in-centered;
  animation-duration: 0.05s;
}

#reveal-video {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
#reveal-video .inner {
  line-height: 0;
  max-width: 900px;
  margin: auto;
}

.modal-auth #site-header {
  display: none;
}

.with-top-banner.modal-download-flow .modal-content {
  margin-top: 75px;
}

.tabbed-nav {
  background: #1F1F1F;
  padding-top: 10px;
}
.tabbed-nav .tab {
  background: #BABABA;
  display: inline-block;
  margin: 0 4px 0 0;
  position: relative;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  transition: all 0.15s ease;
  top: 0;
}
.tabbed-nav .tab a {
  color: #333333;
  display: block;
  font-size: 18px;
  padding: 24px 48px 18px;
}
.tabbed-nav .tab a[class*=ui_]:before {
  font-size: 18px;
  margin-right: 9px;
}
.tabbed-nav .tab.active {
  background: #F2F2F2;
  color: #000000;
  pointer-events: none;
}
.tabbed-nav .tab.animating {
  top: 100px;
}
.tabbed-nav .tab.unavailable {
  background: #333333;
  pointer-events: none;
}
.tabbed-nav .tab.unavailable a {
  color: #000000;
}
.tabbed-nav .tab:hover {
  background: #6D6D6D;
}
.tabbed-nav .tab:active {
  background: #FFFFFF;
}

.tabbed-container {
  min-height: 300px;
}
.tabbed-container .tabbed-section {
  transition: all 0.15s ease;
  position: relative;
  max-height: 9999em;
}
.tabbed-container .tabbed-section.visible-tab {
  opacity: 1;
  visibility: visible;
}
.tabbed-container .tabbed-section.hidden-tab {
  top: 100px;
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
}

.no-results {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #BABABA;
  margin: 80px auto;
  text-align: center;
}
.no-results h2 {
  font-size: 18px;
  margin: 24px 0;
}
.no-results img {
  opacity: 0.25;
  height: 150px;
  width: auto;
}

@media (min-width: 960px) {
  .no-results {
    margin: 100px auto;
  }
  .no-results h2 {
    font-size: 30px;
  }
}
/**
 * * User plan summary for billing settings page
 * * @group modules
 * */
.plan-summary {
  position: relative;
  padding: 30px 30px 20px 20px;
  margin-bottom: 30px;
  border: 1px solid #3EA9F5;
  font-size: 16px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.plan-summary:before {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  color: #3EA9F5;
  font-size: 75px;
}
.plan-summary .plan-summary-item {
  margin-bottom: 0;
  margin-right: 150px;
}
.plan-summary .item-quantity {
  font-size: 24px;
  font-weight: bold;
  text-align: right;
  padding-right: 4px;
}
.plan-summary .subscription-credit .item-quantity,
.plan-summary .subscription-discount .item-quantity {
  font-size: 16px;
  line-height: 36px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.plan-summary .item-description {
  line-height: 36px;
}
.plan-summary .plan-description {
  color: #3EA9F5;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.plan-summary .next-payment {
  margin-top: 8px;
}
.plan-summary .next-payment .item-quantity {
  line-height: 64px;
}
.plan-summary .next-payment .item-description {
  padding-top: 14px;
  border-top: 1px solid #333333;
  line-height: 20px;
  font-size: 16px;
  position: relative;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.plan-summary .next-payment .charged-on {
  color: #6D6D6D;
  font-size: 14px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.plan-summary .next-payment .billing-history-link {
  font-size: 14px;
  display: block;
  position: absolute;
  top: 32px;
  right: 0;
  text-decoration: underline;
}
.plan-summary.upgrade-token {
  padding: 20px;
  border: 1px solid #98CEF4;
}
.plan-summary.upgrade-token:before {
  color: #98CEF4;
}
.plan-summary.upgrade-token .item-description {
  line-height: 24px;
  font-size: 20px;
}
.plan-summary.upgrade-token .sub-description {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  color: #000000;
}
.plan-summary.upgrade-token .membership-dates {
  color: #6D6D6D;
  margin-top: 20px;
}

.plugin-outer-container {
  margin-top: 86px;
}

.plugin-detail-page-heading {
  display: flex;
  align-items: center;
  height: 35px;
  background-color: #E8E8E8;
  padding-left: 9px;
  color: #6d6d6d;
}

.tippy-popper .tippy-tooltip.plugin-theme {
  background-color: #000000;
  border-radius: 0;
  font-size: 15px;
  line-height: 24px;
}
.tippy-popper .tippy-tooltip.plugin-theme a, .tippy-popper .tippy-tooltip.plugin-theme a:visited {
  color: #3EA9F5;
  text-decoration: underline;
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.plugin-theme .tippy-arrow {
  border-bottom-color: #000000;
}
.tippy-popper[x-placement^=top] .tippy-tooltip.plugin-theme .tippy-arrow {
  border-top-color: #000000;
}
.tippy-popper[x-placement^=right] .tippy-tooltip.plugin-theme .tippy-arrow {
  border-right-color: #000000;
}
.tippy-popper[x-placement^=left] .tippy-tooltip.plugin-theme .tippy-arrow {
  border-left-color: #000000;
}

#sign-up-view {
  height: 100%;
  min-height: 600px;
  background: #000000;
}
#sign-up-view::before {
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  background: #1F1F1F;
  height: 100%;
  width: 50%;
}
#sign-up-view.signup-single:before {
  display: none;
}
#sign-up-view:not(.signup-single) #page-wrapper {
  height: 100%;
}
#sign-up-view:not(.signup-single) #main-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#sign-up-view:not(.signup-single) .auth-page-content {
  min-height: 0;
  margin-top: auto;
  margin-bottom: auto;
}
#sign-up-view:not(.signup-single) .auth-page-content .padded-column {
  padding-top: 50px;
  padding-bottom: 50px;
}

.signup-page-layout {
  display: flex;
  align-items: center;
}

#login {
  display: flex;
  align-items: center;
}
#login #form-container a.text-link,
#login #form-container a.text-link:hover {
  color: white;
}
#login .password-container {
  margin-bottom: 60px;
}

#signup a,
#login a {
  color: #FFFFFF;
}
#signup a:hover,
#login a:hover {
  color: #BABABA;
}
#signup .new-form,
#login .new-form {
  margin: auto;
  float: none;
  padding-top: 17px;
  text-align: center;
}
#signup .team-description,
#login .team-description {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
}
#signup .team-description.grey,
#login .team-description.grey {
  color: #6D6D6D;
}
#signup .sign-up-fields,
#login .sign-up-fields {
  max-height: 500px;
  overflow: hidden;
}
#signup .sign-up-fields.collapsed,
#login .sign-up-fields.collapsed {
  max-height: 0;
  display: none;
}
#signup .disclaimer,
#login .disclaimer {
  font-size: 13px;
  text-align: center;
  display: block;
}
#signup .facebook-error #get-started h2,
#login .facebook-error #get-started h2 {
  margin-top: 120px;
}
#signup .facebook-error .button,
#login .facebook-error .button {
  width: 200px;
  display: inline-block;
  margin-right: 1em;
}
#signup .button:last-of-type,
#signup .sign-up-buttons li:last-of-type,
#login .button:last-of-type,
#login .sign-up-buttons li:last-of-type {
  margin-bottom: 0;
}
#signup #fb-avatar,
#login #fb-avatar {
  border-radius: 50%;
  margin: 24px 0;
}
#signup .forgot-password,
#login .forgot-password {
  margin-top: 53px;
  margin-bottom: 24px;
}
#signup .new-account,
#signup .already-have-an-account,
#login .new-account,
#login .already-have-an-account {
  display: inline;
}
#signup .login-link,
#login .login-link {
  margin-top: 53px;
}

.for-edu-page.for-edu-solid-bg {
  background: #000000;
}
.for-edu-page.for-edu-solid-bg:before {
  display: none;
}

.tabnav {
  position: relative;
  margin: 5em auto 3em auto;
  height: 50px;
  z-index: 2;
}
.tabnav .inner {
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}
.tabnav a {
  display: inline-block;
  background: #BABABA;
  text-align: center;
  z-index: 3;
  position: relative;
  padding: 0.75em 1.25em;
  margin-left: 1px;
  font-size: 14px;
  transition: background-color 0.3s ease;
}
.tabnav a:hover {
  background: #a1a1a1;
}
.tabnav li {
  margin-right: -4px;
  display: inline-block;
}
.tabnav li:first-child a {
  border-left-radius: 5px;
}
.tabnav li:last-child a {
  border-right-radius: 5px;
}
.tabnav .active a {
  background: #000000;
  color: #FFFFFF;
}

.token-upgrade {
  background-color: #000000;
}
.token-upgrade.invalid {
  text-align: center;
  padding: 100px;
}
.token-upgrade.invalid .token-upgrade-heading {
  margin-top: 30px;
  font-size: 60px;
}
.token-upgrade.invalid .token-upgrade-subhead {
  font-size: 36px;
}
.token-upgrade.invalid .token-upgrade-subhead a {
  border-bottom: 1px solid;
}
.token-upgrade.invalid img {
  max-width: 25%;
}
.token-upgrade .token-upgrade-heading {
  color: #FFFFFF;
  font-size: 48px;
  margin-top: 50px;
  text-align: center;
}
.token-upgrade .token-upgrade-subhead {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  margin: 20px 0;
  font-weight: normal;
  color: #6D6D6D;
  font-size: 22px;
}
.token-upgrade .token-upgrade-choice {
  width: 300px;
  margin: 50px;
  text-align: center;
  position: relative;
}
.token-upgrade .token-upgrade-choice.token-upgrade-existing {
  float: left;
  margin-left: 80px;
}
.token-upgrade .token-upgrade-choice.token-upgrade-new {
  float: right;
  margin-right: 80px;
}
.token-upgrade .token-upgrade-choice.token-upgrade-icon-bg:before {
  content: "";
  width: 120px;
  height: 120px;
  background: #BABABA;
  border-radius: 50%;
  position: absolute;
  top: 24px;
  left: 90px;
}
.token-upgrade .token-upgrade-choice .cover-form-submit {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
}
.token-upgrade .token-upgrade-choice .cover-link, .token-upgrade .token-upgrade-choice .unavailable, .token-upgrade .token-upgrade-choice .join-now {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
  display: block;
  font-size: 26px;
  text-align: center;
  position: relative;
}
.token-upgrade .token-upgrade-choice .cover-link:before, .token-upgrade .token-upgrade-choice .unavailable:before, .token-upgrade .token-upgrade-choice .join-now:before {
  color: #000000;
  font-size: 60px;
  display: block;
  padding-bottom: 65px;
  padding-top: 33px;
}
.token-upgrade .token-upgrade-choice .cover-link img, .token-upgrade .token-upgrade-choice .unavailable img, .token-upgrade .token-upgrade-choice .join-now img {
  height: 120px;
  margin: 0 90px 10px;
  border-radius: 50%;
}
.token-upgrade .token-upgrade-choice .cover-link .username, .token-upgrade .token-upgrade-choice .unavailable .username, .token-upgrade .token-upgrade-choice .join-now .username {
  font-size: 14px;
  color: #BABABA;
  display: block;
  margin-bottom: 5px;
}
.token-upgrade .token-upgrade-choice .cover-link-text {
  border-bottom: 1px solid #FFFFFF;
}
.token-upgrade .token-upgrade-choice a.another-account {
  font-size: 16px;
  margin-top: 20px;
  display: block;
  color: #BABABA;
}
.token-upgrade .token-upgrade-existing,
.token-upgrade .token-upgrade-new {
  padding-top: 24px;
  padding-bottom: 24px;
}

.section-block.black {
  background-color: #000000;
  color: #FFFFFF;
  position: relative;
}
.section-block.black:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -46px;
  border: 24px solid transparent;
  border-top-color: #000000;
  width: 24px;
  height: 24px;
  left: 50%;
  margin-left: -24px;
  z-index: 1;
}
.section-block.stone {
  background-color: #BABABA;
  color: #333333;
  position: relative;
}
.section-block.stone:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -46px;
  border: 24px solid transparent;
  border-top-color: #BABABA;
  width: 24px;
  height: 24px;
  left: 50%;
  margin-left: -24px;
  z-index: 1;
}
.section-block.white {
  background-color: #FFFFFF;
  color: #000000;
  position: relative;
}
.section-block.white:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -46px;
  border: 24px solid transparent;
  border-top-color: #FFFFFF;
  width: 24px;
  height: 24px;
  left: 50%;
  margin-left: -24px;
  z-index: 1;
}
.section-block.grey {
  background-color: #6D6D6D;
  color: #F2F2F2;
  position: relative;
}
.section-block.grey:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -46px;
  border: 24px solid transparent;
  border-top-color: #6D6D6D;
  width: 24px;
  height: 24px;
  left: 50%;
  margin-left: -24px;
  z-index: 1;
}
.section-block.slate {
  background-color: #333333;
  color: #F2F2F2;
  position: relative;
}
.section-block.slate:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -46px;
  border: 24px solid transparent;
  border-top-color: #333333;
  width: 24px;
  height: 24px;
  left: 50%;
  margin-left: -24px;
  z-index: 1;
}
.section-block.almostblack {
  background-color: #1F1F1F;
  color: #FFFFFF;
  position: relative;
}
.section-block.almostblack:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -46px;
  border: 24px solid transparent;
  border-top-color: #1F1F1F;
  width: 24px;
  height: 24px;
  left: 50%;
  margin-left: -24px;
  z-index: 1;
}
.section-block.offwhite {
  background-color: #F2F2F2;
  color: #000000;
  position: relative;
}
.section-block.offwhite:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -46px;
  border: 24px solid transparent;
  border-top-color: #F2F2F2;
  width: 24px;
  height: 24px;
  left: 50%;
  margin-left: -24px;
  z-index: 1;
}

.section-half {
  display: inline-block;
  position: relative;
  width: 48%;
  vertical-align: middle;
}

.theme-black {
  background-color: #000000;
  color: #F2F2F2;
}

.theme-almostblack {
  background-color: #1F1F1F;
  color: #F2F2F2;
}

.theme-slate {
  background-color: #333333;
  color: #FFFFFF;
}

.theme-grey {
  background-color: #6D6D6D;
  color: #FFFFFF;
}

.theme-stone {
  background-color: #BABABA;
  color: #000000;
}

.theme-offwhite {
  background-color: #F2F2F2;
  color: #1F1F1F;
}

.theme-white {
  background-color: #FFFFFF;
  color: #1F1F1F;
}

.theme-blue {
  background-color: #3EA9F5;
  color: #FFFFFF;
}

.super-user-actions {
  position: absolute;
  top: 0;
  left: -80px;
  background: rgb(250, 250, 250);
  border-radius: 4px;
  border: solid 3px rgb(242, 242, 242);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

a.super-user-action-link,
a.super-user-action-link:visited {
  color: rgb(186, 186, 186);
  padding: 8px;
  margin-bottom: 4px;
  display: block;
  transition: all 0.3s ease-out;
}

a.super-user-action-link:visited:hover,
.super-user-action-link:hover {
  color: #000;
}

.nounproject-icon-editor-controls {
  margin-top: 8px;
}
.nounproject-icon-editor-controls .editor-controls, .nounproject-icon-editor-controls .editor-control-group {
  display: flex;
}
.nounproject-icon-editor-controls i {
  cursor: pointer;
}
.nounproject-icon-editor-controls .editor-action {
  user-select: none;
  cursor: pointer;
  border: 3px solid #F2F2F2;
  font-size: 13px;
}
.nounproject-icon-editor-controls .editor-action > [data-tippy] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0px 3px;
}
.nounproject-icon-editor-controls .editor-action:not(:first-child) {
  border-left: none;
}
.nounproject-icon-editor-controls .editor-action.editor-action-background-shape-container {
  border-left: 3px solid #F2F2F2;
  width: 24px;
}
.nounproject-icon-editor-controls .editor-action.editor-action-background-shape-container > [data-tippy] {
  margin: 0;
}
.nounproject-icon-editor-controls .editor-action .editor-icon {
  min-height: 13px;
}
.nounproject-icon-editor-controls .editor-action .nounproject-tool-tip {
  display: block;
}
.nounproject-icon-editor-controls .editor-action.editor-action-color-picker {
  border: none;
}
.nounproject-icon-editor-controls .editor-action.editor-action-color-picker, .nounproject-icon-editor-controls .editor-action.editor-action-color-picker > [data-tippy] {
  padding: 0;
  margin: 0;
}
.nounproject-icon-editor-controls .editor-action.current .link-action {
  text-decoration: none;
}
.nounproject-icon-editor-controls .reset.link-action {
  display: flex;
  align-items: center;
  font-size: 13px;
}
.nounproject-icon-editor-controls .editor-control-group:not(:last-child) {
  margin-right: 15px;
}

.editor-action-background-shape {
  display: flex;
  align-items: center;
  justify-content: center;
}
.editor-action-background-shape svg {
  width: 10px;
  height: 10px;
}
.editor-action-background-shape.background-shape-none {
  overflow: hidden;
}
.editor-action-background-shape.editor-no-label svg {
  margin-bottom: 0;
  width: 13px;
  height: 13px;
}
.editor-action-list .editor-action-background-shape {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.editor-action-list .editor-action-background-shape svg {
  margin-left: 20px;
}

.editor-no-label .editor-action-label {
  display: none;
}

.editor-action-list {
  background: #F2F2F2;
  color: #1F1F1F;
}
.editor-action-list.editor-export-size-list {
  min-width: 80px;
}
.editor-action-list.editor-export-size-list .editor-action-list-item {
  display: flex;
  justify-content: space-between;
}
.editor-action-list.editor-export-size-list .editor-action-list-item .label {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.editor-action-list .editor-action-list-item {
  user-select: none;
  cursor: pointer;
  background: #FFFFFF;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  padding: 5px 3px 3px;
  border: 3px solid #F2F2F2;
  border-top: none;
}
.editor-action-list .editor-action-list-item:first-child {
  border-top: 3px solid #F2F2F2;
}
.editor-action-list .editor-action-list-item .editor-action-label {
  margin-left: 5px;
}
.editor-action-list .editor-action-list-item:hover {
  background: #BABABA;
}
.editor-action-list .editor-action-list-item.current {
  background: #BABABA;
}

.editor-icon-flip {
  width: 16px;
  height: 100%;
  position: relative;
}
.editor-icon-flip:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: " ";
  background-image: url(https://static.production.thenounproject.com/assets/bundles/a2d606271801b2fd72a9.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.editor-icon-flip.flipped:before {
  background-image: url(https://static.production.thenounproject.com/assets/bundles/b023e7c1271f59d75766.svg);
}
.editor-icon-flip.editor-icon-flip-horizontal {
  transform: rotate(90deg);
}
.editor-icon-flip.editor-icon-flip-vertical {
  transform: scale(1, -1);
}

.editor-rotate-indicator {
  min-width: 30px;
  text-align: center;
}

.editor-icon-rotate, .icon-palette {
  display: inline-block;
  width: 16px;
  height: 100%;
  position: relative;
}
.editor-icon-rotate:before, .icon-palette:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: " ";
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 15px;
}

.editor-icon-rotate:before {
  background-image: url(https://static.production.thenounproject.com/assets/bundles/3834289a528be3073771.svg);
}
.editor-icon-rotate.editor-icon-rotate-counterclockwise {
  transform: scale(-1, 1);
}

.editor-color-swatch {
  position: relative;
  width: 24px;
  height: 24px;
}
.editor-color-swatch.light-color {
  border: 2px solid #F2F2F2;
}

.color-swatch {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background: black;
  display: inline-block;
}

.tippy-tooltip .plugin-select-box {
  margin-top: 0;
}
.tippy-tooltip.editor-theme {
  padding: 4px;
}

.the-icon-container .nounproject-icon-editor-renderer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.the-icon-container.edited, .the-icon-container.edited:after {
  border-radius: 0;
}

.hero-color-picker.legacy-editor .color-1 {
  margin-right: 8px;
}
.hero-color-picker.legacy-editor .user-color-10, .hero-color-picker.legacy-editor .user-color-9, .hero-color-picker.legacy-editor .user-color-8, .hero-color-picker.legacy-editor .user-color-7 {
  display: none;
}

.selected-color {
  padding-left: 24px;
}
.selected-color .color-swatch {
  width: 23px;
  height: 23px;
  position: absolute;
  top: 0;
  left: 0;
}

.editor-preset-palette {
  display: flex;
  flex-wrap: wrap;
  max-width: 240px;
}

#custom-color-picker {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 9;
  background: #FFFFFF;
  border: solid 3px #F2F2F2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.color-picker-pointer-hue {
  width: 10px;
  height: 4px;
  border: solid 1px #000;
  box-shadow: 0 0 0 1px #fff;
  transform: translate(-2px, -2px);
  transition: 0.3s ease-out;
  transition-property: height, width, transform;
  z-index: 8;
  position: relative;
}

#hue:hover .color-picker-pointer-hue {
  width: 36px;
  height: 24px;
  transform: translate(-8px, -12px);
  z-index: 10;
}

.custom-color-inputs {
  width: 100%;
  max-width: 80px;
}

.color-picker-pointer-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: solid 1px #000;
  box-shadow: 0 0 0 1px #fff;
  transform: translate(-6px, -6px);
  transition: 0.3s ease-out;
  transition-property: height, width, transform;
  z-index: 9;
  position: relative;
}

#Saturation:hover .color-picker-pointer-circle {
  width: 48px;
  height: 48px;
  transform: translate(-24px, -24px);
}

#hue, #Saturation {
  flex-shrink: 0;
}

#custom-color-picker label {
  position: absolute;
  padding: 2px 4px;
  color: #6D6D6D;
}
#custom-color-picker input {
  width: 100%;
  min-width: 70px;
  padding: 2px 4px 2px 18px;
  background: #ffffff;
  border: solid 1px #F2F2F2;
}

.color-box-group {
  padding: 4px;
}

.editor-color-picker {
  flex-direction: column;
}
.editor-color-picker [class*=ui_]:before {
  font-size: 10px;
  margin-right: 5px;
}
.editor-color-picker .palette-header {
  align-self: center;
  font-size: 10px;
  margin: 5px 0 9px;
  color: #BABABA;
}
.editor-color-picker .editor-palette-modes {
  width: 100%;
  margin-bottom: 5px;
}
.editor-color-picker .editor-palette-modes li {
  font-size: 12px;
  padding: 5px;
}
.editor-color-picker .custom-color-inputs {
  max-width: 76px;
}
.editor-color-picker .color-box-group {
  padding: 0;
  margin-left: 3px;
}
.editor-color-picker .color-box-group:not(:last-child) {
  margin-bottom: 5px;
}
.editor-color-picker #custom-color-picker {
  position: static;
  border-right: none;
  border-bottom: none;
  background: transparent;
  border: none;
}
.editor-color-picker #custom-color-picker label {
  font-size: 12px;
  padding: 3px 4px;
}
.editor-color-picker #custom-color-picker input {
  border-right: none;
  font-size: 12px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.editor-color-picker .user-colors {
  height: auto;
}
.editor-color-picker .user-colors .color {
  height: 12px;
}

@media only screen and (max-width: 350px) {
  .icon-editing {
    flex-direction: column;
  }
  .plugin-select-size {
    margin: 0;
  }
  #custom-color-picker {
    width: auto;
    flex-direction: column;
  }
  .custom-color-inputs {
    max-width: 350px;
  }
}
@media only screen and (max-width: 250px) {
  .the-icon-container {
    min-height: 430px;
  }
  #custom-color-picker {
    max-width: 150px;
  }
  #Saturation {
    width: 120px !important;
    height: 120px !important;
  }
  #hue {
    height: 120px !important;
  }
}
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
#page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@media (max-width: 768px) {
  #page-wrapper.hero-active {
    overflow: hidden;
    height: 0;
  }
}
.navigation-header .ui_logo {
  padding: 14px 21px;
  height: 64px;
  color: #000000;
}

.side-menu {
  margin-top: 80px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: none;
  height: 100%;
  position: fixed;
  min-width: 250px;
  padding: 24px;
  background-color: #000000;
  color: #FFFFFF;
  text-align: left;
  transition: all 0.3s ease-out;
  z-index: 95;
  top: 0;
}
.with-top-banner .side-menu {
  margin-top: 128px;
}
.side-menu a {
  transition: all 0.3s ease-out;
  border-bottom: 1px solid transparent;
}

.side-menu ul {
  padding: 0;
  margin: 0 0 24px 0;
}

.side-menu .list-header {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
  font-size: 18px;
  margin-botton: 10px;
}

.side-menu li {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  padding: 4px 0;
  margin: 0;
}

.side-menu .list-header:hover {
  text-decoration: none;
}

.side-menu a:hover {
  border-bottom: solid 1px;
}

.secondary li {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  padding: 4px 0;
  margin: 0;
}

.navigation-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  background: #FFFFFF;
  border-bottom: solid 1px #F2F2F2;
  z-index: 100;
}
.navigation-header > .row {
  padding: 8px;
}

.user-navigation {
  display: none;
}

@media (min-width: 768px) {
  .user-navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
@media (min-width: 960px) {
  .navigation-header > .row {
    padding: 8px 24px;
  }
  .navigation-header .ui_logo::before {
    top: 10px;
  }
  .navigation-header .ui_logo {
    padding: 0 24px;
  }
  .navigation-header .ui_notifications:before,
  .side-menu .ui_notifications:before {
    font-size: 15px;
    padding: 3px;
    color: #FFFFFF;
    z-index: 1;
    background: #F44E4E;
    border-radius: 50%;
  }
  .navigation-header .ui_notifications:before {
    position: absolute;
    top: inherit;
    right: 2px;
    bottom: 4px;
  }
  .side-menu {
    display: block;
  }
  .side-menu a {
    color: #FFFFFF;
  }
  .secondary a {
    color: #6D6D6D;
  }
}
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.infobar-content {
  display: flex;
  justify-content: space-between;
}
.infobar-content.processing {
  justify-content: center;
  min-height: 64px;
}
.infobar-content.processing.scope-creator, .infobar-content.processing.scope-collection {
  min-height: 49px;
}

.pill-tab-container {
  display: flex;
  justify-content: flex-start;
}
.pill-tab-container .pill-tab {
  background: #BABABA;
  color: #FFFFFF;
  display: block;
  padding: 4px 8px;
  transition: all 0.3s ease-out;
}
.pill-tab-container .pill-tab:hover {
  background: #6D6D6D;
}
.pill-tab-container .pill-tab-selected {
  background: #333333;
  color: #FFFFFF;
}
.pill-tab-container .pill-tab-first {
  border-radius: 4px 0 0 4px;
  border-right: 1px solid #F2F2F2;
}
.pill-tab-container .pill-tab-last {
  border-radius: 0 4px 4px 0;
  border-left: 1px solid #F2F2F2;
}

.left-navigation {
  text-align: left;
}

.right-navigation {
  text-align: right;
}

@media (max-width: 960px) {
  .infobar-content {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.search-is-loading {
  height: 66px;
  border: solid 3px #F2F2F2;
  width: 100%;
  max-width: 940px;
  margin: auto;
}
.search-is-loading .ui_search {
  padding: 22px;
  color: #FFFFFF;
  background-color: #F2F2F2;
  width: 24%;
}

.dismiss-suggestions {
  margin: calc(-50vw + 250px);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.autocomplete-container {
  display: none;
}

.search-container {
  position: relative;
  max-width: 940px;
  margin: auto;
}
.search-container form {
  position: relative;
  background-color: #FFFFFF;
  display: flex;
}
.search-container form .search-box-icon,
.search-container form .ui_search {
  background-color: #FAFAFA;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #F2F2F2;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: #F2F2F2;
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: #F2F2F2;
  display: inline-block;
  padding: 20px;
}
.search-container form #search {
  background-color: #FAFAFA;
  border-width: 3px 3px 3px 0;
  border-style: solid;
  border-color: #F2F2F2 !important;
  border-radius: 0;
  box-sizing: border-box;
  display: block;
  outline: none;
  padding: 14px 14px 14px 0;
  width: 100%;
  -webkit-appearance: none;
}
.search-container form #search:focus {
  border-color: #F1F1F1;
  outline: none;
  outline-width: 0;
}

.plugin.autocomplete-container {
  font-size: 18px;
  position: absolute;
  width: 100%;
  background-color: #FAFAFA;
  border-bottom: 3px solid #F2F2F2;
  border-left: 3px solid #F2F2F2;
  border-right: 3px solid #F2F2F2;
  margin: -3px 0 0 0;
  z-index: 98;
  display: block;
}
.plugin.autocomplete-container a {
  transition: none;
}
.plugin.autocomplete-container li.active {
  background-color: #BABABA;
}
.plugin.autocomplete-container li.active a {
  color: #FFFFFF;
}
.plugin.autocomplete-container li:hover {
  background-color: #6D6D6D;
}
.plugin.autocomplete-container li:hover a {
  color: #FFFFFF;
}
.plugin.autocomplete-container li a:hover {
  color: #FFFFFF;
}

.search-scope-container {
  display: none;
}

.menu-toggle {
  position: relative;
  top: 4px;
  color: #BABABA;
}

@media (min-width: 375px) {
  #search {
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  #search {
    font-size: 24px;
  }
  .search-scope-container {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
  }
  .search-scope-container .checkbox-fillin .ui_checkbox:before {
    font-size: 1.7em;
  }
  .fort-select-container {
    border: 1px solid #BABABA;
    position: relative;
  }
  .fort-select-container select {
    width: 111%;
  }
  .fort-select-container .ui_down-drop-arrow {
    pointer-events: none;
  }
  .fort-select-container .ui_down-drop-arrow:before {
    font-size: 13px;
    color: #BABABA;
    position: absolute;
    right: 5px;
    top: 5px;
  }
}
@media (min-width: 960px) {
  .autocomplete-container {
    font-size: 18px;
    position: absolute;
    width: 100%;
    background-color: #FAFAFA;
    border-bottom: 3px solid #F2F2F2;
    border-left: 3px solid #F2F2F2;
    border-right: 3px solid #F2F2F2;
    margin: -3px 0 0 0;
    z-index: 98;
    display: block;
  }
  .autocomplete-container .query-matched {
    color: #BABABA;
  }
  .autocomplete-container .query-suggested {
    color: #6D6D6D;
  }
  .autocomplete-container a {
    transition: none;
  }
  .autocomplete-container li.active {
    background-color: #BABABA;
  }
  .autocomplete-container li.active .query-matched, .autocomplete-container li.active .query-suggested, .autocomplete-container li.active a {
    color: #FFFFFF;
  }
  .autocomplete-container li:hover {
    background-color: #6D6D6D;
  }
  .autocomplete-container li:hover .query-matched, .autocomplete-container li:hover .query-suggested, .autocomplete-container li:hover a {
    color: #FFFFFF;
  }
  .autocomplete-container li a:hover {
    color: #FFFFFF;
  }
  .autocomplete-container li a:hover .query-matched, .autocomplete-container li a:hover .query-suggested {
    color: #FFFFFF;
  }
}
@keyframes search-is-loading {
  0% {
    width: 10%;
  }
  100% {
    width: 100%;
  }
}
.background-basic {
  background-color: #7AC943;
}

.background-pro {
  background-color: #3EA9F5;
}

.background-team {
  background-color: #AE8DFF;
}

.current-plan {
  background-color: #C6E0F3;
  border: solid 2px #3EA9F5;
}
.current-plan.warning {
  background-color: #FDEBEC;
  border: 0px;
}

body.basic #main-content .plan-color,
.form-green #main-content .plan-color {
  color: #7AC943 !important;
}
body.basic #main-content .plan-background-1,
.form-green #main-content .plan-background-1 {
  background: #7AC943;
}
body.basic #main-content .plan-background,
.form-green #main-content .plan-background {
  background: #B6DE9B !important;
}
body.basic #main-content select:hover,
body.basic #main-content textarea:hover,
body.basic #main-content input:hover,
.form-green #main-content select:hover,
.form-green #main-content textarea:hover,
.form-green #main-content input:hover {
  outline-color: #7AC943 !important;
}
body.basic #main-content select:focus,
body.basic #main-content textarea:focus,
body.basic #main-content input:focus,
.form-green #main-content select:focus,
.form-green #main-content textarea:focus,
.form-green #main-content input:focus {
  border-color: #7AC943 !important;
}
body.basic #main-content select:focus + label + label:before,
body.basic #main-content textarea:focus + label + label:before,
body.basic #main-content input:focus + label + label:before,
.form-green #main-content select:focus + label + label:before,
.form-green #main-content textarea:focus + label + label:before,
.form-green #main-content input:focus + label + label:before {
  color: #7AC943 !important;
}
body.basic #main-content .disclaimer input#i-agree-to-the-terms:hover + .checkbox-fillin, body.basic #main-content .disclaimer input#i-agree-to-the-terms:focus + .checkbox-fillin,
.form-green #main-content .disclaimer input#i-agree-to-the-terms:hover + .checkbox-fillin,
.form-green #main-content .disclaimer input#i-agree-to-the-terms:focus + .checkbox-fillin {
  border-color: #7AC943;
}
body.basic #main-content .disclaimer input#i-agree-to-the-terms:checked + .checkbox-fillin i,
.form-green #main-content .disclaimer input#i-agree-to-the-terms:checked + .checkbox-fillin i {
  color: #7AC943;
}

body.for-mac #main-content .plan-color,
body.pro #main-content .plan-color,
body #main-content .plan-color,
.form-blue .plan-color {
  color: #3EA9F5 !important;
}
body.for-mac #main-content .plan-background-1,
body.pro #main-content .plan-background-1,
body #main-content .plan-background-1,
.form-blue .plan-background-1 {
  background: #3EA9F5;
}
body.for-mac #main-content .plan-background,
body.pro #main-content .plan-background,
body #main-content .plan-background,
.form-blue .plan-background {
  background: #98CEF4 !important;
}
body.for-mac #main-content select:hover,
body.for-mac #main-content textarea:hover,
body.for-mac #main-content input:hover,
body.pro #main-content select:hover,
body.pro #main-content textarea:hover,
body.pro #main-content input:hover,
body #main-content select:hover,
body #main-content textarea:hover,
body #main-content input:hover,
.form-blue select:hover,
.form-blue textarea:hover,
.form-blue input:hover {
  outline-color: #98CEF4 !important;
}
body.for-mac #main-content select:focus,
body.for-mac #main-content textarea:focus,
body.for-mac #main-content input:focus,
body.pro #main-content select:focus,
body.pro #main-content textarea:focus,
body.pro #main-content input:focus,
body #main-content select:focus,
body #main-content textarea:focus,
body #main-content input:focus,
.form-blue select:focus,
.form-blue textarea:focus,
.form-blue input:focus {
  border-color: #3EA9F5 !important;
}
body.for-mac #main-content select:focus + label + label:before,
body.for-mac #main-content textarea:focus + label + label:before,
body.for-mac #main-content input:focus + label + label:before,
body.pro #main-content select:focus + label + label:before,
body.pro #main-content textarea:focus + label + label:before,
body.pro #main-content input:focus + label + label:before,
body #main-content select:focus + label + label:before,
body #main-content textarea:focus + label + label:before,
body #main-content input:focus + label + label:before,
.form-blue select:focus + label + label:before,
.form-blue textarea:focus + label + label:before,
.form-blue input:focus + label + label:before {
  color: #3EA9F5 !important;
}
body.for-mac #main-content #i-agree-to-the-terms i,
body.pro #main-content #i-agree-to-the-terms i,
body #main-content #i-agree-to-the-terms i,
.form-blue #i-agree-to-the-terms i {
  color: #3EA9F5;
}
body.for-mac #main-content input[type=radio].input-radio + label:after,
body.pro #main-content input[type=radio].input-radio + label:after,
body #main-content input[type=radio].input-radio + label:after,
.form-blue input[type=radio].input-radio + label:after {
  border-color: #3EA9F5;
  background-color: #FFFFFF;
}
body.for-mac #main-content input[type=radio].input-radio:hover + label,
body.pro #main-content input[type=radio].input-radio:hover + label,
body #main-content input[type=radio].input-radio:hover + label,
.form-blue input[type=radio].input-radio:hover + label {
  outline-color: #3EA9F5;
}
body.for-mac #main-content input[type=radio].input-radio:checked + label,
body.pro #main-content input[type=radio].input-radio:checked + label,
body #main-content input[type=radio].input-radio:checked + label,
.form-blue input[type=radio].input-radio:checked + label {
  border-color: #3EA9F5;
  background-color: #C6E0F3;
  outline: none;
}
body.for-mac #main-content input[type=radio].input-radio:checked + label em,
body.pro #main-content input[type=radio].input-radio:checked + label em,
body #main-content input[type=radio].input-radio:checked + label em,
.form-blue input[type=radio].input-radio:checked + label em {
  color: #3EA9F5;
}
body.for-mac #main-content input[type=radio].input-radio:checked + label:before,
body.pro #main-content input[type=radio].input-radio:checked + label:before,
body #main-content input[type=radio].input-radio:checked + label:before,
.form-blue input[type=radio].input-radio:checked + label:before {
  border-color: #FFFFFF;
  background-color: #3EA9F5;
}
body.for-mac #main-content .disclaimer input#i-agree-to-the-terms:hover + .checkbox-fillin, body.for-mac #main-content .disclaimer input#i-agree-to-the-terms:focus + .checkbox-fillin,
body.pro #main-content .disclaimer input#i-agree-to-the-terms:hover + .checkbox-fillin,
body.pro #main-content .disclaimer input#i-agree-to-the-terms:focus + .checkbox-fillin,
body #main-content .disclaimer input#i-agree-to-the-terms:hover + .checkbox-fillin,
body #main-content .disclaimer input#i-agree-to-the-terms:focus + .checkbox-fillin,
.form-blue .disclaimer input#i-agree-to-the-terms:hover + .checkbox-fillin,
.form-blue .disclaimer input#i-agree-to-the-terms:focus + .checkbox-fillin {
  border-color: #3EA9F5;
}
body.for-mac #main-content .disclaimer input#i-agree-to-the-terms:checked + .checkbox-fillin i,
body.pro #main-content .disclaimer input#i-agree-to-the-terms:checked + .checkbox-fillin i,
body #main-content .disclaimer input#i-agree-to-the-terms:checked + .checkbox-fillin i,
.form-blue .disclaimer input#i-agree-to-the-terms:checked + .checkbox-fillin i {
  color: #3EA9F5;
}

body #main-content input#search:focus {
  border-color: transparent !important;
}

body.team #main-content .plan-color,
.form-team #main-content .plan-color {
  color: #AE8DFF !important;
}
body.team #main-content .plan-background-1,
.form-team #main-content .plan-background-1 {
  background: #AE8DFF;
}
body.team #main-content .plan-background,
.form-team #main-content .plan-background {
  background: #D0C0F9 !important;
}
body.team #main-content select:hover,
body.team #main-content textarea:hover,
body.team #main-content input:hover,
.form-team #main-content select:hover,
.form-team #main-content textarea:hover,
.form-team #main-content input:hover {
  outline-color: #D0C0F9 !important;
}
body.team #main-content select:focus,
body.team #main-content textarea:focus,
body.team #main-content input:focus,
.form-team #main-content select:focus,
.form-team #main-content textarea:focus,
.form-team #main-content input:focus {
  border-color: #AE8DFF !important;
}
body.team #main-content select:focus + label + label:before,
body.team #main-content textarea:focus + label + label:before,
body.team #main-content input:focus + label + label:before,
.form-team #main-content select:focus + label + label:before,
.form-team #main-content textarea:focus + label + label:before,
.form-team #main-content input:focus + label + label:before {
  color: #AE8DFF !important;
}
body.team #main-content #i-agree-to-the-terms i,
.form-team #main-content #i-agree-to-the-terms i {
  color: #AE8DFF;
}
body.team #main-content input[type=radio].input-radio + label:after,
.form-team #main-content input[type=radio].input-radio + label:after {
  border-color: #AE8DFF;
  background-color: #FFFFFF;
}
body.team #main-content input[type=radio].input-radio:hover + label,
.form-team #main-content input[type=radio].input-radio:hover + label {
  outline-color: #AE8DFF;
}
body.team #main-content input[type=radio].input-radio:checked + label,
.form-team #main-content input[type=radio].input-radio:checked + label {
  border-color: #AE8DFF;
  background-color: #E1D8EC;
  outline: none;
}
body.team #main-content input[type=radio].input-radio:checked + label em,
.form-team #main-content input[type=radio].input-radio:checked + label em {
  color: #AE8DFF;
}
body.team #main-content input[type=radio].input-radio:checked + label:after,
.form-team #main-content input[type=radio].input-radio:checked + label:after {
  border-color: #FFFFFF;
  background-color: #AE8DFF;
}
body.team #main-content .disclaimer input#i-agree-to-the-terms:hover + .checkbox-fillin, body.team #main-content .disclaimer input#i-agree-to-the-terms:focus + .checkbox-fillin,
.form-team #main-content .disclaimer input#i-agree-to-the-terms:hover + .checkbox-fillin,
.form-team #main-content .disclaimer input#i-agree-to-the-terms:focus + .checkbox-fillin {
  border-color: #AE8DFF;
}
body.team #main-content .disclaimer input#i-agree-to-the-terms:checked + .checkbox-fillin i,
.form-team #main-content .disclaimer input#i-agree-to-the-terms:checked + .checkbox-fillin i {
  color: #AE8DFF;
}

.price-sign-style {
  align-items: flex-end;
  display: flex;
  font-size: 18px;
  line-height: 28px;
  margin: auto;
  width: 110px;
  flex-shrink: 0;
}
.price-sign-style.wider {
  width: 150px;
}
.price-sign-style .price-dollar-sign {
  flex-shrink: 0;
}
.price-sign-style .price-dollars-bold {
  font-size: 32px;
  margin: 0 1px;
  width: 35px;
  flex-shrink: 0;
}
.price-sign-style .price-cents-underline {
  border-bottom: solid 4px;
  line-height: 24px;
  flex-shrink: 0;
}
.price-sign-style .price-cents-underline.price-pro {
  border-color: #3EA9F5;
}
.price-sign-style .price-cents-underline.price-team {
  border-color: #AE8DFF;
}
.price-sign-style .price-stacked-type {
  font-size: 13px;
  line-height: 12px;
  margin: 2px 0 0 6px;
  text-align: left;
}

.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
body.dark-theme,
.dark-theme-wrapper {
  background: #1F1F1F;
  color: #FFFFFF;
}
body.dark-theme ::selection,
.dark-theme-wrapper ::selection {
  background-color: #F2F2F2;
  color: #000000;
}
body.dark-theme ::moz-selection,
.dark-theme-wrapper ::moz-selection {
  background-color: #F2F2F2;
  color: #000000;
}
body.dark-theme p a,
body.dark-theme a.text-link,
.dark-theme-wrapper p a,
.dark-theme-wrapper a.text-link {
  color: #BABABA;
  border-bottom: solid 1px;
}
body.dark-theme p a:hover,
body.dark-theme a.text-link:hover,
.dark-theme-wrapper p a:hover,
.dark-theme-wrapper a.text-link:hover {
  color: #FFFFFF;
}
body.dark-theme .subhead,
.dark-theme-wrapper .subhead {
  color: #BABABA;
}
body.dark-theme .new-form input::selection,
.dark-theme-wrapper .new-form input::selection {
  background-color: #333333;
  color: #FFFFFF;
}
body.dark-theme .new-form input::moz-selection,
.dark-theme-wrapper .new-form input::moz-selection {
  background-color: #333333;
  color: #FFFFFF;
}
body.dark-theme .new-form #dash,
.dark-theme-wrapper .new-form #dash {
  border-top-color: #BABABA;
}

/**
 * * These classes should be able to override any other element styles
 * */
.hidden {
  display: none;
  visibility: hidden;
}

.hidden-animate {
  overflow: hidden;
  max-height: 0;
  transition: 1s ease all;
}

.inactive {
  opacity: 0.5;
  pointer-events: none;
}

.peekaboo {
  opacity: 0;
}

.table {
  display: table;
  height: 100%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}

.clearfix {
  zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

@media print {
  #mobile-overlay,
  .blur-container,
  #search,
  #footer,
  .page-header {
    display: none;
  }
}
a {
  color: #6D6D6D;
}

button {
  font-size: 14px;
}
button:before {
  left: -4px;
}

button:hover, button:visited,
.btn-default:hover,
.btn-default:visited {
  border-color: #ccc;
  box-shadow: none;
}
button:focus,
.btn-default:focus {
  border-color: #ccc;
  box-shadow: none;
  outline: 0;
}
button:active,
.btn-default:active {
  border-color: #ccc;
  box-shadow: none;
}
button:active:hover, button:active:visited,
.btn-default:active:hover,
.btn-default:active:visited {
  border-color: #ccc;
  box-shadow: none;
}
button:active:focus,
.btn-default:active:focus {
  border-color: #ccc;
  box-shadow: none;
  outline: 0;
}

.btn.gray,
button.gray {
  background-color: #6D6D6D;
  background: #6D6D6D;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.btn.gray:before,
button.gray:before {
  color: #FFFFFF;
}
.btn.gray:active, .btn.gray:hover, .btn.gray:focus, .btn.gray:visited,
button.gray:active,
button.gray:hover,
button.gray:focus,
button.gray:visited {
  background-color: #6D6D6D;
  background: #6D6D6D;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.btn.green,
button.green {
  background-color: #7AC943;
  background: #7AC943;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.btn.green:before,
button.green:before {
  color: #FFFFFF;
}
.btn.green:active, .btn.green:hover, .btn.green:focus, .btn.green:visited,
button.green:active,
button.green:hover,
button.green:focus,
button.green:visited {
  background-color: #7AC943;
  background: #7AC943;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.btn.black,
button.black {
  background-color: #000000;
  background: #000000;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.btn.black:before,
button.black:before {
  color: #FFFFFF;
}
.btn.black:active, .btn.black:hover, .btn.black:focus, .btn.black:visited,
button.black:active,
button.black:hover,
button.black:focus,
button.black:visited {
  background-color: #000000;
  background: #000000;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.btn.yellow,
button.yellow {
  background-color: #FFBF43;
  background: #FFBF43;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.btn.yellow:before,
button.yellow:before {
  color: #FFFFFF;
}
.btn.yellow:active, .btn.yellow:hover, .btn.yellow:focus, .btn.yellow:visited,
button.yellow:active,
button.yellow:hover,
button.yellow:focus,
button.yellow:visited {
  background-color: #FFBF43;
  background: #FFBF43;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.btn.blue,
button.blue {
  background-color: #3EA9F5;
  background: #3EA9F5;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.btn.blue:before,
button.blue:before {
  color: #FFFFFF;
}
.btn.blue:active, .btn.blue:hover, .btn.blue:focus, .btn.blue:visited,
button.blue:active,
button.blue:hover,
button.blue:focus,
button.blue:visited {
  background-color: #3EA9F5;
  background: #3EA9F5;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.btn.red,
button.red {
  background-color: #F44E4E;
  background: #F44E4E;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.btn.red:before,
button.red:before {
  color: #FFFFFF;
}
.btn.red:active, .btn.red:hover, .btn.red:focus, .btn.red:visited,
button.red:active,
button.red:hover,
button.red:focus,
button.red:visited {
  background-color: #F44E4E;
  background: #F44E4E;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.btn.maroon,
button.maroon {
  background-color: #B73B3B;
  background: #B73B3B;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.btn.maroon:before,
button.maroon:before {
  color: #FFFFFF;
}
.btn.maroon:active, .btn.maroon:hover, .btn.maroon:focus, .btn.maroon:visited,
button.maroon:active,
button.maroon:hover,
button.maroon:focus,
button.maroon:visited {
  background-color: #B73B3B;
  background: #B73B3B;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.btn.purple,
button.purple {
  background-color: #AE8DFF;
  background: #AE8DFF;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.btn.purple:before,
button.purple:before {
  color: #FFFFFF;
}
.btn.purple:active, .btn.purple:hover, .btn.purple:focus, .btn.purple:visited,
button.purple:active,
button.purple:hover,
button.purple:focus,
button.purple:visited {
  background-color: #AE8DFF;
  background: #AE8DFF;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.load-more {
  display: block;
  width: 200px;
  margin: 40px auto;
  font-size: 20px;
}

.load-more-uploads {
  height: 46px;
  padding: 13px;
}

.icon-card-container .load-more {
  border: 1px solid #ccc;
}
.icon-card-container .process-button-wrapper {
  min-height: 150px;
}

.gray {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #6D6D6D;
}
.gray:before {
  color: #6D6D6D;
}

.yellow {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #FFBF43;
}
.yellow:before {
  color: #FFBF43;
}

.purple {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #AE8DFF;
}
.purple:before {
  color: #AE8DFF;
}

.red {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #F44E4E;
}
.red:before {
  color: #F44E4E;
}

.text-link:active, .text-link:hover, .text-link:focus, .text-link:visited {
  text-decoration: none;
}

.loading {
  margin: 100px auto;
}

#moderation #page-wrapper {
  padding-top: 0;
}

[data-component-name=moderation] .row {
  margin-left: auto;
  margin-right: auto;
}

.curation-count.outer-container {
  position: fixed;
  width: 1200px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1000;
}
.curation-count.outer-container .inner-container {
  position: relative;
  width: 100%;
}
.curation-count.outer-container .inner-container .curation-count {
  position: absolute;
  right: 0;
  text-align: center;
}
.curation-count.outer-container .inner-container .curation-count .flag-content {
  position: relative;
  background-color: #7AC943;
  width: 70px;
  max-height: 19px;
  color: #FFF;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
}
.curation-count.outer-container .inner-container .curation-count .flag-content:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid;
  top: 9px;
  left: 0;
  border-width: 10px 35px 6px 35px;
  border-color: transparent #7AC943 transparent #7AC943;
}

.sticky-nav.stuck {
  position: fixed;
  top: 23px;
  width: 100%;
  height: 83px;
  transform: translate3d(0, -24px, 0);
  z-index: 99;
  border-bottom: 1px solid gainsboro;
}

.creator_info,
.preview_info {
  padding: 24px;
}
.creator_info input,
.preview_info input {
  width: 60px;
}
.creator_info .rating .gray,
.creator_info .uploads .gray,
.preview_info .rating .gray,
.preview_info .uploads .gray {
  margin-right: 10px;
}
.creator_info .rating .btn-default,
.creator_info .uploads .btn-default,
.preview_info .rating .btn-default,
.preview_info .uploads .btn-default {
  pointer-events: none;
}
.creator_info .rating .approval-rating,
.preview_info .rating .approval-rating {
  padding-left: 5px;
  padding-right: 5px;
  width: 48px;
}
.creator_info .creator-actions button,
.preview_info .creator-actions button {
  border-radius: 3px;
  padding: 10px 16px 10px 33px;
  position: relative;
  margin: 0 4px;
}
.creator_info .creator-actions button:before,
.preview_info .creator-actions button:before {
  left: 10px;
  position: absolute;
  top: 10px;
}
.creator_info .creator-actions .text-link,
.preview_info .creator-actions .text-link {
  margin-left: 4px;
}
.creator_info .creator-actions .text-link:hover,
.preview_info .creator-actions .text-link:hover {
  text-decoration: none;
}

.creator_info {
  background: #F2F2F2;
}
.creator_info .creator-actions button {
  font-size: 13px;
}

.admin .paypal-email-cell {
  display: flex;
}
.admin .paypal-email-info li {
  margin-top: 5px;
}
.admin .history-actions {
  display: flex;
  margin-bottom: 5px;
}
.admin .history-actions .link-action {
  margin-right: 10px;
  text-transform: capitalize;
  cursor: pointer;
}
.admin .history-actions .link-action.current {
  text-decoration: none;
}

.preview_info {
  background: #000000;
  color: #FFFFFF;
}
.preview_info a {
  color: #FFFFFF;
}

.user-management-description {
  text-align: left;
}
.user-management-description ul {
  margin-left: 15px;
}
.user-management-description li {
  list-style-type: disc;
  margin-bottom: 4px;
}

.user-management-description p, .user-management-description li, .fort-user-management p, .fort-user-management li {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.user-management-description .bold, .user-management-description strong, .fort-user-management .bold, .fort-user-management strong {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.user-management-description h4, .fort-user-management h4 {
  font-size: 24px;
  margin-bottom: 7px;
}

.admin .fort-user-management .button {
  margin-top: 37px;
  margin-bottom: 13px;
}
.admin .fort-user-management .center {
  text-align: center;
}
.admin .fort-user-management .warning-danger-zone {
  text-align: left;
  margin-bottom: 24px;
}
.admin .fort-user-management .warning-danger-zone .columns:first-child {
  position: relative;
}
.admin .fort-user-management .warning-danger-zone .columns:first-child:after {
  content: " ";
  display: block;
  width: 3px;
  background: #FF931E;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -24%;
}
.admin .fort-user-management .warning-danger-zone img {
  margin-bottom: 14px;
}
.admin .fort-user-management .kinda-danger-zone {
  text-align: left;
}
.admin .fort-user-management .kinda-danger-zone img {
  display: block;
  margin: 52px auto 0;
}
.admin .fort-user-management .kinda-danger-zone .delete-info img {
  display: none;
}
.admin .confirm-action .actions-wrapper {
  justify-content: flex-start;
  align-items: center;
}
.admin .confirm-action .actions .link-action:not(:first-child) {
  margin-left: 30px;
}
.admin .confirm-action, .admin .actions-wrapper, .admin .user-team-role {
  flex-direction: column;
}
.admin .user-team-role {
  align-items: flex-start;
}

.creator-rating {
  align-items: center;
  background-color: #F2F2F2;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  left: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 200;
}
.creator-rating img {
  position: relative;
  top: 10px;
  width: 150px;
}
.creator-rating h2 {
  font-size: 32px;
}
.creator-rating .dv-star-rating {
  display: block;
  margin: 20px 0 0;
}
.creator-rating .dv-star-rating .dv-star-rating-star {
  font-size: 40px;
  margin: 0 20px;
}
.creator-rating .star-info {
  color: #8F8F8F;
  left: 14px;
  position: relative;
  margin-bottom: 50px;
}
.creator-rating .star-info span {
  margin: 0 24px;
}
.creator-rating .star-info .excellent {
  left: -10px;
  position: relative;
}
.creator-rating .finish-reviewing {
  padding: 10px 100px;
  margin-top: 20px;
}

.creator-search {
  margin-bottom: 20px;
  margin-top: 20px;
}
.creator-search .btn {
  padding: 10px;
}
.creator-search .ui_search {
  height: 24px;
}

.creator-slats {
  margin-top: 40px;
  margin-bottom: 40px;
}

.icon-card-container {
  background: #333333;
  display: flex;
  flex-wrap: wrap;
  left: 0;
  position: absolute;
  width: 100%;
}

.icon-card {
  display: flex;
  padding: 0;
  position: relative;
  visibility: visible;
  opacity: 1;
}
.icon-card .icon-view {
  min-width: 266px;
}
.icon-card .icon-view img {
  width: 200px;
  height: 200px;
  margin: 20px auto 0;
  display: block;
  outline: solid 1px #BABABA;
}
.icon-card .meta {
  background: #F2F2F2;
  padding: 0 4px;
  max-width: 53%;
}
.icon-card .meta.disabled input {
  pointer-events: none;
  opacity: 0.4;
}
.icon-card .meta label, .icon-card .meta .icon-name {
  font-size: 10px;
}
.icon-card .meta .form-control {
  padding: 4px 8px;
  border-radius: 1px;
}
.icon-card .meta .icon-name {
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}
.icon-card .tag-container {
  margin-bottom: 4px;
  position: relative;
}
.icon-card .tag-container.new-tag input {
  border: 2px solid #FF931E !important;
}
.icon-card .tag-container label {
  position: absolute;
  right: 0;
  top: 0;
}
.icon-card .tag-container .ui_close {
  color: #6D6D6D;
  font-size: 3px;
  border-radius: 50%;
  border: 1px solid #6D6D6D;
  padding: 5px;
  position: absolute;
  top: 10px;
  right: 8px;
}
.icon-card .tag-container .ui_close:before {
  position: relative;
  top: 0;
}
.icon-card .collection-link {
  bottom: 40px;
  left: 30px;
  color: #6D6D6D;
  font-weight: bold;
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  width: 200px;
  position: relative;
  top: 22px;
}
.icon-card .ui_expand {
  color: #6D6D6D;
  float: right;
  font-size: 24px;
  margin: 10px;
}
.icon-card .icon-name span {
  min-width: 33%;
}

.card-view {
  position: relative;
  background: #FFFFFF;
  border: solid 3px #CDCDCD !important;
}
.card-view.active {
  border: 3px solid #3EA9F5;
}
.card-view.active:before {
  background: #3EA9F5;
  color: #FFFFFF;
  height: 30px;
  left: 0;
  padding: 6px;
  position: absolute;
  top: 0;
  width: 30px;
}
.card-view.active .icon-view {
  background: #6D6D6D;
  opacity: 0.3;
}
.card-view.active .meta {
  pointer-events: none;
  background: #ccc;
}
.card-view.active input {
  pointer-events: none;
  opacity: 0.3;
}
.card-view.active .collection-link {
  display: none;
}
.card-view.active .license a, .card-view.active .license i {
  color: #6D6D6D;
}
.card-view.disabled {
  border: none;
  pointer-events: none;
}
.card-view.disabled .icon-view,
.card-view.disabled input {
  opacity: 0.4;
}
.card-view.disabled .ui_close {
  display: none;
}
.card-view.disabled.denied {
  visibility: hidden;
  opacity: 0;
  position: absolute;
}
.card-view.disabled.approved {
  visibility: hidden;
  opacity: 0;
  position: absolute;
}
.card-view .icon-license {
  position: relative;
}
.card-view .icon-license:before {
  position: absolute;
  top: 22px;
  left: 5px;
}
.card-view .icon-actions {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  z-index: 1;
  padding: 5px;
}
.card-view .icon-actions a {
  color: #000000;
}

.show-all-icons {
  padding: 0 !important;
  background: #333333;
}
.show-all-icons .icon-card-container {
  position: static;
  min-height: 350px;
  max-width: 1375px;
}
.show-all-icons .card-view .meta {
  min-height: 266px;
}
.show-all-icons .card-view .icon-view img, .show-all-icons .card-view .icon-view .icon-license {
  position: relative;
  z-index: 1;
}
.show-all-icons .card-view .icon-view:after {
  position: absolute;
  display: block;
  font-size: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  z-index: 0;
  content: " ";
}
.show-all-icons .card-view.disabled.denied, .show-all-icons .card-view.disabled.denied .icon-view, .show-all-icons .card-view.disabled.denied input, .show-all-icons .card-view.disabled.approved, .show-all-icons .card-view.disabled.approved .icon-view, .show-all-icons .card-view.disabled.approved input {
  visibility: visible;
  opacity: 1;
  position: relative;
}
.show-all-icons .card-view.approved .icon-view:after {
  background-color: #7AC943;
}
.show-all-icons .card-view.denied .icon-view:after {
  background-color: #F44E4E;
}

.zoom {
  fill: #FFFFFF;
}
.zoom svg {
  height: 20px;
}

.featured-item {
  background-color: #333333;
  transition: all 0.3s ease-out;
}
.featured-item.featured-icon svg {
  height: 20px;
  fill: #FFFFFF;
}
.featured-item:hover, .featured-item.active, .featured-item.active:focus {
  box-shadow: none;
  outline-color: #FFBF43;
  border-color: #FFBF43;
  background-color: #FFBF43;
  color: #FFFFFF;
}
.featured-item:hover svg, .featured-item.active svg, .featured-item.active:focus svg {
  fill: #FFFFFF;
}

.featured-collection.disabled,
.featured-collection.disabled:hover {
  opacity: 0.5;
  background: grey !important;
  border: none !important;
}
.featured-collection.disabled svg,
.featured-collection.disabled:hover svg {
  fill: #6D6D6D;
}

.moderation-completed-review .navbar.navbar-default, .moderation-completed-review .slats-sticky-header, .moderation-completed-review .container {
  max-width: 1662px;
  width: auto;
}
.moderation-completed-review .col-lg-1 {
  text-align: center;
}
.moderation-completed-review .icon-card-container .icon-overlay, .moderation-completed-review .icon-card-container .card-view {
  pointer-events: all;
}
.moderation-completed-review .icon-card-container .card-view {
  background: #333333;
}
.moderation-completed-review .navbar.navbar-default .creator-email, .moderation-completed-review .navbar.navbar-default .rating input {
  width: auto;
  max-width: 100%;
}
.moderation-completed-review .navbar.navbar-default .moderator-info {
  overflow: hidden;
  text-overflow: ellipsis;
}
.moderation-completed-review .navbar.navbar-default .saved-date input {
  width: 100%;
}
.moderation-completed-review h4 {
  color: #6D6D6D;
  margin-bottom: 8px;
}
.moderation-completed-review .icon-card p {
  line-height: 1.3em;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  white-space: pre-wrap;
  max-height: 167px;
  overflow: auto;
  padding: 8px;
}
.moderation-completed-review .pill-options {
  border: 2px solid #6D6D6D;
  margin: 4px 0 6px;
}
.moderation-completed-review .pill-options li {
  font-size: 10px;
  padding: 4px;
}

.moderator-filter {
  width: 100%;
  border-radius: 6px;
}
.moderator-filter select {
  color: #6D6D6D;
}
.moderator-filter:after {
  position: absolute;
  right: 5px;
  top: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  color: #6D6D6D;
}

.icon-moderation-menu {
  background: #BABABA;
  padding: 24px 14px;
}
.icon-moderation-menu.stuck {
  padding: 10px;
  position: fixed;
  top: 23px;
  width: 100%;
  height: 83px;
  transform: translate3d(0, -24px, 0);
  z-index: 99;
}
.icon-moderation-menu.stuck .navbar_header {
  padding-top: 8px;
}
.icon-moderation-menu button {
  padding: 10px;
}
.icon-moderation-menu .total-selected-btn {
  padding: 10px 10px 10px 31px;
  pointer-events: none;
  position: relative;
}
.icon-moderation-menu .total-selected-btn:before {
  left: 8px;
  position: absolute;
  top: 10px;
}
.icon-moderation-menu .text-link {
  color: #FFFFFF;
  padding-top: 8px;
  margin-left: 22px;
}
.icon-moderation-menu .approve-btn,
.icon-moderation-menu .deny-btn {
  padding: 10px 40px;
}
.icon-moderation-menu .approve-btn {
  background: #7AC943;
}
.icon-moderation-menu .deny-btn {
  background: #F44E4E;
}

.icon-overlay {
  background-color: #fff;
  height: 100%;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99;
}
.icon-overlay img {
  margin: 0 auto;
  display: block;
  width: 500px;
  height: 500px;
  position: relative;
  top: 200px;
  transition: outline-color 0.3s ease;
  outline-color: solid 1px #000;
}
.icon-overlay img:hover {
  background-color: #999;
  outline-color: #ccc;
}

.moderation-modal-background {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
}
.moderation-modal-background .modal-background-closer {
  background: transparent;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.moderation-modal-background .inner-modal {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 auto;
  padding: 36px 24px;
  position: fixed;
  text-align: center;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 999;
}
.moderation-modal-background .modal-content {
  padding: 40px;
  border-radius: 2px;
}
.moderation-modal-background .modal-content .modal-title {
  margin-bottom: 20px;
}
.moderation-modal-background .modal-content .review-creator {
  width: 100px;
}
.moderation-modal-background .modal-content .cancel-btn {
  margin: 20px 0;
}
.moderation-modal-background .modal-content .new-form {
  margin-bottom: 24px;
}
.moderation-modal-background .modal-content .new-form label {
  display: inherit;
}
.moderation-modal-background .modal-content textarea {
  border-radius: 2px;
  border: 1px solid #E5E5E5;
  padding: 10px;
  min-height: 80px;
  width: 100%;
}
.moderation-modal-background .modal-content textarea.error {
  border-bottom: inherit;
}
.moderation-modal-background .modal-content textarea.error + span {
  color: #F44E4E;
}
.moderation-modal-background .modal-content button {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 40px;
  margin-top: 24px;
  margin-bottom: 24px;
  min-width: 300px;
}
.moderation-modal-background .modal-content div.reject-buttons {
  display: flex;
  gap: 20px;
}
.moderation-modal-background .modal-content div.reject-buttons button {
  flex: 1;
  min-width: 0px;
  padding: 10px 0px;
  margin: 30px 0;
}
.moderation-modal-background .modal-content div.reject-buttons button:hover {
  opacity: 0.9;
}
.moderation-modal-background .modal-content div.reject-buttons button.reject {
  background-color: #F44E4E;
}

.save-for-later-modal .modal-content {
  padding: 40px 0 0;
}
.save-for-later-modal .modal-title {
  margin: 20px 0;
}
.save-for-later-modal .save-for-later-clock {
  color: #6D6D6D;
  font-size: 35px;
}
.save-for-later-modal .notes-section {
  margin-top: 20px;
  background: #F2F2F2;
  padding: 24px;
}
.save-for-later-modal .notes-section a {
  color: #8F8F8F;
  text-decoration: none;
}
.save-for-later-modal .notes-section a:hover {
  color: #8F8F8F;
  text-decoration: none;
}
.save-for-later-modal .notes-section a:before {
  letter-spacing: 10px;
  top: -3px;
}
.save-for-later-modal .notes-section .text-link {
  color: #8F8F8F;
  cursor: pointer;
}
.save-for-later-modal .notes-section .text-link:hover {
  color: #8F8F8F;
}

.user-management-modal .modal-title {
  margin: 20px 0;
}
.user-management-modal .suspend-user-flag {
  color: #6D6D6D;
  font-size: 35px;
}
.user-management-modal img {
  width: 35px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.user-management-modal .actions {
  display: flex;
}
.user-management-modal .actions .button {
  min-width: auto;
  font-size: 17px;
}
.user-management-modal .actions .button:last-child {
  margin-left: 10px;
}
.user-management-modal textarea {
  margin-top: 14px;
}
.user-management-modal .text-link {
  color: #8F8F8F;
  cursor: pointer;
}
.user-management-modal .text-link:hover {
  color: #8F8F8F;
}

.moderation-modal-background.reject-batch .modal-content .modal-title {
  font-size: 23px;
  font-weight: normal;
}
.moderation-modal-background.reject-batch .modal-content button {
  background-color: #B73B3B;
}

@media (min-width: 960px) {
  .moderation-modal-background .inner-modal {
    height: auto;
    justify-content: center;
    min-height: 400px;
    padding: 64px 98px;
    position: relative;
    width: 750px;
  }
  .moderation-modal-background .inner-modal .ui_close {
    position: relative;
    color: white;
    text-align: right;
    top: -14px;
    left: 28px;
  }
}
.moderation-navigation {
  background: #1F1F1F;
  margin-bottom: 0;
  padding: 24px 24px 0 24px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.moderation-navigation a:hover {
  text-decoration: none;
}
.moderation-navigation .logout {
  padding-top: 10px;
  text-align: right;
}
.moderation-navigation .nav-tabs {
  border: none;
}
.moderation-navigation .nav-tabs a {
  color: #FFFFFF;
  transition: all 0.3s ease-out;
}
.moderation-navigation .nav-tabs a:hover {
  color: #1F1F1F;
}
.moderation-navigation .nav-tabs .active {
  border: none;
  color: #000000;
}
.moderation-navigation .nav-tabs .presentation {
  color: #BABABA;
}
.moderation-navigation .nav-tabs .badge {
  font-size: 10px;
  margin-left: 4px;
  padding: 4px 8px;
}
.moderation-navigation .ui_logo {
  color: #FFFFFF;
}
.moderation-navigation .ui_logo:before {
  margin-right: 10px;
  position: relative;
}
.moderation-navigation .logout {
  color: #FFFFFF;
  font-weight: bold;
}

@media (min-width: 768px) {
  .moderation-navigation {
    flex-wrap: nowrap;
  }
}
.dv-star-rating {
  display: inline !important;
}
.dv-star-rating .dv-star-rating-star {
  background-color: inherit !important;
}
.dv-star-rating label {
  margin-bottom: inherit;
}

.save-for-later-slats .navbar-default .saved-for-later-date {
  display: block;
  height: 40px;
  padding-top: 8px;
  text-align: center;
}
.save-for-later-slats .navbar-default .saved-for-later-date:before {
  position: relative;
  left: -10px;
}
.save-for-later-slats .navbar-default .review-save-for-later button {
  float: right;
}

.navbar-default {
  padding: 12px;
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  align-items: center;
  border-radius: 0;
}
.navbar-default:nth-of-type(odd) {
  background: #f1f1f1;
}
.navbar-default .btn-group {
  margin: 0;
}
.navbar-default .btn-group .btn-default {
  margin: 0;
  padding: 8px 34px;
}
.navbar-default .btn-default {
  margin: 0;
}
.navbar-default .meta .btn-default {
  pointer-events: none;
}
.navbar-default .meta span.gray {
  display: block;
}
.navbar-default .creator-account-info .row {
  padding-top: 10px;
}
.navbar-default .rating span,
.navbar-default .uploads span,
.navbar-default .saved-date span {
  margin-right: 5px;
}
.navbar-default .rating button {
  padding: 9px 6px;
}
.navbar-default .approval-rating {
  width: 120px;
  padding: 6px 0;
}
.navbar-default .dv-star-rating-star {
  font-size: 10px;
}
.navbar-default .uploads input,
.navbar-default .saved-date input {
  width: 120px;
  margin-left: 3px;
  padding: 6px;
}
.navbar-default .saved-by {
  color: #aaaaaa;
  position: relative;
  margin-top: -8px;
}
.navbar-default .moderated-by:hover {
  text-decoration: none;
}
.navbar-default .creator-name {
  color: #000000;
  font-weight: bold;
}
.navbar-default .creator-email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  width: 200px;
}
.navbar-default .total-uploads {
  width: 120px;
}
.navbar-default .created-at {
  margin-left: 5px;
  width: 120px;
}
.navbar-default .review-creator,
.navbar-default .review-new-creator {
  float: right;
}
.navbar-default .actions {
  text-align: right;
}
.navbar-default .actions button {
  margin: 0 3px;
  font-size: 14px;
  border: none;
}
.navbar-default .batch-id {
  font-size: 18px;
  text-align: center;
}

.slats-sticky-header {
  position: sticky;
  background: #f2f2f2;
  display: flex;
  top: 0;
  padding: 16px;
  max-width: 1200px;
  margin: auto;
  z-index: 9;
  border: solid 1px #ccc;
}
.slats-sticky-header .slat-title {
  width: 25%;
  text-align: center;
  font-size: 14px;
}

.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.signup-styles #signup {
  height: 100%;
  color: #FFFFFF;
}
.signup-styles .sign-up-fields {
  text-align: left;
}
.signup-styles #stripe-form {
  padding: 50px 0 150px 0;
}
.signup-styles #stripe-form .form-header {
  margin-top: 20px;
}
.signup-styles #stripe-form button[type=submit] {
  margin: auto;
  display: block;
  font-size: 24px;
  width: 460px;
}
.signup-styles #stripe-form .icon-link span:before,
.signup-styles #stripe-form .show-optional-billing span:before,
.signup-styles #stripe-form .hide-optional-billing span:before {
  color: #BABABA;
}
.signup-styles .account-price {
  text-align: center;
}
.signup-styles .account-price i {
  font-size: 30px;
  display: block;
  margin: 0 24px 24px;
}
.signup-styles .account-price .price {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 30px;
}
.signup-styles .account-price .price small {
  color: #BABABA;
  font-size: 14px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.signup-styles .account-price .team-discount {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 40px;
  font-size: 18px;
}
.signup-styles .account-price .features {
  color: #FFFFFF;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  line-height: 24px;
}
.signup-styles .account-price .features .title {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.signup-styles .account-price .features li {
  margin-bottom: 0;
}
.signup-styles .account-price .help-box {
  top: 20px;
}
.signup-styles .account-price .help-box:after {
  border-bottom-color: #6D6D6D;
}
.signup-styles .account-price .help-box.at-top {
  background-color: #6D6D6D;
  color: #BABABA;
}
.signup-styles .account-price .help-box.at-top p {
  line-height: 23px;
}
.signup-styles .account-price .enterprise-contact {
  color: #6D6D6D;
}
.signup-styles .account-price .enterprise-contact {
  margin-top: 20px;
  color: #6D6D6D;
}
.signup-styles .account-price .enterprise-contact .help-container {
  left: 10px;
}
.signup-styles .account-price .call-to-action {
  text-decoration: underline;
  font-size: 16px;
  margin-left: 20px;
}
.signup-styles .payment-information {
  margin-top: 40px;
}
.signup-styles .payment-information .card-meta-container {
  padding: 0 10px;
}
.signup-styles .optional-billing {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s 0.3s ease-out;
}
.signup-styles .optional-billing.expand-to-visible {
  max-height: 1000px;
  transition: all 0.3s ease-out;
}
.signup-styles .new-form .coupon-field {
  align-items: stretch;
}
.signup-styles .new-form .coupon-field input#coupon {
  width: 70%;
}
.signup-styles .new-form .coupon-field .button {
  width: 30%;
  margin: 0;
  height: 71px;
}
.signup-styles .coupon-value p {
  margin-top: 0;
  font-size: 18px;
  color: #BABABA;
}
.signup-styles .coupon-value p:before {
  margin-right: 10px;
}
.signup-styles .footer p {
  font-size: 14px;
  color: #BABABA;
}

.noun-pro-apps-list.show-captions .app {
  font-size: 13px;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 8px;
  display: flex;
  text-align: left;
}
.noun-pro-apps-list.show-captions .app img {
  margin-right: 8px;
}
.noun-pro-apps-list.hide-captions {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 8px 6px;
}
.noun-pro-apps-list.hide-captions .column {
  width: 100%;
}
.noun-pro-apps-list.hide-captions .column > ul {
  display: flex;
}
.noun-pro-apps-list.hide-captions .caption {
  display: none;
}
.noun-pro-apps-list.hide-captions .app {
  width: 25%;
  text-align: center;
  margin-top: 17px;
}
.noun-pro-apps-list.hide-captions .app:not(:last-child) {
  margin-bottom: 9px;
}

.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.full-width-gray {
  padding-top: 0.05px;
  padding-bottom: 0.05px;
  background: #f2f2f2;
}

.full-width-black {
  background: #000000;
}

.apps-landing .container {
  -webkit-margin-collapse: unset;
}
.apps-landing .font-large {
  font-size: 1.5rem;
}
.apps-landing .font-medium {
  font-size: 1.125rem;
}
.apps-landing .font-small {
  font-size: 14px;
}
.apps-landing .text-center {
  text-align: center;
}
.apps-landing .app-landing-page-header {
  color: #fff;
  padding-top: 68px;
  padding-bottom: 81px;
  background-image: url(https://static.production.thenounproject.com/assets/bundles/static/media/apps-background@2x.dff603c7.png);
  background-size: auto 60%;
  background-position: top;
  background-repeat: no-repeat;
}
.apps-landing .app-landing-page-header video {
  max-height: 340px;
  max-width: 100%;
}
.apps-landing .app-landing-page-header .video-container {
  display: flex;
  justify-content: center;
}
.apps-landing .app-landing-page-header h1 {
  margin-bottom: 29px;
}
.apps-landing .app-landing-page-header header {
  margin-bottom: 76px;
}
.apps-landing h2 {
  margin-bottom: 1.25rem;
}
.apps-landing #main-content section:not(.footer) {
  margin: 2.8125rem auto;
}
.apps-landing .app-features, .apps-landing .price-comparison {
  padding-left: 28px;
  padding-right: 28px;
}
.apps-landing .summary, .apps-landing .price-comparison, .apps-landing .app-landing-page-header {
  padding-left: 20px;
  padding-right: 20px;
}
.apps-landing .apps-list {
  display: flex;
  height: 47px;
}
.apps-landing .apps-list li {
  max-width: 45px;
  margin-right: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.apps-landing .apps-list li img {
  width: 100%;
  height: auto;
}
.apps-landing .app-features p {
  font-size: 14px;
  margin-bottom: 22px;
}
.apps-landing .app-features .button {
  font-size: 18px;
  height: auto;
  line-height: 22px;
  max-width: 135px;
  margin: 0;
  padding: 13px 0 15px;
  letter-spacing: 2px;
}
.apps-landing .placeholder-image {
  background-color: #9c9e9e;
}
.apps-landing .general-feature {
  display: flex;
  align-items: center;
}
.apps-landing .general-feature img {
  display: inline-block;
  margin-right: 1.25rem;
}
.apps-landing .app-features .app {
  margin-bottom: 2.5rem;
}
.apps-landing .app-features .apps-list {
  margin-top: 24px;
  margin-bottom: 26px;
}
.apps-landing .price-comparison h2 {
  margin-bottom: 0;
}
.apps-landing .price-comparison p {
  margin-top: 6px;
  margin-bottom: 39px;
}
.apps-landing .subscription-features {
  background: white;
}
.apps-landing .subscription-features .row {
  text-align: center;
}
.apps-landing .subscription-features .row, .apps-landing .subscription-features li {
  border-bottom: 1px solid #f2f2f2;
  padding: 20px 0 19px;
}
.apps-landing .subscription-features li {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  max-width: 165px;
}
.apps-landing .subscription-features .ui_check-mark, .apps-landing .subscription-features .ui_check-mark:after {
  color: #3ea9f5;
}
.apps-landing .subscription-features .ui_close, .apps-landing .subscription-features .ui_close:after {
  color: #d7d7d7;
}
.apps-landing .subscription-features .not-included {
  color: #949494;
}
.apps-landing .subscription-features .ui_check-mark {
  margin-right: 0.5rem;
}
.apps-landing .show-lg > .row {
  margin-left: 0;
  margin-right: 0;
}
.apps-landing .show-sm .subscription-features:not(:first-child) {
  margin-top: 24px;
}
.apps-landing .show-sm .subscription-features .ui_close {
  margin-right: 0.5rem;
}

@media (max-width: 767px) {
  .apps-landing .app-landing-page-header {
    background-image: none;
  }
  .apps-landing .app-landing-page-header h1 {
    font-size: 24px;
    line-height: 32px;
  }
  .apps-landing .app-landing-page-header header {
    margin-bottom: 24px;
  }
  .apps-landing .app-landing-page-header .font-medium {
    font-size: 14px;
    line-height: 17px;
  }
  .apps-landing .price-comparison h2 {
    margin-bottom: 16px;
  }
}
@media (min-width: 48em) {
  .apps-landing .summary .row {
    justify-content: center;
  }
  .apps-landing .show-lg .subscription-features .row-header, .apps-landing .subscription-features.show-lg .row-header {
    text-align: left;
    padding-left: 23px;
  }
}
.app-about #app-hero,
.app-about #app-save-time,
.app-about #app-applications,
.app-about #app-common-questions {
  font-size: 24px;
  line-height: 32px;
  min-height: 500px;
  padding: 50px 0;
}
.app-about .text-over-image {
  background-color: rgba(0, 0, 0, 0.75);
  color: #FFFFFF;
  margin-left: -50px;
  margin-top: 150px;
  padding: 50px;
  position: relative;
  text-align: center;
  width: 400px;
  z-index: 1;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.app-about .text-over-image h1 {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.app-about #vinette-container {
  background-color: #000000;
  left: 50%;
  margin-left: -1280px;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 2560px;
  z-index: 0;
}
.app-about #app-hero {
  height: 650px;
  overflow: hidden;
  padding: 0;
}
.app-about .video-link-container .text-link {
  color: #FFFFFF;
}
.app-about .flex-min-height {
  justify-content: space-between;
  align-items: center;
  min-height: 400px;
}
.app-about figure.section-half {
  text-align: center;
}
.app-about .section-half {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 48%;
}
.app-about .section-half h2 {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.app-about .section-half img {
  margin: auto;
  position: relative;
}
.app-about .section-half:first-child {
  margin-right: 2%;
}
.app-about #app-save-time {
  position: relative;
  z-index: 2;
}
.app-about #app-applications {
  text-align: center;
  padding-top: 100px;
}
.app-about #app-applications .app-compatability {
  color: #FFFFFF;
}
.app-about #app-applications img {
  display: block;
  margin: 80px auto 8px;
}
.app-about #app-no-mac .centered-content {
  justify-content: center;
  align-items: center;
}
.app-about .fade-in-onload {
  animation-name: fadeInDelay;
  animation-duration: 6s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .app-about .text-over-image {
    margin-left: 0;
  }
}
@media screen and (max-width: 768px) {
  .app-about .text-over-image {
    margin: 80px auto;
  }
  .app-about .flex-min-height {
    flex-direction: column;
  }
  .app-about .section-half {
    width: 100%;
    padding: 24px;
  }
  .app-about .favorite-apps {
    flex-wrap: wrap;
    justify-content: center;
  }
  .app-about .favorite-apps li {
    padding: 8px;
  }
}

#app-common-questions {
  font-size: 24px;
  line-height: 32px;
  min-height: 500px;
  padding: 50px 0;
  text-align: center;
  padding-top: 80px;
}
#app-common-questions .subhead {
  font-size: 24px;
}
#app-common-questions .common-question {
  margin-top: 20px;
  vertical-align: top;
}
#app-common-questions .question {
  font-size: 24px;
  line-height: 32px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
#app-common-questions .answer {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  line-height: 28px;
  margin-right: 30px;
  margin-top: 10px;
  text-align: justify;
}

@media screen and (max-width: 768px) {
  #app-common-questions .common-question {
    width: 100%;
    display: block;
    padding: 24px;
  }
}
.plugin-landing #app-hero {
  overflow: visible;
}
.plugin-landing #vinette-container {
  top: 50px;
  left: 0;
  width: auto;
  background-color: transparent;
  margin-left: 0;
}
.plugin-landing .favorite-apps {
  justify-content: center;
}
.plugin-landing .favorite-apps li {
  min-width: 150px;
}
.plugin-landing .text-over-image {
  background: none;
  top: 300px;
  z-index: 10;
  padding: 0;
}
.plugin-landing .text-over-image-inner-container {
  background: #000000;
  padding: 24px;
  text-align: left;
}
.plugin-landing .works-with-these-apps {
  text-align: right;
}
.plugin-landing .office-store-button {
  text-align: center;
  display: inherit;
}
.plugin-landing .app-icon-header {
  background: #FFFFFF;
  padding: 16px;
  justify-content: center;
  align-items: center;
  color: #000000;
  border-radius: 8px 8px 0 0;
  border: solid 3px #F2F2F2;
}
.plugin-landing .app-icon-header li {
  font-weight: bold;
  height: 60px;
  display: flex;
  width: 60px;
  align-items: center;
  justify-content: center;
}
.plugin-landing .app-compatability {
  color: #000000;
}
.plugin-landing .ruler-horizontal {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAgCAYAAADkK90uAAAABGdBTUEAALGPC/xhBQAAANlJREFUaAXt2jEKg0AARNEk5DZ7Bu9/I1tDhIVfZ7f4kG/jNK7DPOx8jjGuR5dmgZemSUXuBd7neTaFYIHjOO4WfSECDFYIhGsIciACBFYIhGsIciACBFYIhGsIciACBFYIhGsIciACBFYIhGsIciACBFYIhGsIciACBFYIhGsIciACBFYIhGsIciACBFYIhGsIciACBFYIhGsIciACBFYIhGsIciACBFbYBvL9r2j+W8QX/Jr/7by50zaQeWD3tQUCWdtv+9OBbJ907cBA1vbb/nQg2yddO/ADX3cLE6Yx0xEAAAAASUVORK5CYII=);
  background-size: 50px;
  background-position: 0 0;
  position: absolute;
  top: 80px;
  height: 16px;
  width: 100%;
}
.plugin-landing .ruler-vertical {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABkCAYAAADnszKOAAAABGdBTUEAALGPC/xhBQAAAJFJREFUaAXt2r0NgCAQBlAxbnNr4P6byAj+NBYESqB5NEYKIO+45CtIEXFv7yhX+T7Txz59x2pDByBAgAABAgQIHFU+GPabz9xce3kJkkzYLMzEyeV3wAEIECBAgAABmVAm1AUECBAgQIAAAZlQJtQFBAgQIECAAAGZUCbUBQQIECBAgACBPxP23vuNfla2vAQPykIaSwnkIgIAAAAASUVORK5CYII=);
  background-size: 16px;
  background-position: 0 0;
  position: absolute;
  top: 80px;
  height: 100%;
  width: 16px;
}
.plugin-landing .ruler-vertical::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background: #1A191A;
  border: solid 1px #5E5F5E;
}

@media screen and (max-width: 768px) {
  .plugin-landing .favorite-apps li {
    min-width: inherit;
  }
  .plugin-landing .lower-cta-buttons {
    display: block;
  }
}
/* ---------------------- AVATAR CHANGE SUCCESS BANNER ---------------------- */
body.avatar-settings-page .banner.success {
  position: fixed;
  z-index: 1000;
}
body.avatar-settings-page .banner.success + * {
  margin-top: 48px;
}
body.avatar-settings-page .banner.success.avatar-change-message-dismissed {
  display: none;
}
body.avatar-settings-page .banner.success.avatar-change-message-dismissed + * {
  margin-top: 0;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.about-page #main-content {
  padding-bottom: 0;
  padding-top: 0;
}
.about-page .about-introduction {
  text-align: left;
  padding-bottom: 100px;
}
.about-page .about-introduction h1 {
  font-size: 72px;
  line-height: 86px;
  margin-bottom: 100px;
}
.about-page .section-block {
  padding-top: 100px;
}
.about-page .section-block.larger-section .container {
  min-height: 400px;
}
.about-page .section-half {
  vertical-align: top;
}
.about-page .section-headline {
  font-size: 36px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  line-height: 1.25em;
  margin-bottom: 48px;
}
.about-page #globe-image {
  bottom: 0;
  right: 0;
  position: absolute;
}
.about-page #creator-easle {
  bottom: 0;
  left: 0;
  position: absolute;
}
.about-page .press-kit {
  text-align: center;
}
.about-page .press-kit .button {
  margin-top: 50px;
}
.about-page .press-kit-icon {
  text-align: center;
  margin-bottom: 100px;
}
.about-page .subhead {
  font-size: 24px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.about-page .panel {
  padding-top: 100px;
}
.about-page .panel img {
  max-width: 100%;
  position: relative;
  top: 2px;
}
.about-page .panel img.cloud-upload {
  margin-bottom: 8em;
}
.about-page .panel .press-kit-button {
  margin-top: 4em;
  margin-bottom: 4em;
}
.about-page .press {
  padding-bottom: 100px;
}
.about-page .press-carousel {
  height: 200px;
  padding-bottom: 100px;
}
.about-page .press-carousel a {
  color: #F2F2F2;
  display: block;
  font-size: 18px;
  font-size: 1.714em;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  padding: 0 50px 50px;
  position: absolute;
  text-align: center;
  transition: all 0.5s ease;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.about-page .press-carousel a.visible {
  opacity: 1;
  pointer-events: normal;
  visibility: visible;
}
.about-page .press-carousel .dot-list {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
}
.about-page .press-carousel .dot-list li {
  display: inline-block;
  font-size: 32px;
  margin: 6px;
  color: #BABABA;
  transition: color 0.5s ease;
}
.about-page .press-carousel .dot-list li.active {
  color: #FFFFFF;
}
.about-page .press-carousel img {
  margin: 0 auto 1em auto;
}
.about-page .recent-container {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  max-height: 600px;
}
.about-page .recent-icon-list {
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  opacity: 0.05;
  text-align: center;
}
.about-page .recent-icon-list img {
  margin: 20px;
  transform: rotate(15deg);
  position: relative;
}
.about-page #masonry {
  margin-top: 6em;
  margin-bottom: 6em;
}
.about-page .item {
  background: #333333;
  padding: 3em;
  text-align: center;
  max-width: 430px;
  width: 100%;
  margin-bottom: 1em;
  margin-right: 1em;
  min-height: 250px;
}
.about-page .item:nth-child(even) {
  margin-right: 0;
}
.about-page .item a {
  color: #6D6D6D;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.about-page .item a:hover {
  color: #FFFFFF;
}
.about-page .item a:hover img {
  opacity: 1;
}
.about-page .item figcaption {
  margin: 1em auto;
  font-size: 2.571em;
  line-height: 1.2;
  font-size: 24px;
}
.about-page .item img {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.about-page .item date {
  font-size: 1.286em;
}
.about-page .team-member {
  text-align: center;
}
.about-page .team {
  background-color: #FFFFFF;
}
.about-page .team .row:not(:first-child) {
  padding-bottom: 6em;
}
.about-page .team img {
  border-radius: 50%;
  border: solid 5px #333333;
  margin-bottom: 1em;
  width: 150px;
  height: 150px;
}
.about-page .team .pup img {
  width: 100px;
  height: 100px;
  border: solid 3px #333333;
}
.about-page .team .name {
  color: #000000;
  font-size: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 0.25em;
}
.about-page .team .job-title {
  font-size: 13px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 1em;
}
.about-page .team p {
  color: #6D6D6D;
  font-size: 16px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
  text-align: left;
}
.about-page .team .social-icon {
  border-bottom: 0;
  color: #BABABA;
}
.about-page .team .social-icon:hover {
  color: #BABABA;
}
.about-page .team a {
  color: #6D6D6D;
  border-bottom: 1px solid;
}
.about-page .team a:hover {
  color: #BABABA;
}
.about-page .team .centered {
  text-align: center;
}
.about-page .team .last {
  text-align: center;
}
.about-page .team .last div {
  float: none;
  display: inline-block;
}
.about-page .investors {
  background-color: #1F1F1F;
}
.about-page .investors li {
  background-color: #000000;
  box-sizing: border-box;
  color: #FFFFFF;
  display: inline-block;
  font-size: 24px;
  height: 217px;
  margin: 0 20px 20px 0;
  padding: 20px;
  text-align: center;
  width: 217px;
  vertical-align: top;
}
.about-page .investors li ::selection {
  background-color: #FFFFFF;
  color: #000000;
}
.about-page .investors li ::moz-selection {
  background-color: #FFFFFF;
  color: #000000;
}
.about-page .investors li a,
.about-page .investors li p {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
}
.about-page .investors li:nth-child(4n) {
  margin-right: 0;
}
.about-page .investors li.empty {
  opacity: 0.28;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.allauth #account-fields {
  background-color: #FFFFFF;
}
.allauth .account-fields {
  background: none;
  margin-top: 0;
}
.allauth .account-fields p {
  padding: 0;
  font-size: 14px;
  color: #000000;
}
.allauth input[type=radio] {
  display: none;
}
.allauth .settings-save {
  background: none;
  color: #333333;
  padding: 0;
  position: absolute;
  top: 18px;
  right: 12px;
  font-size: 24px;
}
.allauth .settings-save:hover, .allauth .settings-save:focus {
  color: #000000;
}
.allauth li.an-email-address {
  position: relative;
  border-bottom: 1px solid #F2F2F2;
  padding: 25px 0px 10px 0px;
}
.allauth li.an-email-address:last-child {
  border-bottom: none;
}
.allauth li.an-email-address i {
  font-size: 20px;
  height: 55px;
  float: left;
  margin-right: 20px;
}
.allauth li.an-email-address .email-info {
  float: left;
}
.allauth li.an-email-address h3 {
  font-size: 18px;
  color: #000000;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}
.allauth li.an-email-address label {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s ease color;
  position: relative;
  margin-right: 12px;
}
.allauth li.an-email-address .verification-status {
  font-size: 13px;
  color: #BABABA;
}
.allauth li.an-email-address .verified,
.allauth li.an-email-address .unverified {
  font-size: 18px;
}
.allauth li.an-email-address .verified {
  color: #7AC943;
}
.allauth li.an-email-address .unverified {
  color: #F44E4E;
}
.allauth li.an-email-address button {
  background: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #000000;
}
.allauth li.an-email-address span {
  position: relative;
}
.allauth .primary:hover {
  color: #333333;
}
.allauth #edit-own-email h4 {
  font-size: 22px;
  max-width: 450px;
  height: 1.1em;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.allauth #edit-own-email .ui_icon {
  position: absolute;
  right: 10px;
  top: inherit;
  color: #939393;
  width: 90px;
  text-align: left;
  font-size: 14px;
  padding-bottom: 8px;
  transition: color 0.3s ease;
}
.allauth #edit-own-email .ui_icon:before {
  position: relative;
  top: 0;
  font-size: 13px;
  padding-right: 12px;
}
.allauth #edit-own-email .ui_icon:hover {
  color: #444;
}
.allauth #edit-own-email .ui_icon:first-child {
  top: 20px;
}
.allauth #edit-own-email .ui_icon:last-child {
  top: 50px;
}
.allauth #edit-own-email .primary-email h4 {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.allauth #edit-own-email .primary-email .email-remove {
  display: none;
}
.allauth #edit-own-email .primary-email .email-make-primary {
  display: none;
}
/**
 * * Used on the page shown to user after successfully upgrading from a Mac app trial subscription
 * */
.app-confirm-upgrade .launch-app {
  padding-top: 70px;
  text-align: center;
}
.app-confirm-upgrade .ui_pro-accounts {
  font-size: 70px;
}
.app-confirm-upgrade .headline {
  margin-top: 30px;
  margin-bottom: 60px;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
#app-connect {
  text-align: center;
}
#app-connect .accounts {
  margin: 0 0 50px 0;
}
#app-connect .user-avatar,
#app-connect .app-icon {
  display: inline-block;
  font-size: 24px;
  text-align: center;
  width: 220px;
  vertical-align: middle;
}
#app-connect .user-avatar img,
#app-connect .app-icon img {
  display: block;
  margin: 50px auto 20px;
}
#app-connect .user-avatar small,
#app-connect .app-icon small {
  display: block;
  font-size: 18px;
}
#app-connect .connect-arrow {
  color: #BABABA;
  font-size: 18px;
  width: 60px;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
#app-download .download-app {
  text-align: center;
}
#app-download .install-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#app-download .install-steps li {
  font-size: 14px;
  text-align: left;
}
#app-download .install-steps img {
  display: block;
  margin: 50px auto;
}
#app-download .install-steps p:first-letter {
  display: block;
  float: left;
  font-size: 48px;
  line-height: 44px;
  margin-right: 12px;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
#moderation.admin {
  background-color: #FFFFFF;
}

.admin {
  position: relative;
}
.admin #admin-sidebar {
  width: 300px;
  height: 100%;
  position: fixed;
  background-color: #333333;
  z-index: 1;
  left: -300px;
  transition: all 0.3s ease;
}
.admin #admin-sidebar h3.ui_dashboard {
  font-size: 14px;
  text-align: center;
  background-color: #1F1F1F;
  padding: 12px 0;
  color: #FFFFFF;
  margin-bottom: 30px;
}
.admin #admin-sidebar h3.ui_dashboard:before {
  left: -45px;
}
.admin #admin-sidebar li {
  margin-left: 40px;
  margin-bottom: 40px;
}
.admin #admin-sidebar li.active a, .admin #admin-sidebar li.active:before {
  color: #F2F2F2;
}
.admin #admin-sidebar li:before {
  color: #BABABA;
  margin-right: 25px;
  font-size: 22px;
  top: -5px;
}
.admin #admin-sidebar a {
  color: #BABABA;
  font-size: 20px;
}
.admin #admin-sidebar a:hover {
  color: #F2F2F2;
}
.admin #sandwich-stack {
  float: left;
  color: #000000;
  position: absolute;
  z-index: 1;
}
.admin #sandwich-stack img {
  padding: 2em 20px;
}
.admin .stuck #sandwich-stack img {
  padding: 13px;
}
.admin #admin-stats-header,
.admin .sticky-wrapper,
.admin #main-content {
  position: relative;
  transition: all 0.3s ease;
}
.admin .headline {
  color: #333333;
  text-align: left;
  margin-left: 0;
  margin-top: 40px;
}
.admin #admin-stats-header {
  background-color: #1F1F1F;
  color: #FFFFFF;
  text-align: center;
  padding: 90px 0px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.admin #admin-stats-header figure {
  font-size: 2.8em;
  margin-bottom: 20px;
}
.admin #admin-stats-header h2 {
  font-size: 3em;
}
.admin #admin-stats-header .description {
  font-size: 1.5em;
}
.admin #admin-stats-header .button {
  background-color: #333333;
  margin-top: 20px;
}
.admin .section-nav {
  width: 100%;
  overflow: hidden;
  z-index: 90;
  background-color: #333333;
}
.admin .section-nav ul {
  text-align: center;
  width: 100%;
  position: relative;
}
.admin .section-nav ul:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  content: "";
  display: block;
  z-index: -1;
}
.admin .section-nav li {
  display: inline-block;
  font-size: 1.2857em;
}
.admin .section-nav li a {
  transition: color 0.3s ease;
  padding: 1.75em 20px;
  display: block;
  width: 100%;
  height: 100%;
  color: #BABABA;
}
.admin .section-nav li a:before {
  margin-right: 0.7em;
  font-size: 0.8em;
}
.admin .section-nav li a:hover {
  color: #FFFFFF;
}
.admin .section-nav li.current {
  position: relative;
}
.admin .section-nav li.current a {
  color: #FFFFFF;
}
.admin .section-nav.stuck {
  animation: slideDown 0.3s;
  position: fixed;
  top: 95px;
  font-size: 0.85em;
}
.admin .section-nav.stuck ul {
  height: 36px;
  background-color: #333333;
}
.admin .section-nav.stuck li a {
  padding: 0.675em 20px;
}
.admin .section-nav.stuck li a::before {
  font-size: 0.85em;
}
@media (max-width: 768px) {
  .admin .section-nav.stuck {
    top: 60px;
  }
}
.admin .section-nav.stuck {
  overflow: visible;
}
.admin .section-nav.stuck #sandwich-stack img {
  padding: 0.75em 20px;
}
.admin #main-content {
  padding-top: 0;
  color: #333333;
}
.admin h2 {
  font-size: 2em;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 1em;
}
.admin h3 {
  font-size: 2em;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.admin .kinda-danger-zone, .admin .warning-danger-zone {
  border: 3px solid #F44E4E;
  background-color: #FDEBEC;
  clear: both;
  padding: 50px;
  text-align: center;
  width: 100%;
}
.admin .warning-danger-zone {
  border-color: #FF931E;
  background-color: #FDE8D2;
}
.admin .user-search-box,
.admin .icon-search-box {
  width: 400px;
  margin: auto;
}
.admin #search {
  transition: all 0.3s ease;
}
.admin .search-label {
  font-size: 24px;
}
.admin .search-label input {
  font-size: 30px;
  width: 100%;
}
.admin .search-form {
  padding: 15px 0;
}
.admin #admin-user-info,
.admin #organizations {
  padding: 25px;
  border-bottom: solid 1px #BABABA;
  clear: both;
  float: none;
}
.admin #admin-user-info img,
.admin #organizations img {
  border-radius: 50%;
  display: inline-block;
  margin-right: 1em;
}
.admin #admin-user-info figcaption,
.admin #organizations figcaption {
  display: inline-block;
  vertical-align: top;
}
.admin #admin-user-info footer,
.admin #organizations footer {
  margin-top: 24px;
}
.admin #admin-user-info footer a,
.admin #organizations footer a {
  margin-right: 1em;
}
.admin #admin-user-info footer a:before,
.admin #organizations footer a:before {
  font-size: 0.75em;
  margin-right: 0.5em;
}
.admin #admin-user-info .user-link,
.admin #organizations .user-link {
  border: none;
  font-size: 18px;
}
.admin #admin-user-info .user-link:before,
.admin #organizations .user-link:before {
  margin-right: 8px;
}
.admin .organization {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: solid 1px #BABABA;
}
.admin #icon-info img {
  border-radius: 0;
}
.admin .collection-result {
  font-size: 24px;
  padding: 50px 0;
}
.admin .team {
  border-bottom: solid 1px #BABABA;
}
.admin .no-results {
  font-size: 48px;
  text-align: center;
  margin: 50px 0;
  padding: 250px 0;
  background-color: #BABABA;
  color: #F2F2F2;
}
.admin .no-results p {
  font-size: 18px;
}
.admin .admin-list li {
  color: #333333;
  margin: 24px 0;
  padding: 0;
}
.admin .admin-list .collection-name {
  font-size: 24px;
}
.admin .admin-list .collection-owner {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
}
.admin .admin-list a {
  display: block;
  padding: 24px;
  background: #FFFFFF;
}
.admin .admin-list a:hover {
  background: #BABABA;
  color: #000000;
}
.admin .icon_image {
  background-size: 10px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADhCAYAAADRcblEAAAKv2lDQ1BJQ0MgUHJvZmlsZQAASImVlwdUU2kWx7/3XjoJLRCKlNCb9A7SawAB6SAqIYEQSggpqNgQGRzBsSAigsqIjoAoOBZABhURxcIgoGB3QAYFdRws2FCZByxhZ/fs7tn/Ofe8X26+d9+9L993zj8AkEeZfH46LAtABk8kCPPzpMfExtHxQwACCCCiYcNkCfkeoaFBANXc9e96P4CuRnXLdLrWv3//XyXHThKyAIBCUU5kC1kZKJ9Go5vFF4gAQPLRvM5KEX+aa1BWEKANotw6zZxZ7pnmxFn+fWZNRJgXyh8BIJCZTAEHADIGzdOzWRy0DlkXZQsem8tDOQJlV1YKk41yCcoLMzIyp7kNZcPEf6rD+VvNRElNJpMj4dlZZkTw5gr56czV/+fr+N/KSBfPPUMbDXKKwD8Mveqj76wmLTNQwrzE4JA55rJn1s9witg/co5ZQq+4OWYzvQPnWJwW6THHTMH8vVwRI2KOBZlhkvq89OAgSf0khoSThD7hc5zM9WXMcU5KRPQcZ3OjgudYmBYeOL/GS5IXiMMkPScLfCUzZgjne2Mx558lSonwn+8hRtIPO8nbR5LnRUrW80Wekpr89ND5/tP9JHlhdrjkXhG6weY4lRkQOl8nVPJ+QARIAWLAA2yQBAQgEWSCdCACdOANuEAI+OgnJkC3hyhplWh6CK9M/moBl5MionugpyiJzuCxzBbSrSws7QGYPpOzP/lb2sxZg2jX53NZbQA4FqJJznyOqQPA2acAUN/P53TeoNtlBwDnelhiQfZsbnrbAiwgARmgAFSABtABhsAUWAE74AzcgQ8IACHoJLFgOWCh82Sgk6wEa8FGUACKwA6wG5SDSnAI1IDj4CRoAq3gIrgCboAe0A8egEEwAl6AcfAeTEIQhIcoEBVSgTQhPcgEsoIcIFfIBwqCwqBYKAHiQDxIDK2FNkFFUDFUDh2EaqGfobPQRega1Avdg4agMegN9BlGYDKsAKvD+rA57AB7wIFwBLwM5sBZcA6cD2+Dy+Aq+BjcCF+Eb8D98CD8Ap5AACKF0BAtxBRxQLyQECQOSUYEyHqkEClFqpB6pAXpRG4hg8hL5BMGh6Fi6BhTjDPGHxOJYWGyMOsxWzHlmBpMI6YDcwszhBnHfMNSsGpYE6wTloGNwXKwK7EF2FLsEewZ7GVsP3YE+x6Hw9FwBjh7nD8uFpeKW4PbituPa8C14Xpxw7gJPB6vgjfBu+BD8Ey8CF+A34s/hr+A78OP4D8SpAiaBCuCLyGOwCPkEUoJRwnnCX2EZ4RJoixRj+hEDCGyiauJ24mHiS3Em8QR4iRJjmRAciFFkFJJG0llpHrSZdJD0lspKSltKUepJVJcqVypMqkTUlelhqQ+keXJxmQvcjxZTN5Gria3ke+R31IoFH2KOyWOIqJso9RSLlEeUz5KU6XNpBnSbOkN0hXSjdJ90q9kiDJ6Mh4yy2VyZEplTsnclHkpS5TVl/WSZcqul62QPSt7R3ZCjipnKRcilyG3Ve6o3DW5UXm8vL68jzxbPl/+kPwl+WEqQtWhelFZ1E3Uw9TL1BEFnIKBAkMhVaFI4bhCt8K4oryijWKU4irFCsVzioM0hKZPY9DSadtpJ2kDtM9K6koeSklKW5TqlfqUPigvUHZXTlIuVG5Q7lf+rEJX8VFJU9mp0qTySBWjaqy6RHWl6gHVy6ovFygscF7AWlC44OSC+2qwmrFamNoatUNqXWoT6hrqfup89b3ql9RfatA03DVSNUo0zmuMaVI1XTW5miWaFzSf0xXpHvR0ehm9gz6upablryXWOqjVrTWpbaAdqZ2n3aD9SIek46CTrFOi064zrqupu1h3rW6d7n09op6DXoreHr1OvQ/6BvrR+pv1m/RHDZQNGAY5BnUGDw0phm6GWYZVhreNcEYORmlG+416jGFjW+MU4wrjmyawiZ0J12S/Se9C7ELHhbyFVQvvmJJNPUyzTetMh8xoZkFmeWZNZq/Mdc3jzHead5p/s7C1SLc4bPHAUt4ywDLPssXyjZWxFcuqwuq2NcXa13qDdbP1axsTmySbAzZ3bam2i20327bbfrWztxPY1duN2evaJ9jvs7/joOAQ6rDV4aoj1tHTcYNjq+MnJzsnkdNJpz+dTZ3TnI86jy4yWJS06PCiYRdtF6bLQZdBV7prguuProNuWm5Mtyq3J+467mz3I+7PPIw8Uj2OebzytPAUeJ7x/ODl5LXOq80b8fbzLvTu9pH3ifQp93nsq+3L8a3zHfez9Vvj1+aP9Q/03+l/h6HOYDFqGeMB9gHrAjoCyYHhgeWBT4KMgwRBLYvhxQGLdy1+GKwXzAtuCgEhjJBdIY9CDUKzQn9ZglsSuqRiydMwy7C1YZ3h1PAV4UfD30d4RmyPeBBpGCmObI+SiYqPqo36EO0dXRw9GGMesy7mRqxqLDe2OQ4fFxV3JG5iqc/S3UtH4m3jC+IHlhksW7Xs2nLV5enLz62QWcFccSoBmxCdcDThCzOEWcWcSGQk7kscZ3mx9rBesN3ZJeyxJJek4qRnyS7JxcmjHBfOLs5YiltKacpLrhe3nPs61T+1MvVDWkhaddpUenR6QwYhIyHjLE+el8bryNTIXJXZyzfhF/AHs5yydmeNCwIFR4SQcJmwWaSAmp8usaH4O/FQtmt2RfbHlVErT62SW8Vb1bXaePWW1c9yfHN+WoNZw1rTvlZr7ca1Q+s81h1cD61PXN++QWdD/oaRXL/cmo2kjWkbf82zyCvOe7cpelNLvnp+bv7wd37f1RVIFwgK7mx23lz5PeZ77vfdW6y37N3yrZBdeL3Ioqi06MtW1tbrP1j+UPbD1Lbkbd3b7bYf2IHbwdsxsNNtZ02xXHFO8fCuxbsaS+glhSXvdq/Yfa3UprRyD2mPeM9gWVBZ817dvTv2filPKe+v8Kxo2Ke2b8u+D/vZ+/sOuB+or1SvLKr8/CP3x7sH/Q42VulXlR7CHco+9PRw1OHOnxx+qj2ieqToyNdqXvVgTVhNR619be1RtaPb6+A6cd3YsfhjPce9jzfXm9YfbKA1FJ0AJ8Qnnv+c8PPAycCT7accTtWf1ju97wz1TGEj1Li6cbwppWmwOba592zA2fYW55Yzv5j9Ut2q1VpxTvHc9vOk8/nnpy7kXJho47e9vMi5ONy+ov3BpZhLtzuWdHRfDrx89YrvlUudHp0Xrrpcbb3mdO3sdYfrTTfsbjR22Xad+dX21zPddt2NN+1vNvc49rT0Luo93+fWd/GW960rtxm3b/QH9/cORA7cvRN/Z/Au++7ovfR7r+9n3598kPsQ+7Dwkeyj0sdqj6t+M/qtYdBu8NyQ91DXk/AnD4ZZwy9+F/7+ZST/KeVp6TPNZ7WjVqOtY75jPc+XPh95wX8x+bLgD7k/9r0yfHX6T/c/u8ZjxkdeC15Pvdn6VuVt9Tubd+0ToROP32e8n/xQ+FHlY80nh0+dn6M/P5tc+QX/peyr0deWb4HfHk5lTE3xmQLmjBVA0ICTkwF4Uw0AJRb1DqivJknPeuYZQbM+f4bAf+JZXz0jOwCq3QGIzAUgCPUoB9DQy5311tOWKcIdwNbWkviHhMnWVrO1yKjzxH6cmnqrDgC+BYCvgqmpyf1TU18Po83eA6Ata9arTwuH/oMpNlDWpHbd/PoU/Kv+AuqoDMiaqlDHAAABnWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4yMjQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MjI1PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CtOC8CcAAAcXSURBVHgB7ddRbhpZGETh29ACoxBNnib73108isiLJQYs6NDJIkqt+iJZylvdOvUfjKcfP96X8/nL8G9bBJZlGZ+fn+Pnz8u43W7berzXjmmaxtvbcczX63VcLr8g2RiB135jv5/Ht2//jMPhsLHXe+4Yy+uD8z7mx+MxPj4+ENkYgb+foG9/5Pv69byx13vu8/kc67eYHRQIIJAjQMAce8kI+A3oBhBIEvAbMElfdj0BAtafAABJAgRM0pddT4CA9ScAQJIAAZP0ZdcTIGD9CQCQJEDAJH3Z9QQIWH8CACQJEDBJX3Y9AQLWnwAASQIETNKXXU+AgPUnAECSAAGT9GXXEyBg/QkAkCRAwCR92fUECFh/AgAkCRAwSV92PQEC1p8AAEkCBEzSl11PgID1JwBAkgABk/Rl1xMgYP0JAJAkQMAkfdn1BAhYfwIAJAkQMElfdj0BAtafAABJAgRM0pddT4CA9ScAQJIAAZP0ZdcTIGD9CQCQJEDAJH3Z9QQIWH8CACQJEDBJX3Y9AQLWnwAASQIETNKXXU+AgPUnAECSAAGT9GXXEyBg/QkAkCRAwCR92fUECFh/AgAkCRAwSV92PQEC1p8AAEkCBEzSl11PgID1JwBAkgABk/Rl1xMgYP0JAJAkQMAkfdn1BAhYfwIAJAkQMElfdj0BAtafAABJAgRM0pddT4CA9ScAQJIAAZP0ZdcTIGD9CQCQJEDAJH3Z9QQIWH8CACQJEDBJX3Y9AQLWnwAASQIETNKXXU+AgPUnAECSAAGT9GXXEyBg/QkAkCRAwCR92fUECFh/AgAkCRAwSV92PQEC1p8AAEkCBEzSl11PgID1JwBAkgABk/Rl1xMgYP0JAJAkQMAkfdn1BAhYfwIAJAkQMElfdj0BAtafAABJAgRM0pddT4CA9ScAQJIAAZP0ZdcTIGD9CQCQJEDAJH3Z9QQIWH8CACQJEDBJX3Y9AQLWnwAASQIETNKXXU+AgPUnAECSAAGT9GXXEyBg/QkAkCRAwCR92fUECFh/AgAkCRAwSV92PQEC1p8AAEkCBEzSl11PgID1JwBAkgABk/Rl1xMgYP0JAJAkQMAkfdn1BAhYfwIAJAkQMElfdj0BAtafAABJAgRM0pddT4CA9ScAQJIAAZP0ZdcTIGD9CQCQJEDAJH3Z9QQIWH8CACQJEDBJX3Y9gXmMaex2PNzaJUzTNNafMZbxfD639vz6966bLcsy5nnej/P5Sz2Q7QGYXuPtx+12/zPk9t7f/eJVvvv9c8yn02l8//5vN40Ntv874H28v/83rtf/N9ig+8nrt5fVvXn9z+Fw6KaxwfargOvXmMfj+fokvW+wQfeT1z/7jsfD8Mdf9x1oHyZAwPAA4rsJELB7f+3DBAgYHkB8NwECdu+vfZgAAcMDiO8mQMDu/bUPEyBgeADx3QQI2L2/9mECBAwPIL6bAAG799c+TICA4QHEdxMgYPf+2ocJEDA8gPhuAgTs3l/7MAEChgcQ302AgN37ax8mQMDwAOK7CRCwe3/twwQIGB5AfDcBAnbvr32YAAHDA4jvJkDA7v21DxMgYHgA8d0ECNi9v/ZhAgQMDyC+mwABu/fXPkyAgOEBxHcTIGD3/tqHCRAwPID4bgIE7N5f+zABAoYHEN9NgIDd+2sfJkDA8ADiuwkQsHt/7cMECBgeQHw3AQJ27699mAABwwOI7yZAwO79tQ8TIGB4APHdBAjYvb/2YQIEDA8gvpsAAbv31z5MgIDhAcR3EyBg9/7ahwkQMDyA+G4CBOzeX/swAQKGBxDfTYCA3ftrHyZAwPAA4rsJELB7f+3DBAgYHkB8NwECdu+vfZgAAcMDiO8mQMDu/bUPEyBgeADx3QQI2L2/9mECBAwPIL6bAAG799c+TICA4QHEdxMgYPf+2ocJEDA8gPhuAgTs3l/7MAEChgcQ302AgN37ax8mQMDwAOK7CRCwe3/twwQIGB5AfDcBAnbvr32YAAHDA4jvJkDA7v21DxMgYHgA8d0ECNi9v/ZhAgQMDyC+mwABu/fXPkyAgOEBxHcTIGD3/tqHCRAwPID4bgIE7N5f+zABAoYHEN9NgIDd+2sfJkDA8ADiuwkQsHt/7cMECBgeQHw3AQJ27699mAABwwOI7yZAwO79tQ8TIGB4APHdBAjYvb/2YQIEDA8gvpsAAbv31z5MgIDhAcR3EyBg9/7ahwkQMDyA+G4CBOzeX/swAQKGBxDfTYCA3ftrHyZAwPAA4rsJELB7f+3DBAgYHkB8NwECdu+vfZgAAcMDiO8mQMDu/bUPEyBgeADx3QQI2L2/9mECBAwPIL6bAAG799c+TICA4QHEdxOY1/qPx6ObwgbbL8syns/nmKZp7HY+R7c24brZut18v9/H5fJra+/33heBVcDT6TSOxwMemyMwjf1+N34DXCJneJ7nIBYAAAAASUVORK5CYII=");
}
.admin .admin-table table {
  background-color: #FFFFFF;
  width: 100%;
}
.admin .admin-table td {
  vertical-align: top;
}
.admin .admin-table td:first-child {
  padding: 8px;
}
.admin .admin-table td:last-child {
  padding: 4px 8px;
}
.admin .admin-table td textarea,
.admin .admin-table td input {
  padding: 4px 8px;
  border: solid 1px #6D6D6D;
  background: #F2F2F2;
}
.admin .admin-table td textarea {
  min-height: 100px;
  width: 100%;
}
.admin .admin-table tr {
  padding: 4px;
  border: solid 1px #BABABA;
}
.admin .admin-table td div {
  font-size: 14px;
  line-height: 24px;
  display: flex;
  justify-content: space-between;
}
.admin .admin-table td a {
  text-decoration: underline;
}
.admin .admin-table td input,
.admin .admin-table td textarea {
  width: 100%;
  font-size: 13px;
  border: solid 1px #6D6D6D;
  background-color: #F2F2F2;
}
.admin .admin-table .dot-true {
  color: #7AC943;
}
.admin .admin-table .dot-true td:last-child div:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  margin-left: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background-color: #7AC943;
}
.admin .admin-table .dot-false {
  color: #F44E4E;
}
.admin .admin-table .dot-false td:last-child div:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  margin-left: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background-color: #F44E4E;
}
.admin .admin-table .dot-warn {
  color: #FFBF43;
}
.admin .admin-table .dot-warn td:last-child div:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background-color: #FFBF43;
}
.admin .admin-table .dot-loading {
  color: #6D6D6D;
}
.admin .admin-table .dot-loading td:last-child div:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background-color: #6D6D6D;
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
.admin .admin-form {
  background: #FFFFFF;
  padding: 24px;
}
.admin .admin-form input[type=text],
.admin .admin-form input[type=password],
.admin .admin-form input[type=number],
.admin .admin-form textarea {
  border: solid 1px #6D6D6D;
  padding: 8px;
  display: block;
  width: 100%;
  margin-bottom: 24px;
}
.admin .admin-form input[type=checkbox] {
  margin-right: 0.5rem;
}
.admin .collection-preview {
  margin: 50px 0;
}
.admin .collection-preview .icon-preview {
  display: inline-block;
  margin: 0 27px 24px 0;
  background: #FFFFFF;
}
.admin .collection-preview .icon-preview img {
  vertical-align: center;
}
.admin .collection-preview .icon-preview:nth-child(6n) {
  margin-right: 0;
}
.admin .collection-preview .inactive-icon img {
  opacity: 0.3;
}
.admin .creator-notes.important-notes textarea {
  outline: solid 3px #F44E4E;
}
.admin .notes-history {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.billing-history-table {
  color: #333333;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}
.billing-history-table .header-row {
  background: #FFFFFF;
}
.billing-history-table tr {
  border-bottom: solid 1px #F2F2F2;
  color: #1F1F1F;
  margin: 0;
}
.billing-history-table tr:first-child, .billing-history-table tr.no-border {
  border-top: 0;
}
.billing-history-table tr.no-border td,
.billing-history-table tr.no-border th {
  padding-top: 2em;
  width: 40%;
}
.billing-history-table tr.no-border td:first-child,
.billing-history-table tr.no-border th:first-child {
  width: 20%;
}
.billing-history-table tr.data:nth-child(odd) {
  background: #F2F2F2;
}
.billing-history-table tr.failed-payment-row .payment-row-ammount {
  text-decoration: line-through;
}
.billing-history-table tr.failed-payment-row .payment-row-actions {
  display: none;
}
.billing-history-table th {
  color: #333333;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.billing-history-table th,
.billing-history-table td {
  display: flex;
  align-items: center;
  padding: 8px 0 8px 8px;
}
.billing-history-table th:first-child,
.billing-history-table td:first-child {
  padding-left: 12px;
}
.billing-history-table th:last-child,
.billing-history-table td:last-child {
  padding-right: 12px;
}
.billing-history-table th.payment-row-charge-id,
.billing-history-table td.payment-row-charge-id {
  display: inline-flex;
  word-break: break-word;
}
.billing-history-table .row-year {
  color: #BABABA;
}
.billing-history-table .tr-title {
  color: #BABABA;
  font-size: 18px;
  text-align: center;
}
.billing-history-table p {
  margin: 0 0 0.25em 0;
  padding: 0;
}
.billing-history-table p:last-child {
  margin-bottom: 0;
}
.billing-history-table .refunded {
  text-decoration: line-through;
}
.billing-history-table .icon-name {
  text-transform: capitalize;
}
.billing-history-table .downloaded-icon-zoom {
  background: #FFFFFF;
  border: solid 3px #F2F2F2;
  left: 18px;
  top: -272px;
  margin-left: -124px;
  opacity: 0;
  padding: 24px;
  position: absolute;
  transition: all 0.3s ease-out;
  transform: scale(0.25);
  transform-origin: center bottom;
  visibility: hidden;
  z-index: 99;
}
.billing-history-table .downloaded-icon-zoom::before {
  content: "";
  position: absolute;
  bottom: -51px;
  left: 50%;
  margin-left: -24px;
  border-color: #F2F2F2 transparent transparent transparent;
  border-width: 24px;
  border-style: solid;
}
.billing-history-table .downloaded-icon-zoom::after {
  content: "";
  position: absolute;
  bottom: -47px;
  left: 50%;
  margin-left: -24px;
  border-color: #FFFFFF transparent transparent transparent;
  border-width: 24px;
  border-style: solid;
}
.billing-history-table .downloaded-icon-container {
  cursor: zoom-in;
  text-transform: capitalize;
}
.billing-history-table .downloaded-icon-container:hover .downloaded-icon-zoom {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: all 0.3s 0.5s ease-out;
}
.billing-history-table .action-menu {
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
  position: absolute;
  right: -6px;
  text-align: left;
  top: 6px;
  width: 150px;
  z-index: 100;
}
.billing-history-table .action-menu li {
  margin: 0;
}
.billing-history-table .action-menu a, .billing-history-table .action-menu button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 4px 8px;
  text-align: left;
  color: #6D6D6D;
}
.billing-history-table .action-menu a:hover, .billing-history-table .action-menu button:hover {
  background: #333333;
  color: #FFFFFF;
}

.table-pagination-container {
  position: relative;
  background: #FFFFFF;
}
.table-pagination-container .pagination-links {
  color: #BABABA;
}
.table-pagination-container .pagination-links li {
  margin-left: 8px;
}
.table-pagination-container .pagination-links a {
  color: #BABABA;
}
.table-pagination-container .pagination-links a:hover {
  color: #000000;
}
.table-pagination-container .pagination-links a.active {
  color: #000000;
  border-bottom: solid 1px;
}
.table-pagination-container .table-list_arrow {
  color: #6D6D6D;
  cursor: pointer;
}
.table-pagination-container .table-list_arrow:hover {
  color: #000000;
}
.table-pagination-container .table-list_arrow.disabled {
  cursor: default;
  color: #F2F2F2;
  pointer-events: none;
}

.billing-page #account-type h3 {
  display: inline-block;
}
.billing-page #account-type a {
  margin-left: 1em;
}
.billing-page #account-type a:hover {
  border-bottom: solid 1px;
}
.billing-page #back-to-billing-history {
  margin-bottom: 20px;
  margin-top: 20px;
}
.billing-page #back-to-billing-history a {
  float: right;
  text-align: right;
  border-bottom: solid 1px;
  padding-bottom: 6px;
}
.billing-page #back-to-billing-history a:before {
  font-size: 13px;
}
.billing-page #back-to-billing-history a:hover {
  color: #000000;
}
.billing-page #main-content {
  padding-top: 0;
}
.billing-page #main-content h1 {
  color: #333333;
  margin-bottom: 64px;
}
.billing-page #main-content .ui_logo {
  margin: 3em 0 1.5em 0;
  color: #333333;
  padding: 5px 0;
}
.billing-page #main-content .ui_logo span {
  font-size: 16px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.billing-page #main-content #billing-history {
  font-size: 13px;
}
.billing-page #main-content .billing-icon a {
  border-bottom: 0;
}
.billing-page #main-content .billing-icon a:hover {
  color: #000000;
}
.billing-page #main-content .no-purchases {
  text-align: center;
  font-size: 1.714em;
}
.billing-page #main-content .receipt {
  background-color: #FFFFFF;
}
.billing-page #main-content .receipt header {
  background-color: #000000;
  color: #FFFFFF;
  margin-top: 0;
  text-align: left;
}
.billing-page #main-content .receipt header span {
  padding-left: 60px;
}
.billing-page #main-content .receipt .ui_logo {
  color: #FFFFFF;
}
.billing-page #main-content .receipt .ui_logo:before {
  left: 40px;
}
.billing-page #main-content .receipt:after {
  content: " ";
  display: block;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 36px;
  background: linear-gradient(#FFFFFF 0%, transparent 0%), linear-gradient(135deg, #F2F2F2 33.33%, transparent 33.33%) 0 0%, #F2F2F2 linear-gradient(45deg, #F2F2F2 33.33%, #FFFFFF 33.33%) 0 0%;
  background: -webkit-linear-gradient(#FFFFFF 0%, transparent 0%), -webkit-linear-gradient(135deg, #F2F2F2 33.33%, transparent 33.33%) 0 0%, #F2F2F2 -webkit-linear-gradient(45deg, #F2F2F2 33.33%, #FFFFFF 33.33%) 0 0%;
  background: -o-linear-gradient(#FFFFFF 0%, transparent 0%), -o-linear-gradient(135deg, #F2F2F2 33.33%, transparent 33.33%) 0 0%, #F2F2F2 -o-linear-gradient(45deg, #F2F2F2 33.33%, #FFFFFF 33.33%) 0 0%;
  background: -moz-linear-gradient(#FFFFFF 0%, transparent 0%), -moz-linear-gradient(135deg, #F2F2F2 33.33%, transparent 33.33%) 0 0%, #F2F2F2 -moz-linear-gradient(45deg, #F2F2F2 33.33%, #FFFFFF 33.33%) 0 0%;
  background-repeat: repeat-x;
  background-size: 0px 100%, 9px 27px, 9px 27px;
}
.billing-page #main-content #receipt {
  margin-bottom: 60px;
}
.billing-page #main-content #receipt h3 {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 34px;
  margin-top: 48px;
  padding: 0 40px;
}
.billing-page #main-content #receipt.purchase h3 {
  font-size: 36px;
  text-align: center;
}
.billing-page #main-content #receipt.purchase i {
  font-size: 84px;
  display: block;
  margin: auto;
  text-align: center;
}
.billing-page #main-content #receipt p {
  padding: 10px 40px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  line-height: 22px;
}
.billing-page #main-content #receipt p a {
  border-bottom: solid 1px;
}
.billing-page #main-content #receipt p a:hover {
  color: #000000;
}
.billing-page #main-content #receipt #payment-info li {
  border-top: 1px solid #F2F2F2;
  padding: 20px 0;
  margin: 20px 60px 20px 40px;
  font-size: 18px;
}
.billing-page #main-content #receipt #payment-info li:before {
  font-size: 35px;
  margin-right: 20px;
  float: left;
}
.billing-page #main-content #receipt strong {
  margin-left: 40px;
}
.billing-page #main-content #receipt #seat-info {
  margin-left: 100px;
}
.billing-page #main-content #receipt #seat-info strong {
  margin-left: 0;
}
.billing-page #main-content #receipt #billing-address {
  margin-left: 100px;
}
.billing-page #main-content #receipt #billing-address strong {
  margin-left: 0;
}
.billing-page #main-content #receipt #discount-info {
  margin-left: 100px;
}
.billing-page #main-content #receipt #discount-info strong {
  margin-left: 0;
}
.billing-page #main-content #receipt #additional-info {
  margin-bottom: 50px;
}
.billing-page #main-content #receipt .office-address {
  position: absolute;
  bottom: 10px;
}
.billing-page #main-content #receipt #vat {
  padding-top: 10px;
  display: block;
}
.billing-page #main-content #receipt .ui_credit-card {
  border-bottom: 1px solid #F2F2F2;
}
.billing-page #main-content #receipt #amount-paid {
  clear: both;
  font-size: 25px;
  margin-top: 60px;
}
.billing-page #main-content #receipt #amount-paid strong {
  margin-left: 0;
}
.billing-page #main-content #receipt #amount-paid .refunded {
  text-decoration: line-through;
}
.billing-page #main-content #receipt #amount-paid .refund-note {
  position: relative;
  top: -3px;
  font-size: 16px;
  padding: 5px 7px;
  color: #7AC943;
}
.billing-page #main-content #receipt #purchased-icon {
  margin: 40px auto;
  display: block;
}
.billing-page #main-content #receipt #download-again {
  text-align: center;
  margin: 24px 0;
}
.billing-page #main-content #receipt #download-again a {
  color: #FFFFFF;
}
.billing-page #main-content #receipt #download-again a:hover {
  background: #000000;
}
.billing-page #main-content #receipt .receipt-footer-info {
  color: #BABABA;
  font-size: 13px;
}
.billing-page #main-content #receipt .receipt-footer-info a:hover {
  border-bottom: solid 1px;
  color: #000000;
}
.billing-page #plan-type {
  visibility: hidden;
  position: absolute;
}
.billing-page .ui_important:before {
  margin-right: 0.5em;
}
.billing-page .plan-select {
  font-size: 1.714em;
}
.billing-page .plan-select .current {
  display: block;
  padding: 1em;
  text-transform: capitalize;
}
.billing-page .plan-select .current:before {
  margin-right: 1em;
}
.billing-page .plan-select .current:after {
  color: #BABABA;
  right: 1.25em;
  top: 32px;
  position: absolute;
  font-size: 0.75em;
  transition: color 0.3s ease;
}
.billing-page .plan-select .current:hover {
  border-left: 2px solid #000000;
}
.billing-page .plan-select .current:hover:after {
  color: #000000;
}
.billing-page .plan-select .current i {
  margin-right: 1.25em;
}
.billing-page .plan-select .current small {
  font-size: 0.5em;
}
.billing-page .plan-select .current .current-plan {
  visibility: visible;
}
.billing-page .plan-select .current .current-plan:before {
  margin-right: 1em;
}
.billing-page .plan-select .current .change-text {
  visibility: hidden;
}
.billing-page .plan-select .current .change-text:before {
  margin-right: 1em;
}
.billing-page .plan-select li.visible {
  background-color: #F2F2F2;
}
.billing-page .plan-select li.visible .current-plan {
  visibility: hidden;
  display: none;
}
.billing-page .plan-select li.visible .change-text {
  visibility: visible;
  color: #FFFFFF;
}
.billing-page .plan-select li.visible .ui_down-triangle:after,
.billing-page .plan-select li.visible i:before {
  color: #FFFFFF;
}
.billing-page .plan-select li.visible ul {
  max-height: 500px;
}
.billing-page .plan-select li.visible .ui_down-triangle:after {
  transform: rotate(180deg);
}
.billing-page .plan-select li ul {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  z-index: 10;
  background: #FFFFFF;
  transition: all 0.3s ease;
  border: none;
}
.billing-page .plan-select li ul .my-plan {
  background-color: #F2F2F2;
}
.billing-page .plan-select li ul .my-plan a {
  cursor: normal;
  text-indent: -8px;
  border-left: 8px solid;
}
.billing-page .plan-select li ul .my-plan a:hover {
  color: inherit;
  background-color: #F2F2F2;
}
.billing-page .plan-select li ul .my-plan a span {
  visibility: visible;
}
.billing-page .plan-select li ul li {
  border-top: solid 1px #F2F2F2;
}
.billing-page .plan-select li ul li:last-child {
  border-bottom: none;
}
.billing-page .plan-select li ul li:first-child {
  border-top: none;
}
.billing-page .plan-select li ul a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 1em;
  transition: all 0.3s ease;
}
.billing-page .plan-select li ul a span {
  font-size: 0.5em;
  visibility: hidden;
  margin-left: 1em;
}
.billing-page .plan-select li ul a small {
  float: right;
  font-size: 0.5em;
  text-align: right;
  line-height: 3em;
}
.billing-page .plan-select li ul a:before {
  margin-right: 1em;
}
.billing-page .plan-select li ul a:hover {
  color: #FFFFFF;
}
.billing-page .plan-select li ul a:hover span {
  visibility: visible;
}
.billing-page .plan-select li ul:last-child {
  border: none;
}
.billing-page .card-info ul:nth-child(2) {
  margin-top: 2em;
}
.billing-page .upgrade_modal {
  z-index: 999;
  background-color: #FFFFFF;
  width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  transition: background-color 1s ease;
  color: #FFFFFF;
  text-align: center;
}
.billing-page .upgrade_modal #upgrade_modal_color {
  position: fixed;
  left: 0;
  width: 100%;
  min-height: 100%;
}
.billing-page .upgrade_modal i {
  margin: 0 3em;
}
.billing-page .upgrade_modal i:before {
  font-size: 144px;
}
.billing-page .upgrade_modal h3 {
  max-width: 500px;
  margin: 1em auto;
  font-size: 2.4em;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.billing-page .upgrade_modal p {
  margin: 0;
}
.billing-page .upgrade_modal button {
  width: 300px;
  margin-bottom: 1em;
  background-color: #FFFFFF;
}
.billing-page .upgrade_modal .inner {
  position: relative;
  top: 50%;
  left: 50%;
  min-height: 500px;
  transform: translate(-50%, 50%, 0);
}
.billing-page .upgrade_modal .close-button.ui_close {
  position: absolute;
  top: 1em;
  right: 1em;
}
.billing-page .page-header .upgrade:hover {
  border-bottom: solid 1px;
}
.billing-page #receipt #main-content .container {
  padding-top: 0;
}
.billing-page .delete-card-container {
  text-align: left;
}
.billing-page .delete-card-container p {
  margin-top: 0;
}
.billing-page .delete-card-link {
  display: block;
  text-decoration: underline;
  line-height: 3em;
  transition: all 0.3s ease;
}
.billing-page .delete-card-link.confirm {
  text-align: center;
  text-decoration: none;
  background: #F44E4E;
  color: #FFFFFF;
  padding: 5px 0;
  font-size: 20px;
}
.billing-page .toggle-billing-history {
  display: block;
  text-align: center;
  padding: 36px 0;
}
.billing-page .toggle-billing-history a {
  display: inline-block;
  border-bottom: solid 1px;
}
.billing-page .toggle-billing-history a:hover {
  color: #000000;
}

@media print {
  .billing-page #main-content #receipt {
    width: 100%;
    margin: 0;
  }
  .billing-page #main-content #receipt h3 {
    margin-top: 0;
  }
  .billing-page #payment-info li {
    margin-bottom: 0;
    margin-top: 0;
  }
  .billing-page #back-to-billing-history,
  .billing-page #additional-info,
  .billing-page .receipt-footer-info,
  .billing-page #download-again {
    display: none;
  }
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
section#earn-money {
  height: auto;
  color: #333333;
}
section#earn-money #svg-earn-money {
  max-width: 150px;
  margin-top: 38px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
section#earn-money a {
  margin-top: 0;
}
section#earn-money .container h2 {
  padding-bottom: 8px;
}
section#earn-money .container p {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
section#earn-money .container > p {
  max-width: 562px;
  margin: 0 auto 43px;
}
section#earn-money .columns h3 {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
}
section#earn-money .columns p, section#earn-money .columns h3 {
  text-align: left;
  line-height: 24px;
}

.handbook-content section#earn-money h2 {
  display: none;
}
.handbook-content section#earn-money .container {
  width: auto;
}

.creators section.section-block {
  position: relative;
  width: 100%;
  height: 500px;
  padding: 50px;
  text-align: center;
  transition: max-height 0.3s ease;
}
.creators section.section-block .half {
  float: none;
  height: 100%;
  min-height: 500px;
  position: relative;
}
.creators section.section-block .half p {
  margin: 0;
}
.creators section.section-block .half-inner {
  max-width: 570px;
  padding: 100px;
}
.creators section.section-block h2 {
  font-size: 24px;
  line-height: 1.35em;
  max-width: 740px;
  padding: 50px;
  margin: auto;
}
.creators .curation-note {
  margin: 40px -50px 0px;
}
.creators .curation-note .curation-note-inner {
  max-width: 700px;
  color: #eee;
  font-size: 18px;
  margin: 0px auto;
  text-align: left;
}
.creators .main-points {
  max-width: 940px;
  margin: 100px auto;
}
.creators .main-points .point {
  color: #BABABA;
  display: inline-flex;
  text-align: left;
  padding-right: 10px;
  width: 33%;
}
.creators .main-points .description {
  display: inline-block;
}
.creators .main-points img {
  background: #6D6D6D;
  border-radius: 50%;
  display: inline-block;
  margin-right: 24px;
  min-width: 75px;
}
.creators .main-points .point-headline {
  font-size: 18px;
}
.creators .main-points .point-body {
  font-size: 14px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.creators .button-container {
  text-align: center;
  width: 100%;
}
.creators .button-container a {
  display: inline-block;
  margin-bottom: 0;
  margin-right: 24px;
  vertical-align: top;
}
.creators .handbook.button.button-icon[class*=ui_] span {
  padding: 24px 13px 24px 80px;
}
.creators .learn-about-uploading-link {
  font-size: 18px;
}
.creators #introduction {
  background-image: url(https://static.production.thenounproject.com/assets/bundles/static/media/creators_icon_pattern.a56850d6.png);
  background-repeat: repeat-x;
  background-size: 477px 656px;
  height: auto;
  padding-bottom: 80px;
  background-position: 0px -10%;
}
.creators #introduction .headline {
  margin: 20px auto 72px auto;
}
.creators #make-your-mark {
  background-color: #F2F2F2;
  position: relative;
  color: #333333;
}
.creators #make-your-mark:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -46px;
  border: 24px solid transparent;
  border-top-color: #F2F2F2;
  width: 24px;
  height: 24px;
  left: 50%;
  margin-left: -24px;
  z-index: 1;
}
.creators #svg-moon {
  max-width: 500px;
}
.creators #upload-your-designs {
  color: #333333;
}
.creators #upload-your-designs #svg-upload {
  margin-top: 100px;
  max-width: 740px;
}
.creators #upload-your-designs #svg-upload #rocket {
  transform: translate(-170%, 0);
  transition: all ease 0.3s 0.2s;
}
.creators #upload-your-designs #svg-upload #right-lines {
  transform: scaleX(0.1);
  transform-origin: left center;
  transition: all ease 0.3s 0.2s;
}
.creators #upload-your-designs.in-view #svg-upload #rocket {
  transform: translate(0, 0);
}
.creators #upload-your-designs.in-view #svg-upload #right-lines {
  transform: scaleX(1);
}
.creators #license-them {
  color: #F2F2F2;
}
.creators #license-them h2 {
  padding-top: 0;
}
.creators #svg-license {
  max-width: 242px;
}
.creators #license-details {
  text-align: left;
  padding: 0;
}
.creators #license-details:not(.hidden) {
  display: inline-flex;
}
.creators #license-details .half-inner {
  min-height: 550px;
}
.creators #license-details svg {
  max-width: 100px;
  max-height: 100px;
}
.creators #license-details p {
  font-size: 24px;
  margin-top: 50px;
  padding: 0;
}
.creators #license-details .creative-commons {
  background-color: #6D6D6D;
  color: #FFFFFF;
}
.creators #license-details .creative-commons:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -24px;
  border: 24px solid transparent;
  border-right-color: #6D6D6D;
  right: 0;
  width: 24px;
  height: 24px;
  z-index: 1;
}
.creators #license-details .creative-commons .half-inner {
  float: right;
}
.creators #license-details .public-domain {
  background-color: #BABABA;
  color: #FFFFFF;
}
.creators #license-details .public-domain:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -24px;
  border: 24px solid transparent;
  border-left-color: #BABABA;
  left: 0;
  width: 24px;
  height: 24px;
  z-index: 1;
}
.creators #curation {
  color: #000000;
}
.creators #curation svg {
  width: 150px;
  margin-top: 50px;
}
.creators #curation h2 {
  max-width: 800px;
}
.creators #earn-money {
  background: #F2F2F2;
}
.creators #breakdown {
  height: 950px;
  color: #333333;
}
.creators #breakdown .columns {
  text-align: left;
}
.creators #breakdown .container {
  min-height: 500px;
}
.creators #breakdown h3 {
  font-size: 24px;
}
.creators #breakdown h4 {
  color: #6D6D6D;
  font-size: 18px;
  font-weight: 500;
  margin: 24px 0 6px;
}
.creators #breakdown small {
  color: #6D6D6D;
}
.creators #breakdown svg {
  display: block;
  height: 100px;
  margin: 0 0 50px 0;
  width: 100px;
}
.creators #breakdown h2 {
  padding-top: 20px;
}
.creators #breakdown ul {
  padding: 24px 0;
}
.creators #breakdown li {
  color: #6D6D6D;
  font-size: 18px;
  line-height: 1.5em;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 24px;
}
.creators #breakdown footer {
  position: absolute;
  bottom: -24px;
  right: 0;
  font-size: 13px;
}
.creators #breakdown footer span:before {
  content: "";
  display: inline-block;
  position: relative;
  top: 5px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 48px;
}
.creators #breakdown footer .np-share:before {
  background-color: #BABABA;
}
.creators #breakdown footer .creator-share:before {
  background-color: #333333;
}
.creators #getting-paid {
  color: #F2F2F2;
}
.creators #getting-paid p {
  font-size: 18px;
  max-width: 530px;
  margin: auto;
}
.creators #getting-paid h2 {
  max-width: 940px;
  padding-top: 30px;
}
.creators #svg-paid {
  max-height: 200px;
  margin-top: 16px;
}
.creators #creators-footer {
  background-color: #1F1F1F;
  min-height: 0px;
  padding: 100px 0px 80px;
}
.creators .toggle-something {
  margin-top: 24px;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
#developers .header-icon {
  font-size: 100px;
  display: block;
  text-align: center;
  margin: auto;
}
#developers #developers-navigation {
  position: relative;
  height: 100%;
  padding-top: 16px;
}
#developers #developers-navigation .current a {
  background: #333333;
  cursor: default;
}
#developers #developers-navigation li {
  margin-bottom: 5px;
}
#developers #developers-navigation a {
  display: inline-block;
  padding: 20px 0;
  width: 100%;
  color: #FFFFFF;
  font-size: 18px;
  text-align: center;
  background: #BABABA;
  transition: all 0.2s ease;
}
#developers #developers-navigation a:hover {
  background: #333333;
}
#developers .bread-crumbs a {
  padding: 20px 0;
  font-size: 18px;
  display: inline-block;
  color: #6D6D6D;
}
#developers .bread-crumbs a:hover {
  color: #333333;
}
#developers #main-content {
  background: #F2F2F2;
  padding: 0;
}
#developers #main-content .pricing-container {
  margin-top: 16px;
}
#developers #main-content .pricing-container article p {
  color: #333333;
  font-size: 15px;
}
#developers #main-content h1 {
  font-size: 36px;
  line-height: 42px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#developers #main-content .pricing-container p {
  font-size: 17px;
}
#developers #main-content form.create-app {
  background: #333333;
  min-height: 300px;
  color: #FFFFFF;
  padding: 50px;
  margin-bottom: 50px;
}
#developers #main-content form.create-app .error input::-webkit-input-placeholder, #developers #main-content form.create-app .error textarea::-webkit-input-placeholder {
  color: #F44E4E;
}
#developers #main-content form.create-app .error input:-moz-placeholder, #developers #main-content form.create-app .error textarea:-moz-placeholder {
  color: #F44E4E;
}
#developers #main-content form.create-app .error input::-moz-placeholder, #developers #main-content form.create-app .error textarea::-moz-placeholder {
  color: #F44E4E;
}
#developers #main-content form.create-app .error input:-ms-input-placeholder, #developers #main-content form.create-app .error textarea:-ms-input-placeholder {
  color: #F44E4E;
}
#developers #main-content form.create-app .error .icon-label {
  color: #F44E4E;
}
#developers #main-content form.create-app .ui_important.error {
  display: block;
  margin: 20px 0;
  color: #F44E4E;
}
#developers #main-content #id_description {
  height: 200px;
}
#developers #main-content .settings-save {
  background: #7AC943;
}
#developers .app-detail .application {
  padding: 50px 0;
  margin-bottom: 50px;
}
#developers .application {
  background-color: #FFFFFF;
}
#developers .application .application-name {
  margin-left: 0;
}
#developers .application .application-name h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
#developers .application .status {
  text-align: right;
}
#developers .application .status p {
  padding: 0px;
  margin: 0px;
}
#developers .application .status .renew-date,
#developers .application .status .call-limit {
  font-size: 13px;
  color: #BABABA;
}
#developers .application .usage {
  font-size: 18px;
  line-height: 15px;
  margin-bottom: 14px;
}
#developers .application .usage i {
  width: 18px;
  height: 18px;
  margin-top: 18px;
  display: inline-block;
  margin-left: 0.5em;
  border-radius: 50%;
  position: relative;
  background: #F2F2F2;
}
#developers .application .usage i.good {
  background: #7AC943;
}
#developers .application .usage i.bad {
  background: #FF931E;
}
#developers .application .usage i.ugly {
  background: #F44E4E;
}
#developers .application .usage i:hover {
  overflow: visible;
}
#developers .application .usage i:hover .message {
  opacity: 1;
  width: 360px;
  color: #6D6D6D;
}
#developers .application .usage i:hover .message p {
  opacity: 1;
  transition: opacity 0.1s ease;
}
#developers .application .usage .message {
  display: block;
  position: absolute;
  right: 0px;
  top: -30px;
  opacity: 0;
  transition: opacity 0.3s ease, width 0.2s ease, color 0.3s ease;
  z-index: 10;
  width: 0px;
  height: 80px;
  color: transparent;
  overflow: hidden;
}
#developers .application .usage .message p {
  opacity: 0;
  font-size: 18px;
  background: #F2F2F2;
  transition: opacity 0.3s 0.3s ease;
  top: 50%;
  width: 300px;
  display: block;
  text-align: left;
  padding: 26px;
}
#developers .application .usage .message p:after {
  content: "";
  border: solid transparent 40px;
  border-left-color: #F2F2F2;
  height: 0px;
  width: 0px;
  position: absolute;
  right: -20px;
  min-height: 0px;
  line-height: 0;
  top: 0;
}
#developers .application h2 {
  font-size: 24px;
  border-top: solid 1px #BABABA;
  padding: 1em 0;
  margin: 1em 0;
}
#developers .application h2 em {
  font-size: 14px;
  color: #BABABA;
  font-style: normal;
}
#developers .application #usage h2 em {
  display: none;
}
#developers .application #usage h2 em.active {
  display: inline-block;
}
#developers #applications {
  background: #F2F2F2;
}
#developers #applications .application {
  margin-bottom: 16px;
}
#developers #applications a {
  background: #FFFFFF;
  display: inline-block;
  padding: 50px;
  width: 100%;
}
#developers #applications a:hover {
  outline: 1px solid #BABABA;
}
#developers #api-key-form small#test-your-keys {
  font-size: 13px;
  color: #6D6D6D;
}
#developers #api-key-form small#test-your-keys a {
  color: #6D6D6D;
  text-decoration: underline;
}
#developers #api-key-form .fat-input {
  margin-top: 6px;
  margin-bottom: 12px;
}
#developers #api-key-form input {
  background: #F2F2F2;
}
#developers #api-key-form .how-do-i-use {
  float: right;
  display: inline-block;
}
#developers #api-key-form label em {
  font-style: normal;
  color: #BABABA;
}
#developers #buttonList {
  text-align: right;
  width: 200px;
  float: right;
  font-size: 14px;
  line-height: 24px;
}
#developers #buttonList li {
  display: inline-block;
}
#developers #buttonList li button {
  color: #BABABA;
}
#developers #buttonList li:hover button {
  color: #6D6D6D;
}
#developers #buttonList li.active button {
  color: #333333;
  pointer-events: none;
}
#developers #cumulative-usage {
  clear: both;
  position: relative;
}
#developers #cumulative-chart,
#developers #usage-chart {
  width: 628px;
  margin-left: -60px;
}
#developers #cumulative-chart em,
#developers #usage-chart em {
  position: absolute;
  left: 0px;
  top: 110px;
  color: #F44E4E;
  font-style: normal;
  font-size: 10px;
}
#developers #cumulative-chart svg,
#developers #usage-chart svg {
  min-height: 300px;
  width: 100%;
}
#developers #cumulative-chart svg .legendWrap,
#developers #cumulative-chart svg .domain,
#developers #cumulative-chart svg .tick line,
#developers #cumulative-chart svg .nv-y .nv-axis,
#developers #cumulative-chart svg .y1.axis,
#developers #usage-chart svg .legendWrap,
#developers #usage-chart svg .domain,
#developers #usage-chart svg .tick line,
#developers #usage-chart svg .nv-y .nv-axis,
#developers #usage-chart svg .y1.axis {
  display: none;
}
#developers #cumulative-chart svg text,
#developers #usage-chart svg text {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  font-weight: 100;
}
#developers #cumulative-chart .not-enough-data-yet,
#developers #usage-chart .not-enough-data-yet {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 24px;
  color: #BABABA;
  left: 0px;
  top: 220px;
}
#developers #main-content h1#api-pricing-title {
  margin: 1em;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}
#developers #cumulative-chart svg .x.axis {
  display: none;
}
#developers .pricing-container {
  background: #FFFFFF;
  padding: 30px;
}
#developers .pricing-container h1 {
  margin-bottom: 1em;
}
#developers .header-image {
  display: block;
  margin: auto;
  width: 100px;
}
#developers #api-pricing-description {
  border-bottom: solid 1px #F2F2F2;
  padding-bottom: 40px;
  margin-bottom: 40px;
  color: #333333;
}
#developers table {
  font-size: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-top: 40px;
  border-bottom: solid 1px #F2F2F2;
  padding-bottom: 40px;
  margin-bottom: 40px;
}
#developers table th {
  padding: 2em;
  color: #333333;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#developers table th.buttoned {
  padding: 10px;
}
#developers table th:not(:first-child) {
  border: solid 2px #BABABA;
  width: 250px;
  color: #333333;
}
#developers table th:nth-child(3) {
  background: #F2F2F2;
}
#developers table tr:first-child th,
#developers table tr:last-child th {
  color: #333333;
  border: none;
  background: none;
}
#developers table small {
  font-size: 10px;
  color: #6D6D6D;
  display: block;
  margin-top: 1em;
}
#developers table th.label.left {
  padding-left: 0;
}
#developers article {
  width: 50%;
  float: left;
  min-height: 313px;
  padding-right: 50px;
  margin-bottom: 50px;
}
#developers article.secondary {
  width: 80%;
  float: none;
  min-height: inherit;
}
#developers article.secondary img {
  float: left;
  margin-right: 25px;
}
#developers article.secondary p {
  margin-left: 60px;
}
#developers article h3 {
  font-size: 22px;
  margin-top: 1em;
}
#developers .as-used-by {
  background: #1F1F1F;
  color: #FFFFFF;
  padding: 50px;
  margin-left: 240px;
  margin-bottom: 80px;
}
#developers .as-used-by h1 {
  border: none;
  margin-bottom: 40px;
  color: #F2F2F2;
}
#developers .as-used-by img {
  display: block;
  margin: auto;
  height: 110px;
}
#developers #get-started {
  clear: both;
  display: block;
  text-align: center;
  margin: 0 auto;
  top: -60px;
  position: relative;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.facebook-connect-option .account-fields {
  padding-bottom: 1px;
}
.facebook-connect-option .account-fields p {
  text-align: center;
  font-size: 1.5em;
  padding: 0 25px;
}
.facebook-connect-option .account-fields button.connect-disconnect-facebook {
  width: 70%;
}
.facebook-connect-option .account-fields a.connect-disconnect-facebook {
  width: 335px;
  margin: 0 auto;
  display: block;
}
.facebook-connect-option .account-fields a.text-link {
  text-align: center;
  margin: auto;
  display: inline-block;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.flat-page .panel-header {
  text-align: center;
  color: #4d4d4d;
  padding: 40px 0;
}
.flat-page .panel-header .glyph {
  font-size: 4em;
  color: #4d4d4d;
  margin-bottom: 0.3em;
}
.flat-page .panel-header .glyph span {
  max-width: 125px;
}
.flat-page .panel-header h1 {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #4d4d4d;
  font-size: 3em;
}
.flat-page .panel-nav {
  background: #FFFFFF;
  padding: 4em 0 0 0;
  position: relative;
  z-index: 0;
}
.flat-page .panel-nav .tabnav {
  margin: 0 auto;
}
.flat-page .panel-nav .tabnav a {
  color: #FFFFFF;
}
.flat-page .tab-content {
  color: #333333;
}
.flat-page .tab-content > .tab-pane {
  display: none;
}
.flat-page .tab-content > .active {
  display: block;
}
.flat-page .panel-content {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  background: #FFFFFF;
  padding: 2.8em 0;
  font-size: 1.2em;
  color: #777;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.flat-page .panel-content hr {
  width: 860px;
  position: relative;
  left: -150px;
  height: 1px;
  background-color: #ddd;
}
.flat-page .panel-content h1 {
  font-size: 3em;
  margin: 1em 0 0.8em 0;
  color: #4d4d4d;
}
.flat-page .panel-content h2 {
  font-size: 2.1em;
  margin: 1em 0 0.4em 0;
  color: #4d4d4d;
}
.flat-page .panel-content h2 i {
  margin-left: -70px;
  margin-right: 20px;
}
.flat-page .panel-content h3 {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 1.1em;
  margin: 1.75em 0 0.8em 0;
  color: #4d4d4d;
}
.flat-page .panel-content h4 {
  font-size: 1.2em;
  margin: 1em 0 0.8em 0;
}
.flat-page .panel-content p {
  line-height: 1.5em;
  margin-bottom: 0.4em;
  font-size: 18px;
}
.flat-page .panel-content a {
  text-decoration: none;
  color: #000;
  border-bottom: solid 1px;
}
.flat-page .panel-content small {
  font-size: 1em;
}
.flat-page .panel-content ul, .flat-page .panel-content ol {
  padding: 0;
  margin: 0 0 10px 25px;
}
.flat-page .panel-content ul {
  list-style-type: disc;
}
.flat-page .panel-content li {
  list-style-type: disc;
  line-height: 1.6em;
}
.flat-page .panel-content caption {
  color: #b3b3b3;
}
.flat-page .panel-content blockquote {
  padding: 0 0 0 40px;
  margin: 2em 0 3em 0;
  font-style: italic;
  position: relative;
  font-size: 1.15em;
}
.flat-page .panel-content blockquote:before {
  position: absolute;
  left: 0;
  top: 1px;
}
.flat-page .panel-content blockquote cite {
  margin-top: 1.5em;
  display: block;
  font-size: 0.75em;
}
.flat-page .panel-content hr {
  margin: 3em 0;
}
.flat-page .panel-content h1.icon-ui_network:before {
  left: -0.3em;
  top: -0.1em;
}
.flat-page #api-updates input {
  width: 100%;
  border-bottom: 1px solid #BABABA;
  font-size: 3em;
}
.flat-page #api-updates label {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #6D6D6D;
  display: block;
  margin-bottom: 20px;
  margin-top: 5px;
  padding-left: 10px;
}
.flat-page #api-updates label:before {
  left: -5px;
}
.flat-page #api-updates button:before {
  left: -10px;
  top: -3px;
}

@media (max-width: 768px) {
  .flat-page #legal-terms #main-content .container {
    padding: 24px;
    overflow-wrap: break-word;
  }
  .flat-page #legal-terms .tabnav li {
    width: 100%;
  }
  .flat-page #legal-terms .tabnav a {
    display: block;
    margin: 2px;
  }
}
#icon-licenses {
  scroll-margin-top: 100px;
}
@media (max-width: 767px) {
  #icon-licenses {
    scroll-margin-top: 0px;
  }
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
#forgot-password {
  background-color: #1F1F1F;
  text-align: center;
}
#forgot-password .account-fields ul {
  border-top: none;
  border-bottom: none;
}
#forgot-password #id_password {
  padding-right: 93px;
}
#forgot-password #get-started,
#forgot-password #logout-form {
  padding-top: 150px;
}
#forgot-password .new-form {
  margin: auto;
  float: none;
  padding-top: 17px;
  text-align: center;
}
#forgot-password .icon-label {
  overflow: visible;
  opacity: 1;
  top: 40px;
  position: relative;
}
#forgot-password .ui_important.error {
  left: 0;
}
#forgot-password .error:before {
  float: left;
  margin-right: 10px;
  top: 2px;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
#handbook #main-content {
  background: #FFFFFF;
  overflow-x: hidden;
}
#handbook .page-header-handbook {
  background-color: #1F1F1F;
  padding: 60px;
}
#handbook .page-header-handbook.cover {
  text-align: center;
  padding-bottom: 18px;
}
#handbook .page-header-handbook .headline {
  margin-top: 24px;
}
#handbook .page-header-handbook .subhead {
  color: #BABABA;
}
#handbook .header-headline {
  color: #FFFFFF;
  font-size: 48px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
#handbook .header-subhead {
  color: #BABABA;
  font-size: 30px;
  margin-bottom: 12px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
#handbook .header-subhead a {
  color: #BABABA;
}
#handbook .header-subhead a:hover {
  border-bottom: solid 1px;
}
#handbook .handbook-table-of-contents {
  background-color: #6D6D6D;
  color: #F2F2F2;
  padding: 50px 0;
}
#handbook .handbook-table-of-contents li {
  font-size: 18px;
}
#handbook .handbook-table-of-contents [class*=ui_]:before {
  padding-right: 24px;
}
#handbook .handbook-table-of-contents a {
  background: #333333;
  color: #F2F2F2;
  display: block;
  padding: 24px;
  margin-bottom: 2px;
}
#handbook .handbook-table-of-contents a:hover {
  background: #000000;
  color: #FFFFFF;
}
#handbook .contents-chapter-head {
  text-align: center;
}
#handbook .contents-chapter-head a {
  background-color: #1F1F1F;
  display: block;
  font-size: 24px;
  padding: 50px 0;
}
#handbook .contents-chapter-head a:hover {
  background-color: #000000;
  color: #FFFFFF;
}
#handbook .contents-chapter-head [class*=ui_]:before {
  color: #FFBF43;
  display: block;
  font-size: 45px;
  padding: 0;
  margin: 0 0 12px 0;
}
#handbook .handbook-inpage-navigation {
  color: #6D6D6D;
  font-size: 14px;
  padding-top: 50px;
}
#handbook .handbook-inpage-navigation [class*=ui_]:before {
  margin-right: 18px;
}
#handbook .handbook-inpage-navigation .stuck {
  position: fixed;
  top: 85px;
}
#handbook .handbook-inpage-navigation a {
  color: #BABABA;
  display: block;
  padding: 0 0 12px 0;
}
#handbook .handbook-inpage-navigation a:hover {
  color: #1F1F1F;
}
#handbook .handbook-inpage-navigation .active a {
  color: #000000;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#handbook .handbook-content {
  background-color: #FFFFFF;
  color: #6D6D6D;
  line-height: 34px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#handbook .handbook-content p {
  font-size: 18px;
  line-height: 1.8em;
}
#handbook .handbook-content .disclaimer {
  font-size: 14px;
  display: block;
  line-height: 1.35em;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#handbook .handbook-content .disclaimer a:hover {
  color: #000000;
}
#handbook .handbook-content figcaption {
  font-size: 14px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#handbook .handbook-content figure {
  margin-bottom: 30px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}
#handbook .handbook-content .text-link {
  padding: 0;
  line-height: 1.35em;
}
#handbook .handbook-content .extra-head-spacing {
  margin-top: 42px;
}
#handbook .resource {
  margin-top: 24px;
}
#handbook .section-head {
  color: #000000;
  font-size: 36px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  padding-top: 40px;
}
#handbook .section-head:nth-of-type(1) {
  padding-top: 50px;
}
#handbook .section-subhead {
  color: #BABABA;
  font-size: 24px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin: 12px 0 24px 0;
}
#handbook .list-head {
  color: #000000;
  font-size: 24px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#handbook .pro-tip-crown {
  color: #FFBF43;
  font-size: 24px;
}
#handbook .collection-head {
  margin: 24px 0;
}
#handbook .collection-head,
#handbook .tip-head {
  color: #000000;
  font-size: 18px;
  line-height: 1;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#handbook .pro-tip,
#handbook .tip-container {
  color: #000000;
  margin-bottom: 24px;
}
#handbook .pro-tip p,
#handbook .tip-container p {
  margin: 0;
}
#handbook .pro-tip ol,
#handbook .tip-container ol {
  font-size: 18px;
  padding-left: 26px;
}
#handbook .pro-tip ol li,
#handbook .tip-container ol li {
  list-style: decimal;
}
#handbook .technical-guidelines img {
  margin-right: 24px;
  vertical-align: middle;
}
#handbook .technical-guidelines .top {
  min-height: 180px;
}
#handbook .tech_type {
  color: #000000;
  font-size: 30px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}
#handbook .numbered-list {
  counter-reset: numbered-list;
}
#handbook .numbered-list li {
  counter-increment: numbered-list;
  margin-bottom: 50px;
}
#handbook .numbered-list li:last-child {
  margin: 0;
}
#handbook .numbered-list h6 {
  color: #000000;
  font-size: 24px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#handbook .numbered-list h6:before {
  content: counter(numbered-list) ". ";
}
#handbook .resource-list {
  font-size: 14px;
  color: #BABABA;
}
#handbook .resource-list .ui_download:before {
  font-size: 18px;
  margin-right: 12px;
}
#handbook .resource-list li {
  padding-bottom: 12px;
  line-height: 1.35em;
}
#handbook .resource-list li a {
  display: inline;
}
#handbook .checklist {
  color: #000000;
  font-size: 18px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#handbook .checklist li:before {
  margin: 0 24px 0 0;
}
#handbook .checklist li {
  margin-left: 50px;
  padding-bottom: 24px;
  text-indent: -50px;
}
#handbook .green:before {
  color: #7AC943;
}
#handbook .red:before {
  color: #F44E4E;
}
#handbook .curation-examples {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#handbook .curation-examples p {
  margin-top: 0;
}
#handbook .royalty-split li {
  margin-top: 36px;
}
#handbook .handbook-footer-navigation {
  margin-top: 24px;
  text-align: left;
}
#handbook .handbook-footer-navigation .container {
  display: flex;
}
#handbook .handbook-footer-navigation a {
  background-color: #333333;
  color: #BABABA;
  flex-grow: 1;
  font-size: 24px;
  padding: 24px 0;
  width: 49%;
}
#handbook .handbook-footer-navigation a:hover {
  color: #FFFFFF;
}
#handbook .handbook-footer-navigation a:before {
  background-color: #333333;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  margin: 0 0 0 -99em;
  position: absolute;
  top: 0;
  width: 99em;
}
#handbook .handbook-footer-navigation small {
  font-size: 14px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin: 0 0 0 24px;
}
#handbook .handbook-footer-navigation i {
  font-size: 14px;
  position: relative;
  top: -3px;
}
#handbook .handbook-footer-navigation .next-chapter {
  background-color: #1F1F1F;
  text-align: right;
}
#handbook .handbook-footer-navigation .next-chapter small {
  margin: 0 24px 0 0;
}
#handbook .handbook-footer-navigation .next-chapter:before {
  background-color: #1F1F1F;
  left: inherit;
  margin: 0 -99em 0 0;
  right: 0;
}

body#handbook.with-top-banner .page-header-handbook {
  margin-top: 48px;
}
@media (max-width: 768px) {
  body#handbook.with-top-banner .page-header-handbook {
    margin-top: 48px;
  }
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
#log-out-view #main-content {
  text-align: center;
}
#log-out-view #get-started {
  margin-bottom: 60px;
}
#log-out-view #get-started,
#log-out-view #logout-form {
  padding-top: 150px;
}
#log-out-view .new-form {
  margin: auto;
  float: none;
  padding-top: 17px;
  text-align: center;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
#recent-royalties {
  background: #FFFFFF;
}

.table-container {
  padding-bottom: 60px;
}

.royalties .disabled {
  opacity: 0.2;
  pointer-events: none;
}
.royalties .royalties {
  padding-top: 40px;
}
.royalties .royalties h3 {
  font-size: 26px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.royalties .royalties h3:before {
  font-size: 1em;
  margin-right: 0.4em;
}
.royalties .royalties-list #main-content {
  background: #FFFFFF;
}
.royalties .no-royalties-msg {
  text-align: center;
  font-size: 24px;
  color: #999;
  padding: 100px 0;
  background: #f2f2f2;
}
.royalties .no-royalties-msg a {
  font-size: 18px;
}
.royalties .no-royalties-msg .recent-royalty-info {
  font-size: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 0;
}
.royalties #royalty-graph {
  background-color: #F2F2F2;
  margin-bottom: 60px;
}
.royalties #royalty-graph #year-selection {
  float: left;
  font-size: 18px;
}
.royalties #royalty-graph #current-year {
  color: #000000;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.royalties #royalty-graph .back-link {
  float: right;
}
.royalties #royalty-graph .back-link a {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  border-bottom: solid 1px;
  font-size: 14px;
}
.royalties #royalty-graph .back-link a:hover {
  color: #000000;
}
.royalties #royalty-graph #buttonList {
  text-align: right;
  width: 250px;
  float: right;
  font-size: 18px;
  line-height: 24px;
  padding-bottom: 25px;
}
.royalties #royalty-graph #buttonList a {
  color: #333333;
  margin: 0 6px;
}
.royalties #royalty-graph #buttonList a:hover {
  color: #000000;
}
.royalties #royalty-graph #buttonList li {
  display: inline-block;
}
.royalties #royalty-graph #buttonList li.active {
  pointer-events: none;
}
.royalties #royalty-graph #buttonList li.active a {
  color: #000000;
  border-bottom: solid 1px;
}
.royalties #royalty-graph .no-data-message {
  height: 450px;
  margin-left: -70px;
  margin-bottom: 50px;
  width: 1031px;
}
.royalties #royalty-graph .no-data-message p {
  text-align: center;
  margin-top: 125px;
  font-size: 18px;
  display: inline-block;
  width: 100%;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #6D6D6D;
}
.royalties #royalty-graph svg {
  min-height: 450px;
  margin-left: -70px;
  margin-bottom: 50px;
  width: 1031px;
}
.royalties #royalty-graph svg .legendWrap,
.royalties #royalty-graph svg .domain,
.royalties #royalty-graph svg .tick line,
.royalties #royalty-graph svg .nv-y .nv-axis,
.royalties #royalty-graph svg .y1.axis {
  display: none;
}
.royalties #royalty-graph svg text {
  margin-top: 20px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
.royalties #royalty-graph svg .disabled {
  pointer-events: inherit;
  opacity: 1;
}
.royalties #royalty-graph #svg-rule {
  position: relative;
  top: -101px;
  width: 100%;
  height: 0px;
  border-top: solid 1px #000000;
  z-index: 99;
}
.royalties .nvtooltip {
  margin-left: -70px;
  margin-top: 150px;
}
.royalties .table-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 36px 0;
  width: 100%;
  height: 54px;
  background-color: #6D6F75;
  border: 1px solid #141824;
  color: #F4F4F6;
  font-size: 25px;
}
.royalties table {
  table-layout: auto;
  width: 100%;
}
.royalties table.old .header {
  height: 80px;
}
.royalties table.new .header {
  height: 120px;
}
.royalties table tr {
  vertical-align: top;
  height: 60px;
}
.royalties table td {
  padding: 12px 8px;
}
.royalties table td.royalty-col-total {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.royalties table td.zero-revenue {
  color: #c1c1c1;
  font-size: 26px;
}
.royalties table th {
  font-size: 18px;
  font-weight: normal;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.royalties table th.width-17 {
  width: 17%;
}
.royalties table th.width-12 {
  width: 12%;
}
.royalties table tr.header {
  vertical-align: top;
  text-align: left;
}
.royalties table tr.header span {
  display: block;
  font-size: 13px;
  margin-top: 6px;
  color: #6D6D6D;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.royalties table tr.header i:before {
  color: #000000;
  font-size: 14px;
  margin-left: 4px;
}
.royalties table tr.royalty-row-year {
  border-top: 1px solid #ccc;
  padding: 30px 8px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #b5b5b5;
  height: inherit;
}
.royalties table tr.royalty-row-year td {
  font-size: 18px;
}
.royalties table tr.royalty-row-year .tr-title {
  text-align: center;
}
.royalties table tr.data {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
.royalties table tr.data span {
  font-size: 14px;
  color: #333333;
}
.royalties table tr.data:nth-child(odd) {
  background: #F2F2F2;
}
.royalties table tr.data:nth-child(odd).legacy {
  background: rgba(242, 242, 242, 0.75);
}
.royalties table tr.data.legacy {
  color: #333333;
}
.royalties #recent-royalties h2 {
  font-size: 32px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 15px;
}
.royalties #recent-royalties h2:before {
  margin-right: 20px;
  font-size: 30px;
}
.royalties #recent-royalties .recent-royalty-info {
  font-size: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-top: 0;
  margin-bottom: 0;
}
.royalties #recent-royalties table {
  width: 100%;
  font-size: 18px;
  border-top: 1px solid #ccc;
}
.royalties #recent-royalties table td, .royalties #recent-royalties table th {
  padding: 8px 16px 8px 8px;
}
.royalties #recent-royalties table th {
  padding-top: 25px;
  text-align: left;
  font-weight: normal;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.royalties #recent-royalties table td {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
.royalties #recent-royalties table .recent-royalty-multipliers td {
  padding-bottom: 25px;
}
.royalties #recent-royalties table .recent-royalty-totals {
  border-top: 1px solid #ccc;
}
.royalties #recent-royalties table .recent-royalty-totals td {
  font-size: 22px;
  padding-top: 25px;
}
.royalties .legacy td.NA {
  color: #BABABA;
  line-height: 22px;
  font-size: 13px;
}
.royalties #sacks-o-cash.no-royalties {
  background: none;
  background: #FFFFFF;
  text-align: center;
  padding: 100px;
}
.royalties #sacks-o-cash ::selection {
  background-color: transparent;
  color: inherit;
}
.royalties #sacks-o-cash ::moz-selection {
  background-color: transparent;
  color: inherit;
}
.royalties #sacks-o-cash #sack {
  opacity: 0.25;
  transition: all 0.2s ease;
  display: inline-block;
  padding: 10px;
  position: absolute;
  left: calc(50% - 25px);
}
.royalties #sacks-o-cash #sack ::selection {
  background-color: transparent;
  color: inherit;
}
.royalties #sacks-o-cash #sack ::moz-selection {
  background-color: transparent;
  color: inherit;
}
.royalties #sacks-o-cash #sack:hover {
  opacity: 1;
}
.royalties #sacks-o-cash #cash {
  position: relative;
}
.royalties #sacks-o-cash #cash ::selection {
  background-color: transparent;
  color: inherit;
}
.royalties #sacks-o-cash #cash ::moz-selection {
  background-color: transparent;
  color: inherit;
}
.royalties #sacks-o-cash #cash img {
  position: absolute;
  display: block;
  margin-left: -5px;
  left: 50%;
  opacity: 0;
}
.royalties #sacks-o-cash #cash img ::selection {
  background-color: transparent;
  color: inherit;
}
.royalties #sacks-o-cash #cash img ::moz-selection {
  background-color: transparent;
  color: inherit;
}
.royalties #sacks-o-cash #cash img.ooooh-coins {
  cursor: pointer;
}
.royalties #sacks-o-cash #cash img:nth-child(1).ooooh-coins {
  animation-name: coins_one;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: once;
}
.royalties #sacks-o-cash #cash img:nth-child(2).ooooh-coins {
  animation-name: coins_two;
  animation-duration: 1s;
  animation-delay: 0.1s;
  animation-iteration-count: once;
}
.royalties #sacks-o-cash #cash img:nth-child(3).ooooh-coins {
  animation-name: coins_three;
  animation-duration: 1s;
  animation-delay: 0.1s;
  animation-iteration-count: once;
}
.royalties #sacks-o-cash #for-keeps {
  position: relative;
  top: 50px;
  text-align: center;
  opacity: 0.25;
  padding: 10px;
}
.royalties #sacks-o-cash #for-keeps ::selection {
  background-color: transparent;
  color: inherit;
}
.royalties #sacks-o-cash #for-keeps ::moz-selection {
  background-color: transparent;
  color: inherit;
}
.royalties #sacks-o-cash #for-keeps img {
  margin: 4px;
}
.royalties #sacks-o-cash #for-keeps img ::selection {
  background-color: transparent;
  color: inherit;
}
.royalties #sacks-o-cash #for-keeps img ::moz-selection {
  background-color: transparent;
  color: inherit;
}

.royalties.with-top-banner #royalty-graph {
  margin-top: 48px;
}
@media (max-width: 767px) {
  .royalties.with-top-banner #royalty-graph {
    margin-top: 48px;
  }
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.moderator-letter-container {
  border-bottom: solid 3px #F2F2F2;
  overflow: hidden;
  margin-bottom: 24px;
}

.moderator-letter {
  max-width: 768px;
  position: relative;
  padding: 64px 80px 24px 80px;
  background: #FFFFFF;
  text-align: left;
  margin: 48px auto 0;
  border-radius: 4px 4px 0 0;
  box-shadow: 1px 5px 8px rgba(100, 100, 100, 0.25);
  animation-name: letter-in;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  top: 200px;
}
.moderator-letter h1 {
  font-size: 18px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.moderator-letter p {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 20px;
  color: #1F1F1F;
}
.moderator-letter .holiday-holly {
  position: absolute;
  right: -31px;
  top: -27px;
}

.settings .new-form .submit-username-change {
  border-bottom: solid 1px;
  display: none;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 4em;
  top: 22px;
}
.settings .new-form .edit-username {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 22px;
  top: 22px;
  border-bottom: solid 1px;
}
.settings .new-form .edit-username-escape {
  display: none;
  position: absolute;
  right: 22px;
  top: 22px;
}
.settings .new-form .taken:before {
  color: #F44E4E;
}
.settings .new-form .available:before {
  color: #7AC943;
}
.settings .new-form .username-change {
  font-size: 18px;
}
.settings .new-form .username-change .prefilled {
  left: 22px;
  top: 24px;
  font-size: 18px;
  color: #333333;
  position: absolute;
}
.settings .new-form .username-change input[type=text] {
  padding-left: 158px;
  padding-right: 5em;
}
.settings .new-form .username-change .loading {
  right: 64px;
  top: 0;
  display: none;
  position: absolute;
}
.settings .new-form .username-change .loading.saving {
  right: 4em;
  left: inherit;
}
.settings a.upgrade {
  border-bottom: solid 1px;
}
.settings a.upgrade:hover {
  color: #FFFFFF;
}
.settings .new-key h3 {
  font-size: 1.714em;
}
.settings .new-key p {
  font-size: 18px;
  color: #6D6D6D;
}
.settings .new-key .api-key {
  color: #BABABA;
}
.settings .new-key .button {
  margin: 2em auto;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.settings .new-key .button:hover {
  background-color: #BABABA;
}
.settings #api-secret-accept {
  margin: 2em auto;
}
.settings .centered {
  text-align: center;
}
.settings .settings-footer {
  color: #BABABA;
}
.settings .settings-footer a {
  color: #BABABA;
}
.settings .file-wrapper {
  cursor: pointer;
  display: block;
  overflow: hidden;
  position: relative;
  margin: 2em auto;
}
.settings .file-wrapper:hover .button {
  background-color: #6D6D6D;
}
.settings .file-wrapper input {
  cursor: pointer;
  font-size: 100px;
  height: 100%;
  opacity: 0.01;
  position: absolute;
  right: 0;
  top: 0;
}
.settings .avatar-form header {
  margin-bottom: 24px;
}
.settings .avatar-form .filename {
  min-height: 24px;
}
.settings .avatar-form .errorlist {
  display: block;
  padding: 24px;
  font-size: 18px;
  color: #F44E4E;
  background: #FDEBEC;
  text-align: center;
}
.settings .avatar-form .button {
  cursor: pointer;
  display: inline-block;
  transition: background-color 0.3s ease;
  width: 350px;
  margin: 24px auto;
  display: block;
}
.settings .avatar-form .button:before {
  padding-right: 0.35em;
}
.settings .avatar-form .file-holder {
  font-size: 24px;
  text-align: center;
  display: block;
}
.settings .avatar-form .loading {
  margin-top: 24px;
}
.settings .current-avatar {
  margin: 2em 0;
  text-align: center;
}
.settings .current-avatar h4 {
  font-size: 1.714em;
  color: #6D6D6D;
  margin-bottom: 1em;
}
.settings .current-avatar img {
  border-radius: 50%;
}
.settings .avatar-form {
  padding-bottom: 3em;
}
.settings #manage-organizations .organization {
  padding: 1em 0em;
  border-bottom: solid 1px #BABABA;
}
.settings #manage-organizations .organization figure {
  display: inline-block;
  position: relative;
  margin: 1em 1em 1em 2em;
}
.settings #manage-organizations .organization figure img {
  display: inline-block;
  border-radius: 50%;
  margin: auto;
}
.settings #manage-organizations .organization figcaption {
  display: inline-block;
  font-size: 0.714285714em;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #000000;
  background: #F2F2F2;
  border-radius: 5px;
  padding: 4px 6px;
  position: absolute;
  display: block;
  bottom: 6px;
  right: 0px;
}
.settings #manage-organizations .organization header {
  display: inline-block;
  padding: 0;
}
.settings #manage-organizations .organization footer a {
  margin-right: 1em;
  color: #BABABA;
  padding-bottom: 6px;
}
.settings #manage-organizations .organization footer a:hover {
  border-bottom: solid 1px;
  color: #000000;
}
.settings #manage-organizations .organization footer a:before {
  margin-right: 0.5em;
}
.settings #manage-organizations .organization .fat-input {
  clear: both;
}
.settings #manage-organizations .organization-name {
  font-size: 2.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  display: inline-block;
  line-height: 1.5em;
  width: 400px;
}
.settings #manage-organizations .organization-status {
  color: #BABABA;
  font-size: 0.75em;
}
.settings #manage-organizations .owner-actions {
  padding: 1em 0;
}
.settings #manage-organizations .owner-actions li {
  display: inline-block;
  margin-right: 1em;
}
.settings div.callout.important {
  font-size: 14px;
  margin-bottom: 27.5px;
}
.settings div.callout.important i {
  margin-right: 8px;
}
.settings p.input-description {
  padding: 0;
  margin: 0;
}
.settings #paypal-email {
  float: none;
}
.settings .love {
  color: #6D6D6D;
  text-align: center;
  padding: 3.5em 0 6em 0;
}
.settings .love span {
  display: inline-block;
  padding: 10px;
  width: 39px;
  height: 30px;
}
.settings .love a.love-you {
  border-bottom: none !important;
  margin-bottom: 6px;
}
.settings .love a.ui_heart {
  transition: color 0.5s ease;
  animation-name: loadIcon;
  animation-duration: 0.25s;
  display: inline-block;
  padding-top: 6px;
  transform: scale(1.5);
  font-size: 14px;
  color: #6D6D6D;
  width: 30px;
}
.settings .love a.ui_heart:before {
  font-size: 18px;
  margin: 0 0.25em;
}
.settings .love a.ui_heart:hover {
  color: #BABABA;
}

#downgrade {
  background: #000000;
  color: #FFFFFF;
  padding: 100px;
}
#downgrade .ui_close {
  position: absolute;
  font-size: 24px;
  right: 0px;
  top: -60px;
}
#downgrade h2 {
  font-size: 48px;
  text-align: center;
  margin-bottom: 18px;
}
#downgrade h2.complete {
  text-align: left;
  margin-bottom: 48px;
  max-width: 90%;
}
#downgrade .subhead {
  text-align: center;
  font-size: 24px;
  color: #BABABA;
}
#downgrade .img-container {
  text-align: center;
  padding-top: 12px;
  padding-bottom: 28px;
}
#downgrade .main-offer {
  font-size: 24px;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.4;
}
#downgrade .sub-offer {
  font-size: 14px;
  color: #BABABA;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}
#downgrade .offer {
  color: #3EA9F5;
  font-size: 13px;
  vertical-align: super;
}
#downgrade #cancel-container {
  text-align: center;
}
#downgrade #downgrade-action-link {
  text-decoration: underline;
  text-color: #BABABA;
  font-size: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#downgrade .thank-you {
  font-size: 18px;
  color: #BABABA;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}
#downgrade .succeeded {
  background-color: #7AC943;
}
#downgrade ul {
  float: none;
  margin: 50px auto;
}
#downgrade i.ui_basic-accounts {
  font-size: 48px;
  color: #FFFFFF;
  padding: 50px 0;
  margin-left: -22px;
  display: block;
}
#downgrade ol {
  font-size: 24px;
  counter-reset: reasons-we-love-you;
  color: #BABABA;
  padding: 12px 0 40px;
}
#downgrade ol li {
  padding: 10px 0;
}
#downgrade ol li:before {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  counter-increment: reasons-we-love-you;
  content: counter(reasons-we-love-you) " ) ";
}
#downgrade h4 {
  font-size: 25px;
  color: #BABABA;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#downgrade input[type=checkbox] {
  visibility: hidden;
  display: none;
}
#downgrade input[type=checkbox] + label {
  display: inline-block;
  position: relative;
  background: #333333;
  color: #BABABA;
  font-size: 18px;
  text-align: center;
  width: 100%;
  height: 150px;
  cursor: pointer;
  top: 0;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#downgrade input[type=checkbox] + label i {
  margin: 20px;
  display: block;
  font-size: 46px;
}
#downgrade input[type=checkbox] + label:hover {
  color: #333333;
  background: #6D6D6D;
}
#downgrade input[type=checkbox]:checked + label {
  background: #333333;
  color: #FFFFFF;
}
#downgrade .alpha {
  margin-left: 0;
}
#downgrade #explaination {
  width: 100%;
  height: 150px;
  margin: 0 0 14px 0;
}
#downgrade button {
  font-size: 24px;
  padding: 25px;
}
#downgrade button:hover {
  background: #333333;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.disabled-user-view {
  padding: 100px;
  text-align: center;
}
.disabled-user-view .ui_lock {
  font-size: 80px;
}
.disabled-user-view p {
  font-size: 18px;
  margin: 40px auto;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.team-flatpage .section-block,
.team-flatpage #enterprise,
.team-flatpage #common-questions {
  padding: 40px;
}
.team-flatpage .section-block p,
.team-flatpage #enterprise p,
.team-flatpage #common-questions p {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
}
.team-flatpage .section-block .columns,
.team-flatpage #enterprise .columns,
.team-flatpage #common-questions .columns {
  padding: 50px;
}
.team-flatpage .section-block .image,
.team-flatpage #enterprise .image,
.team-flatpage #common-questions .image {
  text-align: center;
}
.team-flatpage h2,
.team-flatpage h3 {
  font-size: 2.571em;
  line-height: 1.2;
}
.team-flatpage h4 {
  font-size: 1.714em;
}
.team-flatpage #build-a-team img,
.team-flatpage #consolidated-billing img,
.team-flatpage #mock-up img,
.team-flatpage #enterprise img {
  height: 200px;
}
.team-flatpage #enterprise,
.team-flatpage #common-questions {
  color: #FFFFFF;
}
.team-flatpage #build-a-team {
  text-align: center;
}
.team-flatpage #build-a-team p {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
}
.team-flatpage #build-a-team .description {
  font-weight: bold;
  font-size: 24px;
}
.team-flatpage #build-a-team .button {
  margin: 30px auto;
}
.team-flatpage #headline {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 30px;
  margin-bottom: 10px;
}
.team-flatpage #headline:before {
  color: #AE8DFF;
  display: block;
  font-size: 40px;
  margin-bottom: 30px;
}
.team-flatpage #yearly-price {
  font-size: 18px;
  font-weight: bold;
  color: #F2F2F2;
  margin-bottom: 10px;
}
.team-flatpage #monthly-price {
  font-size: 14px;
  color: #BABABA;
}
.team-flatpage .enterprise_pricing {
  margin-left: 40px;
}
.team-flatpage .enterprise_pricing .text-link:hover {
  color: #6D6D6D;
}
.team-flatpage .features li {
  font-size: 18px;
  color: #BABABA;
  margin-bottom: 10px;
}
.team-flatpage .enterprise_pricing a,
.team-flatpage .enterprise_pricing a:visited {
  color: #BABABA;
}
.team-flatpage #keep-in-sync {
  color: #333333;
}
.team-flatpage #keep-in-sync img {
  height: 200px;
}
.team-flatpage #consolidated-billing h3 {
  margin-top: 10px;
}
.team-flatpage #drag-drop-done {
  padding-bottom: 0;
}
.team-flatpage #drag-drop-done .image {
  padding-bottom: 0;
  position: relative;
  top: 10px;
}
.team-flatpage #drag-drop-done a, .team-flatpage #drag-drop-done a:visited {
  color: #FFFFFF;
}
.team-flatpage #drag-drop-done .text-link:hover {
  color: #BABABA;
}
.team-flatpage #start-a-team {
  color: #FFFFFF;
  text-align: center;
}
.team-flatpage #start-a-team .text-link {
  color: #FFFFFF;
  transition: 1s ease all;
}
.team-flatpage #start-a-team .text-link:hover {
  color: #F2F2F2;
}
.team-flatpage #start-a-team #members_input,
.team-flatpage #start-a-team #members_input input {
  width: 140px;
  text-align: center;
  background-color: #FFFFFF;
  color: #000000;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.team-flatpage #start-a-team #members_input {
  float: left;
  height: 70px;
  margin-right: 80px;
}
.team-flatpage #start-a-team #members_input input {
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 36px;
}
.team-flatpage #start-a-team #total {
  float: left;
  width: 220px;
}
.team-flatpage #start-a-team .per-year {
  font-size: 36px;
  color: #FFFFFF;
}
.team-flatpage #start-a-team .team-cost {
  text-align: center;
  color: #BABABA;
}
.team-flatpage #start-a-team .per-month {
  text-align: center;
  color: #FFFFFF;
  font-size: 18px;
  margin-top: 25px;
}
.team-flatpage #enterprise {
  background-color: #000000;
}
.team-flatpage #enterprise a, .team-flatpage #enterprise a:visited {
  color: #FFFFFF;
}
.team-flatpage #enterprise .text-link:hover {
  color: #BABABA;
}
.team-flatpage #common-questions {
  background-color: #1F1F1F;
}
.team-flatpage #common-questions h3 {
  text-align: center;
}
.team-flatpage #common-questions .q-and-a {
  margin-bottom: 50px;
}
.team-flatpage #common-questions .q-and-a p {
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #BABABA;
}
.team-flatpage #common-questions .left .q-and-a {
  margin-bottom: 60px;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.teams header .messages {
  text-align: center;
  font-size: 18px;
  color: #FFFFFF;
}
.teams .team-management {
  background: #FFFFFF;
  min-height: 500px;
}
.teams .team-management h3.invite-team-members-heading {
  font-size: 24px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-top: 3rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  border-top: 1px solid #BABABA;
}
.teams .team-management .subhead-link {
  margin-top: 0;
  margin-bottom: 25px;
}
.teams .team-management .subhead-link .ui_icon {
  display: inline-block;
  text-decoration: none;
  padding-right: 10px;
}
.teams .team-management .edit-seat-number {
  display: none;
  position: relative;
  font-size: 18px;
  color: #6D6D6D;
}
.teams .team-management .edit-seat-number .seat-number {
  background: #F2F2F2;
  color: #333333;
  width: 4em;
  padding: 17px;
  transition: all 0.3s ease;
}
.teams .team-management .edit-seat-number .seat-number.error {
  background: linear-gradient(#FDEBEC 90%, #F44E4E 90%);
}
.teams .team-management .edit-seat-number .seat-price {
  color: #6D6D6D;
  border: 2px solid #F2F2F2;
  border-left: none;
  position: relative;
}
.teams .team-management .edit-seat-number .seat-price p {
  padding: 15px;
  margin: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
}
.teams .team-management .edit-seat-number .seat-price span {
  font-weight: bold;
}
.teams .team-management .edit-seat-number .seat-price:before {
  content: "";
  position: absolute;
  width: 39px;
  height: 39px;
  border-left: 2px solid #F2F2F2;
  border-bottom: 2px solid #F2F2F2;
  transform: rotate(45deg);
  top: 7px;
  left: -20px;
}
.teams .team-management .edit-seat-number .edit-seat-help {
  display: none;
  color: #333333;
  background: #F2F2F2;
  text-align: center;
  font-size: 16px;
  padding: 15px 50px;
  margin: 20px 0;
}
.teams .team-management .edit-seat-number .edit-seat-help.initial-help {
  display: block;
}
.teams .team-management .edit-seat-number .edit-seat-help p {
  margin: 0;
}
.teams .team-management .edit-seat-number .edit-seat-help.waiting {
  padding: 15px 50px 15px 25px;
}
.teams .team-management .edit-seat-number .edit-seat-help.waiting .loading {
  margin-bottom: 20px;
}
.teams .team-management .add-member-notification {
  color: #F44E4E;
}
.teams .team-management .edit-seat-help.error {
  color: #F44E4E;
  background: #FDEBEC;
}
.teams .team-management .edit-seat-help.success {
  padding: 15px 50px 15px 25px;
}
.teams .team-management .edit-seat-help.success:before {
  float: left;
  color: #7AC943;
  font-size: 26px;
  margin: 10px 25px 0 0;
}
.teams .team-management .edit-seat-number-submit {
  margin: 20px 0;
  margin-left: calc(50% - 200px);
  width: 400px;
  transition: all 0.3s ease;
}
.teams .team-management .edit-seat-number-submit.confirm {
  background: #7AC943;
}
.teams .team-management .manage-seats {
  padding-top: 0;
  overflow: hidden;
  min-height: 50px;
}
.teams .team-management .manage-seats .loading {
  margin-top: 20px;
}
.teams .team-management form#add-member {
  position: relative;
  height: 4rem;
  margin-bottom: 20px;
}
.teams .team-management .top-link {
  color: #000;
  font-size: 16px;
  text-decoration: underline;
  padding-right: 0.25rem;
}
.teams .team-management .new-member-email,
.teams .team-management .add-member-form-blocker {
  height: 100%;
  width: 100%;
  background: #F2F2F2;
  font-size: 20px;
  padding: 20px;
  font-weight: 300;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.teams .team-management .add-member-form-blocker {
  position: absolute;
  top: 0;
  display: none;
}
.teams .team-management .add-member-form-blocker:before {
  position: absolute;
  top: 8px;
  right: 30px;
  font-size: 48px;
  color: #999;
}
.teams .team-management .add-member-btn {
  background: transparent;
  color: #BABABA;
  padding: 0 20px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  font-size: 24px;
  line-height: 30px;
  transition: color 0.3s ease;
}
.teams .team-management .add-member-btn.darken {
  color: #999;
}
.teams .team-management .add-member-btn:hover {
  color: #A1A1A1;
}
.teams .team-management .add-member-btn[disabled] {
  animation: spin 2s ease infinite;
  color: #BABABA;
  transform-origin: 44% 50%;
}
.teams .team-management .manage-seats:not(.owner) .team-member-detail {
  margin-top: 40px;
  text-align: center;
}
.teams .team-management .manage-seats:not(.owner) .team-member-detail:nth-child(3n+1) {
  margin-left: 0;
}
.teams .team-management .manage-seats:not(.owner) .team-member-detail .team-member-avatar.ui_crown:before, .teams .team-management .manage-seats:not(.owner) .team-member-detail .team-member-avatar.ui_checkmark:before {
  right: 55px;
}
.teams .team-management .manage-seats:not(.owner) .team-member-detail p {
  margin: 8px 0;
}
.teams .team-management .manage-seats:not(.owner) .team-member-detail .team-member-name {
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.teams .team-management .manage-seats:not(.owner) .team-member-detail .team-member-date {
  color: #AFAFAF;
  font-size: 16px;
}
.teams .team-management .manage-seats.owner .team-member-detail {
  padding-top: 25px;
  padding-bottom: 25px;
  position: relative;
  border-bottom: 1px solid #ddd;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-avatar {
  float: left;
}
.teams .team-management .manage-seats.owner .team-member-detail p {
  margin: 0;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-info {
  margin-left: 120px;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-name {
  font-size: 22px;
  margin: 5px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-name a {
  border: none;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-date {
  font-size: 16px;
  margin: 5px 0 5px 0;
  color: #999;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-invite-url {
  background: #e3e3e3;
  padding: 6px 6px;
  color: #666;
  width: 300px;
  display: none;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-actions {
  float: right;
  font-size: 14px;
  width: 6rem;
  margin-left: 15px;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-actions li {
  padding-bottom: 8px;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-actions a.confirmed {
  color: #7AC943;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-actions a.confirmed:hover {
  color: #7AC943;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-actions a:hover {
  color: #444;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-actions a:before {
  font-size: 13px;
  padding-right: 5px;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-confirm-remove {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #BABABA;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-confirm-remove h1 {
  padding-top: 20px;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: normal;
  margin: 0 60px;
  line-height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-confirm-remove .team-member-confirm-remove-button {
  padding: 0;
  font-size: 18px;
  width: 30%;
  height: 40px;
  color: #FFFFFF;
  background-color: #6D6D6D;
  transition: background-color 0.3s ease;
  position: absolute;
  bottom: 20px;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-confirm-remove .team-member-confirm-remove-button:hover {
  background-color: #333333;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-confirm-remove .team-member-confirm-remove-button.yes-button {
  right: 15%;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-confirm-remove .team-member-confirm-remove-button.no-button {
  left: 15%;
}
.teams .team-management .manage-seats.owner .team-member-detail .team-member-confirm-remove .team-member-confirm-remove-close {
  position: absolute;
  top: 25px;
  right: 25px;
  color: #F2F2F2;
}
.teams .team-management .current-members {
  padding-bottom: 48px;
}
.teams .team-management .team-member-avatar {
  position: relative;
}
.teams .team-management .team-member-avatar img {
  border-radius: 50%;
}
.teams .team-management .team-member-avatar.ui_crown:before, .teams .team-management .team-member-avatar.ui_checkmark:before {
  position: absolute;
  right: -5px;
  top: 55px;
  font-size: 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
}
.teams .team-management .team-member-avatar.ui_checkmark:before {
  color: #7AC943;
}
.teams .team-management .team-member-avatar.ui_crown:before {
  color: #AE8DFF;
}
/**
 * * This page is for topsites preview shown in Safari
 * */
#topsites-preview {
  padding: 0px;
  height: 100%;
  overflow: hidden;
}
#topsites-preview #main-content {
  height: 100%;
  padding: 0px;
}
#topsites-preview .blur-container {
  height: 100%;
}
#topsites-preview ol {
  height: 800px;
  text-align: center;
}
#topsites-preview .icon {
  width: 25%;
  height: 33.3%;
  max-height: 33.3%;
  display: inline-block;
  margin: 0px;
}
#topsites-preview .icon img {
  width: 120px;
  height: 120px;
  max-height: 120px;
  margin-left: -60px;
  margin-top: -60px;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
.card-item {
  opacity: 0;
  animation-name: pop-in;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.card-item:nth-of-type(1) {
  animation-delay: 0s;
}

.card-item:nth-of-type(2) {
  animation-delay: 0.1s;
}

.card-item:nth-of-type(3) {
  animation-delay: 0.2s;
}

.card-link {
  transition: all 0.3s ease-out;
  border-bottom: solid 1px transparent;
}
.card-link:hover {
  color: #000000;
  border-bottom: solid 1px #000000;
}

.card-item {
  max-width: 350px;
  margin-right: 24px;
}

.slide .carousel-inner > .item {
  transition: left 0.6s cubic-bezier(1, 0, 0, 1);
}

.carousel {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #1F1F1F;
}

.carousel-inner > .item {
  display: none;
  position: relative;
  transform: translate3d(0, 0, 0);
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
  line-height: 1;
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}

.carousel-inner > .active {
  left: 0;
}

.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner > .next {
  left: 100%;
}

.carousel-inner > .prev {
  left: -100%;
}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}

.carousel-inner > .active.left {
  left: -100%;
}

.carousel-inner > .active.right {
  left: 100%;
}

@media (max-width: 960px) {
  .carousel {
    max-width: 768px;
    justify-content: center;
  }
  .collection-list_arrow.right-arrow {
    right: 0px;
  }
  .collection-list_arrow.left-arrow {
    left: 0px;
  }
}
@media (max-width: 767px) {
  .carousel {
    max-width: 350px;
    margin: auto;
  }
  .collection-list_arrow.right-arrow {
    right: 0px;
    top: 100%;
    z-index: 10;
    margin-top: 8px;
  }
  .collection-list_arrow.left-arrow {
    left: 0px;
    top: 100%;
    z-index: 10;
    margin-top: 8px;
  }
}
#upload-page #main-content {
  padding: 0;
}
#upload-page #upload-page {
  background: #1F1F1F;
}
#upload-page ul#drop-zone-messages {
  margin-top: 50px;
}
#upload-page ul#drop-zone-messages li {
  color: #F4F4F6;
  font-size: 16px;
  line-height: 150%;
  margin-bottom: 16px;
}
#upload-page ul#drop-zone-messages li:last-child {
  margin-bottom: 24px;
}
#upload-page .cheers-message {
  background: #fcbe4f;
  padding: 30px;
}
#upload-page .cheers-message .inner {
  margin: auto;
  width: 100%;
  display: flex;
}
#upload-page .cheers-message .inner .icon {
  width: 162px;
  flex-shrink: 0;
}
#upload-page .cheers-message .inner .message {
  flex: 1;
  max-width: 468px;
}
#upload-page .cheers-message .inner .message h2 {
  font-size: 20px;
  font-weight: bold;
}
#upload-page .cheers-message .inner .message p {
  font-size: 14px;
  font-weight: normal;
}
#upload-page .submissions-temp-pause {
  background: #fcbe4f;
  padding: 30px;
}
#upload-page .submissions-temp-pause .inner {
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: center;
}
#upload-page .submissions-temp-pause .inner .message {
  flex: 1;
  max-width: 700px;
}
#upload-page .submissions-temp-pause .inner .message h2 {
  font-size: 20px;
  font-weight: bold;
}
#upload-page .submissions-temp-pause .inner .message p {
  font-size: 14px;
  font-weight: normal;
}
#upload-page .info-banner {
  display: none;
  background: #94B2EB;
  padding: 24px;
}
#upload-page .info-banner .inner {
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
#upload-page .info-banner .inner .icon {
  flex: 0 0 24px;
}
#upload-page .info-banner .inner .icon img {
  display: block;
  width: 100%;
}
#upload-page .info-banner .inner .message {
  flex: 1;
  max-width: 700px;
  font-size: 16px;
  font-weight: bold;
}
#upload-page .info-banner.show {
  display: block;
}
#upload-page .alert-banner {
  background: #F44E4E;
  color: #FFFFFF;
  padding: 10px;
}
#upload-page .carousel {
  color: #6D6D6D;
}
#upload-page .carousel .carousel-inner {
  min-height: 780px;
}
#upload-page .carousel .center {
  text-align: center;
}
#upload-page .carousel .center p {
  font-size: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #BABABA;
}
#upload-page .carousel .center p .text-link {
  color: #BABABA;
}
#upload-page .carousel .item {
  background: #1F1F1F;
  min-height: 650px;
  height: 100%;
}
#upload-page .carousel .requirement {
  float: left;
  max-width: 160px;
  width: 100%;
  margin-right: 22px;
}
#upload-page .carousel .requirement p {
  font-size: 16px;
}
#upload-page .carousel .requirement:last-child {
  margin-right: 0;
}
#upload-page .carousel .requirement img {
  margin-bottom: 2em;
}
#upload-page .carousel .cheers h2 {
  max-width: 400px;
  margin: 0 auto;
  padding-bottom: 0;
}
#upload-page .carousel .cheers-gif {
  width: 50%;
  margin: 0.5em auto;
}
#upload-page .carousel h2 {
  float: left;
  font-size: 24px;
  padding: 70px 0;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
}
#upload-page .carousel .handbook-link {
  color: #FFFFFF;
  float: right;
  margin: 70px 0;
  padding: 5px 0;
}
#upload-page .carousel .handbook-link:before {
  color: #FFBF43;
}
#upload-page .carousel a.uploads-link {
  color: #BABABA;
}
#upload-page .carousel a.uploads-link:hover, #upload-page .carousel a.uploads-link.active {
  color: #FFFFFF;
}
#upload-page .carousel h3 {
  color: #FFFFFF;
  font-size: 30px;
  margin-top: 1em;
}
#upload-page .carousel h3:before {
  display: block;
  font-size: 5em;
  margin-bottom: 0.35em;
}
#upload-page .carousel #submission-requirements .loading {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  padding-top: 50px;
}
#upload-page .carousel #submission-requirements .loading > div {
  font-size: 30px;
  color: white;
  width: 100px;
  height: 100px;
}
#upload-page .carousel #submission-requirements ul {
  margin-bottom: 48px;
}
#upload-page .carousel #submission-requirements ul:last-child {
  margin-bottom: 0px;
}
#upload-page .carousel #submission-requirements .submission-requirement {
  text-align: left;
}
#upload-page .carousel #submission-requirements .submission-requirement .icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #333333;
}
#upload-page .carousel #submission-requirements .submission-requirement img {
  width: 30px;
}
#upload-page .carousel .call-to-action {
  margin: 30px auto 0px;
}
#upload-page .carousel #agree-to-terms-of-service {
  width: 318px;
  margin: 0px auto 32px;
}
#upload-page .carousel #agree-to-terms-of-service .terms-wrapper {
  color: white;
  font-weight: 400;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
#upload-page .carousel #agree-to-terms-of-service .terms-wrapper input {
  flex: 0 0 15px;
}
#upload-page .carousel #agree-to-terms-of-service .terms-wrapper span {
  flex: 0 0 290px;
}
#upload-page .carousel .guideline-type {
  text-align: left;
}
#upload-page .carousel .guideline-images {
  width: 65px;
}
#upload-page .carousel .begin-upload-icons-button:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}
#upload-page .carousel button {
  margin-top: 0px;
}
#upload-page .carousel .upload-option {
  width: 450px;
  height: 450px;
  padding: 60px;
  text-align: center;
  background: #333333;
  color: #FFFFFF;
  display: inline-block;
  vertical-align: top;
  transition: background 0.3s ease;
}
#upload-page .carousel .upload-option:hover {
  background: #6D6D6D;
}
#upload-page .carousel .upload-option i {
  font-size: 120px;
  margin-bottom: 20px;
}
#upload-page .cheers {
  position: absolute;
  background: black;
  height: 100%;
  width: 100%;
  text-align: center;
  z-index: 9999;
}
#upload-page .cheers .cheers-gif {
  width: 50%;
  margin: 0.5em auto;
  display: block;
}
#upload-page .cheers p {
  margin: auto;
  text-align: center;
  color: #FFFFFF;
}
#upload-page .cheers #upload-more-icons {
  color: #FFFFFF;
  display: inline-flex;
  margin: 2em auto;
  transition: background-color 0.3s ease;
}
#upload-page .cheers #upload-more-icons:hover {
  background-color: #BABABA;
}
#upload-page .cheers h2 {
  max-width: 400px;
  margin: 0 auto;
  padding-bottom: 0;
  text-align: center;
  font-size: 1.714em;
  padding: 2em 0;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
}
#upload-page .tab {
  margin-right: 1em;
}
#upload-page .tab.active {
  color: #FFFFFF;
}
#upload-page .tab:hover {
  color: #BABABA;
}
#upload-page .create-a-collection input[type=text] {
  font-size: 2em;
  display: block;
  background: transparent;
  margin: 1em 0 0.5em;
}
#upload-page .create-a-collection input[type=text]::-webkit-input-placeholder {
  color: #6D6D6D;
}
#upload-page .create-a-collection input[type=text]:-moz-placeholder {
  color: #6D6D6D;
}
#upload-page .create-a-collection input[type=text]::-moz-placeholder {
  color: #6D6D6D;
}
#upload-page .create-a-collection input[type=text]:-ms-input-placeholder {
  color: #6D6D6D;
}
#upload-page .create-a-collection input[type=radio] {
  visibility: hidden;
  display: none;
}
#upload-page .create-a-collection input[type=radio] + label {
  cursor: pointer;
  text-align: left;
}
#upload-page .create-a-collection input[type=radio]:checked + label {
  color: #FFFFFF;
  background: transparent;
}
#upload-page .create-a-collection small {
  display: block;
  margin-bottom: 1.5em;
}
#upload-page .add-to-a-collection {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 100px;
  border-top: solid 1px #6D6D6D;
  border-bottom: solid 1px #6D6D6D;
}
#upload-page .add-to-a-collection input[type=radio].collection-option {
  display: none;
}
#upload-page .add-to-a-collection input[type=radio].collection-option:checked + label {
  background-color: transparent;
  border-color: #FFFFFF;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#upload-page .add-to-a-collection label.collection-option {
  font-size: 2em;
  padding: 0.25em 0;
  text-align: left;
  cursor: pointer;
  display: block;
  border-bottom: solid 1px #6D6D6D;
  color: #6D6D6D;
}
#upload-page .add-to-a-collection label.collection-option:hover {
  color: #FFFFFF;
}
#upload-page .form-item {
  display: none;
}
#upload-page .form-item.active {
  display: block;
}
#upload-page .uploading img,
#upload-page .moderating img {
  opacity: 0.2;
}
#upload-page .uploading .icon-inputs input,
#upload-page .uploading .icon-inputs ul,
#upload-page .submitting .icon-inputs input,
#upload-page .submitting .icon-inputs ul {
  opacity: 0;
  pointer-events: none;
}
#upload-page .uploading .icon-inputs .loading,
#upload-page .submitting .icon-inputs .loading {
  display: block;
}
#upload-page .icon-form.card.failed .back {
  background-color: #FFFFFF;
}
#upload-page .failed .drop-target {
  width: 45px;
  height: 45px;
  opacity: 0.5;
}
#upload-page .failed .drop-target img {
  width: 32px;
  height: 32px;
  margin-top: -16px;
  margin-left: -16px;
}
#upload-page .failed .icon-inputs,
#upload-page .failed .choose-file {
  display: none;
  pointer-events: none;
  visibility: hidden;
}
#upload-page .failed .content {
  padding: 24px;
  text-align: center;
}
#upload-page .failed .svg-error-list {
  color: #000000;
  height: 140px;
  text-align: left;
}
#upload-page .failed .svg-error-list li {
  padding-bottom: 8px;
}
#upload-page .failed .svg-error-item {
  padding-left: 18px;
  text-indent: -18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#upload-page .failed .svg-error-item:before {
  font-size: 10px;
  color: #F44E4E;
  margin-right: 8px;
}
#upload-page .failed .error {
  font-size: 14px;
  text-align: center;
  margin: 24px 0;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#upload-page .failed .error a:hover {
  color: #000000;
}
#upload-page .failed .error-front {
  font-size: 14px;
  text-align: center;
}
#upload-page .failed .three {
  max-width: 60px;
}
#upload-page .failed .filename {
  color: #F44E4E;
}
#upload-page .icon-inputs {
  transition: opacity 0.3s ease;
}
#upload-page .icon-inputs .loading {
  display: none;
  position: absolute;
  margin: 5em 0;
  left: 52%;
}
#upload-page #upload-form.active-target .upload-item {
  background: #1F1F1F;
}
#upload-page #upload-form.active-target #drop-zone {
  background: #6D6D6D;
}
#upload-page #upload-form .loading {
  height: 12px;
}
#upload-page #upload-form h2 {
  color: #FFFFFF;
  font-size: 1.714em;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  margin-top: 1em;
  margin-bottom: 2em;
}
#upload-page .upload-item {
  padding-bottom: 4em;
  transition: background-color 1s ease;
}
#upload-page .lower-half {
  margin-top: 2em;
  position: relative;
}
#upload-page .lower-half > .container {
  padding: 50px 0px;
}
#upload-page .lower-half.showBorder {
  border-top: solid 1px #6D6D6D;
}
#upload-page .lower-half.showBorder > .container:after {
  content: "";
  position: absolute;
  display: block;
  border: 15px solid transparent;
  width: 15px;
  height: 15px;
  left: 50%;
  margin-left: -15px;
  border-top-color: #1F1F1F;
  top: -2px;
  left: 0;
  margin-left: 0;
}
#upload-page .lower-half.showBorder > .container:before {
  content: "";
  position: absolute;
  display: block;
  border: 15px solid transparent;
  width: 15px;
  height: 15px;
  left: 50%;
  margin-left: -15px;
  border-top-color: #6D6D6D;
  top: 0;
  left: 0;
  margin-left: 0;
}
#upload-page #drop-zone, #upload-page #collection-drop-zone {
  text-align: center;
  margin: 1em 0;
  padding: 5em 0;
  font-size: 1.286em;
  color: #FFFFFF;
  background: #333333;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  transition: all 0.5s ease;
}
#upload-page #drop-zone.hidden, #upload-page #collection-drop-zone.hidden {
  transform: scale(0.01);
}
#upload-page #drop-zone .drop-more, #upload-page #collection-drop-zone .drop-more {
  display: none;
}
#upload-page #drop-zone .ui_upload:before, #upload-page #collection-drop-zone .ui_upload:before {
  display: block;
  font-size: 5em;
  margin-bottom: 0.25em;
}
#upload-page #drop-zone .ui_upload.updated-icon-color:before, #upload-page #collection-drop-zone .ui_upload.updated-icon-color:before {
  color: #94B2EB;
}
#upload-page #drop-zone:hover, #upload-page #collection-drop-zone:hover {
  background: #6D6D6D;
}
#upload-page #drop-zone.collapsed, #upload-page #collection-drop-zone.collapsed {
  background: transparent;
  font-size: 1.3em;
  padding: 0;
  display: inline-block;
}
#upload-page #drop-zone.collapsed:hover, #upload-page #collection-drop-zone.collapsed:hover {
  color: #F2F2F2;
}
#upload-page #drop-zone.collapsed .drop-line, #upload-page #collection-drop-zone.collapsed .drop-line {
  display: none;
}
#upload-page #drop-zone.collapsed .drop-more, #upload-page #collection-drop-zone.collapsed .drop-more {
  display: inline-block;
  border-bottom: 1px solid;
}
#upload-page #drop-zone.collapsed .ui_upload:before, #upload-page #collection-drop-zone.collapsed .ui_upload:before {
  display: inline;
  font-size: 1em;
  margin-right: 0.5em;
  top: 0.1em;
}
#upload-page .choose-file {
  display: inline-block;
  float: left;
  margin-top: 1em;
  transition: color 0.2s ease;
}
#upload-page .choose-file:hover {
  color: #FFFFFF;
}
#upload-page .choose-file:before {
  font-size: 0.8em;
  margin-right: 0.25em;
}
#upload-page .choose-file.ui_arrow-up {
  margin: 1em 0;
}
#upload-page .drop-target {
  width: 140px;
  height: 140px;
  background: #FFFFFF;
  position: relative;
}
#upload-page .drop-target img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  transition: all 0.5s ease;
}
#upload-page .delete-keyword:before {
  color: #F2F2F2;
  transition: color 0.3s ease;
}
#upload-page .delete-keyword:hover:before,
#upload-page .delete-collection-keyword:hover:before {
  color: #FFFFFF;
}
#upload-page .delete-keyword:before,
#upload-page .delete-collection-keyword:before {
  margin-left: 0.8em;
  font-size: 0.8em;
  padding: 0;
}
#upload-page .delete-icon {
  position: relative;
  top: 55px;
  -webkit-user-select: none;
}
#upload-page .delete-icon:before {
  font-size: 1em;
  padding: 10px;
}
#upload-page .suggested-noun,
#upload-page .keywords-field {
  background: transparent;
  border-bottom: 1px solid #333333;
  color: #FFFFFF;
  font-size: 18px;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0.25em;
  width: 100%;
}
#upload-page .suggested-noun::-webkit-input-placeholder,
#upload-page .keywords-field::-webkit-input-placeholder {
  color: #333333;
}
#upload-page .suggested-noun:-moz-placeholder,
#upload-page .keywords-field:-moz-placeholder {
  color: #333333;
}
#upload-page .suggested-noun::-moz-placeholder,
#upload-page .keywords-field::-moz-placeholder {
  color: #333333;
}
#upload-page .suggested-noun:-ms-input-placeholder,
#upload-page .keywords-field:-ms-input-placeholder {
  color: #333333;
}
#upload-page .suggested-noun {
  margin-bottom: 1em;
}
#upload-page .keywords {
  margin: 40px 0 2em 0;
}
#upload-page .keywords label {
  display: block;
}
#upload-page .keywords li {
  display: inline-block;
  font-size: 1.286em;
  margin: 0.5em 0.5em 0 0;
  color: #FFFFFF;
  background: #1F1F1F;
  padding: 0.35em 0.5em;
  transition: 0.5s ease all;
}
#upload-page .keywords li:last-child {
  margin-right: 0;
}
#upload-page .keywords li a {
  transition: all 0.3s ease;
}
#upload-page .image-back {
  opacity: 0.3;
  position: absolute;
  top: 120px;
  width: 100%;
  z-index: -1;
}
#upload-page .save-keywords {
  border: none;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  color: #FFFFFF;
  background: #BABABA;
  padding: 25px 80px;
  display: inline-block;
  transition: all 0.3s ease;
}
#upload-page .save-keywords img {
  margin-right: 24px;
}
#upload-page #create-collection-message {
  font-size: 1em;
  color: #FDEBEC;
}
#upload-page #create-collection-form .error {
  color: #FDEBEC;
  border-bottom-color: #FDEBEC;
  box-sizing: border-box;
}
#upload-page #create-collection-form .drop-down {
  position: absolute;
  right: 0px;
}
#upload-page .uploading-info {
  float: left;
  margin-bottom: 24px;
}
#upload-page .uploading-info h6 {
  color: #F2F2F2;
}
#upload-page .help-icon {
  margin-right: 20px;
}
#upload-page .icon-form {
  border-bottom: 1px solid #333333;
  max-height: 200em;
  overflow: hidden;
  transition: 0.5s ease all;
}
#upload-page .icon-form:last-child {
  border-bottom: 0;
  margin-bottom: 3em;
}
#upload-page .icon-form.remove {
  opacity: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
}
#upload-page .icon-form .radio-selects {
  border-top: #BABABA solid 1px;
  bottom: 0;
  position: absolute;
  width: 100%;
}
#upload-page .icon-form .radio-selects li {
  float: left;
  margin-right: 3.5em;
}
#upload-page .icon-form .radio-selects li:last-child {
  margin-right: 0;
}
#upload-page .icon-form .explanation {
  color: #BABABA;
}
#upload-page .icon-form .explanation li {
  display: none;
}
#upload-page .icon-form .explanation a {
  border-bottom: 1px solid;
  transition: color 0.3s ease;
}
#upload-page .icon-form .explanation a:hover {
  color: #FFFFFF;
}
#upload-page .icon-form .explanation .active {
  display: block;
  margin-top: 2em;
}
#upload-page .icon-form .explanation-toggle {
  color: #6D6D6D;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 1.2em;
  margin-left: 0.5em;
  cursor: pointer;
  transition: color 0.3s ease;
}
#upload-page .icon-form .explanation-toggle:hover {
  color: #F2F2F2;
}
#upload-page .icon-form .drop-down {
  font-size: 9px;
  transition: all 0.3s ease;
  margin-top: 3em;
  width: 100%;
}
#upload-page .icon-form .drop-down:before {
  right: 2em;
}
#upload-page .icon-form .drop-down:hover {
  margin-top: 1em;
}
#upload-page .icon-form .drop-down:hover:after {
  display: none;
}
#upload-page .icon-form .license-select-label {
  background: #333333;
  display: inline-block;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  cursor: pointer;
  float: left;
  padding: 12px;
  position: relative;
  text-align: center;
  transition: 0.3s ease color;
  width: 50%;
}
#upload-page .icon-form .license-select-label:before {
  display: block;
  font-size: 24px;
  padding-bottom: 6px;
}
#upload-page .icon-form .license-select-label:hover {
  color: #BABABA;
}
#upload-page .icon-form input[type=radio] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
#upload-page .icon-form input[type=radio]:checked + label {
  background: #BABABA;
  color: #000000;
}
#upload-page .icon-form.card {
  border: none;
  display: inline-block;
  height: 380px;
  margin: 2.12766% 0 0 2.12766%;
  width: 300px;
  overflow: visible;
}
#upload-page .icon-form.card:nth-of-type(3n+1) {
  margin-left: 0;
}
#upload-page .icon-form.card .front .delete-icon:before {
  color: #333333;
}
#upload-page .icon-form.card .front .delete-icon:before:hover {
  color: #000000;
}
#upload-page .icon-form.card .delete-icon {
  height: 12px;
  position: absolute;
  right: 14px;
  top: 17px;
  z-index: 1;
}
#upload-page .icon-form.card .delete-icon:before {
  padding: 6px;
}
#upload-page .icon-form.card .ui_arrow-left-line {
  position: absolute;
  top: 1em;
  left: 1em;
}
#upload-page .icon-form.card .ui_tag {
  position: absolute;
  top: 1em;
  left: 1em;
}
#upload-page .icon-form.card .front,
#upload-page .icon-form.card .back {
  height: 380px;
}
#upload-page .icon-form.card .loading {
  display: none;
}
#upload-page .icon-form.card .drop-target {
  width: 100%;
  height: 200px;
  margin: 4em 0;
}
#upload-page .icon-form.card .drop-target img {
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}
#upload-page .icon-form.card .suggested-noun {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  font-size: 1.25em;
  padding: 24px 5em 14px 1em;
  border-top: solid 1px #BABABA;
  border-bottom: none;
  margin: 0;
  color: black;
}
#upload-page .icon-form.card .suggested-noun::-webkit-input-placeholder {
  color: #BABABA;
}
#upload-page .icon-form.card .suggested-noun:-moz-placeholder {
  color: #BABABA;
}
#upload-page .icon-form.card .suggested-noun::-moz-placeholder {
  color: #BABABA;
}
#upload-page .icon-form.card .suggested-noun:-ms-input-placeholder {
  color: #BABABA;
}
#upload-page .icon-form.card .after-noun-added {
  bottom: 24px;
  position: absolute;
  right: 12px;
}
#upload-page .icon-form.card .after-noun-added:before {
  display: none;
}
#upload-page .icon-form.card .after-noun-added.is_ready:before {
  display: block;
}
#upload-page .icon-form.card .after-noun-added.is_ready span {
  display: none;
}
#upload-page .icon-form.card .keywords-field {
  font-size: 1.25em;
  color: #333333;
  padding: 1em 0;
  margin: 1em 0 0;
  color: #FFFFFF;
  border-color: #BABABA;
}
#upload-page .icon-form.card .keywords-field::-webkit-input-placeholder {
  color: #BABABA;
}
#upload-page .icon-form.card .keywords-field:-moz-placeholder {
  color: #BABABA;
}
#upload-page .icon-form.card .keywords-field::-moz-placeholder {
  color: #BABABA;
}
#upload-page .icon-form.card .keywords-field:-ms-input-placeholder {
  color: #BABABA;
}
#upload-page .icon-form.card .required-text {
  color: #BABABA;
  font-size: 13px;
  font-style: normal;
  position: absolute;
  right: 21px;
  text-transform: uppercase;
  top: 54px;
}
#upload-page .icon-form.card .carousel-back {
  font-size: 1em;
  padding: 0px;
  margin: 0px;
  float: left;
  background: none;
}
#upload-page .icon-form.card .carousel-back:before {
  font-size: 0.75em;
  margin-right: 0.5em;
}
#upload-page .icon-form.card .back {
  background: #333333;
}
#upload-page .icon-form.card .back input {
  font-size: 1.25em;
  padding-left: 1em;
  padding-right: 7em;
  padding-top: 32px;
}
#upload-page .icon-form.card .back input::-webkit-input-placeholder {
  color: #6D6D6D;
}
#upload-page .icon-form.card .back input:-moz-placeholder {
  color: #6D6D6D;
}
#upload-page .icon-form.card .back input::-moz-placeholder {
  color: #6D6D6D;
}
#upload-page .icon-form.card .back input:-ms-input-placeholder {
  color: #6D6D6D;
}
#upload-page .icon-form.card .back .keywords {
  height: 220px;
  margin: 0;
  overflow: auto;
  padding: 5px 12px;
}
#upload-page .icon-form.card .back .keywords li {
  background: #6D6D6D;
  color: #FFFFFF;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  padding: 8px 4px 8px 8px;
  margin: 1em 0.5em 0 0;
}
#upload-page .collection-tabs {
  margin: 2em 1em 2em 0;
}
#upload-page #icon-forms {
  margin: 0;
  padding: 0;
}
#upload-page .upload-item > .container {
  padding: 0;
}
#upload-page .user-icons {
  margin: 0 auto;
}
#upload-page .user-icons header {
  margin: 4em 0;
}
#upload-page .user-icons h3 {
  font-size: 1.571em;
  font-family: "ArbeitRegular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
#upload-page .user-icons h3:before {
  margin-right: 0.25em;
  font-size: 1em;
}
#upload-page #user-uploads .loading {
  margin-bottom: 8em;
}
#upload-page .disabled-submit {
  opacity: 0.6;
  cursor: not-allowed;
}
#upload-page .error-banner {
  width: 100%;
  transition: all 1s ease;
}
#upload-page .error-banner > div {
  background: #F44E4E;
  color: #FFF;
  padding: 24px;
  width: 300px;
  margin: 0 auto;
  text-align: center;
}
#upload-page .carousel .item.active .upload-banner {
  opacity: 1;
}
@charset "UTF-8";
.nowrap {
  white-space: nowrap;
}

/**
 * * Improves animation performance by forcing the use of GPU
 * * @group util
 * */
/**
 * * Fixes flicker in iOS animations
 * * @group util
 * * @link http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
 * */
/**
 * * Improves font rendering in WebKit and Firefox browsers
 * * @group util
 * */
/**
 * * Shortcut for setting *global* text selection styles.
 * * This won't work if applied to an element, but will work as a top level rule.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Shortcut for setting *local* text selection styles (applied to specific element).
 * * This does not seem to inherit to child elements 😞.
 * * @group util
 * * @param $background ($black) - The background color
 * * @param $text-color ($white) - The text color
 * */
/**
 * * Truncates text and adds ellipsis if it runs out of the box.
 * * Only works for single lines of text.
 * * @group util
 * */
/**
 * * Sets color of placeholder text for input element.
 * * @group util
 * * @param $color - The placeholder color
 * * @link http://css-tricks.com/snippets/css/style-placeholder-text/
 * */
/**
 * * Adds a carrot (triangle) to the bottom of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * */
/**
 * * Adds a carrot (triangle) to a designated side of a container, eg tooltips
 * * @group util
 * * @param $color - The color of the carrot
 * * @param $size - The size of the carrot (include units)
 * * @param $position - One of: top, topleft, left, right
 * * @param $line-color ($offwhite) - the line color of the carrot
 * * @deprecated
 * */
/**
 * * Hide elements without using display: none
 * * @group util
 * */
/**
 * * Vertically center elements
 * * @group util
 * * @link http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * */
/**
 * * Adds a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * */
/**
 * * Adds half a carrot to the bottom of a block of content
 * * @group util
 * * @param $color ($slate) - The color of the carrot
 * * @param $position (right) - The position of the carrot (right, left)
 * */
/**
 * * Creates browser prefix stack for the css filter property
 * * @group util
 * * @param $filters (greyscale(100%), invert(100%)) -
 * */
/* DEPRECATED - DO NOT USE */
body * {
  word-spacing: 0.1em;
}

/** A tool tip box that appears when parent is hovered.
 * *  @group util
 * *  @param {px} $width (220px) - the width of the box
 * *  @param {var} $color ($white) - the background color of the box
 * *
 * *  @example
 * *    <a class="parent">
 * *        <ul class="tool-tip-box">
 * *            <li>Tool Tip Box</li>
 * *        </ul>
 * *    </a>
 * */
/**
 * *  A box with content that slides left and right.
 * *  Put this mixin on the `<ul>` or `<ol>` container.
 * *  @group util
 * */
/**
 * *  Our default rectangular button style
 * *  @group util
 * *  @param $color ($stone) - The color of the button
 * *  @todo Shouldn't this just be a CSS class & not a SASS function?
 * */
#pricing #main-content {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  background-color: #FFFFFF;
}
#pricing .page-header {
  text-align: center;
  background: #1F1F1F;
  color: #F2F2F2;
  padding-top: 20px;
  padding-bottom: 60px;
}
#pricing .price-container {
  min-height: 100px;
}
#pricing .plan-type {
  color: #FFFFFF;
}
#pricing .plan-features {
  color: #FFFFFF;
  padding-top: 45px;
  font-family: "ArbeitMedium", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
#pricing .plan-features .comparison-info {
  background: #FFFFFF;
  color: black;
  min-height: 266px;
  padding: 24px;
  text-align: center;
}
#pricing .plan-features .comparison-info h3 {
  font-size: 25px;
  margin-bottom: 40px;
}
#pricing .plan-features .comparison-info .pricing-features {
  font-size: 18px;
  margin: 10px 0;
}
#pricing .plan-features .comparison-info .pricing-features img {
  width: 100px;
}

@media (min-width: 768px) {
  #pricing .plan-features .comparison-info .pricing-features {
    margin: 10px 0;
  }
}