Show how much you are under or over.

Show how much you are under or over.

@canvasHeight: 480px;
@headerHeight: 150px;
@toolsHeight: 100px;

@separatorWidth: 50px;
@hoverSeparatorWidth: 100px;

@tilesetWidth: 2622px; // retina
@tilesetHeight: 384px;

@tileSize: 12px;

@skyColour: rgb(179, 205, 209);

@warningColour: rgb(220, 80, 80);

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;

  height: 100%;

  overflow: hidden;

  background: rgb(53, 45, 39);
}

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;

  z-index: 100000;

  color: white;
  font-family: Arial, sans-serif;
  font-size: 12px;

  background: desaturate(darken(@skyColour, 5%), 10%);
  width: 511px;
  padding: 10px 10px;

  border-radius: 0 0 10px 10px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

header .options {
  height: 30px;
  width: 275px;
  float: left;
  text-align: center;
  padding-right: 10px;
  padding-left: 10px;
}

.options .width {
  margin-top: 14px;
  float: left;
  width: 50%;
  text-align: left;
}

#street-width {
  text-align: right;

  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
}
#street-width option {
  text-align: right;
  font-family: 'Arial', sans-serif;
  font-size: 12px;
}
#used-width,
#remaining-width {
  display: inline-block;
  text-align: left;
  width: 50px;

  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
}

#remaining {
  text-align: right;
}

#remaining[type="over"] {
  color: rgb(180, 40, 40);
}
#remaining[type="over"] .room {
  display: none;
}
#remaining[type="zero"] {
  opacity: 0;
}
#remaining[type="room"] .over {
  display: none;
}

header .sizes {
  border-left: 1px solid rgba(0, 0, 0, .1);
  width: 200px;
  padding-left: 10px;
  margin: -10px 0;
  margin-bottom: -5px;
  float: left;
  pointer-events: none;
}
header .sizes ul {
  padding: 0;
  margin: 0;
  margin-top: 10px;
  list-style: none;
}
header .sizes li {
  width: 40px;
  height: 60px;
  float: left;
}
header .sizes .icon {
  width: 25px;
  height: 25px;
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  -webkit-filter: invert(100%) drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
  -webkit-transform: translateZ(0); // prevents fuzzy retina
}
header .sizes .icon[type='pedestrian'] {
  background-image: url(../images/ui/icons/noun_project_2.svg);
  background-size: 16px / 2;
}
header .sizes .icon[type='bike'] {
  background-image: url(../images/ui/icons/noun_project_536.svg);
  background-size: 45px / 2;
}
header .sizes .icon[type='public-transit'] {
  background-image: url(../images/ui/icons/noun_project_97.svg);
  background-size: 35px / 2;
}
header .sizes .icon[type='car'] {
  background-image: url(../images/ui/icons/noun_project_72.svg);
  background-size: 35px / 2;
}
header .sizes .icon[type='nature'] {
  background-image: url(../images/ui/icons/noun_project_13130.svg);
  background-size: 40px / 2;
}
header .sizes .width {
  width: 40px;
  display: inline-block;
  text-align: center;
  position: relative;
  top: 8px;

  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 0;
}
header .sizes .bar {
  display: inline-block;
  height: 4px;
  margin-left: 8px;
  background: white;
  position: relative;
  top: -9px;

  border-radius: 1px;

  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

#street-section {
  position: absolute;
  display: block;
  left: 0;
  right: 0;

  z-index: 5;

  top: 0;

  bottom: 20px;
  height: @canvasHeight + 40;

  -webkit-user-select: none;
  user-select: none;
}

#street-section-canvas {
  z-index: 10;
  position: absolute;
  display: block;
  left: 50%;

  top: 0;

  -webkit-transition: width 500ms, margin-left 500ms;

  height: @canvasHeight + 40;
}
#street-section-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin-top: -1020px;
  height: @canvasHeight;

  background: @skyColour;

  // TODO: remove this hack
  border-top: 1001px solid @skyColour;
}

#street-section-sky .rear-clouds {
  position: absolute;

  background: url(../images/sky-rear.png);
  background-size: 250px 120px;

  background-repeat: repeat-x;
  background-position: 0 0;

  left: 0;
  top: 0;
  width: 100% + 250px;
  height: 120px;
}

#street-section-sky .front-clouds {
  position: absolute;

  background: url(../images/sky-front.png);
  background-size: 250px 280px;

  background-repeat: repeat-x;
  background-position: 0 0;

  opacity: .5;

  left: 0;
  top: 120px;
  width: 100% + 250px;
  height: 280px;
}

.background-dirt {
  background: url(../images/dirt.png);
  background-size: 120px 120px;
  background-repeat: repeat-x;
  background-position: 0 0;
}
.background-dirt-highlight {
  background: -webkit-linear-gradient(rgba(255, 255, 255, .24), rgba(255, 255, 255, .24)), url(../images/dirt.png);
  background-size: auto, 120px 120px;
  background-repeat: auto, repeat-x;
  background-position: auto, 0 0;
}

#street-section-dirt {
  position: absolute;
  left: 0;
  right: 0;
  top: @canvasHeight - 80;
  height: 80px;

  .background-dirt;

}
#street-section-left-building,
#street-section-right-building {
  display: block;
  position: absolute;

  z-index: 1000;

  top: 40px;

  width: 120px;
  height: @canvasHeight - 75px;
  background-size: 120px 480px;

  pointer-events: none;
}
#street-section-left-building {
  left: -90px;

  background-image: url(../images/building-commercial.png);
}
#street-section-right-building {
  right: -90px;

  background-image: url(../images/building-commercial-flip.png);
}

#tools {
  position: absolute;
  left: 100px;
  right: 100px;
  height: @toolsHeight;
  bottom: 0;
  padding-right: 10px;

  background: url(../images/toolbox-bk.png);

  box-shadow: 0 -2px 8px rgba(0, 0, 0, .25);
  border-radius: 10px 10px 0 0;

  text-align: right;

  z-index: 2000;

  -webkit-user-select: none;
  user-select: none;
}
#tools h1 {
  position: absolute;
  left: 0;
  top: 25px;
  display: block;
  width: 360px;
  height: 45px;
  padding: 0;
  margin: 0;

  pointer-events: none;

  text-align: left;
  text-indent: -9999px;

  background: url(../images/ui/title-dark.png) 0 0 no-repeat;
  background-size: 360px 45px;
}

#editable-street-canvas {
  width: 10000px;
  height: @canvasHeight;
  text-align: center;
}

#editable-street-section {
  height: @canvasHeight;
  text-align: center;
}
.segment {
  display: inline-block;
  height: @canvasHeight + 45;

  position: relative;

  -webkit-transition: width 150ms, left 150ms, -webkit-transform 150ms;
  -moz-transition: width 150ms, left 150ms, -moz-transform 150ms;
  transition: width 150ms, left 150ms, transform 150ms;
}
.segment.immediate-resize {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}
.segment:not(.unmovable):hover,
.segment:not(.unmovable).hover {
  background: rgba(255, 255, 255, .2);
}
.segment:not(.unmovable) {
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

.segment.outside .image {
  -webkit-filter: grayscale(100%);
  opacity: .2;
  -webkit-transform: translateZ(0);
}

.segment .image {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.segment .image img {
  position: absolute;
  width: @tilesetWidth / 2;
  pointer-events: none;
}

.segment.dragged-out {
  opacity: 0;
}
.segment.collapsed {
  width: 0 !important;
}

.segment.tool {
  background-size: 332px 70px;
  margin: 0 5px;
  height: 80px;
  margin-top: 12px;
  border-radius: 5px;
  background-color: rgba(25, 25, 25, 0.5);
}

.segment.tool:hover,
.segment.tool.hover {
  -webkit-transition: background 100ms;
  -moz-transition: background 100ms;
  transition: background 100ms;

  background: rgba(0, 0, 0, .2);
}

.segment.tool .image img {
  width: @tilesetWidth / 2 / 3;
}

.segment[type='separator'] {
  background: transparent;
  outline: none;

  position: absolute;

  pointer-events: none;
}

.segment.dragging {
  position: absolute;
  left: 0;
  top: 0;

  opacity: .75;

  z-index: 5000;

  pointer-events: none;

  background: rgba(0, 0, 0, .05);
}

.segment.poof {
  -webkit-transition: -webkit-transform 250ms, opacity 250ms;
  opacity: 0;
  -webkit-transform: scaleX(0);
}

body.segment-resize-dragging,
body.segment-resize-dragging * {
  cursor: col-resize !important;
}

.drag-handle {
  position: absolute;
  display: block;
  top: 170px;
  width: 10px;
  height: 100px;
  background: rgba(255, 255, 255, .2);
}

.segment .drag-handle {
  z-index: 10000;

  pointer-events: none;
  opacity: 0;

  cursor: col-resize;

  margin: -10px;
  border: 10px solid transparent;
}
.segment .drag-handle.left {
  left: -5px;
}
.segment .drag-handle.right {
  right: -5px;
}
body .segment:not(.unmovable):hover .drag-handle,
body .segment:not(.unmovable).hover .drag-handle {
  pointer-events: auto;
  opacity: 1;

}
body .segment:not(.unmovable):hover .drag-handle:hover,
body .segment:not(.unmovable).hover .drag-handle:hover {
  background: yellow;
}

.drag-handle.floating {
  outline: 1px solid red;
  opacity: 1;
  left: 0;
  top: 0;
  margin: 0;
  width: 30px;
  height: 120px;
  pointer-events: none;
  z-index: 50000;
}

.segment .grid {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  top: @canvasHeight - 35;

  background-image: -webkit-linear-gradient(0deg, rgb(140, 140, 140), transparent 8.333%);
  background-size: @tileSize 100%;
  background-repeat: repeat-x;
}

.segment .name {
  position: absolute;
  left: 4px;
  right: 4px;
  top: @canvasHeight + 10;
  color: rgb(160, 160, 160);

  z-index: 100;

  word-wrap: break-word;

  font-family: Arial, sans-serif;
  font-size: 12px;

  height: 40px;
  overflow: hidden;

  pointer-events: none;
}
.segment:hover .name,
.segment.hover .name {
  color: rgb(200, 200, 200);
}
.segment.outside .name {
  color: @warningColour;
}
.segment:hover.outside .name,
.segment.hover.outside .name {
  color: lighten(@warningColour, 10%);
}
.segment .width-edit-canvas {
  position: absolute;
  left: 0;
  right: 0;
  top: @canvasHeight - 35 + 10;
  height: 30px;
  padding-top: 5px;
  z-index: 150000;
  white-space: nowrap;

  pointer-events: none;
}
.segment:not(.unmovable):hover .width-edit-canvas,
.segment:not(.unmovable).hover .width-edit-canvas {
  pointer-events: auto;

  //margin: -20px;
  //border: 20px solid transparent;

  .background-dirt-highlight;
}

.segment .width-edit-canvas .decrement,
.segment .width-edit-canvas .increment {
  width: 30px;
  height: 25px;
  line-height: 25px;
  vertical-align: top;

  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  color: white;

  cursor: pointer;

  opacity: 0;
}
.segment:not(.unmovable):hover .decrement,
.segment:not(.unmovable):hover .increment,
.segment:not(.unmovable).hover .decrement,
.segment:not(.unmovable).hover .increment {
  opacity: 1;
}
.segment:not(.unmovable):hover .decrement:hover,
.segment:not(.unmovable):hover .increment:hover,
.segment:not(.unmovable).hover .decrement:hover,
.segment:not(.unmovable).hover .increment:hover {
  opacity: 1;
  outline: 1px solid red;
}
.segment:not(.unmovable):hover .decrement:active,
.segment:not(.unmovable):hover .increment:active,
.segment:not(.unmovable).hover .decrement:active,
.segment:not(.unmovable).hover .increment:active {
  color: red;
}

.segment .width-edit {
  width: 50px;
  text-align: center;

  line-height: 25px;
  height: 25px;
  border: none;

  font-family: 'Times New Roman', sans-serif;
  font-size: 16px;
  font-style: italic;

  opacity: 0;
}
.segment:not(.unmovable):hover .width-edit,
.segment:not(.unmovable).hover .width-edit {
  opacity: 1;

  color: white;
  background: transparent;
}
.segment .width-edit-canvas .width-edit:focus {
  outline: none;

  color: black;
  background: white;
  opacity: 1;
}
.segment:not(.unmovable).outside .width-edit {
  color: lighten(@warningColour, 10%);
}

.segment .width {
  position: absolute;
  left: 0;
  right: -1px;
  border-left: 1px solid rgb(80, 80, 80);
  border-right: 1px solid rgb(80, 80, 80);
  top: @canvasHeight - 35;
  height: 80px;
  line-height: 58px;
  color: rgb(160, 160, 160);

  font-family: 'Times New Roman', sans-serif;
  font-size: 16px;
  font-style: italic;

  pointer-events: none;
}
.segment:hover .width,
.segment.hover .width {
  color: rgb(200, 200, 200);
}
.segment.outside .width {
  color: @warningColour;
}

.segment.tool .name,
.segment.tool .width {
  display: none;
}

body.segment-move-dragging,
body.segment-move-dragging * {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}
body.segment-move-dragging #editable-street-section .segment {
  -webkit-transition: width 100ms, margin-left 100ms;
  -moz-transition: width 100ms, margin-left 100ms;
  transition: width 100ms, margin-left 100ms;
}

body.segment-move-dragging #editable-street-section > div:not([type='separator']) {
  pointer-events: none;
}

