* {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  color: #ffffff;
  overscroll-behavior: none;
  height: 100%;
  /* cursor:url(../img/cursor-new.png) 38 27, auto; */
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  padding: 0 100px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo img {
  width: 70px;
  display: block;
}

header .menu-wrapper {
  cursor: pointer;
  display: flex;
  /* cursor:url(../img/cursor-selected.png) 38 27, auto; */
  cursor: pointer;
}

header .menu-wrapper > span {
  font-weight: bold;
  text-transform: uppercase;
  /* font-family: Montserrat-Bold; */
  font-size: 14px;
  letter-spacing: 3px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

header .menu-wrapper .burger {
  width: 26px;
  height: 18px;
  margin-left: 10px;
}

header .menu-wrapper .burger span {
  display: block;
  margin-bottom: 3px;
  width: 26px;
  height: 3px;
  background-color: #e6007e;
}

header .main-logo {
  /* cursor:url(../img/cursor-selected.png) 38 27, auto; */
  cursor: pointer;
}

.percentage {
  margin-top: 62px;
  width: 100%;
  text-align: center;
}

.harriet {
  opacity: 0;
}

#video {
  width: 100%;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.check-orientation {
  display: none;
}

.wrapper {
  width: 100%;
  height: 100%;
  padding: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  /* overflow: auto hidden;
    touch-action: pan-y; */
  /* user-select: none; */
  transition: transform 0.5s ease-out;
  position: relative;
  /* overflow:hidden; */
}

.wrapper.enter-tree {
  transform: scale(2.5);
}

.wrapper .main-img,
.tree-house > img {
  display: block;
  height: 100%;
}

.tree-house > img {
  /* max-height: 100%;
    max-width: 100%; */
  display: block;
  position: absolute;
  top: 0;
}

.tree-house .tree-container {
  position: absolute;
  top: 0;
}

body.tree-overlay {
  overflow: hidden;
}

.tree-house .details .header .close span {
  display: block;
  position: absolute;
  width: 3px;
  height: 17px;
  top: calc(50% - 8.5px);
  left: calc(50% - 1.5px);
  background: #d72280;
}

.tree-house .details .header .close span:first-of-type {
  transform: rotate(45deg);
}

.tree-house .details .header .close span:nth-of-type(2) {
  transform: rotate(-45deg);
}

.tree-house .details.ppc .header .close span {
  background: #951b81;
}

.tree-house .details.social .header .close span {
  background: #ff8f00;
}

.tree-house .details.creative .header .close span {
  background: #cdd04d;
}

.tree-house .details.experiential .header .close span {
  background: #6f58a7;
}

.tree-house .details.tech .header .close span {
  background: #19a1af;
}

.wrapper h1 {
  font-size: 50px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
  z-index: 2;
}

.touch-point {
  position: absolute;
  top: 60%;
  left: 50%;
  z-index: 3;
  /* cursor:url(../img/cursor-selected.png) 38 27, auto; */
  cursor: pointer;
}

.touch-point > span {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  border: 1px solid #d72280;
  background-color: #ff0c8a;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation: scalePulse 0.7s linear infinite;
  /* cursor:url(../img/cursor-selected.png) 38 27, auto; */
  cursor: pointer;
  background-image: url(../img/plus@3x.png);
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: 0.5px 1.25px;
}

.touch-point.social > span {
  background-color: #ff8f00;
  border: 1px solid #ff8f00;
  animation: scalePulseSocial 0.7s linear infinite;
}

.touch-point.creative > span {
  background-color: #cdd04d;
  border: 1px solid #cdd04d;
  animation: scalePulseCreative 0.7s linear infinite;
}

.touch-point.experiential > span {
  background-color: #6f58a7;
  border: 1px solid #6f58a7;
  animation: scalePulseExperiential 0.7s linear infinite;
}

.touch-point.ppc > span {
  background-color: #951b81;
  border: 1px solid #951b81;
  animation: scalePulsePPC 0.7s linear infinite;
}

.touch-point.tech > span {
  background-color: #19a1af;
  border: 1px solid #19a1af;
  animation: scalePulseTech 0.7s linear infinite;
}

.touch-point.back > span {
  width: 20px;
  height: 20px;
  background-image: url(../img/back-arrow-tree@3x.png);
  background-size: 13px;
  background-position: 3px 4px;
}

.touch-point:hover > span {
  transform: scale(1.5, 1.5);
}

.touch-point .title {
  font-weight: bold;
  font-size: 19.2px;
  letter-spacing: 0.6px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
  margin-top: -54px;
  margin-left: -59px;
  padding-left: 104px;
  /* cursor:url(../img/cursor-selected.png) 38 27, auto; */
  cursor: pointer;
  height: 93px;
  display: table;
}

.touch-point .title.left {
  margin-left: -205px;
}

.touch-point .title span {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

@keyframes scalePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(215, 34, 128, 0.5),
      0 0 0 7px rgba(215, 34, 128, 0.5), 0 0 0 14px rgba(215, 34, 128, 0.5),
      0 0 0 21px rgba(215, 34, 128, 0.5);
  }
  100% {
    box-shadow: 0 0 0 7px rgba(215, 34, 128, 0.5),
      0 0 0 14px rgba(215, 34, 128, 0.5), 0 0 0 21px rgba(215, 34, 128, 0.5),
      0 0 0 28px rgba(215, 34, 128, 0);
  }
}

@keyframes scalePulseSocial {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 143, 0, 0.5), 0 0 0 7px rgba(255, 143, 0, 0.5),
      0 0 0 14px rgba(255, 143, 0, 0.5), 0 0 0 21px rgba(255, 143, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 0 7px rgba(255, 143, 0, 0.5),
      0 0 0 14px rgba(255, 143, 0, 0.5), 0 0 0 21px rgba(255, 143, 0, 0.5),
      0 0 0 28px rgba(255, 143, 0, 0);
  }
}

