@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

main .story *,
main .story p,
.popover * {
  font-family: 'Open Sans', sans-serif;
}

main .story h2,
main .story h3,
main .story h4,
.popover h3 {
  font-family: 'OpenSansCondensedBold', sans-serif;
  font-weight: 400;
}

article.story img {
  margin-top: 0;
  margin-bottom: 0;
}

/*
 * lead
 */

main .story .container-wide.lead {
  background-color: #242421;
  margin-bottom: 0;
  text-align: center;
}

main .story .charged-up-img {
  max-width: 420px;
}

main .story h1 {
  font-family: 'Gotham SSm 7r', 'Gotham SSm A', 'Gotham SSm B', sans-serif;
  color: #fff;
  font-size: 80px;
  margin: 60px 0 45px;
}

/*glow for webkit*/

@-webkit-keyframes glow-effect {
  from {
    text-shadow: 0 0 0px #A1A1A1, 0 0 5px  #A1A1A1, 0 0 10px  #A1A1A1, 0 0 20px  #A1A1A1, 0 0 30px  #A1A1A1, 0 0 40px  #A1A1A1, 0 0 50px #A1A1A1, 0 0 60px #A1A1A1;
  }

  to {
    text-shadow: 0 0 0px #A1A1A1, 0 0 0px #A1A1A1, 0 0 0px #A1A1A1, 0 0 1px #A1A1A1, 0 0 2px #A1A1A1, 0 0 3px #A1A1A1, 0 0 4px #A1A1A1, 0 0 5px #A1A1A1;
  }
}


/*glow for mozilla*/

@keyframes glow-effect {
  from {
    text-shadow: 0 0 0px #A1A1A1, 0 0 0px  #A1A1A1, 0 0 0px  #A1A1A1, 0 0 0px  #A1A1A1, 0 0 5px  #A1A1A1, 0 0 10px  #A1A1A1, 0 0 20px #A1A1A1, 0 0 30px #A1A1A1;
  }

  to {
    text-shadow: 0 0 0px #A1A1A1, 0 0 0px #A1A1A1, 0 0 0px #A1A1A1, 0 0 1px #A1A1A1, 0 0 2px #A1A1A1, 0 0 3px #A1A1A1, 0 0 4px #A1A1A1, 0 0 5px #A1A1A1;
  }
}


main .story h1 {
  -webkit-animation: glow-effect 1.5s ease-in-out infinite alternate;
  animation: glow-effect 1.5s ease-in-out infinite alternate;
}

@media (max-width: 575px) {
  main .story h1 {
    font-size: 44px;
  }
}

main .story .lead p {
  color: #e0db86;
  font-family: 'OpenSansCondensedLight', sans-serif;
  font-size: 35px;
  line-height: 38px;
  margin-bottom: 40px;
}

@media (max-width: 575px) {
  main .story .lead p {
    font-size: 28px;
    line-height: 32px;
  }
}

main .story .social-container {
  display: inline-block;
  margin-bottom: 35px;
}

main .story .container-wide.content {
  background-color: #029294;
}

/*
 * nano wire graphic
 */

main .story .img-copy-container {
  position: relative;
}

main .story .img-copy-container .copy {
  position: relative;
  z-index: 2;
}

main .story .nano-wire-img-container {
  margin-top: -250px;
  position: relative;
  z-index: 1;
}

@media (max-width: 480px) {
  main .story .nano-wire-img-container {
    margin-top: 0;
  }

  main .story .img-copy-container .copy {
    position: static;
  }
}

main .story .img-copy-container p {
  color: #fff;
  font-size: 18px;
}

main .story .legend-caption {
  width: 100%;
  z-index: 10;
}

main .story p.legend,
main .story p.caption {
  color: #fff;
  margin-bottom: 0;
  margin-top: 5px;
  text-align: center;
}

main .story p.legend span {
  display: inline-block;
  white-space: nowrap;
}

main .story p.legend a,
main .story p.legend a:hover {
  color: #fff;
  display: inline-block;
  font-size: 14px;
  margin-right: 10px;
}

main .story p.caption {
  color: #000;
  text-align: center;
  margin-bottom: 20px;
}

main .story .img-copy-container p.intro {
  margin-top: 50px;
}

main .story h2 {
  color: #e0db86;
  font-size: 32px;
  margin-top: 40px;
}

/* tool tip triggers */

