#hero .hero-wrap-outer {
  background-image: url("https://g2.twimg.com/about/system/files/styles/hero_1600w_300h/public/about/education/hero/header_image_870.jpg");
  background-repeat: no-repeat;
  background-position: top center;
}

.hero-fade {
  background: #000000;
}

.hero-fade .hero-wrap-outer:before,
.hero-fade .hero-wrap-outer:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  display: block;
  background: -moz-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,1)));
  background: -webkit-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background: -o-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background: -ms-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background: linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );
}

.hero-fade .hero-wrap-outer:after {
  left: auto;
  right: 0;
  background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background: -webkit-gradient(linear, right top, left top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,1)));
  background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background: linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

  /* Retina to override above media query */
  #hero .hero-wrap-outer {
    background-image: url("https://g2.twimg.com/about/system/files/styles/hero_3200w_600h/public/about/education/hero/header_image_870.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1600px 300px;
  }

}

@media (max-width: 767px) {
  #hero .hero-wrap-outer {
    background-image: url("https://g2.twimg.com/about/system/files/styles/hero_800w_150h/public/about/education/hero/header_image_870.jpg");
    background-repeat: no-repeat;
    background-position: top center;
  }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 767px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 767px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 767px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 767px),
only screen and (                min-resolution: 192dpi) and (max-width: 767px),
only screen and (                min-resolution: 2dppx)  and (max-width: 767px) {

  /* Mobile retina to override above media query */
  #hero .hero-wrap-outer {
    background-image: url("https://g2.twimg.com/about/system/files/styles/hero_1600w_300h/public/about/education/hero/header_image_870.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 800px 150px;
  }

}
  #hero .hero-carousel .item.slideshow-0 {
    background-image: url();
  }