@keyframes scalePulseCreative {
  0% {
    box-shadow: 0 0 0 0 rgba(205, 208, 77, 0.5),
      0 0 0 7px rgba(205, 208, 77, 0.5), 0 0 0 14px rgba(205, 208, 77, 0.5),
      0 0 0 21px rgba(205, 208, 77, 0.5);
  }
  100% {
    box-shadow: 0 0 0 7px rgba(205, 208, 77, 0.5),
      0 0 0 14px rgba(205, 208, 77, 0.5), 0 0 0 21px rgba(205, 208, 77, 0.5),
      0 0 0 28px rgba(205, 208, 77, 0);
  }
}

@keyframes scalePulseExperiential {
  0% {
    box-shadow: 0 0 0 0 rgba(111, 88, 167, 0.5),
      0 0 0 7px rgba(111, 88, 167, 0.5), 0 0 0 14px rgba(111, 88, 167, 0.5),
      0 0 0 21px rgba(111, 88, 167, 0.5);
  }
  100% {
    box-shadow: 0 0 0 7px rgba(111, 88, 167, 0.5),
      0 0 0 14px rgba(111, 88, 167, 0.5), 0 0 0 21px rgba(111, 88, 167, 0.5),
      0 0 0 28px rgba(111, 88, 167, 0);
  }
}

@keyframes scalePulsePPC {
  0% {
    box-shadow: 0 0 0 0 rgba(149, 27, 129, 0.5),
      0 0 0 7px rgba(149, 27, 129, 0.5), 0 0 0 14px rgba(149, 27, 129, 0.5),
      0 0 0 21px rgba(149, 27, 129, 0.5);
  }
  100% {
    box-shadow: 0 0 0 7px rgba(149, 27, 129, 0.5),
      0 0 0 14px rgba(149, 27, 129, 0.5), 0 0 0 21px rgba(149, 27, 129, 0.5),
      0 0 0 28px rgba(149, 27, 129, 0);
  }
}

@keyframes scalePulseTech {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 161, 175, 0.5),
      0 0 0 7px rgba(25, 161, 175, 0.5), 0 0 0 14px rgba(25, 161, 175, 0.5),
      0 0 0 21px rgba(25, 161, 175, 0.5);
  }
  100% {
    box-shadow: 0 0 0 7px rgba(25, 161, 175, 0.5),
      0 0 0 14px rgba(25, 161, 175, 0.5), 0 0 0 21px rgba(25, 161, 175, 0.5),
      0 0 0 28px rgba(25, 161, 175, 0);
  }
}

.position-elm {
  position: absolute;
}

.kite {
  will-change: transform, opacity;
  animation: subtleUpDown 55s linear infinite;
}

@keyframes subtleUpDown {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(50px);
  }
  66% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

.nav-wrapper {
  position: absolute;
  bottom: 40px;
  width: calc(100% - 100px);
  z-index: 901;
  left: 50px;
}

.nav-wrapper nav {
  position: relative;
  width: 870px;
  height: 20px;
  margin: 0 auto;
}

.nav-wrapper nav .line {
  position: relative;
  display: inline-block;
  width: 185px;
  height: 3px;
  background-color: transparent;
  margin-right: 60px;
  overflow: hidden;
}

.nav-wrapper nav .line:last-child {
  margin-right: 0;
}

.nav-wrapper nav .line .marker {
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
}

.nav-wrapper nav .line .active-line {
  width: 100px;
  height: 3px;
  background-color: #ffffff;
  position: absolute;
  left: 0;
  top: 0px;
}

.nav-wrapper nav .circle {
  position: absolute;
  top: 9px;
  width: 8.5px;
  height: 8.5px;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.5s ease;
}

.nav-wrapper nav .circle.active {
  width: 24px;
  height: 24px;
  background-color: transparent;
  opacity: 1;
  border: 2px solid #ffffff;
}

.nav-wrapper nav .circle.one {
  left: -21px;
}

