/** font mixins **/
.helvetica {
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
}

.helvetica400 {
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

.helvetica200 {
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: 200;
}

.helvetica100 {
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: 100;
}

html,
body,
#scene {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

html #header,
body #header,
#scene #header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100px;
  background: #FFF url(img/v-l-c-c-o-en@2x.png) no-repeat 50px center;
  background-size: 229px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

html #header::after,
body #header::after,
#scene #header::after {
  position: absolute;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  top: 50%;
  margin-top: -10px;
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #323232;
  content: "Virtual Reality";
}

html.touch #header,
body.touch #header,
#scene.touch #header {
  display: none;
}

html #ovlRequirements,
body #ovlRequirements,
#scene #ovlRequirements {
  width: 100%;
  height: 100%;
  background-color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
}

html #ovlRequirements h1,
body #ovlRequirements h1,
#scene #ovlRequirements h1 {
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 64px;
  color: #666;
  margin: 0;
}

html #ovlRequirements p,
body #ovlRequirements p,
#scene #ovlRequirements p {
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: 14px;
  color: #000;
}

html .btn,
body .btn,
#scene .btn {
  cursor: pointer;
  position: absolute;
  width: 64px;
  height: 64px;
  background: no-repeat center center;
  border-radius: 100%;
  transition: all 80ms;
  opacity: 0.8;
}

html .btn:hover,
body .btn:hover,
#scene .btn:hover {
  transform: scale(1.1);
  opacity: 1.0;
}

html #btnStereo,
body #btnStereo,
#scene #btnStereo {
  left: 50%;
  margin-left: -32px;
  bottom: 6px;
  background-image: url(img/buttons/cardboard-button@2x.png);
  background-size: 45px;
  display: none;
}

html.gyro #btnStereo,
body.gyro #btnStereo,
#scene.gyro #btnStereo {
  display: block;
}

html.stereo #btnStereo,
body.stereo #btnStereo,
#scene.stereo #btnStereo {
  background-image: url(img/buttons/exit-cardboard-button@2x.png);
  background-size: 50px;
}

html #btnBack,
body #btnBack,
#scene #btnBack {
  left: 10px;
  top: 110px;
  background-image: url(img/buttons/back-button@2x.png);
  background-size: 60%;
}

html.touch #btnBack,
body.touch #btnBack,
#scene.touch #btnBack {
  top: 10px;
}

html #btnHome,
body #btnHome,
#scene #btnHome {
  left: 10px;
  bottom: 10px;
  background-image: url(img/buttons/home-button@2x.png);
  background-size: 75%;
}

html.home #btnHome,
body.home #btnHome,
#scene.home #btnHome {
  display: none;
}

html.start #btnBack,
body.start #btnBack,
#scene.start #btnBack {
  display: none;
}

html.stereo #btnHome,
body.stereo #btnHome,
#scene.stereo #btnHome,
html.stereo #btnBack,
body.stereo #btnBack,
#scene.stereo #btnBack {
  display: none;
}

html.stereo::before,
body.stereo::before,
#scene.stereo::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(img/vignette.png) repeat-x;
  background-size: 50% 100%;
  opacity: 1.0;
  pointer-events: none;
}