svg line, svg path {
  stroke-linecap: round;
  stroke-linejoin: round; }

#flaunt-map {
  display: flex;
  flex-wrap: wrap; }

.draft .sketch {
  margin-right: 2rem; }

@media screen and (min-width: 1201px) {
  .draft .sketch {
    /* 4 */
    width: 1360px; } }

@media screen and (max-width: 1400px) {
  .draft .sketch {
    width: 1160px; } }

@media screen and (max-width: 1200px) {
  .draft .sketch {
    width: 952px; } }

@media screen and (max-width: 992px) {
  .draft .sketch {
    width: 728px; } }

@media screen and (max-width: 768px) {
  .draft .sketch {
    width: 100%; } }

.state-boundary {
  fill: none;
  stroke: #f3efec;
  stroke-width: .70px; }

.state-land {
  stroke: #f3efec;
  stroke-width: .70px; }

.land {
  fill: #f3efec; }

.border-state {
  stroke: white;
  stroke-width: 1px;
  fill: none; }

.land-state {
  stroke: #847c78;
  stroke-width: 1px;
  stroke-opacity: 0.5;
  fill: none; }

.flaunts rect.flaunt-background, .flaunts rect.cluster-background, .clusters.legend rect.flaunt-background, .clusters.legend rect.cluster-background {
  fill: #453635;
  fill-opacity: 0.5; }

.flaunts g:hover rect.flaunt-background, .flaunts g:hover rect.cluster-background, .clusters.legend g:hover rect.flaunt-background, .clusters.legend g:hover rect.cluster-background {
  fill-opacity: 1; }

.flaunts g:hover text, .clusters.legend g:hover text {
  fill: #f3efec; }

.flaunts text, .clusters.legend text {
  font-size: 12px;
  fill: #453635;
  text-anchor: middle; }

.data circle.plain {
  fill: #01bbb4;
  fill-opacity: 0.5; }

.data text {
  font-size: 0.8rem;
  display: none; }

svg.parallel-coordinates .flaunt.axis line {
  opacity: 0.25;
  stroke: #888; }

svg.parallel-coordinates .flaunts text {
  fill: #453635;
  alignment-baseline: central; }

svg.parallel-coordinates .data path {
  fill: none;
  stroke: #01bbb4;
  stroke-width: 2px; }

svg.parallel-coordinates .data text {
  fill: #453635;
  opacity: 0;
  display: block;
  text-anchor: end;
  alignment-baseline: central; }

svg.parallel-coordinates .data circle {
  r: 5px;
  opacity: 0; }

svg.parallel-coordinates .data .datum.cluster-1 {
  opacity: 0.2;
  stroke-width: 0.2; }

svg.parallel-coordinates .data .datum:hover path {
  stroke-width: 5px;
  opacity: 0.8; }

text.map-title {
  font-size: 24px;
  text-anchor: middle;
  fill: #847c78; }

#sortable-heatmap {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #888; }

.interaction {
  cursor: pointer; }

g.interaction {
  animation: interaction-opacity 2s cubic-bezier(0.49, 0.05, 0.32, 1.04) infinite alternate; }

text.interaction {
  fill: #01bbb4;
  animation: interaction-opacity 2s cubic-bezier(0.49, 0.05, 0.32, 1.04) infinite alternate; }

span.interaction {
  color: #01bbb4;
  animation: interaction-colors-span 2s cubic-bezier(0.49, 0.05, 0.32, 1.04) infinite alternate; }

li.interaction {
  color: #01bbb4; }
  li.interaction:hover {
    color: #01ada5; }

@keyframes interaction-opacity {
  50% {
    opacity: 0.5; } }

@keyframes interaction-colors-span {
  50% {
    color: rgba(1, 187, 180, 0.5); } }

.city-map path.state-land {
  fill: none;
  stroke: #847c78; }

.city-map .city circle {
  fill-opacity: 0.5;
  stroke-width: 1; }

.city-highlighter.hide {
  display: none; }

.city-highlighter line, .city-highlighter rect, .city-highlighter circle {
  stroke: #997859;
  stroke-width: 2px; }

.city-highlighter circle {
  fill: none; }

.city-highlighter rect {
  fill: #997859; }

.city-highlighter text {
  fill: #f7f5f2;
  text-anchor: middle;
  font-size: 14px; }

.voronoi path {
  fill-opacity: 0;
  stroke: none; }

.compare-cities {
  margin-top: 0.5rem; }
  .compare-cities .dot text {
    alignment-baseline: central; }
  .compare-cities .dot.city-a text {
    text-anchor: end; }
  .compare-cities .city:first-child text.label {
    text-anchor: end; }
  .compare-cities .city-a .flaunt text {
    text-anchor: end; }
  .compare-cities .city line.axis {
    stroke: #847c78;
    stroke-width: 3;
    opacity: 0.25; }
  .compare-cities .city .flaunt text {
    font-size: 0.8rem; }
  .compare-cities .city-flaunts line {
    opacity: 0.75; }
  .compare-cities text.label {
    font-size: 16px; }
  .compare-cities .slope-chart .flaunt line {
    stroke-width: 18;
    opacity: 0.5; }
  .compare-cities .axis-labels text {
    text-anchor: middle;
    font-size: 10px;
    fill: #847c78; }

ul.cluster-selector {
  list-style: none;
  display: flex;
  margin-bottom: 0; }
  ul.cluster-selector li {
    text-align: center;
    margin-bottom: 0; }
    ul.cluster-selector li:hover {
      background: #ede7e3; }

#compare-cities {
  width: 50%; }

@media screen and (max-width: 768px) {
  #compare-cities {
    width: 100%; } }

.blog-post #compare-cities {
  float: right; }

.clusters.legend text {
  alignment-baseline: central; }

.top-tables {
  display: flex;
  justify-content: space-between; }
  .top-tables table {
    font-size: 1.12rem;
    line-height: 1.5; }
    .top-tables table td:first-child {
      text-align: right;
      padding-right: 0.5rem; }

.legend-size rect {
  stroke: #DDD;
  stroke-width: 1;
  fill: none;
  stroke-linejoin: round; }

.legend-size circle {
  fill: #888;
  fill-opacity: 0.5;
  stroke-width: 1;
  stroke: #888;
  stroke-width: 1; }

.legend-size text {
  fill: #847c78;
  font-size: 12px; }

div.sketch.no-svg.top-n {
  width: 688px;
  height: 430px;
  background: url("/assets/posts/2015-09-20-flaunt-map/top-10-map-static@2x.png") 0% 0% 688px 430px; }

svg.top-n .city circle {
  fill: #888;
  opacity: 0.7; }

svg.top-n .city.top-n circle {
  fill: #01bbb4; }

svg.top-n .city.top-n .stitch-fix-logo {
  opacity: 0.7; }

svg.top-n .data text {
  display: block;
  font-size: 15px;
  fill: #01ada5;
  alignment-baseline: central; }

span.action {
  color: #ff5c61; }
  span.action:hover {
    color: #4e4a47;
    text-decoration: underline; }

.stitch-fix-logo .field {
  fill: #01bbb4; }

.stitch-fix-logo .stitches {
  fill: #FFFFFF; }

path.stitch-fix-logotype {
  fill: #847c78;
  stroke: none; }

.twitter-typeahead:first-child {
  margin-right: 1em; }

.twitter-typeahead input {
  width: 130px; }

.twitter-typeahead .tt-menu {
  border: 1px solid #847c78; }

.twitter-typeahead .tt-suggestion {
  line-height: 1.5;
  background: #f7f5f2;
  padding: 0.5em; }

.twitter-typeahead .tt-suggestion:hover,
.twitter-typeahead .tt-cursor {
  background: #847c78;
  color: #f7f5f2; }

li.cluster:nth-child(3) {
  width: 10em;
}