@font-face {
  font-family: Pluto;
  font-weight: bold;
  src: url(./font/PlutoSansBold.woff);
}

@font-face {
  font-family: Pluto;
  src: url(./font/PlutoSansRegular.woff);
}

body {
  font-family: Pluto;
  height: 100%;
  overflow: hidden;
}

button {
  border: none;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.video-wrap {
  position: relative;
}

.loader {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: white;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  font-size: 3em;
}

.loader .logo {
  width: 400px;
}

.hotspots {
  max-width: 100%;
	width: 100vw;
  height: 100vh;
  position: absolute;
	top:0;
	left:0;
  z-index: 2;
}

.hotspot {
  width: 75px;
  height: 90px;
  background: url(images/hotspot.svg) no-repeat;
  background-size: contain;
  position: absolute;
  border-radius: 50%;
}

#hotspot-1 {
  top: 30%;
  left: 38%;
}

#hotspot-2 {
  top: 57%;
  left: 60%;
}

#hotspot-3 {
  top: 60%;
  left: 80%;
}

#hotspot-4 {
  top: 23%;
  left: 68%;
}

#hotspot-5 {
  top: 35%;
  left: 68%;
}

#mainVideo {
	position: absolute;
	max-width: 100%;
	width: 100vw;
	top:0;
	left:0;
  z-index: 1;
}

.back, .stop, .pause, .threesixty, .gallery-trigger, .video-trigger {
  width: 100px;
  height: 100px;
}

.buttons {
  position: absolute;
  top: 3%;
  left: 3%;
  display: flex;
  flex-direction: column;
}

.logo-white {
  width: 100px;
}

.back {
  background: url(images/back.svg) no-repeat;
}

.pause {
  background: url(images/pause.svg) no-repeat;
}

.resume {
  background: url(images/play.svg) no-repeat;
}

.threesixty {
  background: url(images/360.svg) no-repeat;
}

.stop {
  background: url(images/stop.svg) no-repeat;
}

.gallery-trigger {
  background: url(images/gallery.svg) no-repeat;
}

.video-trigger {
  background: url(images/video.svg) no-repeat;
}