/**
 * @Date:   2018-02-07T10:03:36-05:00
 * @Email:  danny@atomicmotion.com
 * @Filename: responsive.css
 * @Last modified time: 2018-02-14T11:21:45-05:00
 * @Copyright: Atomic Motion
 */

@media screen and (max-width:1299px) {
	/* 1300px and less (all, but large screens) */

/* explore location */

.explore-app { height: 445px; }

.nav-tools > li:nth-of-type(1).active { min-height: 383px; }
.nav-tools > li:nth-of-type(2).active { min-height: 320px; }

.nav-tools > li:nth-of-type(1).active .scroll-overflow { height: 323px; }
.nav-tools > li:nth-of-type(2).active .scroll-overflow { height: 262px; }
.nav-tools > li:nth-of-type(3).active .scroll-overflow { height: 263px; }

.charts .wrapper { height: 415px; }

/* explore location */

/* resources */

.nav-resources li {
  margin-bottom: 20px;
  height: 45px;
}

    .nav-resources li a {
      padding-top: 12px;
      height: 30px;
      line-height: 1.2;
    }

/* resources */

/* footer */

.footer .logo img { max-width: 105px; }

/* footer */

}

@media screen and (max-width:1199px) {
	/* 1199px and less (all, but large screens) */

.wrapper {
  margin: 0 auto;
  width: 90%;
  max-width: 90%;
}

.page-explore .wrapper {
  width: 100%;
  max-width: 100%;
}

.page-explore .charts .wrapper { width: 94%; }

.h2,
.improving-health-outcomes .h2 {
  font-size: 30px;
}

/* header */

.header .logo p { display: none; }

/* header */

/* impact */

.impact {
  padding-bottom: 40px;
  height: auto;
}

  .impact h1 { font-size: 120px; }
  .impact h2 { letter-spacing: 5px; }

/* impact */

/* what is a heat health event */

.area-impacted {
  margin-top: -70px;
  max-width: 600px;
}

.see-how p { margin-top: 30px; }

/* what is a heat health event */

/* improving health outcomes */

.improving-health-outcomes {
  padding: 45px 0;
  height: auto;
}

  .improving-health-outcomes .icon--arrow--down { margin-top: 40px; }

/* improving health outcomes */

/* get started */

.get-started {
  padding-bottom: 25px;
  height: auto;
}
/* get started */

/* footer */

.footer { height: auto; }

  .footer .logo { margin-bottom: 20px; }

  .copyright p {
    display: block;
    margin: 0 auto;
    width: 90%;
    text-align: center;
  }

  .copyright .nav--social {
    position: relative;
    display: block;
    margin: 30px auto;
    width: 90%;
    bottom: auto;
    right: auto;
    display: block;
    text-align: center;
  }

/* footer */

/* content */

  /* resources */

  .page-resources .impact h1 { padding-top: 100px; }

  .nav-resources {
    margin-bottom: 20px;
    max-width: 600px;
  }

  .resources-cards { padding: 50px 0; }

  .resources-cards .wrapper {
    top: auto;
    left: auto;
    margin: 0 auto;
    width: 90%;
  }

    .resources-cards .wrapper p { margin: 0 auto; }

  /* resources */

  /* explore location */

  .aside-legend,
  .aside-charts,
  .legend-charts {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
  }

  .aside-legend,
  .nav-legend {
    top: auto;
    right: auto;
  }

  .legend-charts {
    margin: 0 0 0 60px;
    padding-top: 0;
    width: 90%;
    background: none;
  }

    .legend-charts h2 { line-height: 0.7; }

    .nav-legend li {
      display: inline-block;
      margin-right: 20px;
      width: auto;
      min-width: 100px;
      vertical-align: top;
    }

/* content */

}

