.homepage {


  // The Plan B version of the homepage has a body class of `plan-b`.
  // Put any overrides for that version of the homepage here.
  // We may want to put some overrides in the media query section at the 
  // bottom, as well, if need be.
  &.plan-b {

    #get-the-data {

      .filters {
        width: 100%;
        min-height: 0;
        height: auto;
      }
      h3 {
        padding-top: 10px;
      }

    }

    #developers {
      h2 {
        .at2x( '../img/icon_devs.png', 92px, 97px );
        padding-left: 110px;
      }
      .inner {
        width: 82%;
      }

    }

  }

  .hero {
    
    padding-top: 10px;
    margin-top: 0;
    text-align: center;
    background-color: #FAB051;
    background-size: cover;

    &> .inner {
      .wrapper();
      padding-bottom: 10px;
    }

    h1 {
      .avenir-next-bold;
      font-size: 30px;
      line-height: 1.3em;
      padding-top: 22px;
      margin-top: 5px;
      width: 100%;
      background: transparent url() scroll no-repeat top center;
      .at2x( '../img/hr_hero-top-mobile.png', 770px, 17px );
    }

    nav {
      font-family: @body-font;
      margin-top: 9px;
    }

    .title {
      .avenir-next-bold;
      text-transform: none;
    }

    // Nav underneath the main title
    ul {
      .mobile-nav();
      a:hover {
        background-color: @gold;
      }
    }

  }

  // Hide the circle nav on mobiles
  .circle-nav {
    display: none;
  }

  h2 {
    font-style: italic;
    font-family: @body-font;
    font-weight: normal;
    font-size: 1.4em;
    background-repeat: no-repeat;
    padding-left: 15px;
    min-height: 100px;
    padding-top: 15px;
    width: 380px;
    max-width: 100%;
    margin-top: 15px;
    line-height: 1;
    strong {
      font-style: normal;
      display: block;
      .avenir-next-bold;
      font-size: 1.4em;
      margin-top: 5px;
    }
  }

}

section {
  .background {
    .wrapper();
  }
  p {
    line-height: 1.5em;
  }
}

section.video {

  background-color: @light_field10;
  min-height: 155px;

  .inner {
    padding: 23px 0 10px;
    margin: 0 auto;
  }

  .launch {
    p {
      .avenir-next;
      margin-top: .5em;
    }


  }

  .blurb {
    p {
      font-size: .95em;
      line-height: 1.4em;
      margin-top: 0;
    }
  }

  h2 {
    .at2x( '../img/icon_play.png', 63px, 63px );
    background-repeat: no-repeat;
    background-position: top right;
    -webkit-transition: background-image .4s ease-in-out;
    -moz-transition: background-image .4s ease-in-out;
    -o-transition: background-image .4s ease-in-out;
    -ms-transition: background-image .4s ease-in-out;
    transition: background-image .4s ease-in-out;
    max-width: 220px;
    min-height: 75px;
    margin: 0;
    width: auto;
    padding: 0;
    &:hover {
      .at2x( '../img/icon_play-over.png', 63px, 63px );
    }
    strong {
      // Preloading the play hover image
      background: transparent url(../img/icon_play-over.png) scroll no-repeat -9999999px -9999999px;
    }
  }
  
}

