/* ----------- Laptops ----------- */
/* ----------- Non-Retina Screens ----------- */
@media screen and (min-width: 0px) and (max-width: 640px) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 400%;
    background-position: left -775px top 60px;
  }

  @keyframes backP {
    from, 0% {
      background-position: left -775px top 85px;
    }

    to, 100% {
      background-position: left -775px top 60px;
    }
  }
}
@media screen and (min-width: 641px) and (max-width: 799px) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 260%;
    background-position: left -900px top 50px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -900px top 75px;
    }

    to, 100% {
      background-position: left -900px top 50px;
    }
  }
}
@media screen and (min-width: 800px) and (max-width: 1023px) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 200%;
    background-position: left -800px top -50px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -800px top -25px;
    }

    to, 100% {
      background-position: left -800px top -50px;
    }
  }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 140%;
    background-position: left -250px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -250px top 25px;
    }

    to, 100% {
      background-position: left -250px top 0px;
    }
  }
}
@media screen and (min-width: 1280px) and (max-width: 1919px) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 120%;
    background-position: left -230px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -230px top 25px;
    }

    to, 100% {
      background-position: left -230px top 0px;
    }
  }
}
@media screen and (min-width: 1920px) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* ----------- Retina Screens ----------- */
@media screen and (device-width: 1200px) and (device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
  body {
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}

/* ----------- iPhone 4 and 4S ----------- */
/* Portrait */
@media only screen and (device-width: 320px) and (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 300%;
    background-position: left -1700px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -1700px top 25px;
    }

    to, 100% {
      background-position: left -1700px top 0px;
    }
  }
}
/* Landscape */
@media only screen and (device-height: 320px) and (device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 120%;
    background-position: left 0px top 0px;
  }
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait */
@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 320%;
    background-position: left -1700px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -1700px top 25px;
    }

    to, 100% {
      background-position: left -1700px top 0px;
    }
  }
}
/* Landscape */
@media only screen and (device-height: 320px) and (device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 110%;
    background-position: left 0px top 0px;
  }
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait */
@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 320%;
    background-position: left -1700px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -1700px top 25px;
    }

    to, 100% {
      background-position: left -1700px top 0px;
    }
  }
}
/* Landscape */
@media only screen and (device-height: 375px) and (device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 110%;
    background-position: left 0px top 0px;
  }
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait */
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  body {
    background-size: 320%;
    background-position: left -1700px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -1700px top 25px;
    }

    to, 100% {
      background-position: left -1700px top 0px;
    }
  }
}
/* Landscape */
@media only screen and (device-height: 414px) and (device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 110%;
    background-position: left 0px top 0px;
  }
}
/* ----------- iPhone X ----------- */
/* Portrait */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 400%;
    background-position: left -2100px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -2100px top 25px;
    }

    to, 100% {
      background-position: left -2100px top 0px;
    }
  }
}
/* Landscape */
@media only screen and (device-height: 375px) and (device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 250%;
    background-position: left -1200px top -650px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -1200px top 25px;
    }

    to, 100% {
      background-position: left -1200px top 0px;
    }
  }
}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */
/* Portrait */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 350%;
    background-position: left -2000px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -2000px top 25px;
    }

    to, 100% {
      background-position: left -2000px top 0px;
    }
  }
}
/* Landscape */
@media screen and (device-height: 320px) and (device-width: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 110%;
    background-position: left 0px top 0px;
  }
}
/* ----------- Galaxy Note 2 ----------- */
/* Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 350%;
    background-position: left -2000px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -2000px top 25px;
    }

    to, 100% {
      background-position: left -2000px top 0px;
    }
  }
}
/* Landscape */
@media screen and (device-height: 360px) and (device-width: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 110%;
    background-position: left 0px top 0px;
  }
}