body.segment-move-dragging #editable-street-section > div[type='separator'] {
  pointer-events: auto;
  -webkit-transition: width 100ms;
}
body.segment-move-dragging #editable-street-section > div[type='separator'].hovered-over {
  width: @hoverSeparatorWidth;
}
body.segment-move-dragging #editable-street-section > div[type='separator'].hovered-over + div {
  margin-left: @hoverSeparatorWidth - @separatorWidth;
}

#pi {
  position: absolute;
  right: 10px;
  bottom: 15px;
  width: 40px;
  height: 10px;
  z-index: 10000;
}

#warning {
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;

  opacity: 0;

  background: rgb(255, 0, 0);
  -webkit-transition: opacity 500ms;
  -webkit-transition-delay: 100ms;
  -moz-transition: opacity 500ms;
  -moz-transition-delay: 100ms;
}
#warning.active {
  opacity: .2;
  -webkit-transition: none;
  -moz-transition: none;
}

@canvasHeight: 480px;
@headerHeight: 150px;
@toolsHeight: 100px;

@separatorWidth: 50px;
@hoverSeparatorWidth: 100px;

@tilesetWidth: 2622px; // retina
@tilesetHeight: 384px;

@tileSize: 12px;

@skyColour: rgb(179, 205, 209);

@warningColour: rgb(220, 80, 80);

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;

  height: 100%;

  overflow: hidden;

  background: rgb(53, 45, 39);
}

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;

  z-index: 100000;

  color: white;
  font-family: Arial, sans-serif;
  font-size: 12px;

  background: desaturate(darken(@skyColour, 5%), 10%);
  width: 511px;
  padding: 10px 10px;

  border-radius: 0 0 10px 10px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

header .options {
  height: 30px;
  width: 285px;
  float: left;
  text-align: center;
  padding-right: 10px;
}

.options .width {
  margin-top: 14px;
  float: left;
  width: 50%;
  text-align: left;
}

#street-width {
  text-align: right;

  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
}
#street-width option {
  text-align: right;
  font-family: 'Arial', sans-serif;
  font-size: 12px;
}
#used-width,
#remaining-width {
  display: inline-block;
  text-align: left;
  width: 50px;

  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
}

#remaining {
  text-align: right;
}

#remaining[type="over"] {
  color: rgb(180, 40, 40);
}
#remaining[type="over"] .room {
  display: none;
}
#remaining[type="zero"] {
  opacity: 0;
}
#remaining[type="room"] .over {
  display: none;
}

header .sizes {
  border-left: 1px solid rgba(0, 0, 0, .1);
  width: 200px;
  padding-left: 10px;
  margin: -10px 0;
  margin-bottom: -5px;
  float: left;
  pointer-events: none;
}
header .sizes ul {
  padding: 0;
  margin: 0;
  margin-top: 10px;
  list-style: none;
}
header .sizes li {
  width: 40px;
  height: 60px;
  float: left;
}
header .sizes .icon {
  width: 25px;
  height: 25px;
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  -webkit-filter: invert(100%) drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
  -webkit-transform: translateZ(0); // prevents fuzzy retina
}
header .sizes .icon[type='pedestrian'] {
  background-image: url(../images/ui/icons/noun_project_2.svg);
  background-size: 16px / 2;
}
header .sizes .icon[type='bike'] {
  background-image: url(../images/ui/icons/noun_project_536.svg);
  background-size: 45px / 2;
}
header .sizes .icon[type='public-transit'] {
  background-image: url(../images/ui/icons/noun_project_97.svg);
  background-size: 35px / 2;
}
header .sizes .icon[type='car'] {
  background-image: url(../images/ui/icons/noun_project_72.svg);
  background-size: 35px / 2;
}
header .sizes .icon[type='nature'] {
  background-image: url(../images/ui/icons/noun_project_13130.svg);
  background-size: 40px / 2;
}
header .sizes .width {
  width: 40px;
  display: inline-block;
  text-align: center;
  position: relative;
  top: 8px;

  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 0;
}
header .sizes .bar {
  display: inline-block;
  height: 4px;
  margin-left: 8px;
  background: white;
  position: relative;
  top: -9px;

  border-radius: 1px;

  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

#street-section {
  position: absolute;
  display: block;
  left: 0;
  right: 0;

  z-index: 5;

  top: 0;

  bottom: 20px;
  height: @canvasHeight + 40;

  -webkit-user-select: none;
  user-select: none;
}

#street-section-canvas {
  z-index: 10;
  position: absolute;
  display: block;
  left: 50%;

  top: 0;

  -webkit-transition: width 500ms, margin-left 500ms;

  height: @canvasHeight + 40;
}
#street-section-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin-top: -1020px;
  height: @canvasHeight;

  background: @skyColour;

  // TODO: remove this hack
  border-top: 1001px solid @skyColour;
}

#street-section-sky .rear-clouds {
  position: absolute;

  background: url(../images/sky-rear.png);
  background-size: 250px 120px;

  background-repeat: repeat-x;
  background-position: 0 0;

  left: 0;
  top: 0;
  width: 100% + 250px;
  height: 120px;
}

#street-section-sky .front-clouds {
  position: absolute;

  background: url(../images/sky-front.png);
  background-size: 250px 280px;

  background-repeat: repeat-x;
  background-position: 0 0;

  opacity: .5;

  left: 0;
  top: 120px;
  width: 100% + 250px;
  height: 280px;
}

.background-dirt {
  background: url(../images/dirt.png);
  background-size: 120px 120px;
  background-repeat: repeat-x;
  background-position: 0 0;
}
.background-dirt-highlight {
  background: -webkit-linear-gradient(rgba(255, 255, 255, .24), rgba(255, 255, 255, .24)), url(../images/dirt.png);
  background-size: auto, 120px 120px;
  background-repeat: auto, repeat-x;
  background-position: auto, 0 0;
}

#street-section-dirt {
  position: absolute;
  left: 0;
  right: 0;
  top: @canvasHeight - 80;
  height: 80px;

  .background-dirt;

}
#street-section-left-building,
#street-section-right-building {
  display: block;
  position: absolute;

  z-index: 1000;

  top: 40px;

  width: 120px;
  height: @canvasHeight - 75px;
  background-size: 120px 480px;

  pointer-events: none;
}
#street-section-left-building {
  left: -90px;

  background-image: url(../images/building-commercial.png);
}
#street-section-right-building {
  right: -90px;

  background-image: url(../images/building-commercial-flip.png);
}

#tools {
  position: absolute;
  left: 100px;
  right: 100px;
  height: @toolsHeight;
  bottom: 0;
  padding-right: 10px;

  background: url(../images/toolbox-bk.png);

  box-shadow: 0 -2px 8px rgba(0, 0, 0, .25);
  border-radius: 10px 10px 0 0;

  text-align: right;

  z-index: 2000;

  -webkit-user-select: none;
  user-select: none;
}
#tools h1 {
  position: absolute;
  left: 0;
  top: 25px;
  display: block;
  width: 360px;
  height: 45px;
  padding: 0;
  margin: 0;

  pointer-events: none;

  text-align: left;
  text-indent: -9999px;

  background: url(../images/ui/title-dark.png) 0 0 no-repeat;
  background-size: 360px 45px;
}

#editable-street-canvas {
  width: 10000px;
  height: @canvasHeight;
  text-align: center;
}

#editable-street-section {
  height: @canvasHeight;
  text-align: center;
}
.segment {
  display: inline-block;
  height: @canvasHeight + 45;

  position: relative;

  -webkit-transition: width 150ms, left 150ms, -webkit-transform 150ms;
  -moz-transition: width 150ms, left 150ms, -moz-transform 150ms;
  transition: width 150ms, left 150ms, transform 150ms;
}
.segment.immediate-resize {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}
.segment:not(.unmovable):hover,
.segment:not(.unmovable).hover {
  background: rgba(255, 255, 255, .2);
}
.segment:not(.unmovable) {
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

.segment.outside .image {
  -webkit-filter: grayscale(100%);
  opacity: .2;
  -webkit-transform: translateZ(0);
}

.segment .image {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.segment .image img {
  position: absolute;
  width: @tilesetWidth / 2;
  pointer-events: none;
}

.segment.dragged-out {
  opacity: 0;
}
.segment.collapsed {
  width: 0 !important;
}

.segment.tool {
  background-size: 332px 70px;
  margin: 0 5px;
  height: 80px;
  margin-top: 12px;
  border-radius: 5px;
  background-color: rgba(25, 25, 25, 0.5);
}

.segment.tool:hover,
.segment.tool.hover {
  -webkit-transition: background 100ms;
  -moz-transition: background 100ms;
  transition: background 100ms;

  background: rgba(0, 0, 0, .2);
}

.segment.tool .image img {
  width: @tilesetWidth / 2 / 3;
}

.segment[type='separator'] {
  background: transparent;
  outline: none;

  position: absolute;

  pointer-events: none;
}

.segment.dragging {
  position: absolute;
  left: 0;
  top: 0;

  opacity: .75;

  z-index: 5000;

  pointer-events: none;

  background: rgba(0, 0, 0, .05);
}

.segment.poof {
  -webkit-transition: -webkit-transform 250ms, opacity 250ms;
  opacity: 0;
  -webkit-transform: scaleX(0);
}

body.segment-resize-dragging,
body.segment-resize-dragging * {
  cursor: col-resize !important;
}

.drag-handle {
  position: absolute;
  display: block;
  top: 170px;
  width: 10px;
  height: 100px;
  background: rgba(255, 255, 255, .2);
}

.segment .drag-handle {
  z-index: 10000;

  pointer-events: none;
  opacity: 0;

  cursor: col-resize;

  margin: -10px;
  border: 10px solid transparent;
}
.segment .drag-handle.left {
  left: -5px;
}
.segment .drag-handle.right {
  right: -5px;
}
body .segment:not(.unmovable):hover .drag-handle,
body .segment:not(.unmovable).hover .drag-handle {
  pointer-events: auto;
  opacity: 1;

}
body .segment:not(.unmovable):hover .drag-handle:hover,
body .segment:not(.unmovable).hover .drag-handle:hover {
  background: yellow;
}

.drag-handle.floating {
  outline: 1px solid red;
  opacity: 1;
  left: 0;
  top: 0;
  margin: 0;
  width: 30px;
  height: 120px;
  pointer-events: none;
  z-index: 50000;
}

.segment .grid {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  top: @canvasHeight - 35;

  background-image: -webkit-linear-gradient(0deg, rgb(140, 140, 140), transparent 8.333%);
  background-size: @tileSize 100%;
  background-repeat: repeat-x;
}

.segment .name {
  position: absolute;
  left: 4px;
  right: 4px;
  top: @canvasHeight + 10;
  color: rgb(160, 160, 160);

  z-index: 100;

  word-wrap: break-word;

  font-family: Arial, sans-serif;
  font-size: 12px;

  height: 40px;
  overflow: hidden;

  pointer-events: none;
}
.segment:hover .name,
.segment.hover .name {
  color: rgb(200, 200, 200);
}
.segment.outside .name {
  color: @warningColour;
}
.segment:hover.outside .name,
.segment.hover.outside .name {
  color: lighten(@warningColour, 10%);
}
.segment .width-edit-canvas {
  position: absolute;
  left: 0;
  right: 0;
  top: @canvasHeight - 35 + 10;
  height: 30px;
  padding-top: 5px;
  z-index: 150000;
  white-space: nowrap;

  pointer-events: none;
}
.segment:not(.unmovable):hover .width-edit-canvas,
.segment:not(.unmovable).hover .width-edit-canvas {
  pointer-events: auto;

  //margin: -20px;
  //border: 20px solid transparent;

  .background-dirt-highlight;
}

.segment .width-edit-canvas .decrement,
.segment .width-edit-canvas .increment {
  width: 30px;
  height: 25px;
  line-height: 25px;
  vertical-align: top;

  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  color: white;

  cursor: pointer;

  opacity: 0;
}
.segment:not(.unmovable):hover .decrement,
.segment:not(.unmovable):hover .increment,
.segment:not(.unmovable).hover .decrement,
.segment:not(.unmovable).hover .increment {
  opacity: 1;
}
.segment:not(.unmovable):hover .decrement:hover,
.segment:not(.unmovable):hover .increment:hover,
.segment:not(.unmovable).hover .decrement:hover,
.segment:not(.unmovable).hover .increment:hover {
  opacity: 1;
  outline: 1px solid red;
}
.segment:not(.unmovable):hover .decrement:active,
.segment:not(.unmovable):hover .increment:active,
.segment:not(.unmovable).hover .decrement:active,
.segment:not(.unmovable).hover .increment:active {
  color: red;
}

.segment .width-edit {
  width: 50px;
  text-align: center;

  line-height: 25px;
  height: 25px;
  border: none;

  font-family: 'Times New Roman', sans-serif;
  font-size: 16px;
  font-style: italic;

  opacity: 0;
}
.segment:not(.unmovable):hover .width-edit,
.segment:not(.unmovable).hover .width-edit {
  opacity: 1;

  color: white;
  background: transparent;
}
.segment .width-edit-canvas .width-edit:focus {
  outline: none;

  color: black;
  background: white;
  opacity: 1;
}
.segment:not(.unmovable).outside .width-edit {
  color: lighten(@warningColour, 10%);
}

.segment .width {
  position: absolute;
  left: 0;
  right: -1px;
  border-left: 1px solid rgb(80, 80, 80);
  border-right: 1px solid rgb(80, 80, 80);
  top: @canvasHeight - 35;
  height: 80px;
  line-height: 58px;
  color: rgb(160, 160, 160);

  font-family: 'Times New Roman', sans-serif;
  font-size: 16px;
  font-style: italic;

  pointer-events: none;
}
.segment:hover .width,
.segment.hover .width {
  color: rgb(200, 200, 200);
}
.segment.outside .width {
  color: @warningColour;
}

.segment.tool .name,
.segment.tool .width {
  display: none;
}

body.segment-move-dragging,
body.segment-move-dragging * {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}
body.segment-move-dragging #editable-street-section .segment {
  -webkit-transition: width 100ms, margin-left 100ms;
  -moz-transition: width 100ms, margin-left 100ms;
  transition: width 100ms, margin-left 100ms;
}

body.segment-move-dragging #editable-street-section > div:not([type='separator']) {
  pointer-events: none;
}

