@charset "UTF-8";

/* NAV GRAPHIC STYLES */
#outside {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  max-height: 1000px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*border: 2px solid white;*/
  z-index: 1;
}
#container {
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border: 8px solid white;*/
}
.layer-graphics {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.layer-graphic {
  position:absolute;
  height: 85%;
  opacity: 0;
}
.layer-graphic.active {
opacity: 1;
}
.links {
  position: absolute;
  width: 1113px;
  height: 938px;
  /* border-radius: 50%; */
  overflow: hidden;
}
.links.desktop {
 pointer-events: all;
}
.links.mobile {
  pointer-events: none;
}
.links a {
  position: absolute;
  /*border: 1px solid white;*/
}
.links a.work{
  top: 0;
  left: 50%;
  margin: 0 auto;
  transform: translateX(-50%);
  height: calc(100% / 2);
  width: 50%;
}
.links a.what{
  bottom: 0;
  right: 0;
  height: calc(100% / 2);
  width: 50%;
}
.links a.how{
  bottom: 0;
  left: 0;
  height: calc(100% / 2);
  width: 50%;
}
.links a:hover {
  cursor: pointer;
}
.links.mobile a {
  width: 100%;
  height: 100%;
  clip-path: none;
  /*background-color: rgba(255,0,0,0.05);*/
}
.type-container {
  z-index: 1;
}
h1 {
  color:#fff;
  font-size:90px;
  width:100%;
  text-align:center;
}
h2 {
  color: #fff;
  font-size: 48px;
}
.base-type {
  width: 100%;
  max-width: 885px;
  margin-top: 58px;
  opacity: 0;
  transition: opacity 0.5s;
}
.base-type.active {
  opacity: 1;
  transition: opacity 0.5s;
}
/*.base-type p {
  font: bold 49px/142% HurmeGeometric-SmBd;
  color: #fff;
  text-align: center;
}*/
.base-type h1,
.base-type h2 {
  font: bold 49px/142% HurmeGeometric-SmBd !important;
  color: #fff;
  text-align: center;
}
.labels,
.button-labels {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*border: 4px solid white;*/
}
.labels.active,
.button-labels.active {
  opacity: 1;
}
.label,
.button-label {
  position: absolute;
  font: 31px HurmeGeometric-SmBd;
  color: #fff;
  text-decoration: none;
  text-align: center;
  width: 160px;
  height: 48px;
  line-height: 48px;
  b/*o*/rder: 1px solid white;
}
.button-label {
  color: #3cbef6;
}
.label.work {
  top: 7.9%;
  left: 43.4%;
}
.label.what {
  bottom: 8.15%;
  right: 8.8%;
}
.label.how {
  bottom: 8.15%;
  left: 9.2%;
}
.button-label.work.active {
  top: 14.1%;
  opacity: 1;
  transition: all 0.3s;
}
.button-label.work {
  top: 15.1%;
  left: 43.4%;
  opacity: 0;
  /*transition: all 0.1s;*/
}
.button-label.what.active {
  bottom: 14.0%;
  opacity: 1;
  transition: all 0.3s;
}
.button-label.what {
  bottom: 13.4%;
  right: 8.8%;
  opacity: 0;
  /*transition: all 0.1s;*/
}
.button-label.how.active {
  bottom: 14.0%;
  opacity: 1;
  transition: all 0.3s;
}
.button-label.how {
  bottom: 13.4%;
  left: 9.2%;
  opacity: 0;
  /*transition: all 0.1s;*/
}
.backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.backgrounds img {
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 50% 0%;
}
.backgrounds video {
  display: block;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  /*transition: opacity 0.3s;*/
  transition: opacity 0.5s ease;
}
.backgrounds video.active {
  opacity: 1;
  transition: opacity 1.5s ease;
}
.backgrounds .overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: 5;
}
.type-overlays {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
/*.type-overlays h2 {
  font: 84px/120% HurmeGeometric-Rg;
  color: #fff;
  margin: 0 0 0 6px;
}*/
.type-overlays p {
  font: 84px/120% HurmeGeometric-Rg !important;
  color: #fff;
  margin: 0 0 0 6px;
}
/*.type-overlays h2.two {
  font: 46px/120% HurmeGeometric-SmBd;
  margin: 0 0 0 20%;
}*/
/*.type-overlays h2.three {
  margin: 0 0 0 20%;
}*/
.avoidwrap {
  display:inline-block;
}
.nowrap {
    white-space: nowrap;
  }
.type-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.type {
  position: absolute;
  width: auto;
  /* max-width: 100%; */
  /* max-height: 90%; */
  overflow: hidden;
}
.work.type,
.what.type,
.how.type {
  opacity: 0;
  transition: opacity 0.3s;
  text-align: center;
}
.work.type.active,
.what.type.active,
.how.type.active {
  opacity: 1;
}
.work.type {
  max-width: 900px;
}
.what.type {
/*  text-align: right;*/
max-width: 1028px;
}
.how.type {
  max-width: 1028px;
}
/*.work.type .one {
  margin-left: 0px;
}
.work.type .two {
  margin-left: 204px;
}
.what.type .one {
  margin-left: 172px;
}
.what.type .two {
  margin-left: 24px;
}
.how.type .one {
  margin-left: 0px;
}
.how.type .two {
  margin-left: 0px;
}*/
@media screen and (max-width: 900px) {
#container {
  display: block;
}
#outside {
  width: 120%;
}
.arrow {
  display: block;
}
.links.mobile {
  pointer-events: all;
}
.links.desktop {
  pointer-events: none;
}
.links.mobile a {
  pointer-events: none;
}
.links.mobile a.active {
  pointer-events: all;
}
.label, .button-label {
  /*font: 35px HurmeGeometric-SmBd;*/
}
.backgrounds video {
  height: 100%;
  width: 100%;
  display: none;
}
}
/* END NAV GRAPHIC STYLES */