/****************************************
  ==== GENERAL HERO STYLING
****************************************/

div.hero {
  padding: 100px 0 160px 0;
}
div.hero div.gw {
  z-index: 3; position: relative;
}

div.hero div.video {
  width: 100%; position: absolute; top: -74px; left: 0; bottom: 0; z-index: -1; overflow: hidden; background-color: #000000;
}
div.hero div.video div.video-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-color: rgba(0,0,0,0.3);
}

.touch div.hero div.video, .i18n-zh-hans div.hero div.video {
  display: none;
}
div.hero div.video iframe {
  max-width: none; width: 2000px; height: 1125px; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translate(-50%,-50%);
}
.touch div.hero-background, .i18n-zh-hans div.hero-background {
  width: 100%; position: absolute; top: -74px; left: 0; bottom: 0; z-index: -1; overflow: hidden; background-color: #000;
}
div.hero:before {
	background: 100% 100% no-repeat;
  background-size: cover;
  overflow: hidden;
  background-color: #000;
}

/****************************************
  ==== VR / AR MULTIPLATFORM PAGE
****************************************/

.vr-ar div.hero { padding: 160px 0 160px 0; }