body.segment-move-dragging #editable-street-section > div[type='separator'] {
  pointer-events: auto;
  -webkit-transition: width 100ms;
}
body.segment-move-dragging #editable-street-section > div[type='separator'].hovered-over {
  width: @hoverSeparatorWidth;
}
body.segment-move-dragging #editable-street-section > div[type='separator'].hovered-over + div {
  margin-left: @hoverSeparatorWidth - @separatorWidth;
}

#pi {
  position: absolute;
  right: 10px;
  bottom: 15px;
  width: 40px;
  height: 10px;
  z-index: 10000;
}

#warning {
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;

  opacity: 0;

  background: rgb(255, 0, 0);
  -webkit-transition: opacity 500ms;
  -webkit-transition-delay: 100ms;
  -moz-transition: opacity 500ms;
  -moz-transition-delay: 100ms;
}
#warning.active {
  opacity: .2;
  -webkit-transition: none;
  -moz-transition: none;
}


fix vendor prefix

fix vendor prefix

#hero {
  @subheadColor: #747474;
  padding-bottom: 30px;

  h1 {
    // font-family: 'Source Sans Pro',sans-serif; // A/B Testing (app.css.less)
    font-size: 82px;
    font-weight: 600;
    line-height: 92px;
    text-align: center;
    em {
      color: @circleBlueLight;
    }
  }

  h3 {
    text-align: center;
    font-size: 22px;
    color: @subheadColor;
    margin: 0;
    font-size: 20px;
    font-weight: 200;
    line-height: 26px;
  }

  .how {
    margin-top: 5em;
    .span4 {
      text-align: center;
    }
    @animation_duration : 800ms;
@animation_delay : 800ms;
@cascade_delay : 50ms;
.stories-procedure {
  .step:nth-of-type(1) {
    .direction,
    .pin {
      animation: flash @animation_duration @animation_delay + (@cascade_delay * 1);
      -webkit-animation: flash @animation_duration @animation_delay + (@cascade_delay * 1);
    }
  }
  .step:nth-of-type(2) {
    .direction,
    .pin {
      animation: flash @animation_duration @animation_delay + (@cascade_delay * 2);
      -webkit-animation: flash @animation_duration @animation_delay + (@cascade_delay * 2);
    }
  }
  .step:nth-of-type(4) {
    .direction,
    .pin {
      animation: flash @animation_duration @animation_delay + (@cascade_delay * 3);
      -webkit-animation: flash @animation_duration @animation_delay + (@cascade_delay * 3);
    }
  }
  .step:nth-of-type(5) {
    .direction,
    .pin {
      animation: flash @animation_duration @animation_delay + (@cascade_delay * 4);
      -webkit-animation: flash @animation_duration @animation_delay + (@cascade_delay * 4);
    }
  }
  .step:nth-of-type(1) {
    .track {
      animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 1);
      -webkit-animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 1);
    }
  }
  .step:nth-of-type(2) {
    .track {
      animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 2);
      -webkit-animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 2);
    }
  }
  .step:nth-of-type(4) {
    .track {
      animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 3);
      -webkit-animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 3);
    }
  }
  .step:nth-of-type(5) {
    .track {
      animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 4);
      -webkit-animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 4);
    }
  }
}
@keyframes flash {
  0% { stroke-width: 0; }
 50% { stroke-width: 10; }
 100% { stroke-width: 0; }
}
@-webkit-keyframes flash {
  0% { stroke-width: 0; }
 50% { stroke-width: 10; }
 100% { stroke-width: 0; }
}
@keyframes flash-track {
  0% { stroke-width: 2; }
 50% { stroke-width: 10; }
 100% { stroke-width: 2; }
}
@-webkit-keyframes flash-track {
  0% { stroke-width: 2; }
 50% { stroke-width: 10; }
 100% { stroke-width: 2; }
}

  }

  .hero-unit-cta {
    margin-top: 5em;
    padding-top: 40px;
    border-top: dotted 1px @circleFont;

    .ctabox {
      text-align: center;
      p {
        color: @circleBlueLight;
      }
      .btn {
        margin: 10px 0;
      }
    }
  }
}

#hero {
  @subheadColor: #747474;
  padding-bottom: 30px;

  h1 {
    // font-family: 'Source Sans Pro',sans-serif; // A/B Testing (app.css.less)
    font-size: 82px;
    font-weight: 600;
    line-height: 92px;
    text-align: center;
    em {
      color: @circleBlueLight;
    }
  }

  h3 {
    text-align: center;
    font-size: 22px;
    color: @subheadColor;
    margin: 0;
    font-size: 20px;
    font-weight: 200;
    line-height: 26px;
  }

  .how {
    margin-top: 5em;
    .span4 {
      text-align: center;
    }
    @animation_duration : 800ms;
@animation_delay : 800ms;
@cascade_delay : 50ms;
.stories-procedure {
  .step:nth-of-type(1) {
    .direction,
    .pin {
      animation: flash @animation_duration @animation_delay + (@cascade_delay * 1);
      -webkit-animation: flash @animation_duration @animation_delay + (@cascade_delay * 1);
    }
  }
  .step:nth-of-type(2) {
    .direction,
    .pin {
      animation: flash @animation_duration @animation_delay + (@cascade_delay * 2);
      -webkit-animation: flash @animation_duration @animation_delay + (@cascade_delay * 2);
    }
  }
  .step:nth-of-type(4) {
    .direction,
    .pin {
      webkit-animation: flash @animation_duration @animation_delay + (@cascade_delay * 3);
      -webkit-animation: flash @animation_duration @animation_delay + (@cascade_delay * 3);
    }
  }
  .step:nth-of-type(5) {
    .direction,
    .pin {
      animation: flash @animation_duration @animation_delay + (@cascade_delay * 4);
      -webkit-animation: flash @animation_duration @animation_delay + (@cascade_delay * 4);
    }
  }
  .step:nth-of-type(1) {
    .track {
      animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 1);
      -webkit-animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 1);
    }
  }
  .step:nth-of-type(2) {
    .track {
      animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 2);
      -webkit-animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 2);
    }
  }
  .step:nth-of-type(4) {
    .track {
      webkit-animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 3);
      -webkit-animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 3);
    }
  }
  .step:nth-of-type(5) {
    .track {
      animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 4);
      -webkit-animation: flash-track @animation_duration @animation_delay + (@cascade_delay * 4);
    }
  }
}
@keyframes flash {
  0% { stroke-width: 0; }
 50% { stroke-width: 10; }
 100% { stroke-width: 0; }
}
@-webkit-keyframes flash {
  0% { stroke-width: 0; }
 50% { stroke-width: 10; }
 100% { stroke-width: 0; }
}
@keyframes flash-track {
  0% { stroke-width: 2; }
 50% { stroke-width: 10; }
 100% { stroke-width: 2; }
}
@-webkit-keyframes flash-track {
  0% { stroke-width: 2; }
 50% { stroke-width: 10; }
 100% { stroke-width: 2; }
}

  }

  .hero-unit-cta {
    margin-top: 5em;
    padding-top: 40px;
    border-top: dotted 1px @circleFont;

    .ctabox {
      text-align: center;
      p {
        color: @circleBlueLight;
      }
      .btn {
        margin: 10px 0;
      }
    }
  }
}


fix spacing in customer section for small screens

// temporary hacks for mocking up initial design
#navbar,
#sticky-help-link,
.main-foot {
  display: none !important;
}
// temporary hacks for mocking up initial design

@bezier_fadein: cubic-bezier(0.445, 0.05, 0.55, 0.95);
@bezier_transform: cubic-bezier(0.39, 0.575, 0.565, 1);

@prolog_open_duration: 500ms; // default 1000ms
@prolog_open_delay: (@prolog_open_duration / 10);

@prolog_light_on_dark: #aaa;

@home_drawing_offset: 5px;

@prolog_h1_font: 72px;
@prolog_h1_line: @prolog_h1_font;
@prolog_h3_font: 20px;
@prolog_h3_line: (@prolog_h3_font * 1.5); // 30px
@prolog_h5_font: 16px;
@prolog_h5_line: (@prolog_h5_font * 1.5); // 24px

@prolog_cover_fadein: 500ms; // default 500ms
@prolog_cover_fadeout: (@prolog_cover_fadein / 2);

@purpose_drawings_width: 34%; // default 34%

@zindex_home_cover: 10; // These should move to a less file in charge of managing z-indexes
@zindex_home_nav:          (@zindex_home_cover + 2);
@zindex_home_top_shelf:    (@zindex_home_cover + 1);
@zindex_home_avatars:      (@zindex_home_cover + 2);
@zindex_home_slogans:      (@zindex_home_cover + 2);
@zindex_home_bottom_shelf: (@zindex_home_cover + 2);
@zindex_home_action:       (@zindex_home_cover + 2);

@empx: 16px;
@lipx: 24px;

@tools_brands:
  ruby, #CC342D,
  rails, #CC342D,
  python, #3776ab,
  javascript, #FFCD0A,
  java, #E76F00,
  php, #6A9AD1,
  clojure, #91dc47,
  django, #092e20,
  node, #8CC84B,
  safari, #1280f3,
  chrome, #db4437,
  firefox, #E66000,
  casper, #000000,
  selenium, #2bb033,
  phantom, #4ad5db,
  rabbit, #ff6600,
  beanstalkd, #000000,
  resque, #CE1211,
  capistrano, #52C1DB,
  amazon, #FCB034,
  rackspace, #CE1330,
  joyent, #FF6600,
  heroku, #430098,
  engineyard, #E92429,
  nodejitsu, #333333,
  fabric, #FECB4A,
  docker, #3b8cb3,
  mysql, #e97b00,
  postgres, #336792,
  mongo, #49A748,
  redis, #D82A20,
  riak, #F8981D,
  sqlite, #0f80cc,
  elasticsearch, #84AC4F,
  cassandra, #1287B1;

// These should be listed in the order they appear on the page.
@customers_brands:
  shopify, #96bf48,
  intercom, #8bdaff,
  spotify, #81b71a,
  kickstarter, #2BDE73,
  gocardless, #3A6190;

@home_article_width: 1000px;
@purpose_h1_width: 700px;
@practice_h1_width: 900px;
@potential_h1_width: 800px;

@home_nav_logo: @lipx;
@home_action_width: (@tile * 3);
@home_action_height: @tile;

@home_drawings_speed: 500ms;
@home_drawings_cascade: (@home_drawings_speed / 15);
@home_drawings_bounce: cubic-bezier(.55,-0.55,.55,2.33);

@practice_tool_size: 50px;
@practice_tool_grow: 1.2;
@practice_tool_speed: 400ms;
@practice_tool_timing: ease-in-out;
@practice_tool_weight: 3;

@practice_hover_shadow: drop-shadow(0 13px 3px fade(@black, 13));

@practice_logo_height: @lipx;

@quote_avatar_size: (@tile / 2);
@quote_speed: 500ms;

@home_color_last_cta: @blue;
@home_margin_footer: (@tile / 2);