/* ----------- Google Pixel 2 ----------- */
/* Portrait */
@media screen and (device-width: 411px) and (device-height: 731px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 350%;
    background-position: left -2000px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -2000px top 25px;
    }

    to, 100% {
      background-position: left -2000px top 0px;
    }
  }
}
/* Landscape */
@media screen and (device-height: 411px) and (device-width: 731px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 110%;
    background-position: left 0px top 0px;
  }
}
/* ----------- Google Pixel 2 XL ----------- */
/* Portrait */
@media screen and (device-width: 411px) and (device-height: 823px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 370%;
    background-position: left -2000px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -2000px top 25px;
    }

    to, 100% {
      background-position: left -2000px top 0px;
    }
  }
}
/* Landscape */
@media screen and (device-height: 411px) and (device-width: 823px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}

/* ----------- HTC One ----------- */
/* Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 350%;
    background-position: left -2000px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -2000px top 25px;
    }

    to, 100% {
      background-position: left -2000px top 0px;
    }
  }
}
/* Landscape */
@media screen and (device-height: 360px) and (device-width: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 110%;
    background-position: left 0px top 0px;
  }
}

/* ----------- iPad Pro 10.5" ----------- */
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (device-width: 834px) and (device-height: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* ----------- iPad Pro 12.9" ----------- */
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 250%;
    background-position: left -1360px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -1360px top 25px;
    }

    to, 100% {
      background-position: left -1360px top 0px;
    }
  }
}
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 140%;
    background-position: left -250px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -250px top 25px;
    }

    to, 100% {
      background-position: left -250px top 0px;
    }
  }
}


/*****************************************************************************************************************************************
 *****************************************************************************************************************************************
 DEVICES NOT YET CATERED TO
 *****************************************************************************************************************************************
 *****************************************************************************************************************************************/
/* ----------- Galaxy S3 ----------- */
/* Portrait */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media screen and (device-height: 320px) and (device-width: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* ----------- Galaxy S6 ----------- */
/* Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media screen and (device-height: 360px) and (device-width: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 110%;
    background-position: left 0px top 0px;
  }
}

/* ----------- Google Pixel ----------- */
/* Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media screen and (device-height: 360px) and (device-width: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* ----------- Google Pixel XL ----------- */
/* Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
  body {
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media screen and (device-height: 360px) and (device-width: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}

/* ----------- Windows Phone ----------- */
/* Portrait */
@media screen and (device-width: 480px) and (device-height: 800px) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media screen and (device-height: 480px) and (device-width: 800px) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}

/* ----------- iPad 1, 2, Mini and Air ----------- */
/* Portrait */
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media only screen and (device-height: 768px) and (device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait */
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 250%;
    background-position: left -1300px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -1300px top 25px;
    }

    to, 100% {
      background-position: left -1300px top 0px;
    }
  }
}
/* Landscape */
@media only screen and (device-height: 768px) and (device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 140%;
    background-position: left -150px top 0px;
  }
  @keyframes backP {
    from, 0% {
      background-position: left -150px top 25px;
    }

    to, 100% {
      background-position: left -150px top 0px;
    }
  }
}

/* ----------- Galaxy Tab 2 ----------- */
/* Portrait */
@media (device-width: 800px) and (device-height: 1280px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media (device-width: 1280px) and (device-height: 800px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* ----------- Galaxy Tab S ----------- */
/* Portrait */
@media (device-width: 800px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.9) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media (device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.9) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}

/* ----------- Nexus 7 ----------- */
/* Portrait */
@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media screen and (device-height: 601px) and (device-width: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* ----------- Nexus 9 ----------- */
/* Portrait */
@media screen and (device-width: 1536px) and (device-height: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media screen and (device-height: 1536px) and (device-width: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}

/* ----------- Kindle Fire HD 7" ----------- */
/* Portrait */
@media only screen and (device-width: 800px) and (device-height: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media only screen and (device-height: 800px) and (device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* ----------- Kindle Fire HD 8.9" ----------- */
/* Portrait */
@media only screen and (device-width: 1200px) and (device-height: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}
/* Landscape */
@media only screen and (device-height: 1200px) and (device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {
  body {
    background: url(../../Images/HD-HeroImage.jpg);
    background-size: 100%;
    background-position: left 0px top 0px;
  }
}