.nav-wrapper nav .circle.two {
  left: 215px;
}

.nav-wrapper nav .circle.three {
  left: 468px;
}

.nav-wrapper nav .circle.four {
  left: 721px;
}

.nav-wrapper nav .circle.active {
  top: 1px;
}

.nav-wrapper nav .circle.one.active {
  left: -35px;
}

.nav-wrapper nav .circle.two.active {
  left: 208px;
}

.nav-wrapper nav .circle.three.active {
  left: 462px;
}

.nav-wrapper nav .circle.four.active {
  left: 715px;
}

.nav-wrapper nav .scroll-to-explore {
  width: 138px;
  position: absolute;
  top: -83px;
  left: calc(50% - 77.5px);
}

.tree-trigger {
  /* cursor:url(../img/cursor-selected.png) 38 27, auto; */
  cursor: pointer;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.globe {
  animation: rotating 28s linear infinite;
}

@keyframes smallSubtleUpDown {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(0, 10px);
  }
  66% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.globe-rock {
  animation: smallSubtleUpDown 15s linear infinite;
}

.main-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 9000;
}

.main-menu ul.main {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.main-menu ul.main li {
  margin-bottom: 40px;
  opacity: 0;
}

.main-menu ul.main.animated li {
  animation-name: fadeInUp;
  animation-duration: 1.5s;
  animation-fill-mode: both;
}

.main-menu ul.main li:nth-child(1) {
  animation-delay: 0.25s;
}
.main-menu ul.main li:nth-child(2) {
  animation-delay: 0.5s;
}
.main-menu ul.main li:nth-child(3) {
  animation-delay: 0.75s;
}
.main-menu ul.main li:nth-child(4) {
  animation-delay: 1s;
}
.main-menu ul.main li:nth-child(5) {
  animation-delay: 1.25s;
}
.main-menu ul.main li:nth-child(6) {
  animation-delay: 1.5s;
}
.main-menu ul.main li:nth-child(7) {
  animation-delay: 1.75s;
}
.main-menu ul.main li:nth-child(8) {
  animation-delay: 2s;
}

.main-menu ul.main li:last-child {
  margin-bottom: 0;
}

.main-menu ul.main li a {
  font-size: 36px;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.5s linear;
}

.main-menu ul.main li a:hover {
  color: #d72280;
}

.main-menu .close {
  position: absolute;
  right: 136px;
  top: 44px;
  cursor: pointer;
}

.main-menu .close img {
  width: 39px;
  height: 39px;
}

.bottom-menu {
  display: table;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100px);
  transition: transform 1.5s ease, background-color 1.5s ease;
  transition-delay: 2s;
  padding-left: 10%;

  /* .right{
        svg path{
            fill: #fff;
        }
    } */
}

.bottom-menu.animated {
  transform: translateY(0);
}

.bottom-menu .left {
  display: table-cell;
  width: 50%;
  height: 100%;
  vertical-align: middle;
}

.bottom-menu .left ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: table;
}

.bottom-menu .left ul li {
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

.bottom-menu .left ul li a {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 3.6px;
  text-decoration: none;
  margin-right: 74px;
  transition: color 0.5s linear;
  font-size: 17px;
}

.bottom-menu .right ul li.email a {
  transition: color 0.5s linear;
}

.bottom-menu .left ul li:after {
  content: "";
  position: absolute;
  top: 18px;
  right: 39px;
  width: 6px;
  height: 6px;
  background-color: #d72280;
  border-radius: 50%;
}

.bottom-menu .left ul li a:hover,
.bottom-menu .right ul li.email a:hover {
  color: #d72280;
}

.bottom-menu .left ul li > div {
  width: 6px;
  height: 6px;
  background-color: #d72280;
  border-radius: 50%;
}

.bottom-menu .left ul li:last-child:after,
.bottom-menu .left ul li:first-child:after {
  display: none;
}

.bottom-menu .left ul li:nth-child(2) {
  padding-left: 35px;
}

.bottom-menu .right {
  display: table-cell;
  width: 50%;
  height: 100%;
  vertical-align: middle;
  text-align: right;
  padding-left: 10%;
}

.bottom-menu .right ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 33px;
  display: flex;
  justify-content: space-evenly;
}

.bottom-menu .right ul li {
  position: relative;
  display: inline-block;
  height: 33px;
}

.bottom-menu .right ul li.spacer span {
  display: inline-block;
  height: 33px;
  width: 1px;
  background-color: #ffffff;
}

.bottom-menu .right ul li.email a {
  color: #ffffff;
  text-decoration: none;
  font-size: 19.2px;
  letter-spacing: 1.2px;
}
.table {
  display: table;
  width: 100%;
  height: 100%;
}

.cell {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

@keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.slide-menu {
  position: fixed;
  right: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 902;
  transition: right 1s ease;
}

.slide-menu.animated {
  right: 0;
}

.slide-menu .inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  border-left: 2px solid #ffffff;
  vertical-align: middle;
}