.home {
  &.page {
    font-size: 1.1428572em; // 16px
    line-height: 1.5em; // 24px
    h1 {
      font-size: @prolog_h1_font;
      line-height: @prolog_h1_line;
      font-weight: 300;
    }
    h3 {
      font-size: @prolog_h3_font;
      line-height: @prolog_h3_line;
      font-weight: normal;
    }
    h5 {
      font-size: @prolog_h5_font;
      line-height: @prolog_h5_line;
      font-weight: normal;
      margin: 1em 0;
    }
  }
  a {
    &:hover {
      i {
        path {
          stroke: @linkColorHover;
          transition: stroke 200ms;
        }
      }
    }
    &:not(:hover) {
      color: @black;
    }
    i {
      path {
        stroke: @grayDark;
        stroke-width: 8;
      }
    }
  }
}
.home-nav {
  .animation(prolog-down @prolog_open_duration @bezier_fadein @prolog_open_duration both);
  .box-sizing(border-box);
  .vertGradient(fade(@white, 0), fade(@white, 0));
  position: fixed;
  z-index: @zindex_home_nav; // ducks under prolog content intentionally
  left: 0;
  top: 0;
  width: 100%;
  height: @tile;
  background-size: 100% 0;
  background-position: bottom center;
  background-repeat: no-repeat;
  border-bottom: 1px solid fade(@black, 13);
  overflow: hidden;
  &.logo-visible {
    .promo {
      top: -100%;
      opacity: 0;
    }
    .logo-circleci {
      left: 0;
      opacity: 1;
      pointer-events: auto;
      transition+: left @prolog_cover_fadein;
      transition+: opacity @prolog_cover_fadein (@prolog_cover_fadeout / 2);
    }
  }
  &.cta-visible {
    &:not(.cta-invisible) {
      .login {
        top: -100%;
        opacity: 0;
      }
      .action {
        right: 0;
        opacity: 1;
        pointer-events: auto;
        transition+: right @prolog_cover_fadein;
        transition+: opacity @prolog_cover_fadein (@prolog_cover_fadeout / 2);
      }
    }
  }
  &.bkg-visible {
    .vertGradient(@white, @white);
    background-size: 100% 100%;
    &:not(.bkg-invisible) {
      box-shadow: 1px 2px fade(@black, 08);
      border-color: @white;
    }
  }
  &.bkg-invisible {
    background-position: top center;
  }
  a {
    .flexy(center);
    position: absolute;
    top: 0;
    height: 100%;
    transition+: top @prolog_cover_fadeout;
    transition+: left @prolog_cover_fadeout;
    transition+: right @prolog_cover_fadeout;
    transition+: opacity @prolog_cover_fadeout;
  }
  .promo,
  .login {
    opacity: 1;
    &:not(:hover) {
      color: @grayLight;
    }
  }
  .promo {
    left: 0;
    padding: 0 1.5em;
  }
  .login {
    right: 0;
    padding: 0 1.5em;
  }
  .logo-circleci {
    left: @tile;
    padding: 0 1.5em;
    opacity: 0;
    pointer-events: none;
    figure {
      margin: 0;
      width: 6em;
      height: 1.5em;
    }
    svg {
      height: 100%;
      fill: @grayLighter;
    }
  }
  .action {
    .flexy(center, center);
    right: @tile;
    top: ~"calc(50% - 1.5em)";
    height: auto;
    font-size: .875em;
    color: @black;
    margin: 0 1.5em;
    padding: .5em 1em;
    background: @white;
    border: 1px solid @gray;
    border-radius: (@home_action_height / 2);
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    &:hover {
      color: @white;
      background: @gray;
      transition: 100ms;
    }
  }
}
.home-prolog,
.home-epilog {
  .flexy(center, center, column);
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.home-prolog {
  background: @grayDark;
  color: @prolog_light_on_dark;
  a:not([role="button"]) {
    color: @gray;
    transition: color 300ms;
    i {
      path {
        stroke: @gray;
        stroke-width: 8;
        transition: stroke 300ms;
      }
    }
    &:hover {
      color: @white;
      transition: color 200ms;
      i {
        path {
          stroke: @white;
          transition: stroke 200ms;
        }
      }
    }
  }
  // opening animations
  .avatar-circle          { .animation(prolog-logo @prolog_open_duration @bezier_fadein); }
  .context:nth-of-type(1) { .animation(prolog-up @prolog_open_duration @bezier_fadein (@prolog_open_delay * 1) both); }
  .context:nth-of-type(2) { .animation(prolog-up @prolog_open_duration @bezier_fadein (@prolog_open_delay * 2) both); }
  .home-bottom-shelf      { .animation(prolog-up @prolog_open_duration @bezier_fadein @prolog_open_duration both); }
  .home-action            { .animation(prolog-action @prolog_open_duration @bezier_fadein); }
}
.home-top-shelf {
  .order(1);
  position: relative;
  z-index: @zindex_home_top_shelf;
  height: @tile;
  margin-bottom: auto;
}
.home-cover {
  background: @white;
  width: (@tile * 3);
  height: @tile;
  border-radius: (@tile / 2);
  position: absolute;
  z-index: @zindex_home_cover;
  pointer-events: none;
  left: ~"calc(50% - 105px)";
  top: ~"calc(50% + 140px)";
  opacity: 0;
  transition+: width @prolog_cover_fadeout;
  transition+: height @prolog_cover_fadeout;
  transition+: left @prolog_cover_fadeout;
  transition+: top @prolog_cover_fadeout;
  transition+: border-radius @prolog_cover_fadeout;
  transition+: opacity 0ms @prolog_cover_fadeout;
  transition-timing-function: @bezier_transform;
}
.home-avatars {
  .flexy(center, center);
  .order(2);
  position: relative;
  z-index: @zindex_home_avatars;
  .avatars {
    position: relative;
    width: @tile;
    height: @tile;
  }
  i.ico {
    svg {
      width: @tile;
      height: @tile;
    }
    path {
      fill: @white;
      transition: @prolog_cover_fadeout;
    }
  }
  .avatar-circle {
    width: @tile;
    height: @tile;
    position: absolute;
    top: 0;
    left: 0;
    transition: @prolog_cover_fadeout;
    transition-timing-function: @bezier_transform;
  }
  .avatar-github {
    position: absolute;
    top: (-@tile / 4);
    left: (-@tile / 4);
    background: @white;
    border-radius: (@tile / 2);
    opacity: 0;
    transition: (@prolog_cover_fadeout / 2);
    &:before,
    &:after {
      .box-sizing(border-box);
      content: "";
      position: absolute;
      width: 90px;
      height: 90px;
      border: 1px solid @grayBoxBorder;
      border-radius: 5px;
    }
    &:before {
      top: -10px;
      left: -10px;
    }
    &:after {
      top: (@tile / 2);
      left: (@tile / 2);
      background: @white;
    }
  }
}
.home-slogans {
  .order(3);
  position: relative;
  z-index: @zindex_home_slogans;
  text-align: center;
  margin: @tile 0;
  max-width: 100%;
  h1,
  h3 {
    white-space: nowrap;
  }
  h3 {
    margin: 0;
  }
  .slogan {
    position: relative;
    color: transparent;
    &:before,
    &:after {
      position: absolute;
      left: 0;
      width: 100%;
      pointer-events: none;
      transition-timing-function: @bezier_transform;
    }
    &:before {
      content: attr(itemprop);
      top: 0;
      transition+: opacity @prolog_cover_fadeout (@prolog_cover_fadeout / 2);
      transition+: top (@prolog_cover_fadeout * 1.5) (@prolog_cover_fadeout / 2);
    }
    &:after {
      content: attr(alt);
      opacity: 0;
      transition: (@prolog_cover_fadeout / 2);
    }
  }
  .proverb {
    height: @prolog_h1_font;
    margin: 0 0 ((@tile * 2) - (@prolog_h1_line + (@prolog_h3_line * 2)));
    &:before {
      color: @grayBoxBorder;
    }
    &:after {
      top: @prolog_h1_font;
      color: @grayDark;
    }
  }
  .context {
    height: @prolog_h3_line;
    &:before,
    &:after {
      color: @prolog_light_on_dark;
    }
    &:after {
      top: @prolog_h3_line;
    }
  }
}
.home-bottom-shelf {
  .flexy(center, center);
  .order(5);
  position: relative;
  z-index: @zindex_home_bottom_shelf;
  height: @tile;
  margin-top: auto;
  a {
    .flexy();
  }
  .chevron-down {
    width: .89em;
    height: .89em;
    margin: 0 1ex;
  }
}
//
// Where the magic happens.
//
.home-action {
  .box-sizing(border-box);
  .flexy(center, center);
  .order(4);
  position: relative;
  z-index: @zindex_home_action;
  color: @grayDark;
  font-size: 20px;
  background: @white;
  width: @home_action_width;
  height: @home_action_height;
  border: 1px solid @white;
  border-radius: (@home_action_height / 2);
  transition+: color @prolog_cover_fadeout;
  transition+: background @prolog_cover_fadeout;
  transition+: border-color @prolog_cover_fadeout @prolog_cover_fadeout;
  transition-timing-function: @bezier_fadein;
  &:hover {
// Button
    color: @white;
    background: @grayDark;
    border-color: @grayBoxBorder;
    transition+: color @prolog_cover_fadein @prolog_cover_fadeout;
    transition+: background @prolog_cover_fadein @prolog_cover_fadeout;
    transition+: border-color 0ms 0ms;
// Cover
    ~ .home-cover {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      opacity: 1;
      border-radius: 0;
      transition+: width @prolog_cover_fadein;
      transition+: height @prolog_cover_fadein;
      transition+: left @prolog_cover_fadein;
      transition+: top @prolog_cover_fadein;
      transition+: border-radius (@prolog_cover_fadein / 2);
      transition+: opacity 0ms;
    }
// Logos
    ~ .home-avatars {
      i.ico {
        path {
          fill: @grayDark;
          transition: @prolog_cover_fadein;
        }
      }
      .avatar-circle {
        top: ((@tile / 4) + 10px);
        left: ((@tile / 4) + 10px);
        transition: @prolog_cover_fadein;
      }
      .avatar-github {
        opacity: 1;
        transition: @prolog_cover_fadein @prolog_cover_fadeout;
      }
    }
// Taglines
    ~ .home-slogans {
      .proverb {
        &:before {
          top: -@prolog_h1_font;
          opacity: 0;
          transition: (@prolog_cover_fadein * .3);
        }
        &:after {
          top: 0;
          opacity: 1;
          transition: top @prolog_cover_fadein,
                      opacity @prolog_cover_fadein (@prolog_cover_fadeout * .5);
        }
      }
      .context {
        &:before {
          top: -@prolog_h3_line;
          opacity: 0;
          transition: (@prolog_cover_fadein * .3);
        }
        &:after {
          top: 0;
          opacity: 1;
          transition: top @prolog_cover_fadein,
                      opacity @prolog_cover_fadein (@prolog_cover_fadeout * .5);
        }
      }
    }
  }
}
.home-purpose {
  .flexy(column);
  height: 100vh;
  background: @whiten;
  box-shadow: 0 1px 3px fade(@black, 5) inset;
  overflow: hidden;
  h1 {
    max-width: @purpose_h1_width;
  }
  .draw-new {
    text {
      transition: (@home_drawings_speed / 2) (@home_drawings_speed / 2);
      transition-timing-function: @bezier_fadein;
    }
    g,
    rect,
    path,
    circle {
      .transform-origin(center);
    }
  }
  .draw-filler {
    fill: @grayBoxBorder;
  }
  .draw-status-background {
    rect,
    circle {
      fill: @grayBoxBorder;
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
    .background-left   {
      .translate(25px, 0);
    }
    .background-center {
      .transform(translate(0,0); scale(0,1));
    }
    .background-right  {
      .translate(-25px, 0);
    }
  }
  .draw-status-icon {
    .translate(25px, 0);
    opacity: 0;
    transition: @home_drawings_speed;
    transition-timing-function: @home_drawings_bounce;
    .draw-status-turn {
      .rotate(0deg);
    }
    .draw-status-circle {
      .scale(1, 1);
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
    .draw-status-check {
      .scale(0, 0);
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
      fill: @white;
    }
  }
  .draw-status-text {
    path {
      .scale(0, 0);
      opacity: 0;
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
  }
  &.animate {
    .draw-new {
      text {
        fill: @green;
        transition: (@home_drawings_speed * 2) @home_drawings_speed;
      }
    }
    .draw-status-background {
      rect,
      circle {
        fill: @green;
        transition-delay: (@home_drawings_speed / 2);
        .transform(translate(0,0); scale(1,1));
      }
    }
    .draw-status-icon {
      .translate(0, 0);
      transition-delay: ((@home_drawings_speed / 2) + @home_drawings_cascade);
      opacity: 1;
      .draw-status-circle {
        .scale(0, 0);
        transition-delay: @home_drawings_speed;
      }
      .draw-status-check {
        .scale(1, 1);
        transition-delay: (@home_drawings_speed + @home_drawings_cascade);
      }
    }
    .draw-status-text {
      path {
        .scale(1, 1);
        opacity: 1;
        &:nth-child(6) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 1)); }
        &:nth-child(5) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 2)); }
        &:nth-child(4) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 3)); }
        &:nth-child(3) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 4)); }
        &:nth-child(2) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 5)); }
        &:nth-child(1) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 6)); }
      }
    }
  }
  .home-bottom-shelf {
    z-index: auto;
    a {
      margin: 0;
      padding: 1em 3em;
    }
  }
}
.home-purpose-content {
  .order(1);
  .flexy();
}
.home-drawings {
  .flex(0, 0, @purpose_drawings_width);
  .flexy(center, flex-end);
  position: relative;
  max-height: 100%;
  margin: auto 0;
  figure {
    @width: 1600px; // default 1600px
    .flex(0, 0, auto);
    position: relative;
    width: @width;
    height: (@width / 1.6);
    background: @appBackgroundColor;
    border: 1px solid @grayBoxBorder;
    border-radius: 5px;
    overflow: hidden;
    pointer-events: none;
    -webkit-user-select: none;
    &:nth-child(-n+2) {
      position: absolute;
    }
    &:nth-child(1) {
      right: (@home_drawing_offset * 2);
      bottom: (-@home_drawing_offset * 2);
    }
    &:nth-child(2) {
      right: @home_drawing_offset;
      bottom: -@home_drawing_offset;
    }
  }
}
.home-articles {
  .box-sizing(border-box);
  .flex(0, 0, (100% - @purpose_drawings_width));
  .flexy(center, center, column);
  padding: 0 1em;
  article {
    max-width: @home_article_width;
  }
  p {
    color: @gray;
  }
  .shopify-link {
    .flexy();
    &:hover {
      svg {
        stroke: @blueLight;
        margin-left: 1ex;
      }
    }
    svg {
      stroke: @grayDark;
      stroke-width: 8;
      margin-left: .5ex;
      transition: margin 100ms ease-in-out;
    }
  }
}
.home-practice {
  .flexy(column);
  height: 100vh;
  padding: 0 (@tile / 2);
  background: @white;
  box-shadow: 0 -1px 3px fade(@black, 5);
  overflow: hidden;
  article {
    .flex(1, 1, @home_article_width);
    .flexy(column);
    max-width: @home_article_width;
    margin: 0 auto;
  }
  h1 {
    max-width: @practice_h1_width;
  }
  .home-top-shelf,
  .home-bottom-shelf {
    .order(0);
  }
  .home-bottom-shelf {
    z-index: auto;
    a {
      margin: 0;
      padding: 1em 3em;
    }
  }
}
.practice-tools {
  .flex(1, 1, 0);
  .flexy();
  article {
    .justify-content(flex-end);
  }
}
.supported-tools {
  position: relative;
  padding: (@tile / 2) 0;
  overflow: hidden;
  z-index: 2;
  &:not(:last-child) {
    margin-bottom: (-@tile * 3);
  }
  &:not(.active) {
    z-index: 1;
    figure {
      margin-top: (@tile * 3);
      opacity: 0;
      transition+: opacity (@practice_tool_speed / 2) @bezier_fadein;
      transition+: margin @practice_tool_speed @bezier_transform;
    }
  }
}
.supported-tools-upper,
.supported-tools-lower {
  .flexy();
  width: 100%;
  margin-bottom: (@tile - (@practice_tool_size * @practice_tool_grow));
}
.supported-tools-upper {
  .supported-tool {
    .loop_cascade(@counter) when (@counter > 0) {
      .loop_cascade((@counter - 1));
      @random: `Math.random()`;
      &:nth-of-type(@{counter}) { figure { transition-delay: round(@home_drawings_cascade * (@random * 5));}}
    } .loop_cascade(12);
    &:before {
      top: -2em;
    }
  }
}
.supported-tools-lower {
  .supported-tool {
    .loop_cascade(@counter) when (@counter > 0) {
      .loop_cascade((@counter - 1));
      @random: `Math.random()`;
      &:nth-of-type(@{counter}) { figure { transition-delay: round(@home_drawings_cascade * (@random * 5));}}
    } .loop_cascade(12);
    &:before {
      bottom: -2em;
    }
  }
}
.supported-tool {
  .color_stroke(@a; @c: length(@a); @x: -1; @y: 0) when (@c > (length(@a) / 2)) {
    .color_stroke(@a; (@c - 1); (@x - 1); (@y - 1));
    @n: extract(@a, (@c + @x));
    .tool-logo-@{n} {stroke: extract(@a, (@c + @y));}
  }.color_stroke(@tools_brands);
  position: relative;
  margin: 0;
  fill: none;
  display: block;
  padding-right: 1em;
  width: (@practice_tool_size * @practice_tool_grow);
  height: (@practice_tool_size * @practice_tool_grow);
  &:before {
    .box-sizing(border-box);
    .translate(-50%, 0);
    content: attr(alt);
    position: absolute;
    left: 50%;
    min-width: 100%;
    color: @gray;
    text-align: center;
    text-transform: capitalize;
    padding-right: 1em;
    transition: (@practice_tool_speed / 2) (@practice_tool_speed / 2) @practice_tool_timing;
  }
  &:not(:hover) {
    &:not(.hover) {
      &:before {
        opacity: 0;
        transition: @practice_tool_speed @practice_tool_timing;
      }
      svg {
        .filter(none);
        width: @practice_tool_size;
        height: @practice_tool_size;
        stroke: @grayBoxBorder;
        stroke-width: @practice_tool_weight;
        transition: @practice_tool_speed @practice_tool_timing;
      }
    }
  }
  figure {
    margin: 0;
    transition+: opacity @practice_tool_speed @bezier_fadein;
    transition+: margin @practice_tool_speed @bezier_transform;
  }
  svg {
    .filter(@practice_hover_shadow);
    width: (@practice_tool_size * @practice_tool_grow);
    height: (@practice_tool_size * @practice_tool_grow);
    stroke-width: (@practice_tool_weight + 1);
    stroke-linecap: round;
    stroke-linejoin: bevel;
    transition: (@practice_tool_speed / 2) 0ms @practice_tool_timing;
  }
}
.practice-articles {
  .flex(0, 0, auto);
  .flexy();
  article {
    .justify-content(center);
  }
  p {
    color: @gray;
  }
  a:not(:hover) {
    color: @black;
  }
}
.practice-customers {
  .flex(1, 1, 0);
  .flexy();
  article {
    .justify-content(flex-start);
  }
}
.customers-brands {
  .selected_quote(@a; @c: length(@a); @y: 0; @c2: (@c / 2)) when (@c > (length(@a) / 2)) {
    .selected_quote(@a; (@c - 1); (@y - 1); (@c2 - 1));
    @i: (@c2 - 1);
    &.selected-@{i} {
      .customers-brand:nth-of-type(@{c2}) {
        svg {fill: extract(@a, (@c + @y));} &:before, &:after {opacity: 1; transition: opacity (@quote_speed / 2) (@quote_speed / 2);}}
      .margin(@c2) when (@c2 > 1) {& + .quote-card { margin-left: (@tile * @i);}} .margin(@c2);
    }
  } .selected_quote(@customers_brands);
  .flex(0 3 (@practice_logo_height + @tile));
  .flexy(flex-end);
  width: 100%;
  figure {
    margin: 0;
  }
}
.customers-brand {
  .color_fill(@a; @c: length(@a); @x: -1; @y: 0) when (@c > (length(@a) / 2)) {
    .color_fill(@a; (@c - 1); (@x - 1); (@y - 1));
    @n: extract(@a, (@c + @x));
    .logo-@{n} {fill: extract(@a, (@c + @y));}
  }.color_fill(@customers_brands);
  .flexy();
  position: relative;
  &:before,
  &:after {
    content: "";
    position: absolute;
    opacity: 0;
    top: 100%;
    left: 50%;
    height: 0;
    width: 0;
    border: solid transparent;
    pointer-events: none;
    transition: opacity 0ms;
  }
  &:before {
    border-bottom-color: @grayBoxBorder;
    border-width: .5em;
    margin-left: -.5em;
  }
  &:after {
    border-bottom-color: @white;
    border-width: .5em;
    margin-left: -.5em;
    margin-top: 1px;
  }
  &:not(:last-child) {
    margin-right: 1em;
  }
  &:not(:hover) {
    svg {
      .scale(1, 1);
      .filter(none);
      fill: @grayBoxBorder;
      transition: @practice_tool_speed @practice_tool_timing;
    }
  }
  svg {
    .scale(@practice_tool_grow, @practice_tool_grow);
    .filter(@practice_hover_shadow);
    max-width: (@tile * 2);
    height: @practice_logo_height;
    transition: (@practice_tool_speed / 2) @practice_tool_timing;
  }
}
.quote-card {
  .box-sizing(border-box);
  .flexy(flex-start, center, column);
  color: @grayLight;
  width: (@tile * 8);
  height: (@tile * 2);
  margin-top: 1em;
  margin-left: 0;
  padding: 1em;
  border: 1px solid @grayBoxBorder;
  border-radius: 5px;
  transition: @quote_speed;
  p {
    position: relative;
    margin: auto 0 auto 1em;
    &:before {
      content: open-quote;
      left: -.8ex;
    }
    &:after {
      content: close-quote;
    }
    &:before,
    &:after {
      position: absolute;
      quotes: '“' '”';
      font-size: 1.25em;
    }
  }
  footer {
    .box-sizing(border-box);
    .flexy();
    .justify-content(flex-end);
    font-size: .75em;
    line-height: 1.5em;
    width: 100%;
    padding: 0 1em;
  }
  img {
    width: @quote_avatar_size;
    height: @quote_avatar_size;
    margin-right: 1em;
    border-radius: @quote_avatar_size;
  }
}
.home-potential {
  @number_of_actions: 8;
  @number_of_outputs: 9;
  .flexy(column);
  height: 100vh;
  background: @whiten;
  box-shadow: 0 1px 3px fade(@black, 5) inset;
  overflow: hidden;
  .home-drawings {
    .justify-content(flex-start);
  }
  h1 {
    max-width: @potential_h1_width;
  }
  figure {
    &:nth-child(1) { left: (@home_drawing_offset * 2); }
    &:nth-child(2) { left: @home_drawing_offset; }
  }
  .draw-action,
  .draw-output {
    g {
      .transform-origin(center);
      transition+: all (@home_drawings_speed / 2) @bezier_transform;
      transition+: opacity (@home_drawings_speed / 3) @bezier_fadein;
    }
  }
  .draw-action {
    .loop_cascade(@counter) when (@counter > 0) {
      .loop_cascade((@counter - 1));
      &:nth-of-type(@{counter}) { g { transition-delay: (@home_drawings_cascade * @counter);}}
    } .loop_cascade(@number_of_actions);
  }
  .draw-output {
    g {
      .loop_cascade(@counter) when (@counter > 0) {
        .loop_cascade((@counter - 1));
        &:nth-of-type(@{counter}) { transition-delay: ((@home_drawings_cascade * @number_of_actions) + (@home_drawings_cascade * @counter));}
      } .loop_cascade(@number_of_outputs);
    }
  }
  &:not(.animate) {
    .draw-action,
    .draw-output {
      g {
        .translate(0, (@tile / 2));
        opacity: 0;
      }
    }
  }
  .home-bottom-shelf {
    z-index: auto;
    a {
      margin: 0;
      padding: 1em 3em;
    }
  }
}
.home-potential-content {
  .order(1);
  .flexy();
}
.home-potential-bullets {
  .flexy();
  margin: 1em 0;
  ul {
    margin: 0 0 0 3em;
    &:first-of-type {
      margin-left: 1em;
    }
  }
  li {
    margin-bottom: 1em;
  }
}
.home-epilog {
  .vertGradient(@blueDarkest, @blueDarker);
  .home-action {
    &:hover {
      ~ .home-slogans {
        a {
          opacity: 0;
          transition: opacity 0ms;
        }
      }
      ~ .home-bottom-shelf {
        .home-footer-bait {
          color: @gray;
          transition: color @prolog_cover_fadeout (@prolog_cover_fadein * 0.5) ease-in-out;
        }
        .chevron-down {
          stroke: @gray;
          transition: stroke @prolog_cover_fadeout (@prolog_cover_fadein * 0.5) ease-in-out;
        }
      }
    }
  }
  .home-avatars {
    i.ico path { fill: fade(@grayDark, 0); }
  }
  .home-slogans {
    .proverb:before { color: @white; }
    .context:before { color: fade(@white, 50); }
    a {
      color: transparent;
      border-bottom: 1px solid @home_color_last_cta;
      transition+: border 200ms;
      transition+: background 200ms;
      transition+: opacity @prolog_cover_fadeout @prolog_cover_fadein ease-in-out;
      &:hover,
      &:focus {
        background: @home_color_last_cta;
        border: 2px solid @home_color_last_cta;
        outline: none;
      }
      &:active {
        background: @blueDark;
        border: 2px solid @blueDark;
        transition: 0ms;
      }
    }
  }
  .home-bottom-shelf {
    .box-sizing(border-box);
    .flex-direction(column);
    width: 100%;
    height: auto;
    border-top: 1px solid fade(@black, 13);
    &:hover {
      .home-footer-bait {
        height: 0;
        transition-duration: (@prolog_cover_fadein * 0.4);
      }
      .home-footer {
        max-height: (@tile * 5);
        transition-duration: (@prolog_cover_fadein * 0.6);
      }
    }
    a:not(:hover) {
      color: @grayLight;
    }
    h5 {
      color: @grayDark;
    }
  }
  .home-footer-logo {
    .flexy(flex-start);
    margin: @home_margin_footer @home_margin_footer @home_margin_footer (@home_margin_footer * 2);
    svg {
      width: 1em;
      height: 1em;
      margin: 1em 0;
    }
    path {
      fill: @gray;
    }
  }
}
.home-footer-bait {
  .flexy(center);
  height: @tile;
  color: @home_color_last_cta;
  overflow: hidden;
  transition: (@prolog_cover_fadein * 0.6);
  transition-timing-function: @bezier_transform;
  i.ico {
    .rotate(180);
  }
  .chevron-down {
    fill: none;
    stroke: @home_color_last_cta;
    stroke-width: 8;
  }
}
.home-footer {
  .flexy();
  .justify-content(center);
  width: 100%;
  max-height: 0;
  background: @white;
  transition: (@prolog_cover_fadein * 0.8);
  transition-timing-function: @bezier_transform;
  overflow: hidden;
  nav {
    margin: @home_margin_footer (@home_margin_footer * 2);
  }
}

