.hero-wrapper {
  height: 634px;
  overflow: hidden;
  /* ff3.6+ */
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #4a4876), color-stop(100%, #5b8cc3));
  /* safari4+,chrome */
  background: -webkit-linear-gradient(45deg, #4a4876 0%, #5b8cc3 100%);
  /* safari5.1+,chrome10+ */
  /* opera 11.10+ */
  /* ie10+ */
  background: linear-gradient(45deg, #4a4876 0%, #5b8cc3 100%);
  /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4876', endColorstr='#5b8cc3',GradientType=1 );
  /* ie6-9 */
  padding: 50px 0 0 0;
}
@media only screen and (min-width: 1300px) {
  .hero-wrapper {
    height: 900px;
    padding: 63px 0 0 0
  } }

.hero {
  margin: 0 auto;
  width: 768px;
  position: relative; }
.hero h1 {
  margin: 12px 0;
  font-size: 32px;
  font-family: Lato, sans-serif;
  font-weight: normal; }
@media only screen and (min-width: 1300px) {
  .hero h1 {
    font-size: 40px; } }
.hero h2 {
  margin: 0;
  padding: 6px 0;
  font-size: 26px;
  font-family: Lato, sans-serif;
  font-weight: 300; }
@media only screen and (min-width: 1300px) {
  .hero h2 {
    font-size: 40px; } }
@media only screen and (min-width: 1300px) {
  .hero {
    width: 1200px; } }
.hero img {
  max-width: 100%; }
.hero .slide {
  width: 768px;
  color: #fff;
  text-align: center; }
@media only screen and (min-width: 1300px) {
  .hero .slide {
    width: 1200px; } }
.hero .slide-main-image {
  padding-top: 6px;
  margin: 0 auto; }
.hero #slide-1 .slide-main-image {
  position: relative; }
.hero #slide-1 .slide-1-cover {
  position: absolute;
  left: 28%;
  background: white;
  width: 140px;
  margin-top: 17px;
  height: 14px; }
@media only screen and (min-width: 1300px) {
  .hero #slide-1 .slide-1-cover {
    left: 29.6%;
    width: 200px;
    margin-top: -2px;
    height: 18px;
    background: white; } }
.hero #slide-2 .slide-main-image {
  margin-top: -80px; }
.hero #slide-3 .slide-main-image {
  margin-top: -20px; }
.hero #slide-4 .slide-main-image {
  margin-top: -10px; }
.hero #slide-5, .hero #slide-6, .hero #slide-7 {
  position: relative;
  height: 500px; }
@media only screen and (min-width: 1300px) {
  .hero #slide-5, .hero #slide-6, .hero #slide-7 {
    height: 700px; } }
.hero #slide-5 h1, .hero #slide-6 h1, .hero #slide-7 h1 {
  width: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  margin: 0;
  padding: 0;
  text-align: left; }
.hero #slide-5 .slide-main-image, .hero #slide-6 .slide-main-image, .hero #slide-7 .slide-main-image {
  padding-top: 0;
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%); }
.hero #slide-6 .slide-main-image {
  width: 40%; }
.hero #slide-5 h1, .hero #slide-6 h1, .hero #slide-7 h1 {
  font-size: 26px; }
@media only screen and (min-width: 1300px) {
  .hero #slide-5 h1, .hero #slide-6 h1, .hero #slide-7 h1 {
    font-size: 36px; } }
.hero #slide-8 h1 {
  font-weight: 300; }
.hero #slide-8 h1 strong {
  font-weight: normal; }
.hero #slide-8 .slide-main-image {
  margin-top: 80px; }
.hero #jmx-icon {
  position: absolute;
  left: 30%;
  top: 60%; }
.hero #jmx-icon img {
  width: 50%; }
@media only screen and (min-width: 1300px) {
  .hero #jmx-icon img {
    width: 100%; } }
.hero .logos {
  position: relative;
  height: 100%;
  width: 100%; }
.hero .logo {
  position: absolute;
  -webkit-transform: translate(50%, 50%);
  -ms-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
  width: 70px;
  height: 70px; }
@media only screen and (min-width: 1300px) {
  .hero .logo {
    width: 150px;
    height: 150px; } }
.hero #logo-1 {
  right: 20%;
  top: 38%; }
@media only screen and (min-width: 1300px) {
  .hero #logo-1 {
    top: 34%; } }
.hero #logo-2 {
  right: 20%;
  top: 14%; }
@media only screen and (min-width: 1300px) {
  .hero #logo-2 {
    top: 10%; } }
.hero #logo-3 {
  right: 5%;
  top: 40%; }
.hero #logo-4 {
  right: 13%;
  top: 57%; }
@media only screen and (min-width: 1300px) {
  .hero #logo-4 {
    top: 60%; } }
.hero #logo-5 {
  right: 31%;
  top: 54%; }
@media only screen and (min-width: 1300px) {
  .hero #logo-5 {
    top: 60%; } }
.hero #logo-6 {
  right: 36%;
  top: 41%; }
.hero #start-testing-button {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 510px;
  font-size: 14px;
  font-family: Lato, sans-serif;
  text-transform: uppercase;
  color: white;
  background: #dd4343;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  /*z-index: 1000; */

}

.hero #start-testing-button:hover {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 510px;
  font-size: 14px;
  font-family: Lato, sans-serif;
  text-transform: uppercase;
  color: white;
  background: #ff4343;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  /*z-index: 1000; */

}
@media only screen and (min-width: 1300px) {
  .hero #start-testing-button {
    top: 720px;
    font-size: 24px;
    padding: 14px 22px;

  }

  .hero #start-testing-button:hover {
    top: 720px;
    font-size: 24px;
    padding: 14px 22px;

  }
}

@media only screen and (max-width: 1440px) and (min-width: 1367px){

  .hero #start-testing-button{
    top: 685px;
  }

  .hero #start-testing-button:hover{
    top: 685px;
  }
}
.hero #play-again-button {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 350px;
  z-index: 1000; }
@media only screen and (min-width: 1300px) {
  .hero #play-again-button {
    top: 500px; } }
.hero #play-again-button img {
  width: 80%;
  display: block;
  margin: 0 auto; }
@media only screen and (min-width: 1300px) {
  .hero #play-again-button img {
    width: 100%; } }