.slide-menu .inner img.close {
  position: absolute;
  top: calc(50% - 19.5px);
  width: 39px;
  cursor: pointer;
}

.slide-menu .content {
  position: absolute;
  width: 80%;
  height: 76%;
  left: 10%;
  top: 15%;
  overflow: auto;
  opacity: 0;
  max-width: 760px;
  padding-right: 20px;
}

.slide-menu.animated .content {
  animation-delay: 1s;
  animation-name: fadeInUp;
  animation-duration: 1.5s;
  animation-fill-mode: both;
}

.slide-menu .inner img.logos {
  max-width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
}

address p {
  margin: 0;
  font-style: initial;
}

.pink-text {
  color: #e70077;
}

.slide-menu a {
  text-decoration: none;
  color: #ffffff;
}

.slide-menu .social-icons {
  display: table;
  margin-bottom: 31px;
  margin-top: 24px;
}

.slide-menu .social-icons a {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  padding-right: 40px;
}

.fill {
  transition: fill 0.7s ease;
}
.fill:hover {
  fill: #e70077;
}

#info-button svg .fill {
  transition: fill 0.7s ease;
}
#info-button:hover svg .fill {
  fill: #e70077;
}

h3 {
  text-transform: uppercase;
  font-size: 22px;
  color: #f9f9f9;
  letter-spacing: 1px;
  margin-bottom: 60px;
}

h4 {
  font-size: 16px;
  color: #e70077;
  letter-spacing: 0.4px;
  line-height: 23px;
}

p {
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0.4px;
  line-height: 23px;
}

.btn {
  display: inline-block;
  font-size: 16px;
  color: #feffff;
  background: #d72280;
  color: #ffffff;
  letter-spacing: 0.4px;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 25px;
  border-radius: 20px;
  margin-top: 20px;
}

.tree-house {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1000;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}

/* .tree-house img {
    object-fit: cover;
    width: 100%;
    height: 100%;
} */

.tree-house img.man,
.tree-house img.owl,
.tree-house img.books,
.tree-house img.drone,
.tree-house img.chess,
.tree-house img.vr {
  display: none;
}

.tree-house .trigger {
  z-index: 101;
  cursor: default;
}

.tree-house .trigger span,
.tree-house .trigger .title {
  cursor: pointer;
}

.tree-house .trigger.owl {
  left: 26%;
  top: 27%;
}

.tree-house .trigger.back {
  left: 15%;
  top: 44%;
}

.tree-house .trigger.social {
  left: 53%;
  top: 61%;
}

.tree-house .trigger.vr {
  left: 46%;
  top: 86%;
}

.tree-house .trigger.ppc {
  left: 22%;
  top: 75%;
}

.tree-house .trigger.tech {
  left: 73%;
  top: 20%;
}

.tree-house .trigger.chess {
  left: 76%;
  top: 73%;
}

.tree-house .trigger.plant {
  left: 76%;
  top: 73%;
}

.tree-house .details {
  position: absolute;
  top: 0;
  left: 0;
  width: 397px;
  z-index: 102;
  pointer-events: none;
}

.tree-house .details .header {
  position: relative;
  width: 397px;
  height: 85px;
  background-color: #d72280;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform: translateY(50px);
}

.tree-house .details.animate {
  pointer-events: all;
}

.tree-house .details.animate .header {
  opacity: 1;
  transform: translateY(0px);
  transition: all 1s ease-in-out 0s;
}

.tree-house .details.social .header {
  background-color: #ff8f00;
}

.tree-house .details.creative .header {
  background-color: #cdd04d;
}

.tree-house .details.experiential .header {
  background-color: #6f58a7;
}

.tree-house .details.tech .header {
  background-color: #19a1af;
}

.tree-house .details.ppc .header {
  background-color: #951b81;
}

.tree-house .details .copy {
  margin-top: 30px;
  padding-left: 23px;
  transition: all 0.3s ease-in-out 0s;
  opacity: 0;
  transform: translateY(50px);
}

.tree-house .details.animate .copy {
  opacity: 1;
  transform: translateY(0px);
  transition: all 1s ease-in-out 0.7s;
}

.tree-house .details .copy p {
  letter-spacing: 0.4px;
  line-height: 23px;
}

.tree-house .details .copy p:first-of-type {
  margin-top: 0;
}

.tree-house .details .copy p:last-of-type {
  margin-bottom: 30px;
}

.tree-house .details .header h4 {
  position: absolute;
  top: 30px;
  left: 23px;
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  text-transform: uppercase;
}

.tree-house .details .btn {
  margin-top: 20px;
}

.tree-house .details .copy {
  max-height: 409px;
  overflow: auto;
  /* overflow-x: hidden; */
  width: 374px;
}

.tree-house .details .header .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 85px;
  height: 85px;
  background-color: #ffffff;
  cursor: pointer;
}

