@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);
*/
.download-popup--chrome {
  background-image: url(../images/splash/star-trek-online/dlp/spritesmith-sto-download-popup.png);
  background-position: 0px -568px;
  width: 393px;
  height: 97px;
  left: 20px;
  bottom: 25px;
}
.download-popup--firefox.download-popup--en {
  background-image: url(../images/splash/star-trek-online/dlp/spritesmith-sto-download-popup.png);
  background-position: 0px -284px;
  width: 609px;
  height: 127px;
}
.download-popup--firefox.download-popup--en > .popup-content--firefox {
  width: 85%;
  left: 10%;
}
.download-popup--firefox.download-popup--de {
  background-image: url(../images/splash/star-trek-online/dlp/spritesmith-sto-download-popup.png);
  background-position: 0px -142px;
  width: 649px;
  height: 127px;
}
.download-popup--firefox.download-popup--de > .popup-content--firefox {
  width: 90%;
  left: 6%;
}
.download-popup--firefox.download-popup--fr {
  background-image: url(../images/splash/star-trek-online/dlp/spritesmith-sto-download-popup.png);
  background-position: 0px 0px;
  width: 729px;
  height: 127px;
}
.download-popup--firefox.download-popup--fr > .popup-content--firefox {
  width: 86%;
  left: 6%;
}
.download-popup--ie {
  background-image: url(../images/splash/star-trek-online/dlp/spritesmith-sto-download-popup.png);
  background-position: 0px -426px;
  width: 331px;
  height: 127px;
}
@media screen and (max-width: 750px) {
  .download-popup--ie {
    right: auto;
    left: 10%;
    bottom: 100px;
  }
}
@media screen and (min-width: 751px) and (max-width: 1000px) {
  .download-popup--ie {
    bottom: 75px;
    right: 245px;
  }
}
@media screen and (min-width: 1001px) {
  .download-popup--ie {
    bottom: 10%;
    right: 30%;
  }
}
.download-popup--edge {
  background-image: url(../images/splash/star-trek-online/dlp/spritesmith-sto-download-popup.png);
  background-position: 0px -426px;
  width: 331px;
  height: 127px;
}
@media screen and (max-width: 750px) {
  .download-popup--edge {
    right: auto;
    left: 55px;
    bottom: 200px;
  }
}
@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: 41%;
  }
}
.popup-content {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.popup-content--firefox {
  display: flex;
  justify-content: space-between;
  top: 35%;
}
.popup-content--firefox__1,
.popup-content--firefox__2 {
  position: relative;
}
.popup-content--firefox__1:before,
.popup-content--firefox__2:before {
  position: absolute;
  font-size: 125%;
  left: -20px;
  top: -5px;
}
.popup-content--firefox__1 {
  width: 38%;
}
.popup-content--firefox__1:before {
  content: '1.';
}
.popup-content--firefox__2 {
  width: 55%;
}
.popup-content--firefox__2:before {
  content: '2.';
}
.popup-content--chrome {
  width: 65%;
  top: 30%;
  left: 20%;
}
.popup-content--ie,
.popup-content--edge {
  width: 60%;
  left: 10%;
  top: 33%;
}
.download-icon--firefox {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAARCAMAAAAxIdauAAAAG1BMVEVHcEwKhP8KhP8KhP8KhP8KhP8KhP8KhP8KhP8ayfuzAAAACHRSTlMAxA/UFcsF7VtnNvkAAABGSURBVAjXpc4xEoAwDANByXaM/v9i7JBhMjQUuW67AzoSW9KB0gDSHoVfBmpYK1yesFGUGgGgKS1MVgtFbpifid+oN350A8omAh0dgeYCAAAAAElFTkSuQmCC") no-repeat center center;
  height: 15px;
  width: 13px;
}