// temporary hacks for mocking up initial design
#navbar,
#sticky-help-link,
.main-foot {
  display: none !important;
}
// temporary hacks for mocking up initial design

@bezier_fadein: cubic-bezier(0.445, 0.05, 0.55, 0.95);
@bezier_transform: cubic-bezier(0.39, 0.575, 0.565, 1);

@prolog_open_duration: 500ms; // default 1000ms
@prolog_open_delay: (@prolog_open_duration / 10);

@prolog_light_on_dark: #aaa;

@home_drawing_offset: 5px;

@prolog_h1_font: 72px;
@prolog_h1_line: @prolog_h1_font;
@prolog_h3_font: 20px;
@prolog_h3_line: (@prolog_h3_font * 1.5); // 30px
@prolog_h5_font: 16px;
@prolog_h5_line: (@prolog_h5_font * 1.5); // 24px

@prolog_cover_fadein: 500ms; // default 500ms
@prolog_cover_fadeout: (@prolog_cover_fadein / 2);

@purpose_drawings_width: 34%; // default 34%

@zindex_home_cover: 10; // These should move to a less file in charge of managing z-indexes
@zindex_home_nav:          (@zindex_home_cover + 2);
@zindex_home_top_shelf:    (@zindex_home_cover + 1);
@zindex_home_avatars:      (@zindex_home_cover + 2);
@zindex_home_slogans:      (@zindex_home_cover + 2);
@zindex_home_bottom_shelf: (@zindex_home_cover + 2);
@zindex_home_action:       (@zindex_home_cover + 2);