.tree-house .details .header .close img {
  position: absolute;
  top: 33px;
  left: 35px;
  width: 15px;
  height: 15px;
}

.tree-house .single-drone {
  position: absolute;
  z-index: 100;
  right: 16%;
  top: 7%;
  width: 321px;
  height: auto;
  animation: smallSubtleUpDown 15s ease-in-out infinite;
}

@keyframes smallSubtleUpDown {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(25px);
  }
  66% {
    transform: translateY(-25px);
  }
  100% {
    transform: translateY(0);
  }
}

.arrow-point {
  color: #ffffff;
  display: block;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}

.arrow-point:before {
  content: "";
  position: absolute;
  width: 17px;
  height: 11px;
  left: 0;
  top: 5px;
  background-image: url(../img/arrow.png);
  background-size: contain;
}

/* .mCSB_container {
  height: auto;
  min-height: 750px;
} */

body.case-study header {
  background-color: #000000;
}

body.case-study header ~ section.cs-top-section {
  margin-top: 100px;
}

.cs-top-section {
  background-color: #000000;
}

.sway {
  animation: sway 4s linear infinite;
}

@keyframes sway {
  0% {
    transform: skewX(0);
    filter: brightness(100%);
  }
  25% {
    transform: skewX(1.5deg);
  }
  50% {
    transform: skewX(0deg);
    filter: brightness(65%);
  }
  75% {
    transform: skewX(-1.5deg);
  }
  100% {
    transform: skewX(0deg);
    filter: brightness(100%);
  }
}

body.overlay #footer #info-popup .bottom-menu .right svg path {
  fill: #000;
}

body.overlay #footer #info-popup .bottom-menu .left ul li a {
  color: #000;
}

body.overlay #footer #info-popup .bottom-menu .right ul li.spacer span {
  background-color: #000;
}

body.overlay #footer #info-popup .bottom-menu .right ul li.email a {
  color: #000;
}

body.info-open .wrapper {
  overflow: hidden;
}

body.info-open #footer #info-popup {
  height: 15%;
}

.footer {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  height: 92px;
  padding: 0 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 901;
}

.footer .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 902;
}

.footer .audio {
  z-index: 902;
}

.footer .info,
.footer .info span {
  /* cursor:url(../img/cursor-selected.png) 38 27, auto; */
  cursor: pointer;
}

.footer .info img {
  width: 20px;
}

.footer .info span {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 2px;
  margin-left: 10px;
}

.footer .audio img {
  width: 22px;
  /* cursor:url(../img/cursor-selected.png) 38 27, auto; */
  cursor: pointer;
}

.footer-popup {
  position: fixed;
  bottom: -100px;
  left: 0;
  height: 100px;
  width: 100%;
  padding: 0 100px;
  background-color: #000;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: bottom 0.4s ease;
}

body.info-open .footer-popup {
  bottom: 0;
}

.footer-popup .footer-info-close {
  width: 25px;
  display: block;
  /* cursor:url(../img/cursor-selected.png) 38 27, auto; */
  cursor: pointer;
}

.footer-popup .left {
  display: flex;
  align-items: center;
}

.footer-popup .left ul {
  list-style-type: none;
  display: flex;
}

.footer-popup .left ul li {
  position: relative;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
  margin-left: 60px;
}

.footer-popup .left ul li:first-of-type {
  margin-left: 0;
}

.footer-popup .left ul li a {
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 2px;
  /* cursor:url(../img/cursor-selected.png) 38 27, auto; */
  cursor: pointer;
}

.footer-popup .left ul li a:hover {
  color: #d72280;
}

.footer-popup .left ul li:after {
  content: "";
  position: absolute;
  top: 3px;
  right: -35px;
  width: 10px;
  height: 10px;
  background-color: #d72280;
  border-radius: 50%;
}

.footer-popup .left ul li:last-of-type:after {
  display: none;
}

.footer-popup .right ul {
  padding-left: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-popup .right ul li {
  margin-right: 35px;
}

.footer-popup .right ul li a {
  /* cursor:url(../img/cursor-selected.png) 38 27, auto; */
  cursor: pointer;
}

.footer-popup .right ul li:last-of-type {
  margin-right: 0;
  margin-left: 35px;
  position: relative;
}

.footer-popup .right ul li:last-of-type a {
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 7px;
  display: block;
}

.copyright {
  font-size: 9px;
  display: block;
  text-align: right;
}

.footer-popup .right ul li:last-of-type a:hover {
  color: #d72280;
}

.footer-popup .right ul li:last-of-type:before {
  content: "";
  position: absolute;
  top: 0;
  left: -35px;
  width: 1px;
  height: 100%;
  background-color: #ffffff;
}

.gradient {
  position: absolute;
  width: 100%;
  height: 111px;
  transform: rotate(-180deg);
  background-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.45) 100%
  );
  z-index: 900;
  bottom: 0;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 90000;
  background-color: #000000;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  display: none;
}

/* body.show-video .loading {
    display: flex;
} */