#facts-and-figures {

  h2 {
    background-image: none; 
  }

  // We're on a MapBox Plus plan and are allowed to hide their logo.
  .mapbox-logo {
    .hidden;
  }

  // Override the legend's default width.
  .map-legends, .map-tooltip {
    max-width: inherit;
  }

  .leaflet-bar .leaflet-disabled {
    opacity: .25;
  }

  #map {
    width: 100%;
    height: 400px;
    // Setting a left margin corrects a MapBox bug that causes tooltip overlays to go bonkers
    margin-left: -1px;
    border-top: 3px solid @light_field10;
    border-bottom: 3px solid @light_field10;
    .avenir-next;

    .tooltip {
      width: 200px;
    }

    #map-title {
      z-index: 5;
      position: absolute;
      top: 10px;
      left: 45px;
      width: auto;
      background-color: #fff;
      border: 1px solid @light_field;
      padding: 10px;

      h3 {
        font-size: 1em;
        line-height: 1.2em;
        .avenir-next-demi;
        letter-spacing: 0;
      }

      p {
        margin-bottom: .75em;
        font-family: @body-font;
        font-size: 1.3em;
        line-height: 1.4em;
        display: none;
      }

      a.action-arrow {
        font-size: 1.25em;
        color: @pacific;
        margin-bottom: 1em;
        .avenir-next;
        font-weight: 400;
      }

      .controls {
        display: none;
      }

      .year {
        font-size: 1.1em;
      }  

      .year label {
        font-size: 1.1em;
        letter-spacing: 0;
        font-weight: 600;
        margin-bottom: .75em;
        cursor: pointer;
      }

      .type label {
        font-size: 1.1em;
        line-height: 1em;
        cursor: pointer;
        .avenir-next;
        i {
          font-size: 15px;
          left: 15px;
          top: 0;
        }
      }

      .help {
        height: 0;
      }

    }

    .map_tooltip {
      ul {
        list-style-type: none;
        padding: 0;
      }
    }

    // Hide the map controls on mobile devices
    #map-title {
      animation: fadein .5s;
      -moz-animation: fadein .5s;
      -webkit-animation: fadein .5s;
      -o-animation: fadein .5s;
    }

    .my-legend {
      .legend-title {
        text-transform: uppercase;
        font-size: 1.2em;
        margin-bottom: 5px;
        font-weight: 600;
      }
    }

    .leaflet-control-container {
      height: 400px;
    }

    .wax-legend .legend-scale ul li {
      width: 37px;
    }

    .wax-legend ul.legend-labels li span {
      width: 37px;
      height: 10px;
    }

    .year {
      .avenir-next-demi;
      label {
        font-size: 13px;
        color: @pacific;
        padding-bottom: 0;
        &.selected {
          border-bottom: 2px solid @black;
        }
      }
      input {
        .visuallyhidden;
      }
    }

    .type {
      margin-top: 5px;
      .avenir-next-demi;
      label {
        font-size: 13px;
        display: block;
        position: relative;
      }
      input {
        margin-right: 8px;
      }
    }

  }
  
}

#about-the-rule a {
  margin-bottom: 10px;
}
#get-the-data, #about-the-rule {
  background: @white url(../img/bg_grid-tile.png) scroll repeat left top;
  border-top: 3px solid @light_field10;
  border-bottom: 3px solid @light_field10;
  padding-bottom: 50px;
  h2 {
    width: 440px;
    strong {
      font-size: 1.1em;
    }
  }
  h3 {
    .avenir-next-demi;
    font-size: 1.375em;
    letter-spacing: normal;
  }
  .inner {
    margin: 0 auto;
  }
  .filters,
  .summary {
    vertical-align: top;
    position: relative;
    background-color: @light_field10;
    padding: 10px 20px;
    min-height: 200px;
    margin-bottom: 25px;
    .action-arrow {
      display: block;
    }
    p {
      line-height: 1.375em;
    }
  }
  .filters {
    a {
      /*margin-top: -25px;*/
      display: block;
    }
  }
}

&.plan-b {

  #get-the-data {

    .filters {
      width: 100%;
      min-height: 0;
      height: auto;
    }

  }

}

#developers {
  .inner {
    margin: 0 auto;
    p {
      line-height: 1.375em;
      margin: 0;
      margin-bottom: 10px;
    }
  }

  .api {
    padding: 0px 20px;
  }
  .links {
    ul {
      list-style-type: none;
      padding-left: 0;
      margin-top: 0;
    }
    li {
      margin-bottom: 10px;
    }
  }
}

// Fullscreen YouTube video overlay

#youtube {
  background-color: @light_field10;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  animation: fadein .5s;
  -moz-animation: fadein .5s;
  -webkit-animation: fadein .5s;
  -o-animation: fadein .5s;
  &.closing {
    animation: fadeout .5s;
    -moz-animation: fadeout .5s;
    -webkit-animation: fadeout .5s;
    -o-animation: fadeout .5s;
  }
  iframe {
    margin: 30px;
    animation: fadein .5s;
    -moz-animation: fadein .5s;
    -webkit-animation: fadein .5s;
    -o-animation: fadein .5s;
  }
  .exit {
    position: absolute;
    right: 5px;
    top: 5px;
    height: 30px;
    font-size: 15px;
    cursor: pointer;
  }
}

// Viewport adjustments