@empx: 16px;
@lipx: 24px;

@tools_brands:
  ruby, #CC342D,
  rails, #CC342D,
  python, #3776ab,
  javascript, #FFCD0A,
  java, #E76F00,
  php, #6A9AD1,
  clojure, #91dc47,
  django, #092e20,
  node, #8CC84B,
  safari, #1280f3,
  chrome, #db4437,
  firefox, #E66000,
  casper, #000000,
  selenium, #2bb033,
  phantom, #4ad5db,
  rabbit, #ff6600,
  beanstalkd, #000000,
  resque, #CE1211,
  capistrano, #52C1DB,
  amazon, #FCB034,
  rackspace, #CE1330,
  joyent, #FF6600,
  heroku, #430098,
  engineyard, #E92429,
  nodejitsu, #333333,
  fabric, #FECB4A,
  docker, #3b8cb3,
  mysql, #e97b00,
  postgres, #336792,
  mongo, #49A748,
  redis, #D82A20,
  riak, #F8981D,
  sqlite, #0f80cc,
  elasticsearch, #84AC4F,
  cassandra, #1287B1;

// These should be listed in the order they appear on the page.
@customers_brands:
  shopify, #96bf48,
  intercom, #8bdaff,
  spotify, #81b71a,
  kickstarter, #2BDE73,
  gocardless, #3A6190;

@home_article_width: 1000px;
@purpose_h1_width: 700px;
@practice_h1_width: 900px;
@potential_h1_width: 800px;

@home_nav_logo: @lipx;
@home_action_width: (@tile * 3);
@home_action_height: @tile;

@home_drawings_speed: 500ms;
@home_drawings_cascade: (@home_drawings_speed / 15);
@home_drawings_bounce: cubic-bezier(.55,-0.55,.55,2.33);

@practice_tool_size: 50px;
@practice_tool_grow: 1.2;
@practice_tool_speed: 400ms;
@practice_tool_timing: ease-in-out;
@practice_tool_weight: 3;

@practice_hover_shadow: drop-shadow(0 13px 3px fade(@black, 13));

@practice_logo_height: @lipx;

@quote_avatar_size: (@tile / 2);
@quote_speed: 500ms;

@home_color_last_cta: @blue;
@home_margin_footer: (@tile / 2);