@media screen and (max-width:1023px) {
	/* 1023px and less (mobile and small screens only) */

/* header */

.header {
  padding: 25px 0;
  height: 30px;
}

    /* button mobile menu */

    .btn-mobile-menu {
        position: absolute;
        top: 7px;
        right: 5%;
        display: block;
        padding-top: 10px;
        width: 50px;
        height: 50px;
        font-size: 0;
        text-align: right;
        z-index: 99999;
    }

        .btn-mobile-menu.active { top: 15px; }

        .btn-mobile-menu span {
            display: block;
            margin: 10px auto 0;
            width: 40px;
            height: 2px;
            background-color: #fff;
            border-radius: 1px;
            transition: all 0.2s ease-out;
            -webkit-transition: all 0.2s ease-out;
        }

            .btn-mobile-menu.active .top-line {
                margin-top: 14px;
                webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

            .btn-mobile-menu.active .bottom-line {
                margin-top: -14px;
                webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            .btn-mobile-menu.active .middle-line { opacity: 0; }

    /* button mobile menu */

    /* main navigation */

    .main--navigation {
      display: none;
    }

    .header .logo,
    .header .logo img {
      max-width: 100px;
    }

    .header.active {
      position: fixed;
      top: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 100%;
      background-color: #000;
    }

    .header.active .main--navigation {
      position: absolute;
      top: 80px;
      padding: 20px 0;
      display: block;
      width: 100%;
      height: auto;
      text-align: center;
      background-color: #000;
    }

      .header.active .nav--main li {
        display: block;
        margin: 0 auto 15px;
        width: 100%;
        height: auto;
      }

        .header.active .nav--main a {
          display: block;
          margin: 0 auto;
          padding: 12px 0;
          width: 90%;
          max-width: 280px;
          max-width: auto;
          height: 24px;
          font-size: 18px;
          line-height: 1.4;
        }

        .header.active .nav--main a:link,
        .header.active .nav--main a:visited {
          background-color: rgba(240, 127, 10, 0.2);
        }

        .header.active .nav--main a:hover,
        .header.active .nav--main a:active,
        .header.active .nav--main a.active,
        .header.active .nav--main .btn-share.active > a {
          background-color: #F07F0A;
        }

        /* share */

        .header.active .nav--main .nav-share {
          position: relative;
          top: 0;
          left: auto;
          margin-left: auto;
          width: 100%;
          font-size: 0;
          text-align: center;
        }

        .header.active .nav--main .nav-share:before { display: none; }

        .header.active .nav--main .nav-share li {
          display: inline-block;
          margin: 3px;
          width: 35px;
          height: 35px;
          font-size: 0;
        }

        .header.active .nav--main .nav-share li a {
          padding: 0;
          margin: 0;
          width: 35px;
          height: 35px;
          font-size: 0;
        }

        .header.active .nav--main .nav-share li a:link,
        .header.active .nav--main .nav-share li a:visited {}

        .header.active .nav--main .nav-share li a:hover,
        .header.active .nav--main .nav-share li a:active {}

        .header.active .nav--main .nav-share .--twitter  { background-color: #00aced; }
        .header.active .nav--main .nav-share .--facebook { background-color: #3b5998; }
        .header.active .nav--main .nav-share .--google   { background-color: #dd4b39; }
        .header.active .nav--main .nav-share .--linkedin { background-color: #007bb6; }
        .header.active .nav--main .nav-share .--email    { background-color: #333; }

    /* main navigation */

.homepage .impact { background-image: url('../images/impact-home-low-res.jpg'); }

  .impact:before { background-color: rgba(0, 0, 0, 0.6); }

/* impact */

.explore--container input[type="text"]:placeholder {
  width: 90px;
  overflow: hidden;
}

.page-about .impact h1,
.page-resources .impact h1 { font-size: 60px; }

.low-res { display: block; }
.hi-res  { display: none; }

.who-is-tool-for,
.heat-health-event {
  height: auto;
}

.heat-health-event { background-image: none; }

.improving-health-outcomes {
  background-image: url('../images/bg-improving-health-outcomes-low-res.jpg');
  background-position: center top;
}

.improving-health-outcomes .icon { margin-top: 0; }

.list-tool-for li {
  margin-left: -20px;
  padding-top: 60px;
  width: 150px;
  height: 90px;
  color: #fff;
  font-size: 16px;
}

/* who-is-tool-for */

/* about */

.page-about .impact {
  height: auto;
  background-image: url('../images/impact-about-low-res.jpg');
}

  .four-twenty-seven h3,
  .four-twenty-seven h3:nth-of-type(1),
  .four-twenty-seven h3:nth-of-type(3) {
    position: relative;
    display: block;
    margin: 40px auto 0;
    padding: 10px 20px 0;
    width: 30%;
    width: 235px;
    max-width: 235px;
    height: 30px;
  }

    .four-twenty-seven h3:after,
    .four-twenty-seven h3:before {
      position: absolute;
      display: block;
      content: '';
    }

    .four-twenty-seven h3:before {
      top: -30px;
      left: 50%;
      margin-left: -0.5px;
      width: 1px;
      height: 20px;
      background-color: #fff;
      z-index: 2;
    }

  .solutions { display: none; }

  .page-about .impact .learn-more { margin-top: 30px; }

  /* methodology */

  .methodology {
    padding: 0 0 60px;
    height: auto;
    min-height: auto;
    background-image: none;
  }

    .methodology .icon { margin-top: 50px; }

  /* methodology */

  /* climate projections */

  .climate-projections .aside {
    padding: 70px 0;
    display: block;
    width: 100%;
    height: auto;
    min-height: 300px;
  }

    .climate-projections .aside-content { background-image: none; }

    .climate-projections .aside .icon { margin: 0 auto 30px; }

  /* climate projections */

/* about */

/* explore */

.page-explore { background-image: url('../images/impact-explore-location-low-res.jpg'); }

.time-scale p {
  font-size: 14px;
  line-height: 1.4;
}

.icon-time-scale { background-position: center -2px; }

.aside-legend,
.aside-charts {
  display: block;
  width: 100%;
}

/* explore */

/* resources */

.page-resources .impact {
  height: auto;
  padding-bottom: 50px;
  background-image: url('../images/impact-resources-low-res.jpg');
}

}

@media screen and (max-width:767px) {
	/* 767px and less (only mobile screen) */

.homepage .impact h1 { font-size: 50px; }
.homepage .impact h2 { font-size: 26px; font-weight: normal; }

.impact h1 { font-size: 70px; }

.impact h2 {
  font-size: 30px;
  letter-spacing: 2px;
}

.area-impacted { margin-top: 0; }

.who-is-tool-for:before { height: 90px; }

.improving-health-outcomes { padding-top: 40px; }

.list-tool-for li {
  display: block;
  margin: -30px auto 0;
  padding-top: 85px;
  width: 200px;
  height: 115px;
  color: #fff;
  font-size: 18px;
}

  .list-tool-for li:nth-of-type(1) { margin: 30px auto -30px; }

.icon--explore { display: none; }

/* content */

  /* about */

  .four-twenty-seven img {
    width: 80px;
    height: 80px;
  }

  .four-twenty-seven h2 { font-size: 22px; }

  /* about */

  /* resources */

  .page-resources .impact p,
  .resources-cards .wrapper p {
    font-size: 16px;
  }

  .nav-resources {
    margin: 40px auto 20px;
    max-width: 440px;
  }

  .card {
    display: block;
    margin: 0 auto 35px;
    padding-bottom: 50px;
    width: 90%;
    height: auto;
    min-height: auto;
  }

    .card .list { margin-top: auto; }

    .card h2    { font-size: 30px; }

  /* resources */

  /* explore location */

  .selected-location,
  .explore-location .explore--container {
    display: block;
    width: 100%;
    text-align: center;
  }

  .explore-location .explore--container {
    position: relative;
    top: auto;
    right: auto;
    margin: 10px auto 0;
  }

  /* explore location */

}

@media screen and (max-width:450px) {
	/* 450px and less (only mobile screen) */

/* footer */

.footer { font-size: 12px; }

  .footer .logo img { max-width: 100px; }

  .nav--social .--cal-adapt {
    display: block;
    margin: 10px auto;
  }

/* footer */

/* content */

  /* resources */

  .nav-resources {
    margin: 40px auto 20px;
    max-width: 440px;
  }

  .nav-resources li {
    display: block;
    width: 100%;
    max-width: 270px;
    margin: 0 auto 13px;
  }

  .card {
    display: block;
    margin: 0 auto 35px;
    padding-bottom: 50px;
    width: 90%;
    height: auto;
    min-height: auto;
  }

    .card img {
      width: 70px;
      height: 70px;
    }

    .card h2 { font-size: 20px; }

    .card .list li:before { left: 8px; }

  /* resources */

/* content */

}