/*$gradient: linear-gradient(to bottom, black 0%, transparent 10%, #ededed);*/
/*$gradient: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 20%, rgba(0,0,0,0) 25%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.25) 80%, rgba(255,255,255,0.75) 100%);*/
/*$gradient: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,0.5) 16%, rgba(0,0,0,0) 21%, rgba(237,237,237,0) 50%, rgba(237,237,237,0.25) 55%, rgba(237,237,237,0.5) 65%, rgba(237,237,237,1) 100%);*/
/*$gradient: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,0.4) 16%, rgba(0,0,0,0) 21%, rgba(237,237,237,0) 50%, rgba(237,237,237,0.5) 60%, rgba(237,237,237,1) 100%);*/
/*$gradient: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,0.5) 16%, rgba(0,0,0,0) 21%, rgba(237,237,237,0) 45%, rgba(237,237,237,0.25) 55%, rgba(237,237,237,0.5) 60%, rgba(237,237,237,1) 100%);*/
/*$gradient: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,0.4) 16%, rgba(0,0,0,0) 21%, rgba(237,237,237,0) 45%, rgba(237,237,237,0.25) 55%, rgba(237,237,237,0.75) 70%, rgba(237,237,237,1) 100%);*/
/*$gradient: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,0.4) 16%, rgba(0,0,0,0) 21%, rgba(237,237,237,0) 45%, rgba(237,237,237,0.80) 70%, rgba(237,237,237,1) 100%);*/
/*TODO consider merging all 3 gradients into a single, using the heaviest as a worst-case one-size-fits-all*/
/*This would usually make a more consistent experience, but it's extremely hard to notice the variation in gradient due to the variation in picture content. Instead its probably best to continue as-is and fit the gradient to the picture, accomodating 508c*/
/*Currently unused - home page uses an image with embedded processing*/
/* The front page has a unique presentation, with a one off gradient and other image processing. Do not use the dynamic CSS gradient system for the front page */
.hero {
  width: 100%;
  /*padding-top: 50%;*/
  height: 0;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute; }

body.front .hero {
  padding-top: 59%; }

body.not-front .hero {
  padding-top: 50%; }

.hero img {
  visibility: hidden; }

.hero.home\.jpg {
  background-image: url("/Content/Images/HeroImagesClean/home.jpg"); }

.hero.learn-more\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/learn-more.jpg"); }

.hero.avalanche\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/avalanche.jpg"); }

.hero.behind-the-nri\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/behind-the-nri.jpg"); }

.hero.built-environment\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/built-environment.jpg"); }

.hero.changelog\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/changelog.jpg"); }

.hero.change-summary\.jpg {
   background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/change-summary.jpg"); }

.hero.coastal-flooding\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/coastal-flooding.jpg"); }

.hero.cold-wave\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/cold-wave.jpg"); }

.hero.community-resilience\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/community-resilience.jpg"); }

.hero.contact-us\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/contact-us.jpg"); }

.hero.data-and-methods\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/data-and-methods.jpg"); }

.hero.data-glossary\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/data-glossary.jpg"); }

.hero.determining-risk\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/determining-risk.jpg"); }

.hero.download-data\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/download-data.jpg"); }

.hero.data-archive\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/data-archive.jpg"); }

.hero.drought\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/drought.jpg"); }

.hero.earthquake\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/earthquake.jpg"); }

.hero.expected-annual-loss\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/expected-annual-loss.jpg"); }

.hero.frequently-asked-questions\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/frequently-asked-questions.jpg"); }

.hero.get-help\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/get-help.jpg"); }

.hero.hail\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/hail.jpg"); }

.hero.heat-wave\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/heat-wave.jpg"); }

.hero.historic-loss\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/historic-loss.jpg"); }

.hero.how-the-nri-can-help\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/how-the-nri-can-help.jpg"); }

.hero.hurricane\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/hurricane.jpg"); }

.hero.ice-storm\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/ice-storm.jpg"); }

.hero.landslide\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/landslide.jpg"); }

.hero.lightning\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/lightning.jpg"); }

.hero.literature-review\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/literature-review.jpg"); }

.hero.natural-hazard-exposure\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/natural-hazard-exposure.jpg"); }

.hero.natural-hazard-frequency\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/natural-hazard-frequency.jpg"); }

.hero.natural-hazards\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/natural-hazards.jpg"); }

.hero.next-steps-built\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/next-steps-built.jpg"); }

.hero.next-steps-community\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/next-steps-community.jpg"); }

.hero.next-steps-hazard-incidence\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/next-steps-hazard-incidence.jpg"); }

.hero.next-steps-hazard-risk\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/next-steps-hazard-risk.jpg"); }

.hero.next-steps-social\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/next-steps-social.jpg"); }

.hero.nri-contributors\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/nri-contributors.jpg"); }

.hero.riverine-flooding\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/riverine-flooding.jpg"); }

.hero.social-vulnerability\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/social-vulnerability.jpg"); }

.hero.strong-wind\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/strong-wind.jpg"); }

.hero.take-action-reduce-your-risk\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/take-action-reduce-your-risk.jpg"); }

.hero.take-action-understand-your-risk\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/take-action-understand-your-risk.jpg"); }

.hero.take-action-explore-resources\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/take-action-explore-resources.jpg"); }

.hero.take-action-leveraging-the-nri\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/take-action-leveraging-the-nri.jpg"); }

.hero.tornado\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/tornado.jpg"); }

.hero.tsunami\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/tsunami.jpg"); }

.hero.understanding-scores-ratings\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/understanding-scores-ratings.jpg"); }

.hero.user-guide\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/user-guide.jpg"); }

.hero.volcanic-activity\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/volcanic-activity.jpg"); }

.hero.wildfire\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/wildfire.jpg"); }

.hero.winter-weather\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.65) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/winter-weather.jpg"); }

.hero.working-group-collaboration\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/working-group-collaboration.jpg"); }

.hero.data-downloads\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.5) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/download-data.jpg"); }

.hero.disclaimer\.jpg {
  background-image: linear-gradient(180deg, black 0%, black 5%, rgba(0, 0, 0, 0.5) 20%, transparent 35%, rgba(237, 237, 237, 0.55) 50%, #ededed 100%), url("/Content/Images/HeroImagesClean/disclaimer.jpg"); }