/* -------------------------------------------------------------
  Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
  By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets

  List of CSS3 Sass Mixins File to be @imported and @included as you need

  The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER
  ENDING css files

  note: All CSS3 Properties are being supported by Safari 5
  more info: http://www.findmebyip.com/litmus/#css3-properties

  Mixins available:
    -   background-gradient     - arguments: Start Color: #3C3C3C, End Color: #999999
    -   background-size         - arguments: Width: 100%, Height: 100%
    -   border-radius           - arguments: Radius: 5px
    -   border-radius-separate  - arguments: Top Left: 5px, Top Left: 5px, Bottom Left: 5px, Bottom Right: 5px
    -   box                     - arguments: Orientation: horizontal, Pack: center, Align: center
    -   box-rgba                - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C
    -   box-shadow              - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   box-sizing              - arguments: Type: border-box
    -   columns                 - arguments: Count: 3, Gap: 10
    -   double-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0
    -   flex                    - arguments: Value: 1
    -   flip                    - arguments: ScaleX: -1
    -   font-face               - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf
    -   opacity                 - arguments: Opacity: 0.5
    -   outline radius          - arguments: Radius: 5px
    -   resize                  - arguments: Direction: both
    -   rotate                  - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0
    CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
    -   text-shadow             - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   transform               - arguments: Parameters: null
    -   transition              - arguments: What: all, Length: 1s, Easing: ease-in-out
    -   triple-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0

------------------------------------------------------------- */
/* BACKGROUND GRADIENT */
/* BACKGROUND SIZE */
/* BORDER RADIUS */
/* BOX */
/* BOX RGBA */
/* BOX SHADOW */
/* BOX SIZING */
/* COLUMNS */
/* DOUBLE BORDERS */
/* FLEX */
/* FLIP */
/* FONT FACE */
/* OPACITY */
/* OUTLINE RADIUS */
/* RESIZE */
/* ROTATE*/
/* TEXT SHADOW */
/* TRANSFORM  */
/* TRANSITION */
/* TRIPLE BORDERS */
h1 {
  font-size: 36px; }

h2 {
  font-size: 30.24px; }

h3 {
  font-size: 25.452px; }

h4 {
  font-size: 21.42px; }

body {
  font-family: "futura-pt"; }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

body {
  color: #fff;
  text-align: center;
  margin: 0;
  background-color: #363636;
  transition: all 0.2s; }

text {
  fill: #fff;
  font-weight: 400;
  font-size: 14px; }

a {
  color: #afeb4f; }

.years-axis text {
  font-size: 8px; }

h1, h2 {
  text-align: center;
  margin: 0 5%;
  line-height: 1.5em; }

h1 {
  font-weight: 200;
  font-size: 63px;
  margin: 0.25em 0; }

h2 {
  font-weight: 200;
  font-size: 21.42px;
  color: #d2d2d2;
  margin-bottom: 1.5em; }

.category {
  position: relative;
  display: inline-block;
  z-index: 10; }

.category button {
  border: none;
  font: inherit;
  padding: 3px 8px;
  background-color: #fd8d3c;
  color: #333;
  font-weight: 500;
  cursor: pointer; }
  .category button:after {
    content: " \25BE";
    padding-left: 5px;
    display: inline-block; }
  .category button:focus {
    outline: none; }

.category ul {
  position: absolute;
  top: 100%;
  right: 0;
  text-align: left;
  padding: 0;
  margin: 0;
  display: none; }
  .category ul li {
    list-style: none; }
    .category ul li a {
      padding: 8px 10px;
      background-color: #fd8d3c;
      color: #333;
      font-size: 18px;
      font-weight: 400;
      cursor: pointer;
      display: block;
      min-width: 250px; }
      .category ul li a:hover {
        background-color: #f2f2f2; }
    .category ul li.current {
      z-index: 100; }

text.label {
  font-size: 12px;
  font-weight: 200; }

text.min-gap, text.max-gap {
  font-size: 12px;
  font-weight: 200;
  fill: #ababab; }

.gap-hover, .male-hover, .female-hover {
  pointer-events: none; }

#controls {
  display: none;
  clear: both;
  z-index: 5;
  width: 100%;
  position: relative;
  background-color: #2e2e2e;
  height: 22px;
  margin-bottom: 1.25em;
  padding: 15px 0;
  font-weight: 200; }
  #controls .sorting {
    float: left;
    margin-left: 5%; }
    #controls .sorting ul {
      margin: 0;
      padding: 0;
      display: inline; }
      #controls .sorting ul li {
        list-style: none;
        display: inline;
        margin: 0 5px;
        padding: 4px 6px;
        background-color: #454545;
        cursor: pointer; }
        #controls .sorting ul li:hover {
          background-color: #555; }
        #controls .sorting ul li.selected {
          background-color: #6d6d6d;
          pointer-events: none;
          cursor: default; }
  #controls .years {
    float: left;
    margin-left: 10px;
    position: relative;
    margin-top: -5px; }
    #controls .years button {
      border: none;
      font: inherit;
      padding: 4px;
      background-color: #6d6d6d;
      color: #fff;
      cursor: pointer;
      display: inline; }
      #controls .years button:after {
        content: " \25BE";
        padding-left: 5px;
        display: inline-block; }
      #controls .years button:focus {
        outline: none; }
    #controls .years ul {
      position: absolute;
      top: 100%;
      right: 0;
      text-align: left;
      padding: 0;
      margin: 0;
      display: none; }
      #controls .years ul li {
        text-align: right;
        list-style: none;
        padding: 4px 8px;
        min-width: 40px;
        font-size: 15.12px;
        cursor: pointer;
        display: block;
        background-color: #6d6d6d; }
        #controls .years ul li:hover {
          background-color: #f2f2f2;
          color: #333; }
        #controls .years ul li.current {
          z-index: 100; }
  #controls .keys {
    float: right;
    margin-right: 5%; }
    #controls .keys div, #controls .keys svg {
      display: inline; }

#line {
  width: 100%;
  position: absolute;
  height: 35px;
  border-bottom: 1px solid #fff;
  z-index: 100; }

footer {
  margin: 10px 0;
  font-weight: 200; }

@media only screen and (max-width: 1250px) {
  .keys {
    margin: 20px 0 0 0; }

  #controls {
    height: auto;
    clear: both; }
    #controls .sorting, #controls .years, #controls .keys {
      margin: 4px 0;
      float: none; }
    #controls .years {
      margin: 10px 0; }
    #controls .sorting ul li {
      display: inline-block;
      margin: 4px; } }
@media only screen and (max-width: 560px) {
  #controls .years ul {
    width: 100%; }
    #controls .years ul li {
      text-align: center; } }