main .story .tool-tip-trigger-circle {
  color: #000 !important;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 23px;
  width: 23px;
  text-align: center;
  font-size: 14px;
  margin-right: 0 !important;
}

main .story .fade-in-tool-tip-trigger {
  position: absolute;
  z-index: 100;
}

/* tool tip trigger init animation */

@-webkit-keyframes show {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


@keyframes show {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


.show {
  -webkit-animation: show 0.8s ease-in;
  animation: show 0.8s ease-in;
}

/* tool tip trigger positioning */

main .story .tool-tip-cover {
  left: 74%;
  top: 45%;
}

main .story .tool-tip-outer-electrode {
  left: 62%;
  top: 48%;
}

main .story .tool-tip-separator {
  left: 54%;
  top: 55%;
}

main .story .tool-tip-coating {
  left: 65%;
  top: 70%;
}

main .story .tool-tip-nanowhiskers {
  left: 51%;
  top: 70%;
}

main .story .tool-tip-wire-core {
  left: 34%;
  top: 71%;
}

@media (max-width: 617px) {
  main .story .tool-tip-cover {
    left: 74%;
    top: 45%;
  }

  main .story .tool-tip-outer-electrode {
    left: 62%;
    top: 48%;
  }

  main .story .tool-tip-separator {
    left: 54%;
    top: 55%;
  }

  main .story .tool-tip-coating {
    left: 62%;
    top: 70%;
  }

  main .story .tool-tip-nanowhiskers {
    left: 49%;
    top: 70%;
  }

  main .story .tool-tip-wire-core {
    left: 32%;
    top: 71%;
  }
}

@media (max-width: 343px) {
  main .story .tool-tip-cover {
    left: 74%;
    top: 40%;
  }

  main .story .tool-tip-outer-electrode {
    left: 62%;
    top: 45%;
  }

  main .story .tool-tip-separator {
    left: 54%;
    top: 52%;
  }

  main .story .tool-tip-coating {
    left: 59%;
    top: 70%;
  }

  main .story .tool-tip-nanowhiskers {
    left: 50%;
    top: 63%;
  }

  main .story .tool-tip-wire-core {
    left: 32%;
    top: 66%;
  }
}

/* Bootstrap Popover overrides */

.popover {
  text-shadow: none;
}

@media (max-width: 480px) {
  .popover {
    left: 50% !important;
    margin-left: -148px;
  }
}

.popover .arrow {
  display: none;
}

.popover h3 {
  color: #444;
  background-color: #ffcc00;
  margin-bottom: 0;
}

.popover .popover-inner {
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.popover .popover-content {
  padding-top: 3px;
}

/* sonar animation */

main .story .sonar {
  border: solid 1px #fff;
  border-radius: 50%;
  display: none;
  height: 21px;
  position: absolute;
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  width: 21px;
  z-index: 10;
}

main .story .sonar-anime {
  transition: 1s ease-in-out;
  -webkit-transform: scale(2);
  transform: scale(2);
  opacity: 0;
}

/*
 * Batteries vs. Capacitors
 */

main .story .bat-vs-cap {
  background-color: #5ab8b9;
  margin-top: 25px;
}

@media (max-width: 767px) {
  main .story .bat-vs-cap {
    padding-left: 8%;
    padding-right: 8%;
  }
}

@media (max-width: 480px) {
  margin-top: 30px;
}

main .story .bat-vs-cap .caption {
  font-size: 12px;
}

main .story .bat-vs-cap .intro {
  margin-bottom: 8px;
  margin-top: 50px;
}

main .story .bat-vs-cap h3,
main .story .bat-vs-cap h4 {
  color: #fff;
  text-transform: uppercase;
}

main .story .bat-vs-cap h4 {
  margin-bottom: 8px;
}

main .story .bat-vs-cap ul {
  font-size: 14px;
  margin-left: 18px;
}

main .story .separator .span10 {
  border-bottom: #000 dotted 1px;
  margin-top: 25px;
  margin-bottom: 40px;
}

main .story .why-nanowhiskers span {
  display: inline-block;
  margin-top: 8px;
}

main .story .nanowhiskers-size {
  margin-bottom: 40px;
}

/*
 * Endless Possibilities
 */

main .story .nano-wire-uses,
main .story .nano-wire-uses h3 {
  color: white;
}

main .story .nano-wire-uses {
  padding-bottom: 60px;
}

main .story .nano-wire-uses h3 {
  font-size: 16px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

main .story .nano-wire-uses p {
  font-size: 14px;
}