.home {
  &.page {
    font-size: 1.1428572em; // 16px
    line-height: 1.5em; // 24px
    h1 {
      font-size: @prolog_h1_font;
      line-height: @prolog_h1_line;
      font-weight: 300;
    }
    h3 {
      font-size: @prolog_h3_font;
      line-height: @prolog_h3_line;
      font-weight: normal;
    }
    h5 {
      font-size: @prolog_h5_font;
      line-height: @prolog_h5_line;
      font-weight: normal;
      margin: 1em 0;
    }
  }
  a {
    &:hover {
      i {
        path {
          stroke: @linkColorHover;
          transition: stroke 200ms;
        }
      }
    }
    &:not(:hover) {
      color: @black;
    }
    i {
      path {
        stroke: @grayDark;
        stroke-width: 8;
      }
    }
  }
}
.home-nav {
  .animation(prolog-down @prolog_open_duration @bezier_fadein @prolog_open_duration both);
  .box-sizing(border-box);
  .vertGradient(fade(@white, 0), fade(@white, 0));
  position: fixed;
  z-index: @zindex_home_nav; // ducks under prolog content intentionally
  left: 0;
  top: 0;
  width: 100%;
  height: @tile;
  background-size: 100% 0;
  background-position: bottom center;
  background-repeat: no-repeat;
  border-bottom: 1px solid fade(@black, 13);
  overflow: hidden;
  &.logo-visible {
    .promo {
      top: -100%;
      opacity: 0;
    }
    .logo-circleci {
      left: 0;
      opacity: 1;
      pointer-events: auto;
      transition+: left @prolog_cover_fadein;
      transition+: opacity @prolog_cover_fadein (@prolog_cover_fadeout / 2);
    }
  }
  &.cta-visible {
    &:not(.cta-invisible) {
      .login {
        top: -100%;
        opacity: 0;
      }
      .action {
        right: 0;
        opacity: 1;
        pointer-events: auto;
        transition+: right @prolog_cover_fadein;
        transition+: opacity @prolog_cover_fadein (@prolog_cover_fadeout / 2);
      }
    }
  }
  &.bkg-visible {
    .vertGradient(@white, @white);
    background-size: 100% 100%;
    &:not(.bkg-invisible) {
      box-shadow: 1px 2px fade(@black, 08);
      border-color: @white;
    }
  }
  &.bkg-invisible {
    background-position: top center;
  }
  a {
    .flexy(center);
    position: absolute;
    top: 0;
    height: 100%;
    transition+: top @prolog_cover_fadeout;
    transition+: left @prolog_cover_fadeout;
    transition+: right @prolog_cover_fadeout;
    transition+: opacity @prolog_cover_fadeout;
  }
  .promo,
  .login {
    opacity: 1;
    &:not(:hover) {
      color: @grayLight;
    }
  }
  .promo {
    left: 0;
    padding: 0 1.5em;
  }
  .login {
    right: 0;
    padding: 0 1.5em;
  }
  .logo-circleci {
    left: @tile;
    padding: 0 1.5em;
    opacity: 0;
    pointer-events: none;
    figure {
      margin: 0;
      width: 6em;
      height: 1.5em;
    }
    svg {
      height: 100%;
      fill: @grayLighter;
    }
  }
  .action {
    .flexy(center, center);
    right: @tile;
    top: ~"calc(50% - 1.5em)";
    height: auto;
    font-size: .875em;
    color: @black;
    margin: 0 1.5em;
    padding: .5em 1em;
    background: @white;
    border: 1px solid @gray;
    border-radius: (@home_action_height / 2);
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    &:hover {
      color: @white;
      background: @gray;
      transition: 100ms;
    }
  }
}
.home-prolog,
.home-epilog {
  .flexy(center, center, column);
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.home-prolog {
  background: @grayDark;
  color: @prolog_light_on_dark;
  a:not([role="button"]) {
    color: @gray;
    transition: color 300ms;
    i {
      path {
        stroke: @gray;
        stroke-width: 8;
        transition: stroke 300ms;
      }
    }
    &:hover {
      color: @white;
      transition: color 200ms;
      i {
        path {
          stroke: @white;
          transition: stroke 200ms;
        }
      }
    }
  }
  // opening animations
  .avatar-circle          { .animation(prolog-logo @prolog_open_duration @bezier_fadein); }
  .context:nth-of-type(1) { .animation(prolog-up @prolog_open_duration @bezier_fadein (@prolog_open_delay * 1) both); }
  .context:nth-of-type(2) { .animation(prolog-up @prolog_open_duration @bezier_fadein (@prolog_open_delay * 2) both); }
  .home-bottom-shelf      { .animation(prolog-up @prolog_open_duration @bezier_fadein @prolog_open_duration both); }
  .home-action            { .animation(prolog-action @prolog_open_duration @bezier_fadein); }
}
.home-top-shelf {
  .order(1);
  position: relative;
  z-index: @zindex_home_top_shelf;
  height: @tile;
  margin-bottom: auto;
}
.home-cover {
  background: @white;
  width: (@tile * 3);
  height: @tile;
  border-radius: (@tile / 2);
  position: absolute;
  z-index: @zindex_home_cover;
  pointer-events: none;
  left: ~"calc(50% - 105px)";
  top: ~"calc(50% + 140px)";
  opacity: 0;
  transition+: width @prolog_cover_fadeout;
  transition+: height @prolog_cover_fadeout;
  transition+: left @prolog_cover_fadeout;
  transition+: top @prolog_cover_fadeout;
  transition+: border-radius @prolog_cover_fadeout;
  transition+: opacity 0ms @prolog_cover_fadeout;
  transition-timing-function: @bezier_transform;
}
.home-avatars {
  .flexy(center, center);
  .order(2);
  position: relative;
  z-index: @zindex_home_avatars;
  .avatars {
    position: relative;
    width: @tile;
    height: @tile;
  }
  i.ico {
    svg {
      width: @tile;
      height: @tile;
    }
    path {
      fill: @white;
      transition: @prolog_cover_fadeout;
    }
  }
  .avatar-circle {
    width: @tile;
    height: @tile;
    position: absolute;
    top: 0;
    left: 0;
    transition: @prolog_cover_fadeout;
    transition-timing-function: @bezier_transform;
  }
  .avatar-github {
    position: absolute;
    top: (-@tile / 4);
    left: (-@tile / 4);
    background: @white;
    border-radius: (@tile / 2);
    opacity: 0;
    transition: (@prolog_cover_fadeout / 2);
    &:before,
    &:after {
      .box-sizing(border-box);
      content: "";
      position: absolute;
      width: 90px;
      height: 90px;
      border: 1px solid @grayBoxBorder;
      border-radius: 5px;
    }
    &:before {
      top: -10px;
      left: -10px;
    }
    &:after {
      top: (@tile / 2);
      left: (@tile / 2);
      background: @white;
    }
  }
}
.home-slogans {
  .order(3);
  position: relative;
  z-index: @zindex_home_slogans;
  text-align: center;
  margin: @tile 0;
  max-width: 100%;
  h1,
  h3 {
    white-space: nowrap;
  }
  h3 {
    margin: 0;
  }
  .slogan {
    position: relative;
    color: transparent;
    &:before,
    &:after {
      position: absolute;
      left: 0;
      width: 100%;
      pointer-events: none;
      transition-timing-function: @bezier_transform;
    }
    &:before {
      content: attr(itemprop);
      top: 0;
      transition+: opacity @prolog_cover_fadeout (@prolog_cover_fadeout / 2);
      transition+: top (@prolog_cover_fadeout * 1.5) (@prolog_cover_fadeout / 2);
    }
    &:after {
      content: attr(alt);
      opacity: 0;
      transition: (@prolog_cover_fadeout / 2);
    }
  }
  .proverb {
    height: @prolog_h1_font;
    margin: 0 0 ((@tile * 2) - (@prolog_h1_line + (@prolog_h3_line * 2)));
    &:before {
      color: @grayBoxBorder;
    }
    &:after {
      top: @prolog_h1_font;
      color: @grayDark;
    }
  }
  .context {
    height: @prolog_h3_line;
    &:before,
    &:after {
      color: @prolog_light_on_dark;
    }
    &:after {
      top: @prolog_h3_line;
    }
  }
}
.home-bottom-shelf {
  .flexy(center, center);
  .order(5);
  position: relative;
  z-index: @zindex_home_bottom_shelf;
  height: @tile;
  margin-top: auto;
  a {
    .flexy();
  }
  .chevron-down {
    width: .89em;
    height: .89em;
    margin: 0 1ex;
  }
}
//
// Where the magic happens.
//
.home-action {
  .box-sizing(border-box);
  .flexy(center, center);
  .order(4);
  position: relative;
  z-index: @zindex_home_action;
  color: @grayDark;
  font-size: 20px;
  background: @white;
  width: @home_action_width;
  height: @home_action_height;
  border: 1px solid @white;
  border-radius: (@home_action_height / 2);
  transition+: color @prolog_cover_fadeout;
  transition+: background @prolog_cover_fadeout;
  transition+: border-color @prolog_cover_fadeout @prolog_cover_fadeout;
  transition-timing-function: @bezier_fadein;
  &:hover {
// Button
    color: @white;
    background: @grayDark;
    border-color: @grayBoxBorder;
    transition+: color @prolog_cover_fadein @prolog_cover_fadeout;
    transition+: background @prolog_cover_fadein @prolog_cover_fadeout;
    transition+: border-color 0ms 0ms;
// Cover
    ~ .home-cover {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      opacity: 1;
      border-radius: 0;
      transition+: width @prolog_cover_fadein;
      transition+: height @prolog_cover_fadein;
      transition+: left @prolog_cover_fadein;
      transition+: top @prolog_cover_fadein;
      transition+: border-radius (@prolog_cover_fadein / 2);
      transition+: opacity 0ms;
    }
// Logos
    ~ .home-avatars {
      i.ico {
        path {
          fill: @grayDark;
          transition: @prolog_cover_fadein;
        }
      }
      .avatar-circle {
        top: ((@tile / 4) + 10px);
        left: ((@tile / 4) + 10px);
        transition: @prolog_cover_fadein;
      }
      .avatar-github {
        opacity: 1;
        transition: @prolog_cover_fadein @prolog_cover_fadeout;
      }
    }
// Taglines
    ~ .home-slogans {
      .proverb {
        &:before {
          top: -@prolog_h1_font;
          opacity: 0;
          transition: (@prolog_cover_fadein * .3);
        }
        &:after {
          top: 0;
          opacity: 1;
          transition: top @prolog_cover_fadein,
                      opacity @prolog_cover_fadein (@prolog_cover_fadeout * .5);
        }
      }
      .context {
        &:before {
          top: -@prolog_h3_line;
          opacity: 0;
          transition: (@prolog_cover_fadein * .3);
        }
        &:after {
          top: 0;
          opacity: 1;
          transition: top @prolog_cover_fadein,
                      opacity @prolog_cover_fadein (@prolog_cover_fadeout * .5);
        }
      }
    }
  }
}
.home-purpose {
  .flexy(column);
  height: 100vh;
  background: @whiten;
  box-shadow: 0 1px 3px fade(@black, 5) inset;
  overflow: hidden;
  h1 {
    max-width: @purpose_h1_width;
  }
  .draw-new {
    text {
      transition: (@home_drawings_speed / 2) (@home_drawings_speed / 2);
      transition-timing-function: @bezier_fadein;
    }
    g,
    rect,
    path,
    circle {
      .transform-origin(center);
    }
  }
  .draw-filler {
    fill: @grayBoxBorder;
  }
  .draw-status-background {
    rect,
    circle {
      fill: @grayBoxBorder;
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
    .background-left   {
      .translate(25px, 0);
    }
    .background-center {
      .transform(translate(0,0); scale(0,1));
    }
    .background-right  {
      .translate(-25px, 0);
    }
  }
  .draw-status-icon {
    .translate(25px, 0);
    opacity: 0;
    transition: @home_drawings_speed;
    transition-timing-function: @home_drawings_bounce;
    .draw-status-turn {
      .rotate(0deg);
    }
    .draw-status-circle {
      .scale(1, 1);
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
    .draw-status-check {
      .scale(0, 0);
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
      fill: @white;
    }
  }
  .draw-status-text {
    path {
      .scale(0, 0);
      opacity: 0;
      transition: @home_drawings_speed;
      transition-timing-function: @home_drawings_bounce;
    }
  }
  &.animate {
    .draw-new {
      text {
        fill: @green;
        transition: (@home_drawings_speed * 2) @home_drawings_speed;
      }
    }
    .draw-status-background {
      rect,
      circle {
        fill: @green;
        transition-delay: (@home_drawings_speed / 2);
        .transform(translate(0,0); scale(1,1));
      }
    }
    .draw-status-icon {
      .translate(0, 0);
      transition-delay: ((@home_drawings_speed / 2) + @home_drawings_cascade);
      opacity: 1;
      .draw-status-circle {
        .scale(0, 0);
        transition-delay: @home_drawings_speed;
      }
      .draw-status-check {
        .scale(1, 1);
        transition-delay: (@home_drawings_speed + @home_drawings_cascade);
      }
    }
    .draw-status-text {
      path {
        .scale(1, 1);
        opacity: 1;
        &:nth-child(6) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 1)); }
        &:nth-child(5) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 2)); }
        &:nth-child(4) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 3)); }
        &:nth-child(3) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 4)); }
        &:nth-child(2) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 5)); }
        &:nth-child(1) { transition-delay: ((@home_drawings_speed / 2) + (@home_drawings_cascade * 6)); }
      }
    }
  }
  .home-bottom-shelf {
    z-index: auto;
    a {
      margin: 0;
      padding: 1em 3em;
    }
  }
}
.home-purpose-content {
  .order(1);
  .flexy();
}
.home-drawings {
  .flex(0, 0, @purpose_drawings_width);
  .flexy(center, flex-end);
  position: relative;
  max-height: 100%;
  margin: auto 0;
  figure {
    @width: 1600px; // default 1600px
    .flex(0, 0, auto);
    position: relative;
    width: @width;
    height: (@width / 1.6);
    background: @appBackgroundColor;
    border: 1px solid @grayBoxBorder;
    border-radius: 5px;
    overflow: hidden;
    pointer-events: none;
    -webkit-user-select: none;
    &:nth-child(-n+2) {
      position: absolute;
    }
    &:nth-child(1) {
      right: (@home_drawing_offset * 2);
      bottom: (-@home_drawing_offset * 2);
    }
    &:nth-child(2) {
      right: @home_drawing_offset;
      bottom: -@home_drawing_offset;
    }
  }
}
.home-articles {
  .box-sizing(border-box);
  .flex(0, 0, (100% - @purpose_drawings_width));
  .flexy(center, center, column);
  padding: 0 1em;
  article {
    max-width: @home_article_width;
  }
  p {
    color: @gray;
  }
  .shopify-link {
    .flexy();
    &:hover {
      svg {
        stroke: @blueLight;
        margin-left: 1ex;
      }
    }
    svg {
      stroke: @grayDark;
      stroke-width: 8;
      margin-left: .5ex;
      transition: margin 100ms ease-in-out;
    }
  }
}
.home-practice {
  .flexy(column);
  height: 100vh;
  padding: 0 (@tile / 2);
  background: @white;
  box-shadow: 0 -1px 3px fade(@black, 5);
  overflow: hidden;
  article {
    .flex(1, 1, @home_article_width);
    .flexy(column);
    max-width: @home_article_width;
    margin: 0 auto;
  }
  h1 {
    max-width: @practice_h1_width;
  }
  .home-top-shelf,
  .home-bottom-shelf {
    .order(0);
  }
  .home-bottom-shelf {
    z-index: auto;
    a {
      margin: 0;
      padding: 1em 3em;
    }
  }
}
.practice-tools {
  .flex(1, 1, 0);
  .flexy();
  article {
    .justify-content(flex-end);
  }
}
.supported-tools {
  position: relative;
  padding: (@tile / 2) 0;
  overflow: hidden;
  z-index: 2;
  &:not(:last-child) {
    margin-bottom: (-@tile * 3);
  }
  &:not(.active) {
    z-index: 1;
    figure {
      margin-top: (@tile * 3);
      opacity: 0;
      transition+: opacity (@practice_tool_speed / 2) @bezier_fadein;
      transition+: margin @practice_tool_speed @bezier_transform;
    }
  }
}
.supported-tools-upper,
.supported-tools-lower {
  .flexy();
  width: 100%;
  margin-bottom: (@tile - (@practice_tool_size * @practice_tool_grow));
}
.supported-tools-upper {
  .supported-tool {
    .loop_cascade(@counter) when (@counter > 0) {
      .loop_cascade((@counter - 1));
      @random: `Math.random()`;
      &:nth-of-type(@{counter}) { figure { transition-delay: round(@home_drawings_cascade * (@random * 5));}}
    } .loop_cascade(12);
    &:before {
      top: -2em;
    }
  }
}
.supported-tools-lower {
  .supported-tool {
    .loop_cascade(@counter) when (@counter > 0) {
      .loop_cascade((@counter - 1));
      @random: `Math.random()`;
      &:nth-of-type(@{counter}) { figure { transition-delay: round(@home_drawings_cascade * (@random * 5));}}
    } .loop_cascade(12);
    &:before {
      bottom: -2em;
    }
  }
}
.supported-tool {
  .color_stroke(@a; @c: length(@a); @x: -1; @y: 0) when (@c > (length(@a) / 2)) {
    .color_stroke(@a; (@c - 1); (@x - 1); (@y - 1));
    @n: extract(@a, (@c + @x));
    .tool-logo-@{n} {stroke: extract(@a, (@c + @y));}
  }.color_stroke(@tools_brands);
  position: relative;
  margin: 0;
  fill: none;
  display: block;
  padding-right: 1em;
  width: (@practice_tool_size * @practice_tool_grow);
  height: (@practice_tool_size * @practice_tool_grow);
  &:before {
    .box-sizing(border-box);
    .translate(-50%, 0);
    content: attr(alt);
    position: absolute;
    left: 50%;
    min-width: 100%;
    color: @gray;
    text-align: center;
    text-transform: capitalize;
    padding-right: 1em;
    transition: (@practice_tool_speed / 2) (@practice_tool_speed / 2) @practice_tool_timing;
  }
  &:not(:hover) {
    &:not(.hover) {
      &:before {
        opacity: 0;
        transition: @practice_tool_speed @practice_tool_timing;
      }
      svg {
        .filter(none);
        width: @practice_tool_size;
        height: @practice_tool_size;
        stroke: @grayBoxBorder;
        stroke-width: @practice_tool_weight;
        transition: @practice_tool_speed @practice_tool_timing;
      }
    }
  }
  figure {
    margin: 0;
    transition+: opacity @practice_tool_speed @bezier_fadein;
    transition+: margin @practice_tool_speed @bezier_transform;
  }
  svg {
    .filter(@practice_hover_shadow);
    width: (@practice_tool_size * @practice_tool_grow);
    height: (@practice_tool_size * @practice_tool_grow);
    stroke-width: (@practice_tool_weight + 1);
    stroke-linecap: round;
    stroke-linejoin: bevel;
    transition: (@practice_tool_speed / 2) 0ms @practice_tool_timing;
  }
}
.practice-articles {
  .flex(0, 0, auto);
  .flexy();
  article {
    .justify-content(center);
  }
  p {
    color: @gray;
  }
  a:not(:hover) {
    color: @black;
  }
}
.practice-customers {
  .flex(1, 1, 0);
  .flexy();
  article {
    .justify-content(flex-start);
  }
}
.customers-brands {
  .selected_quote(@a; @c: length(@a); @y: 0; @c2: (@c / 2)) when (@c > (length(@a) / 2)) {
    .selected_quote(@a; (@c - 1); (@y - 1); (@c2 - 1));
    @i: (@c2 - 1);
    &.selected-@{i} {
      .customers-brand:nth-of-type(@{c2}) {
        svg {fill: extract(@a, (@c + @y));} &:before, &:after {opacity: 1; transition: opacity (@quote_speed / 2) (@quote_speed / 2);}}
      .margin(@c2) when (@c2 > 1) {& + .quote-card { margin-left: (@tile * @i);}} .margin(@c2);
    }
  } .selected_quote(@customers_brands);
  .flexy();
  width: 100%;
  margin-top: @tile;
  figure {
    margin: 0;
  }
}
.customers-brand {
  .color_fill(@a; @c: length(@a); @x: -1; @y: 0) when (@c > (length(@a) / 2)) {
    .color_fill(@a; (@c - 1); (@x - 1); (@y - 1));
    @n: extract(@a, (@c + @x));
    .logo-@{n} {fill: extract(@a, (@c + @y));}
  }.color_fill(@customers_brands);
  .flexy();
  position: relative;
  &:before,
  &:after {
    content: "";
    position: absolute;
    opacity: 0;
    top: 100%;
    left: 50%;
    height: 0;
    width: 0;
    border: solid transparent;
    pointer-events: none;
    transition: opacity 0ms;
  }
  &:before {
    border-bottom-color: @grayBoxBorder;
    border-width: .5em;
    margin-left: -.5em;
  }
  &:after {
    border-bottom-color: @white;
    border-width: .5em;
    margin-left: -.5em;
    margin-top: 1px;
  }
  &:not(:last-child) {
    margin-right: 1em;
  }
  &:not(:hover) {
    svg {
      .scale(1, 1);
      .filter(none);
      fill: @grayBoxBorder;
      transition: @practice_tool_speed @practice_tool_timing;
    }
  }
  svg {
    .scale(@practice_tool_grow, @practice_tool_grow);
    .filter(@practice_hover_shadow);
    max-width: (@tile * 2);
    height: @practice_logo_height;
    transition: (@practice_tool_speed / 2) @practice_tool_timing;
  }
}
.quote-card {
  .box-sizing(border-box);
  .flexy(flex-start, center, column);
  color: @grayLight;
  width: (@tile * 8);
  height: (@tile * 2);
  margin-top: 1em;
  margin-left: 0;
  padding: 1em;
  border: 1px solid @grayBoxBorder;
  border-radius: 5px;
  transition: @quote_speed;
  p {
    position: relative;
    margin: auto 0 auto 1em;
    &:before {
      content: open-quote;
      left: -.8ex;
    }
    &:after {
      content: close-quote;
    }
    &:before,
    &:after {
      position: absolute;
      quotes: '“' '”';
      font-size: 1.25em;
    }
  }
  footer {
    .box-sizing(border-box);
    .flexy();
    .justify-content(flex-end);
    font-size: .75em;
    line-height: 1.5em;
    width: 100%;
    padding: 0 1em;
  }
  img {
    width: @quote_avatar_size;
    height: @quote_avatar_size;
    margin-right: 1em;
    border-radius: @quote_avatar_size;
  }
}
.home-potential {
  @number_of_actions: 8;
  @number_of_outputs: 9;
  .flexy(column);
  height: 100vh;
  background: @whiten;
  box-shadow: 0 1px 3px fade(@black, 5) inset;
  overflow: hidden;
  .home-drawings {
    .justify-content(flex-start);
  }
  h1 {
    max-width: @potential_h1_width;
  }
  figure {
    &:nth-child(1) { left: (@home_drawing_offset * 2); }
    &:nth-child(2) { left: @home_drawing_offset; }
  }
  .draw-action,
  .draw-output {
    g {
      .transform-origin(center);
      transition+: all (@home_drawings_speed / 2) @bezier_transform;
      transition+: opacity (@home_drawings_speed / 3) @bezier_fadein;
    }
  }
  .draw-action {
    .loop_cascade(@counter) when (@counter > 0) {
      .loop_cascade((@counter - 1));
      &:nth-of-type(@{counter}) { g { transition-delay: (@home_drawings_cascade * @counter);}}
    } .loop_cascade(@number_of_actions);
  }
  .draw-output {
    g {
      .loop_cascade(@counter) when (@counter > 0) {
        .loop_cascade((@counter - 1));
        &:nth-of-type(@{counter}) { transition-delay: ((@home_drawings_cascade * @number_of_actions) + (@home_drawings_cascade * @counter));}
      } .loop_cascade(@number_of_outputs);
    }
  }
  &:not(.animate) {
    .draw-action,
    .draw-output {
      g {
        .translate(0, (@tile / 2));
        opacity: 0;
      }
    }
  }
  .home-bottom-shelf {
    z-index: auto;
    a {
      margin: 0;
      padding: 1em 3em;
    }
  }
}
.home-potential-content {
  .order(1);
  .flexy();
}
.home-potential-bullets {
  .flexy();
  margin: 1em 0;
  ul {
    margin: 0 0 0 3em;
    &:first-of-type {
      margin-left: 1em;
    }
  }
  li {
    margin-bottom: 1em;
  }
}
.home-epilog {
  .vertGradient(@blueDarkest, @blueDarker);
  .home-action {
    &:hover {
      ~ .home-slogans {
        a {
          opacity: 0;
          transition: opacity 0ms;
        }
      }
      ~ .home-bottom-shelf {
        .home-footer-bait {
          color: @gray;
          transition: color @prolog_cover_fadeout (@prolog_cover_fadein * 0.5) ease-in-out;
        }
        .chevron-down {
          stroke: @gray;
          transition: stroke @prolog_cover_fadeout (@prolog_cover_fadein * 0.5) ease-in-out;
        }
      }
    }
  }
  .home-avatars {
    i.ico path { fill: fade(@grayDark, 0); }
  }
  .home-slogans {
    .proverb:before { color: @white; }
    .context:before { color: fade(@white, 50); }
    a {
      color: transparent;
      border-bottom: 1px solid @home_color_last_cta;
      transition+: border 200ms;
      transition+: background 200ms;
      transition+: opacity @prolog_cover_fadeout @prolog_cover_fadein ease-in-out;
      &:hover,
      &:focus {
        background: @home_color_last_cta;
        border: 2px solid @home_color_last_cta;
        outline: none;
      }
      &:active {
        background: @blueDark;
        border: 2px solid @blueDark;
        transition: 0ms;
      }
    }
  }
  .home-bottom-shelf {
    .box-sizing(border-box);
    .flex-direction(column);
    width: 100%;
    height: auto;
    border-top: 1px solid fade(@black, 13);
    &:hover {
      .home-footer-bait {
        height: 0;
        transition-duration: (@prolog_cover_fadein * 0.4);
      }
      .home-footer {
        max-height: (@tile * 5);
        transition-duration: (@prolog_cover_fadein * 0.6);
      }
    }
    a:not(:hover) {
      color: @grayLight;
    }
    h5 {
      color: @grayDark;
    }
  }
  .home-footer-logo {
    .flexy(flex-start);
    margin: @home_margin_footer @home_margin_footer @home_margin_footer (@home_margin_footer * 2);
    svg {
      width: 1em;
      height: 1em;
      margin: 1em 0;
    }
    path {
      fill: @gray;
    }
  }
}
.home-footer-bait {
  .flexy(center);
  height: @tile;
  color: @home_color_last_cta;
  overflow: hidden;
  transition: (@prolog_cover_fadein * 0.6);
  transition-timing-function: @bezier_transform;
  i.ico {
    .rotate(180);
  }
  .chevron-down {
    fill: none;
    stroke: @home_color_last_cta;
    stroke-width: 8;
  }
}
.home-footer {
  .flexy();
  .justify-content(center);
  width: 100%;
  max-height: 0;
  background: @white;
  transition: (@prolog_cover_fadein * 0.8);
  transition-timing-function: @bezier_transform;
  overflow: hidden;
  nav {
    margin: @home_margin_footer (@home_margin_footer * 2);
  }
}