@media only screen and ( min-width: 768px ) {

  .homepage {

    h2 {
      padding-left: 100px;
      margin: 40px auto 30px;
    }

    .hero {
      min-height: 403px;
      padding-top: 45px;
      .inner {
        padding-bottom: 0;
      }
      h1 {
        font-size: 47px;
        padding-top: 32px;
        margin-top: 0;
        .at2x( '../img/hr_hero-top.png', 770px, 17px );
      }
      nav {
        width: 82%;
        margin: 0 auto;
        margin-top: 25px;
        .clearfix();
        li {
          width: 25%;
          float: left;
          .clearfix();
        }
        li:first-child {
          width: 25%;
        }
        .title {
          text-transform: uppercase;
        }
        a {
          background-color: transparent;
          width: 160px;
          margin: 0 auto;
          span {
            text-transform: none;
            font-family: @body-font;
            font-weight: 400;
          }
          /*&.get-the-data {
            margin: 0 auto;
            .circle-nav {
              margin: 0 auto 20px;
            }
            .inner {
              padding-left: 9%;
              padding-right: 9%;
            }
          }*/
          /*&.developers {
            .clearfix();
            float: right;
            width: 150px;
            .circle-nav {
              float: right;
            }
          }*/
          &:hover {
            background-color: transparent;
          }
          &.about-the-rule {
            .inner span {
              padding: 65px 10% 50px;
            }
          }
          &.facts-and-figures {
            .inner span {
              padding: 65px 10% 50px;
            }
          }
          &.get-the-data {
            .inner span {
              padding: 60px 0 40px;
            }
          }
        }
      }
    }

    a.get-the-data {
      .circle-nav {
        .inner {
          img {
            .zoom-out();
          }
        }
      }
    }

    .circle-nav {
      display: block;
      margin-bottom: 20px;
      width: 150px;
      height: 150px;
      overflow: hidden;
      position: relative;
      background-color: #fbcd96;
      // A separate element is required because Safari doesn't properly clip text
      // http://goo.gl/ijoC9K
      .mask {
        border: 35px solid #FAB051;
        position: absolute;
        top: -35px;
        left: -35px;
        -webkit-border-radius: 250px;
        -moz-border-radius: 250px;
        border-radius: 250px;
        display: block;
        width: 220px;
        height: 220px;
        z-index: 1;
      }
      .inner {
        position: absolute;
        top: 30px;
        -webkit-transition: top .15s ease-in-out;
        -moz-transition: top .15s ease-in-out;
        -o-transition: top .15s ease-in-out;
        -ms-transition: top .15s ease-in-out;
        transition: top .15s ease-in-out;
        img {
          width: 81px;
          height: 93px;
          margin-left: -3px;
          //.zoom-out();
        }
      }
      &:hover {
        .inner {
          top: -100px;
        }
      }
      span {
        display: block;
        padding: 60px 10% 40px;
        text-align: center;
        font-size: .75em;
        .at2x( '../img/icon_goldcaret.png', 34px, 21px);
        background-repeat: no-repeat;
        background-position: center bottom;
      }
    }

    section.video {
      .inner {
        width: 82%;
      }
      .launch,
      .blurb {
        width: 49.5%;
        display: inline-block;
      } 
    }

  }

  #facts-and-figures {
    h2 {
      .at2x( '../img/icon_dataviz.png', 81px, 93px );
    }
    #map {
      // Show the map controls on non-mobile devices
      .leaflet-control-container,
      #map-title {
        display: block;
        width: 222px;
        left: 10px;
        h3 {
          font-size: 1.75em;
        }
        p,
        .controls {
          display: block;
        }
      }
      .leaflet-left {
        left: 227px;
      }
    }
  }

  #get-the-data, #about-the-rule {
    h2 {
      .at2x( '../img/icon_getdata.png', 79px, 92px );
      strong {
        font-size: 1.4em;
      }
    }
    .inner {
      width: 82%;
    }
    .filters {
      margin-right: 1%;
    }
    .filters,
    .summary {
      width: 48%;
      min-height: 292px;
      display: inline-block;
    }
  }

  #about-the-rule {
    h2 {
      .at2x( '../img/book-isocon.png', 85px, 92px );
      background-position: 0 25px;
    }
  }

  #developers {
    h2 {
      .at2x( '../img/icon_devs.png', 92px, 97px );
      padding-left: 110px;
    }
    .inner {
      width: 82%;
      .clearfix;
    }
    .api {
      width: 65%;
      margin-right: 3%;
      float: left;
    }

  }

}

// Hide the map on small devices

@media only screen and (max-device-width: 480px) {
    #map {
      display: none;
    }
}

// To fix a bug with nested @media rules, include some overrides.
@media only screen and ( max-width: 768px ) {
  #facts-and-figures {
    h2 {
      background-image: none !important; 
    }
  }
  #get-the-data {
    h2 {
      background-image: none !important; 
    }
  }
  #developers {
    h2 {
      background-image: none !important; 
    }
  }
  #about-the-rule {
    h2 {
      background-image: none !important; 
    }
  }
}