@keyframes popInBottom {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes popInTop {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
.download-popup {
  position: fixed;
  z-index: 9999;
  opacity: 0;
  cursor: pointer;
}
.download-popup.animation {
  animation-delay: 0.5s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}
.download-popup:not(.animation) {
  transition: opacity 0.5s linear;
  pointer-events: none;
}
.download-popup--ie.animation,
.download-popup--chrome.animation,
.download-popup--edge.animation {
  animation-name: popInBottom;
}
.download-popup--chrome {
  left: 0;
  bottom: 0;
}
.download-popup--firefox {
  top: 0;
  left: auto;
  right: 55px;
}
@media screen and (max-width: 750px) {
  .download-popup--firefox {
    left: 5px;
    right: auto;
  }
}
.download-popup--firefox.animation {
  animation-name: popInTop;
}
.download-popup--edge {
  bottom: 10%;
}
@media screen and (max-width: 750px) {
  .download-popup--edge {
    right: auto;
    left: 55px;
    bottom: 150px;
  }
}
@media screen and (min-width: 751px) and (max-width: 1000px) {
  .download-popup--edge {
    right: 400px;
  }
}
@media screen and (min-width: 1001px) {
  .download-popup--edge {
    right: 43%;
  }
}
.download-popup--ie {
  left: auto;
  bottom: 10%;
}
@media screen and (max-width: 630px) {
  .download-popup--ie {
    right: 15%;
  }
}
@media screen and (min-width: 631px) and (max-width: 1000px) {
  .download-popup--ie {
    right: 275px;
  }
}
@media screen and (min-width: 1001px) {
  .download-popup--ie {
    bottom: 6%;
    right: 32%;
  }
}
.popup-content {
  color: #000;
  position: absolute;
}
.download-icon--firefox {
  display: inline-block;
  margin: 0px 5px -1px 5px;
}
/*
LESS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: @icon-home-width;
}

The large array-like variables contain all information about a single icon
@icon-home: x y offset_x offset_y width height total_width total_height image_path name;

At the bottom of this section, we provide information about the spritesheet itself
@spritesheet: width height image @spritesheet-sprites;
*/
/*
The provided classes are intended to be used with the array-like variables

.icon-home {
  .sprite-width(@icon-home);
}
.icon-email {
  .sprite(@icon-email);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
/*
The `.sprites` mixin generates identical output to the CSS template
  but can be overridden inside of LESS

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

.sprites(@spritesheet-sprites);
*/
@font-face {
  font-family: 'savapro';
  src: url("../fonts/savapro-regular.woff") format("woff"), url("../fonts/savapro-regular.ttf") format("truetype"), url("../fonts/savapro-regular.svg") format("svg"), url("../fonts/savapro-regular.eot") format("eot");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'galdeano';
  src: url("../fonts/galdeano-regular.woff") format("woff"), url("../fonts/galdeano-regular.ttf") format("truetype"), url("../fonts/galdeano-regular.svg") format("svg"), url("../fonts/galdeano-regular.eot") format("eot");
  font-weight: normal;
  font-style: normal;
}
.font-savapro {
  font-family: savapro, "Arial Regular", sans-serif;
}
.font-galdeano {
  font-family: galdeano, "Arial Regular", sans-serif;
}
.download-popup--chrome {
  background-image: url(../images/splash/nw-2017Page/spritesmith-nw-download-popup.png);
  background-position: 0px -173px;
  width: 370px;
  height: 130px;
  left: -15px;
  bottom: -5px;
}
.download-popup--firefox {
  background-image: url(../images/splash/nw-2017Page/spritesmith-nw-download-popup.png);
  background-position: 0px 0px;
  width: 690px;
  height: 158px;
}
.download-popup--edge {
  background-image: url(../images/splash/nw-2017Page/spritesmith-nw-download-popup.png);
  background-position: 0px -318px;
  width: 344px;
  height: 130px;
}
.download-popup--ie {
  background-image: url(../images/splash/nw-2017Page/spritesmith-nw-download-popup.png);
  background-position: 0px -318px;
  width: 344px;
  height: 130px;
}
.popup-content {
  font-family: galdeano, "Arial Regular", sans-serif;
  font-weight: bold;
  font-size: 17px;
  line-height: 1.2;
  opacity: 0.85;
}
.popup-content--firefox {
  width: 70%;
  display: flex;
  justify-content: space-between;
  top: 48%;
  left: 10%;
}
.popup-content--firefox__1 {
  width: 38%;
}
.popup-content--firefox__2 {
  width: 53%;
}
.popup-content--chrome {
  width: 55%;
  top: 18%;
  left: 33%;
}
.popup-content--ie,
.popup-content--edge {
  width: 65%;
  left: 12%;
  top: 18%;
}
.popup-content__emphasis {
  color: #82020c;
}
.download-icon--firefox {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAARCAMAAAAxIdauAAAAG1BMVEVHcEwKhP8KhP8KhP8KhP8KhP8KhP8KhP8KhP8ayfuzAAAACHRSTlMAxA/UFcsF7VtnNvkAAABGSURBVAjXpc4xEoAwDANByXaM/v9i7JBhMjQUuW67AzoSW9KB0gDSHoVfBmpYK1yesFGUGgGgKS1MVgtFbpifid+oN350A8omAh0dgeYCAAAAAElFTkSuQmCC") no-repeat center center;
  height: 15px;
  width: 13px;
}
/* End Download Popup Styling */