[#2501] Fix regression where super scrollbar resize arrows do not expand when the inner container gets too small.

@_superScrollbarHeight: 32px;

#butter-super-scrollbar-outer-container {
  position: relative;
  left: -@_trackHandleWidth;

  .butter-super-scrollbar-zoom-slider {
    position: absolute;
    width: 94px;
    height: 6px;
    z-index: 2;

    > .butter-super-scrollbar-zoom-handle {
      top: -6px;
      position: absolute;
      height: 16px;
      width: 6px;
      left: 50%;
      line-height: 100%;
      cursor: pointer;
      background: #EEE;
      border: 1px solid #999;
      border-radius: 6px;
    }
  }

  .butter-super-scrollbar-zoom-slider-container {
    position: absolute;
    background: #EEE;
    border: 1px solid #999;
    width: 100px;
    height: 6px;
    border-radius: 6px;
    left: 12px;
    top: 13px;
    z-index: 2;

    > .tick {
      height: 6px;
      width: 1px;
      float: left;
      border-left: 1px solid #CCC;
    }
    > .tick:first-child {
      margin-left: 1px;
    }
    > .tick:nth-child( 2 ) {
      margin-left: 2px;
    }
    > .tick:nth-child( 3 ) {
      margin-left: 4px;
    }
    > .tick:nth-child( 4 ) {
      margin-left: 8px;
    }
    > .tick:nth-child( 5 ) {
      margin-left: 16px;
    }
    > .tick:nth-child( 6 ) {
      margin-left: 32px;
    }
  }
}

#butter-super-scrollbar-inner-container {
  background: darken( @baseLight, 3% );
  height: @_superScrollbarHeight;
  position: absolute;
  left: @_trackHandleWidth;
  width: 100%;
  right: -7px;
  bottom: -@_superScrollbarHeight;
  border: 1px solid @baseLightOutline;
  margin-right: 5px;
  top: 0;
  box-shadow: inset 2px 0 5px -2px rgba( 0, 0, 0, 0.2 );
}

#butter-super-scrollbar-visuals {
  margin-top: 7px;
  height: 100%;
  width: 100%;
  position: absolute;
}

#butter-super-scrollbar-viewport {
  .gradient( "vertical", fade( #FFF, 65% ), fade( #FFF, 20% ), true );
  cursor: move;
  height: 25px;
  position: absolute;
  top: 2px;
  min-width: 5px;
  &.viewport-transition {
    .transition( left 0.1s linear, right 0.1s linear );
  }
  &:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: -3px;
    display: block;
    border: 4px solid #FFF;
    z-index: 1;
    box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.2 ) inset, 0 0 0 1px @baseLightOutline;
  }
}

.butter-super-scrollbar-trackevent {
  background: rgba( 0, 0, 0, 0.4 );
  height: 3px;
  position: absolute;
  z-index: 1;
}

.butter-super-scrollbar-handle {
  background: #41BB92;
  display: block;
  height: 18px;
  margin-top: -9px;
  position: absolute;
  top: 50%;
  width: 6px;
  border: 1px solid @green;
  box-shadow: 0 2px 3px -2px;
  z-index: 1;
  cursor: ew-resize;

  &:before { // The little center grip on the handle
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: 2px;
    background: darken( @green, 10% );
  }

  .butter-super-arrow { // The green arrows
    content: "";
    opacity: 0;
    position: absolute;
    display: inline-block;
    background-image: url( "../resources/icons/glyphiconshalflings-green.png" );
    width: 14px;
    height: 14px;
    top: 2px;
    .transition( all 0.1s ease );
  }
}

#butter-super-scrollbar-handle-left {
  left: -8px;
  .butter-super-arrow {
    left: 0;
    background-position: -240px -96px;
  }
}

#butter-super-scrollbar-handle-right {
  right: -10px;
  .butter-super-arrow {
    right: 0;
    background-position: -264px -96px;
  }
}

// Arrows - hover states
// This allows the arrows to animate.
#butter-super-scrollbar-viewport:hover  {
  .butter-super-arrow {
    opacity: 0.5;
  }
  #butter-super-scrollbar-handle-left .butter-super-arrow {
    left: 10px;
  }
  #butter-super-scrollbar-handle-right .butter-super-arrow {
    right: 10px;
  }
}

// Arrows - minimum size states
// At 50px wide, force the arrows to the outside
#butter-super-scrollbar-inner-container.super-scrollbar-small:hover {
  #butter-super-scrollbar-handle-left .butter-super-arrow {
    left: -16px;
  }
  #butter-super-scrollbar-handle-right .butter-super-arrow {
    right: -16px;
  }
}

// The little red scrubber
#buter-super-scrollbar-scrubber {
  background: none repeat scroll 0 0 @red;
  bottom: 0;
  cursor: move;
  position: absolute;
  top: 0;
  width: 1px;
}

@_superScrollbarHeight: 32px;

#butter-super-scrollbar-outer-container {
  position: relative;
  left: -@_trackHandleWidth;

  .butter-super-scrollbar-zoom-slider {
    position: absolute;
    width: 94px;
    height: 6px;
    z-index: 2;

    > .butter-super-scrollbar-zoom-handle {
      top: -6px;
      position: absolute;
      height: 16px;
      width: 6px;
      left: 50%;
      line-height: 100%;
      cursor: pointer;
      background: #EEE;
      border: 1px solid #999;
      border-radius: 6px;
    }
  }

  .butter-super-scrollbar-zoom-slider-container {
    position: absolute;
    background: #EEE;
    border: 1px solid #999;
    width: 100px;
    height: 6px;
    border-radius: 6px;
    left: 12px;
    top: 13px;
    z-index: 2;

    > .tick {
      height: 6px;
      width: 1px;
      float: left;
      border-left: 1px solid #CCC;
    }
    > .tick:first-child {
      margin-left: 1px;
    }
    > .tick:nth-child( 2 ) {
      margin-left: 2px;
    }
    > .tick:nth-child( 3 ) {
      margin-left: 4px;
    }
    > .tick:nth-child( 4 ) {
      margin-left: 8px;
    }
    > .tick:nth-child( 5 ) {
      margin-left: 16px;
    }
    > .tick:nth-child( 6 ) {
      margin-left: 32px;
    }
  }
}

#butter-super-scrollbar-inner-container {
  background: darken( @baseLight, 3% );
  height: @_superScrollbarHeight;
  position: absolute;
  left: @_trackHandleWidth;
  width: 100%;
  right: -7px;
  bottom: -@_superScrollbarHeight;
  border: 1px solid @baseLightOutline;
  margin-right: 5px;
  top: 0;
  box-shadow: inset 2px 0 5px -2px rgba( 0, 0, 0, 0.2 );
}

#butter-super-scrollbar-visuals {
  margin-top: 7px;
  height: 100%;
  width: 100%;
  position: absolute;
}

#butter-super-scrollbar-viewport {
  .gradient( "vertical", fade( #FFF, 65% ), fade( #FFF, 20% ), true );
  cursor: move;
  height: 25px;
  position: absolute;
  top: 2px;
  min-width: 5px;
  &.viewport-transition {
    .transition( left 0.1s linear, right 0.1s linear );
  }
  &:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: -3px;
    display: block;
    border: 4px solid #FFF;
    z-index: 1;
    box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.2 ) inset, 0 0 0 1px @baseLightOutline;
  }
}

.butter-super-scrollbar-trackevent {
  background: rgba( 0, 0, 0, 0.4 );
  height: 3px;
  position: absolute;
  z-index: 1;
}

.butter-super-scrollbar-handle {
  background: #41BB92;
  display: block;
  height: 18px;
  margin-top: -9px;
  position: absolute;
  top: 50%;
  width: 6px;
  border: 1px solid @green;
  box-shadow: 0 2px 3px -2px;
  z-index: 1;
  cursor: ew-resize;

  &:before { // The little center grip on the handle
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: 2px;
    background: darken( @green, 10% );
  }

  .butter-super-arrow { // The green arrows
    content: "";
    opacity: 0;
    position: absolute;
    display: inline-block;
    background-image: url( "../resources/icons/glyphiconshalflings-green.png" );
    width: 14px;
    height: 14px;
    top: 2px;
    .transition( all 0.1s ease );
  }
}

#butter-super-scrollbar-handle-left {
  left: -8px;
  .butter-super-arrow {
    left: 0;
    background-position: -240px -96px;
  }
}

#butter-super-scrollbar-handle-right {
  right: -10px;
  .butter-super-arrow {
    right: 0;
    background-position: -264px -96px;
  }
}

// Arrows - hover states
// This allows the arrows to animate.
#butter-super-scrollbar-viewport:hover  {
  .butter-super-arrow {
    opacity: 0.5;
  }
  #butter-super-scrollbar-handle-left .butter-super-arrow {
    left: 10px;
  }
  #butter-super-scrollbar-handle-right .butter-super-arrow {
    right: 10px;
  }
}

// Arrows - minimum size states
// At 50px wide, force the arrows to the outside
#butter-super-scrollbar-container.super-scrollbar-small:hover {
  #butter-super-scrollbar-handle-left .butter-super-arrow {
    left: -16px;
  }
  #butter-super-scrollbar-handle-right .butter-super-arrow {
    right: -16px;
  }
}

// The little red scrubber
#buter-super-scrollbar-scrubber {
  background: none repeat scroll 0 0 @red;
  bottom: 0;
  cursor: move;
  position: absolute;
  top: 0;
  width: 1px;
}