.loading .logo {
  position: absolute;
}

.loading .logo img {
  width: 232px;
  opacity: 0;
}

.loading .logo.fade img {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.loader {
  /* max-width: 15rem; */
  width: 100%;
  height: auto;
  stroke-linecap: round;
}

.loader h1 {
  font-size: 28px;
  font-weight: 500;
  line-height: 38px;
}

.preload {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.show-video .preload {
  display: flex;
}

.show-reduced-preload .loader h1,
.show-reduced-preload .loader span,
.show-reduced-preload .percentage {
  display: none;
}

.loader h1 {
  /* position: absolute;
    top: calc(50% - 130px); */
  opacity: 0;
  width: 100%;
  min-height: 76px;
}

/* .loader h1 span {
    opacity:0;
    transition: opacity 1s ease;
} */

/* .loader h1 span.animate {
    opacity:1;
} */

.loader span.circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  animation-name: kiri;
  animation: 3s infinite linear;
}

.loader h1 {
  text-align: center;
}

.loader h2 {
  text-align: center;
  margin-top: 57px;
}

.loader span.circle:nth-child(2) {
  background: #d72280;
  animation: kiri 1.2s infinite linear;
}
.loader span.circle:nth-child(3) {
  background: #d72280;
  z-index: 100;
}
.loader span.circle:nth-child(4) {
  background: #d72280;
  animation: kanan 1.2s infinite linear;
}

.loader .quote-container {
  position: relative;
  width: 100%;
  padding: 0 20px;
}

.cookie-policy {
  position: fixed;
  bottom: 75px;
  right: 40px;
  width: 429px;
  height: 205px;
  background-color: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 0 40px;
  justify-content: center;
  z-index: 99999999;
  display: none;
}

.cookie-policy p {
  color: #030303;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.cookie-policy h2 {
  margin-top: 0;
  color: #e70077;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 10px;
}

.cookie-policy .link-wrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.cookie-policy .link-wrap a,
.cookie-policy .link-wrap button {
  display: block;
  position: relative;
}

.cookie-policy .link-wrap a {
  margin-left: 27px;
  text-decoration: none;
  color: #030303;
  font-size: 16px;
  font-weight: 500;
}

.cookie-policy .link-wrap a:before {
  content: "";
  position: absolute;
  left: -27px;
  top: 6px;
  background-image: url(../img/arrow.png);
  background-size: contain;
  width: 17px;
  height: 11px;
}

.cookie-policy .link-wrap button {
  background: #d72280;
  border: 0;
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  border-radius: 19.5px;
  padding: 11px 41px;
  cursor: pointer;
}

.explore {
  position: absolute;
  font-weight: 800;
  font-size: 19px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
  z-index: 2;
  cursor: pointer;
  z-index: 100;
}

.explore:after {
  content: "";
  position: absolute;
  right: 3px;
  top: 4px;
  background-image: url(../img/large-pink-arrow-white.png);
  background-size: contain;
  width: 20.32px;
  height: 16.8px;
  animation: largeArrow 2s infinite ease;
}

@media (max-width: 1024px) {
  .explore:after {
    right: 50px;
    top: 19px;
  }

  .tree-house .single-drone {
    width: 135px;
  }
}

@keyframes largeArrow {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(10px);
  }

  100% {
    transform: translate(0);
  }
}

@keyframes kanan {
  0% {
    transform: translateX(20px);
  }

  50% {
    transform: translateX(-20px);
  }

  100% {
    transform: translateX(20px);
    z-index: 200;
  }
}

@keyframes kiri {
  0% {
    transform: translateX(-20px);
    z-index: 200;
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(-20px);
  }
}

circle {
  fill: none;
  stroke-width: 3.5;
  -webkit-animation-name: preloader;
  animation-name: preloader;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-transform-origin: 170px 170px;
  transform-origin: 170px 170px;
  will-change: transform;
}
circle:nth-of-type(1) {
  stroke-dasharray: 550px;
}
circle:nth-of-type(2) {
  stroke-dasharray: 500px;
}
circle:nth-of-type(3) {
  stroke-dasharray: 450px;
}
circle:nth-of-type(4) {
  stroke-dasharray: 300px;
}
circle:nth-of-type(1) {
  -webkit-animation-delay: -0.15s;
  animation-delay: -0.15s;
}
circle:nth-of-type(2) {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
circle:nth-of-type(3) {
  -webkit-animation-delay: -0.45s;
  animation-delay: -0.45s;
}
circle:nth-of-type(4) {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

@-webkit-keyframes preloader {
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes preloader {
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

svg.envelope {
  display: none;
}

.mobile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
  display: none;
}

@media (max-width: 1190px) {
  p {
    font-size: 14px;
    line-height: 19px;
  }

  h3 {
    margin-bottom: 34px;
  }

  .wrapper h1 {
    font-size: 45px;
    line-height: 52px;
  }

  .nav-wrapper nav {
    width: 720px;
  }

  .bottom-menu {
    padding-left: 25px;
  }

  .bottom-menu .left ul li a {
    font-size: 15px;
    margin-right: 35px;
  }

  .bottom-menu .left ul li:nth-child(2) {
    padding-left: 25px;
  }

  .bottom-menu .left ul li:after {
    /* top: 6px; */
    right: 16px;
  }

  .bottom-menu .right ul li {
    margin-right: 20px;
  }
}

@media (max-width: 1024px) {
  header,
  .footer,
  .footer-popup {
    padding: 0 50px;
  }

  .footer {
    height: 48px;
  }

  svg.envelope {
    display: block;
  }

  .nav-wrapper nav {
    width: 485px;
  }

  .nav-wrapper {
    bottom: 18px;
  }

  .nav-wrapper nav .scroll-to-explore {
    display: none;
  }

  .touch-point .title {
    font-size: 13.2px;
    margin-left: -73px;
  }

  .touch-point .title.left {
    margin-left: -184px;
    margin-top: -54px;
  }

  .explore {
    font-size: 13.2px;
  }

  .main-menu ul.main li {
    margin-bottom: 9px;
  }

  .main-menu ul.main li a {
    font-size: 18px;
  }

  .tree-house .details {
    width: 63% !important;
    left: 18.5% !important;
    top: 10% !important;
    height: 80%;
    overflow: hidden;
  }

  .tree-house .details .copy p:first-of-type {
    /* margin-top: 15px; */
  }

  .tree-house .details .header {
    height: 46px;
    width: 100%;
  }

  .tree-house .details .header .close {
    height: 46px;
  }

  .tree-house .details .header h4 {
    top: 12px;
  }

  .tree-house .details .header .close img {
    top: 16px;
  }

  .nav-wrapper nav .circle {
    width: 6.5px;
    height: 6.5px;
    top: 11px;
  }

  .nav-wrapper nav .circle.active {
    top: 4px;
    width: 20px;
    height: 20px;
  }

  .cookie-policy {
    width: 310px;
    height: auto;
    padding: 20px;
    bottom: 33px;
    right: 30px;
  }

  .cookie-policy h2 {
    font-size: 18px;
    margin-bottom: 5px;
  }

  .cookie-policy p {
    font-size: 12px;
    line-height: initial;
  }

  .cookie-policy .link-wrap {
    margin-top: 10px;
  }

  .cookie-policy .link-wrap button {
    padding: 6px 21px;
    font-size: 12px;
  }

  .cookie-policy .link-wrap a {
    font-size: 12px;
  }

  .cookie-policy .link-wrap a:before {
    top: 3px;
  }

  .main-menu .close {
    position: absolute;
    right: 30px;
    top: 30px;
    cursor: pointer;
  }

  .tree-house .details .copy {
    width: auto;
    height: 200px;
  }

  .loader .quote-container {
    position: relative;
    width: 100%;
    height: 120px;
    margin-bottom: 6px;
    top: -30px;
  }

  .loader h1 {
    top: initial;
  }

  .percentage {
    margin-top: 50px;
  }
}

@media (max-width: 768px) {
  .slide-menu .inner {
    width: 100%;
  }

  .nav-wrapper nav {
    width: 100%;
  }

  .footer-popup svg {
    width: 20px;
    max-height: 20px;
  }

  .footer-popup .right ul li {
    margin-right: 15px;
  }

  .footer-popup .right ul li:last-of-type {
    margin-left: 15px;
  }

  .footer-popup .right ul li:last-of-type:before {
    left: -15px;
  }

  .footer-popup .left ul {
    padding-left: 15px;
  }
}

@media (max-width: 1024px) {
  header,
  .footer,
  .footer-popup {
    padding: 0 30px;
    height: 85px;
  }

  .footer {
    height: 48px;
  }

  .footer-popup {
    bottom: -85px;
  }

  header .logo img {
    width: 50px;
  }

  .wrapper h1 {
    font-size: 27px;
    line-height: 34px;
  }

  .footer-popup .left ul li {
    margin-left: 30px;
  }

  .footer-popup svg {
    width: 15px;
    max-height: 15px;
  }

  .footer-popup .left ul li:after {
    top: 5px;
    right: -19px;
    width: 7px;
    height: 7px;
  }

  .nav-wrapper nav .circle {
    width: 6.5px;
    height: 6.5px;
    top: 11px;
  }

  .nav-wrapper nav .circle.active {
    top: 4px;
    width: 20px;
    height: 20px;
  }

  .cookie-policy {
    width: 310px;
    height: auto;
    padding: 20px;
    bottom: 33px;
    right: 30px;
  }

  .cookie-policy h2 {
    font-size: 18px;
    margin-bottom: 5px;
  }

  .cookie-policy p {
    font-size: 12px;
    line-height: initial;
  }

  .cookie-policy .link-wrap {
    margin-top: 10px;
  }

  .cookie-policy .link-wrap button {
    padding: 6px 21px;
    font-size: 12px;
  }

  .cookie-policy .link-wrap a {
    font-size: 12px;
  }

  .cookie-policy .link-wrap a:before {
    top: 3px;
  }
}

@media (max-width: 700px) {
  header,
  .footer,
  .footer-popup {
    padding: 0 30px;
    height: 85px;
  }

  .footer {
    height: 48px;
  }

  .footer-popup {
    bottom: -85px;
  }

  header .logo img {
    width: 50px;
  }

  .wrapper h1 {
    font-size: 24px;
    line-height: 28px;
  }

  .footer-popup .left ul li {
    margin-left: 30px;
  }

  .footer-popup svg {
    width: 15px;
    max-height: 15px;
  }

  .footer-popup .left ul li:after {
    top: 5px;
    right: -19px;
    width: 7px;
    height: 7px;
  }
}

@media (max-width: 720px) {
  .wrapper h1 {
    font-size: 22px;
    line-height: 26px;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  /* header,
    .footer {
        display: none;
    }

    .wrapper {
        overflow: hidden;
    }
    .nav-wrapper {
        display: none;
    }

    .explore {
        display: none;
    }

    .touch-point {
        display: none;
    }

    .wrapper h1 {
        display: none;
    }

    .check-orientation {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 400;
        box-shadow: inset 0px 0px 300px 26px rgba(0,0,0,1);
        width: 100%;
        height: 100%;
        position: fixed;
        flex-direction: column;
        z-index: 1001;
    }

    .check-orientation img {
        max-width: 40%;
    }

    .check-orientation h6 {
        font-size:24px;
        font-weight: 500;
        width:50%;
        text-align: center;
        margin-top: 24px;
    }

    .wrapper {
        transition: transform .1s ease-out;
    }

    .wrapper.enter-tree {
        transform: initial;
    }

    .cookie-policy,
    .footer-popup,
    .slide-menu {
        display: none!important;
    }

    #video {
        object-fit: contain;
    }

    .loader h1 {
        line-height: 26px;
        font-size: 22px;
    }

    .main-menu ul.main li a {
        font-size:24px;
    }

    .main-menu ul.main li {
        margin-bottom:20px;
    } */
}

@media (max-width: 767px) and (orientation: landscape) {
  #video {
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* .wrapper {    
        overflow:initial;
    } */
}

/* iPad Air */
/* @media only screen and (min-width: 768px) and (max-width: 1024px) {

    .wrapper h1 {
        font-size: 34px;
        line-height: 45px;
    }

    .main-menu ul.main li a {
        font-size: 36px;
    }

  } */

@media all and (max-width: 767px) and (orientation: portrait) {
  body.tree-overlay header,
  body.tree-overlay .footer {
    display: none;
  }

  body.tree-overlay .wrapper {
    overflow: hidden;
  }
  body.tree-overlay .nav-wrapper {
    display: none;
  }

  body.tree-overlay .explore {
    display: none;
  }

  body.tree-overlay .touch-point {
    display: none;
  }

  body.tree-overlay .wrapper h1 {
    display: none;
  }

  body.tree-overlay .check-orientation {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
    box-shadow: inset 0px 0px 300px 26px rgba(0, 0, 0, 1);
    width: 100%;
    height: 100%;
    position: fixed;
    flex-direction: column;
    z-index: 1001;
  }

  body.tree-overlay .check-orientation img {
    max-width: 40%;
  }

  body.tree-overlay .check-orientation h6 {
    font-size: 24px;
    font-weight: 500;
    width: 50%;
    text-align: center;
    margin-top: 24px;
  }

  body.tree-overlay .wrapper {
    transition: transform 0.1s ease-out;
  }

  body.tree-overlay .wrapper.enter-tree {
    transform: initial;
  }

  body.tree-overlay .cookie-policy,
  body.tree-overlay .footer-popup,
  body.tree-overlay .slide-menu {
    display: none !important;
  }

  .nav-wrapper {
    bottom: 43px;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
  body.info-open .footer-popup {
    display: flex;
    flex-direction: column;
  }

  .footer-popup .left {
    margin-top: 0px;
    height: 100%;
  }
  .footer-popup .left ul {
    margin-bottom: 0;
    display: flex;
    margin-top: 0;
  }
  .footer-popup .right {
    display: none;
  }

  .footer-popup .right ul {
    margin-top: 5px;
  }
}

@keyframes heartbeat {
  0% {
    transform: scale(0.75);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.75);
  }
  60% {
    transform: scale(1);
  }
  80% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(0.75);
  }
}

.heartbeat {
  animation: heartbeat 2.5s infinite;
}

.headings {
  position: absolute;
}

/* .headings span {
  display: block;
  margin-top: 10px;
  font-size: 30px;
  font-weight: 500;
  line-height: 34px;
} */

.molecule {
  transform: scale(0.75);
  animation: rotation 40s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}