html {
  width: 100%;
  height: 100%;
}
body {
  /* background-color: #333 !important;*/
  margin: 0px;
  padding: 0px;
  /*font-family: 'Black', sans-serif;*/
  font-family: 'fieldwork', sans-serif;
  font-weight: 400;
  font-style: normal;
  /*overflow:none;*/
  /*width:100vw;*/
  height: 90vh;
  position: absolute;
  top: 0px;
  height: 90%;
  width: 100%;
  /*
	transform: translate(0px, 0px) !important;
*/
}
.page-id-919 {
  background: #000 !important;
}
.page-id-919 #main-content {
  background: transparent !important;
}
.page-id-919 #blueprint-section {
  display: none;
}
.page-id-919 #welcome-section {
  display: none;
}
.page-id-919 #email-thankyou {
  display: none;
}
.et-fb #blueprint-section {
  display: block;
}
.et-fb #welcome-section {
  display: block;
}
.et-fb #email-thankyou {
  display: block;
}
#activation-free-play {
  z-index: 1000;
  position: absolute;
  top: 40px;
  right: -46px;
  width: 30%;
}
#activation-free-play #free-play-btn {
  cursor: pointer;
}
.page-id-730 {
  background: #212121 !important;
}
.page-id-730 .logo {
  pointer-events: none;
}
.page-id-730 .logo svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.page-id-730 #rhythm {
  padding: 0 !important;
}
.page-id-730 #flex-main {
  top: 0px;
  width: 96vh;
}
.page-id-730 #flex-box {
  width: auto;
}
.page-id-730 #wheel {
  transform-origin: center;
}
.page-id-730 .zp-name-field,
.page-id-730 .zp-email-field,
.page-id-730 legend,
.page-id-730 .zp-form-label,
.page-id-730 #zp-offset-wrap {
  display: none !important;
}
.page-id-730 #former {
  position: absolute;
  z-index: 1000;
  top: 0px;
  left: 200px;
}
.page-id-730 #former-wrap {
  display: none;
  background: #000;
  padding: 20px;
}
.page-id-730 #former-wrap p {
  paddin: 0px !important;
}
.page-id-730 #lookup-btn {
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  background: #2d2340;
  width: 123px;
  padding: 0 30px 0 20px;
  height: 37px;
  font-weight: 700;
}
.page-id-730 .autoComplete_result {
  list-style-type: none;
  background: #333;
  color: #999;
  padding: 0px 20px;
  cursor: pointer;
}
.page-id-730 #zp-fetch-birthreport {
  background: #6012ae;
  padding: 10px 20px;
  border: none;
  font-size: 18px;
  color: #fff;
  text-transform: uppercase;
}
.page-id-730 .select {
  display: inline;
  padding: 5px 20px;
  background: #333;
  color: #fff;
  margin-right: 4px;
  cursor: pointer;
}
.page-id-730 .select.on {
  background: #6012ae;
}
.page-id-730 #transit-toggle {
  position: absolute;
  top: 0px;
  left: 326px;
  z-index: 100;
  padding: 0 20px 0 20px;
  cursor: pointer;
  height: 37px;
}
.page-id-730 #transit-toggle.on {
  background: #2d2340;
}
.page-id-730 #main .main {
  pointer-events: none;
}
.page-id-730 #planets .tz-center {
  cursor: pointer;
  pointer-events: none;
}
.page-id-730 .transits {
  display: none;
  pointer-events: none;
}
.page-id-730 #button {
  pointer-events: fill;
  cursor: pointer;
}
.page-id-730 .zodiac-btn {
  pointer-events: fill;
  cursor: pointer;
}
.page-id-730 .transits #planets-marker,
.page-id-730 .transits #planets {
  display: none;
}
.page-id-730 .main-on {
  fill: #fff !important;
}
.page-id-730 .transit-on {
  fill: #ff54c4 !important;
}
.page-id-730 .codes-off {
  fill: #000 !important;
}
.page-id-730 #bg .main-on {
  fill: #2b2b2b !important;
  display: block;
}
.page-id-730 #bg .transit-on {
  fill: #2b2b2b !important;
  display: block;
}
.page-id-730 #bg .main-on.transit-on {
  fill: #666 !important;
  display: block;
}
.page-id-730 #descriptions-wrap {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.page-id-730 #descriptions-wrap #content {
  font-size: 50px;
  line-height: 78px;
  width: 63%;
  margin: auto;
  color: #fff;
  padding-top: 27%;
}
.page-id-730 #descriptions-wrap #content .title {
  color: #999;
}
.page-id-730 #descriptions-wrap #content .desc,
.page-id-730 #descriptions-wrap #content .qualities,
.page-id-730 #descriptions-wrap #content .over,
.page-id-730 #descriptions-wrap #content .under {
  margin-bottom: 20px;
}
.page-id-730 #closer {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
}
.page-id-730 #page-container.fade {
  background: #000000a1;
}
.page-id-730 #main.fade {
  opacity: .1;
}
.page-id-730 #description {
  display: none;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.4);
}
.page-id-730 #description #window {
  margin: auto;
  width: 44vh;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.page-id-730 #description #content {
  text-align: center;
  color: #fff;
}
.page-id-730 #description #content .title {
  color: #999;
}
.page-id-730 #description #content .desc,
.page-id-730 #description #content .qualities,
.page-id-730 #description #content .over,
.page-id-730 #description #content .under {
  font-size: 17px;
  line-height: 27px;
  margin-bottom: 20px;
}
.page-id-730 #btns .btn {
  fill: #000;
  opacity: 0;
  pointer-events: fill;
  cursor: pointer;
}
.page-id-730 #activator {
  width: 88%;
  height: 88%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.page-id-730 #mandala img {
  max-width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}
#toggle-music {
  left: 10px;
  position: relative;
}
#sequence-play {
  position: relative;
  left: 24px;
  color: #404040;
  display: none;
  font-size: 20px;
}
#codes-player-div {
  display: none;
}
#users {
  display: none;
}
#download {
  font-size: 16px;
  display: none;
}
#mobile_menu1 #download {
  display: block;
}
#mobile_menu1 #users {
  display: block;
}
#mobile_menu1 li {
  line-height: 10px;
}
.title-font {
  font-weight: 800;
}
.thin-font {
  font-weight: 200;
}
.black {
  font-weight: 800;
}
.thin {
  font-weight: 200;
}
.container {
  /*width: 100%;
    height: 100%;*/
  height: 100vh;
  width: 100vw;
}
#fullscreen {
  display: block;
  position: absolute;
  color: #fff;
  font-size: 30px;
  z-index: 2000;
  cursor: pointer;
  right: 0px;
  bottom: 23px;
  opacity: .3;
  text-align: right;
}
#fullscreen img {
  width: 80%;
  transition: .5s;
}
#fullscreen:hover {
  opacity: 1;
}
#fullscreen:hover img {
  width: 100%;
}
:-webkit-full-screen #fullscreen {
  display: none;
}
:-moz-full-screen #fullscreen {
  display: none;
}
:fullscreen #fullscreen {
  display: none;
}
.compass #flex-box {
  display: flex;
  align-items: stretch;
  flex-flow: row;
  width: 100vw;
}
#flex-panel {
  width: 25vw;
  max-width: 350px;
  /*background:#1a1a1a;*/
  display: none;
}
#flex-main {
  height: 100%;
  width: 100%;
  /*position: absolute;*/
  text-align: center;
  margin: auto;
  top: 20px;
}
.blueprint .flex-wrap {
  position: relative;
  width: 100vmin;
  max-width: 98vmin;
  /* background: rgba(0, 255, 0, .3);*/
  margin: auto;
}
.compass .flex-wrap {
  position: relative;
  width: 100vmin;
  max-width: 100vmin;
  /* background: rgba(0, 255, 0, .3);*/
  margin: auto;
}
.flex-ratio {
  padding-bottom: 100%;
}
.flex-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
}
.flex-center {
  width: 100%;
  height: 100%;
}
.thecircle svg {
  top: 0px;
  left: 0px;
}
.synthesis.admin-bar .window {
  width: 98vmin;
  height: 98vmin;
  margin-top: -20px;
}
.synthesis.admin-bar #main-nav {
  margin-top: 20px;
}
.synthesis.admin-bar #activation-info {
  height: 98vh;
  margin-top: 20px;
}
.hidden {
  display: none;
}
.thecircle {
  /*cropped circle*/
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.fit {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#top-nav {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  width: 100%;
}
#top-nav #icon-1 {
  fill: #fff;
}
#top-nav .nav-btn {
  cursor: pointer;
}
#top-nav #sequence-nav {
  position: absolute;
  max-width: 120px;
  width: 100%;
  right: 0px;
  top: 300px;
}
.videos-intro {
  z-index: 1000;
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 225px;
  width: 400px;
}
.videos-intro iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-2 {
  left: auto;
  right: 0px !important;
}
.video-title {
  position: absolute;
  z-index: 100;
  text-align: center;
  width: 100%;
}
@media screen and (max-device-width: 700px) and (orientation: landscape) {
  .videos-intro {
    height: 113px;
    width: 200px;
  }
}
.transparent-btn {
  fill: #fff;
  opacity: 0;
  cursor: pointer;
}
.trans-btn {
  fill: #fff;
  opacity: 0 !important;
  cursor: pointer;
}
#zodiac-link {
  text-align: center;
  height: 400px;
  margin-top: 200px;
}
.login-link {
  text-align: center;
  margin-top: 100px;
}
.login-link2 {
  margin-top: 50px;
  text-align: center;
}
#sequence-title {
  position: absolute;
  right: 40px;
  top: 40px;
  font-size: 30px;
}
#sequence-title .title {
  display: none;
}
#sequence-title .active {
  display: block;
}
#main-nav {
  position: absolute;
  max-width: 450px;
  z-index: 101;
  width: 450px;
}
#main-nav .obj {
  stroke: #666;
}
#main-nav .obj.selected {
  fill: #333;
}
#main-nav .txt {
  font-size: 44px;
  font-family: Fieldwork-HumBold, Fieldwork;
  font-weight: 700;
  fill: #4d4d4d;
}
#main-nav .txt.selected {
  fill: #fff;
}
.app {
  display: none;
  /*opacity: 0;*/
  /*-webkit-transition: all 1500ms ease-out;
	-moz-transition: all 1500ms ease-out;
	-o-transition: all 1500ms ease-out;
	transition: all 1500ms ease-out;*/
}
.app.active {
  display: block;
  /*opacity:1;*/
  /*-webkit-transition: all 1500ms ease-out;
	-moz-transition: all 1500ms ease-out;
	-o-transition: all 1500ms ease-out;
	transition: all 1500ms ease-out;*/
}
#trigrams {
  display: none;
}
#tri-btns .btn {
  cursor: pointer;
}
#synthesis svg {
  position: absolute;
  width: 100%;
  /*height:100%;*/
}
#synthesis .main-btn {
  width: 400px;
  height: 400px;
  position: absolute;
}
#synthesis .main {
  background: #000;
}
#synthesis .main #bg-1,
#synthesis .main #bg-2,
#synthesis .main #bg-3,
#synthesis .main #bg-4,
#synthesis .main #bg-5,
#synthesis .main #bg-7 {
  display: none;
}
#synthesis #synergy {
  display: none;
}
#synthesis #previews .obj {
  opacity: .3;
}
#synthesis #previews .glow {
  opacity: 1;
  display: none;
}
#synthesis .txt-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: fieldwork;
}
#synthesis .txt-layer .obj {
  display: none;
  text-shadow: 2px 2px 6px #000;
}
#synthesis .txt-layer #code-btns .obj {
  display: block;
}
#synthesis .txt-layer #code-btns .unlock {
  opacity: .5;
}
#synthesis .txt-layer #code-btns .btn {
  fill: #fff;
  opacity: 0;
  cursor: pointer;
}
#synthesis .txt-layer #sequence-btns .btn {
  fill: #fff;
  opacity: 0;
  cursor: pointer;
}
#synthesis .txt-layer #sequence-close {
  display: none;
}
#synthesis .txt-layer #sequence-close .btn {
  fill: #fff;
  opacity: 0;
  cursor: pointer;
}
#synthesis .txt-layer .obj-off {
  /*buttons for preview mode only - no membership*/
  fill: #000 !important;
  opacity: .6 !important;
}
#synthesis .txt-layer #numbers {
  fill: #000;
  font-size: 330px;
  opacity: .4;
}
#synthesis .txt-layer #numbers .num {
  font-weight: 800;
}
#synthesis .txt-layer #titles .txt {
  font-weight: 200;
  text-align: center;
  fill: #fff;
  font-size: 46px;
  opacity: .5;
}
#synthesis .txt-layer #keywords .txt {
  font-weight: 800;
  text-align: center;
  fill: #fff;
  font-size: 50px;
  text-transform: uppercase;
}
#synthesis .txt-layer .signs-txt {
  font-weight: 800;
  text-align: center;
  fill: #fff;
  font-size: 50px;
  text-transform: uppercase;
}
#synthesis .txt-layer #mantras .mantra-txt {
  text-transform: uppercase;
  font-size: 38px;
}
#synthesis #signs-txt {
  display: none;
}
#synthesis #zodiac-button {
  display: none;
}
#synthesis #signs-btn {
  cursor: pointer;
}
#synthesis #code-btns .btn {
  cursor: pointer;
}
#synthesis .zodiac-on {
  fill: #fff;
}
#synthesis .zodiac-txt-on {
  fill: #fff;
}
#synthesis .zodiac-btn-on {
  fill: #000;
}
#blueprint-free svg {
  position: absolute;
  width: 100%;
  /*height:100%;*/
  left: 0px;
}
#blueprint-free .main-btn {
  width: 400px;
  height: 400px;
  position: absolute;
}
#blueprint-free .main {
  background: #000;
}
#blueprint-free .main #bg-1,
#blueprint-free .main #bg-2,
#blueprint-free .main #bg-3,
#blueprint-free .main #bg-4,
#blueprint-free .main #bg-5,
#blueprint-free .main #bg-7 {
  display: none;
}
#blueprint-free #previews .obj {
  opacity: .3;
}
#blueprint-free #previews .glow {
  opacity: 1;
  display: none;
}
#blueprint-free .txt-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: fieldwork;
}
#blueprint-free .txt-layer .obj {
  display: none;
  text-shadow: 2px 2px 6px #000;
}
#blueprint-free .txt-layer #code-btns .obj {
  display: block;
}
#blueprint-free .txt-layer #code-btns .unlock {
  opacity: 0;
}
#blueprint-free .txt-layer #code-btns .btn {
  fill: #fff;
  opacity: 0;
  cursor: pointer;
}
#blueprint-free .txt-layer #sequence-btns .btn {
  fill: #fff;
  opacity: 0;
  cursor: pointer;
}
#blueprint-free .txt-layer #sequence-close {
  display: none;
}
#blueprint-free .txt-layer #sequence-close .btn {
  fill: #fff;
  opacity: 0;
  cursor: pointer;
}
#blueprint-free .txt-layer .obj-off {
  /*buttons for preview mode only - no membership*/
  fill: #000 !important;
  opacity: .6 !important;
}
#blueprint-free .txt-layer #numbers {
  fill: #000;
  font-size: 330px;
  opacity: .4;
}
#blueprint-free .txt-layer #numbers .num {
  font-weight: 800;
}
#blueprint-free .txt-layer #titles .txt {
  font-weight: 200;
  text-align: center;
  fill: #fff;
  font-size: 46px;
  opacity: .5;
}
#blueprint-free .txt-layer #keywords .txt {
  font-weight: 800;
  text-align: center;
  fill: #fff;
  font-size: 50px;
  text-transform: uppercase;
}
#blueprint-free .txt-layer .signs-txt {
  font-weight: 800;
  text-align: center;
  fill: #fff;
  font-size: 50px;
  text-transform: uppercase;
}
#blueprint-free .txt-layer #mantras .mantra-txt {
  text-transform: uppercase;
  font-size: 38px;
}
#blueprint-free #code-btns .btn {
  cursor: pointer;
}
#blueprint-signs-btn {
  position: absolute;
  z-index: 100;
  top: 40px;
  right: 20px;
  width: 70px;
  cursor: pointer;
}
.fadeOut {
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
  opacity: 0;
  /*display: none;*/
}
.fadeIn {
  opacity: 1 !important;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
}
#back-button {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 20px;
  left: 20px;
  cursor: pointer;
}
#back-button svg {
  width: 70%;
}
#controls {
  /* contains the controller */
  display: none;
  position: absolute;
  top: 100px;
  left: 20px;
  z-index: 1000;
  width: 120px;
  height: 300px;
}
#controller {
  display: none;
}
#controller #icon-sound .obj {
  opacity: .3;
}
#controller #icon-sound .on {
  opacity: .8;
}
#controller #icon-play.on .icon {
  fill: #ffffff !important;
  opacity: .6;
}
#activator {
  display: none;
}
#activator svg {
  position: absolute;
  width: 100%;
  /*height:100%;*/
}
#activator #elements {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  /*
		overflow: hidden;
*/
}
#activator #mantra {
  display: none;
}
#activator #mantra #elements {
  /*mix-blend-mode: hard-light;*/
  margin-left: -1px;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
  opacity: 0;
  /*display: none;*/
}
#activator #mantra #elements.on {
  opacity: 1 !important;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
}
#activator #mantra #fade {
  /*opacity: .3;*/
}
#activator #mantra #words {
  text-align: center;
  /*margin-top: -110px;*/
}
#activator #mantra #meaning {
  display: none;
}
#activator #mantra #meaning .hex {
  display: none;
}
#activator #mantra #back-text .obj {
  display: none;
}
#activator #chakra {
  display: none;
}
#activator #chakra #elements {
  mix-blend-mode: hard-light;
  margin-left: -1px;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
  opacity: 0;
  /*display: none;*/
}
#activator #chakra #elements.on {
  opacity: 1 !important;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
}
#activator #chakra #edge {
  top: 2px;
  left: 1px;
  mix-blend-mode: hard-light;
}
#activator #chakra #meditator {
  mix-blend-mode: hard-light;
}
#activator #chakra #elements {
  mix-blend-mode: hard-light;
}
#activator #chakra #on .obj {
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
  opacity: 0;
  /*display: none;*/
  mix-blend-mode: hard-light;
}
#activator #chakra #on .on {
  opacity: 1 !important;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
}
#activator #chakra #borders .obj {
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
  opacity: 0;
  /*display: none;*/
  mix-blend-mode: hard-light;
}
#activator #chakra #borders .on {
  opacity: 1 !important;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
}
#activator #chakra #off {
  mix-blend-mode: hard-light;
}
#activator #chakra .chakra-triune {
  mix-blend-mode: hard-light;
  opacity: 0;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
}
#activator #chakra .off {
  opacity: 0;
}
#activator #chakra .on {
  opacity: 1 !important;
}
#activator #chakra #controller {
  opacity: .6;
}
#activator #alchemy {
  display: none;
}
#activator #alchemy #elements {
  mix-blend-mode: hard-light;
  margin-left: -1px;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
  opacity: 0;
  /*display: none;*/
}
#activator #alchemy #elements.on {
  opacity: 1 !important;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
}
#activator #alchemy #rings tspan {
  font-weight: 800;
  text-shadow: 0px 0 20px #000;
}
#activator #alchemy #rings .obj {
  display: none;
}
#activator #alchemy .main-title {
  fill: #fff;
  font-size: 223px;
  font-weight: 800;
  text-shadow: 0px 0 20px #000;
}
#activator #alchemy .sub-title {
  fill: #fff;
  font-size: 120px;
  font-weight: 400;
  text-shadow: 0px 0 12px #000;
}
#activator #alchemy .core-1 {
  font-size: 146.51px;
  fill: #ffd054;
  font-family: Alisha-Regular, Alisha;
  font-weight: 400px;
  text-shadow: 0px 0 12px #000;
}
#activator #alchemy .core-2,
#activator #alchemy .core-3 {
  fill: #fff;
  text-shadow: 0px 0 20px #000;
}
#activator #alchemy .core-2 {
  opacity: 0.6;
}
#activator #labels {
  display: none;
}
#activator #labels .obj {
  display: none;
}
#activator #labels .txt {
  fill: #fff;
  font-weight: 800;
  font-size: 222px;
  text-shadow: 0px 0 20px #000;
}
#activator #play {
  display: none;
}
#activator #play #elements {
  mix-blend-mode: hard-light;
  margin-left: -1px;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
  opacity: 0;
  /*display: none;*/
}
#activator #play #elements.on {
  opacity: 1 !important;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
}
#activator #play #on .obj {
  opacity: 0;
  mix-blend-mode: hard-light;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
}
#activator #play #on .on {
  opacity: 1;
}
#activator #play #off {
  mix-blend-mode: hard-light;
  /*
			.on {
				opacity:1;
			}*/
}
#activator #play #off .obj {
  mix-blend-mode: hard-light;
}
#activator .mode.on {
  opacity: 1 !important;
  -webkit-transition: all 1500ms ease-out;
  -moz-transition: all 1500ms ease-out;
  -o-transition: all 1500ms ease-out;
  transition: all 1500ms ease-out;
}
#flip-btn {
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
}
#flip-btn .svg-btn {
  opacity: 0;
  cursor: pointer;
}
.box {
  animation-name: movingBox;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.hard-light {
  mix-blend-mode: hard-light;
}
.showOnView {
  display: none;
}
#activation-nav {
  width: 123px;
  position: absolute;
  right: 0px;
  height: 500px;
  top: 10vh;
}
#activation-nav .selected {
  fill: #fff;
}
#back-click {
  position: absolute;
  top: 0px;
  background: #000;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  cursor: pointer;
}
.back-click {
  cursor: pointer;
}
#compass {
  display: none;
}
#compass #intro #top {
  font-weight: 200;
}
#compass #intro #bottom {
  font-weight: 200;
}
#compass #intro #middle {
  font-weight: 800;
}
#compass #intro #glows {
  mix-blend-mode: hard-light;
}
#compass #intro #glows .obj {
  display: none;
  mix-blend-mode: hard-light;
}
#compass #synergy {
  /*display:none;*/
}
#compass #matrix {
  display: none;
  width: 100%;
}
#compass #matrix #content {
  position: absolute;
  z-index: 100;
  width: 100%;
}
#compass #matrix #buttons {
  opacity: 0;
  cursor: pointer;
}
#compass #matrix #text text {
  fill: #fff;
  text-transform: uppercase;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
}
.page-id-1581 .container {
  padding: 0px !important;
}
.page-id-1581 #compass {
  display: inline-block;
}
.page-id-1581 #activator svg {
  position: absolute;
  width: 100%;
  /*height:100%;*/
  top: 0px;
  left: 0px;
}
.page-id-1581 #submitBtn {
  padding: 10px 30px;
  font-size: 20px;
  margin-top: 20px;
  background: #000;
  color: #8414f3;
  border: 2px solid #8414f3;
}
.page-id-1581 #oracle-free-play {
  z-index: 1000;
  position: absolute;
  top: 40px;
  right: -46px;
  width: 30%;
}
.page-id-1581 #oracle-free-play #free-play-btn {
  cursor: pointer;
}
#nav-bullets .bullet {
  fill: #000;
  stroke: #666 !important;
}
#nav-bullets .bullet.on {
  fill: #fff;
}
#nav-bullets .bullet-line {
  stroke: #666;
}
.control-btn {
  cursor: pointer;
}
.control-btn #box-border {
  fill: none;
}
.control-btn #text {
  fill: #808080;
}
.control-btn.btn-on #border rect {
  fill: #000;
  opacity: .4;
}
.control-btn.btn-on #txt {
  fill: #fff;
}
#loading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  text-align: center;
  display: none;
}
#loading img {
  max-width: 50px;
}
.unlock {
  cursor: pointer;
}
#triad {
  display: none;
}
#triad svg {
  position: relative;
  z-index: 100;
}
#triad #previews .obj {
  display: none;
}
#triad #glows .obj {
  display: none;
}
#triad #mantras .obj {
  display: none;
}
#triad #btns .btn {
  cursor: pointer;
}
#blueprint-control {
  width: 24vw;
  max-width: 300px !important;
  right: 0px;
  position: absolute;
  top: 27px;
  z-index: 1000;
  height: 100%;
  background: #0f0f0f;
}
#blueprint-control .border {
  fill: none;
  stroke: #4d4d4d;
  stroke-miterlimit: 10;
}
#blueprint-control svg {
  position: relative;
}
#blueprint-control #control-btn {
  max-width: 35px;
  position: absolute !important;
  left: -35px;
  top: 50px;
  cursor: pointer;
}
#blueprint-control .fluid-width-video-wrapper {
  padding-top: 0px !important;
  position: absolute;
  top: 0px;
}
#blueprint-control iframe {
  position: relative !important;
  height: 15vh !important;
  min-height: 95px !important;
}
#blueprint-control .helpicon {
  display: none;
}
#blueprint-control .helpicon.on {
  display: block;
}
#blueprint-control .expand-box {
  border: 1px solid #202020;
  margin: 6px 10px;
  padding: 4px 0 0 2px;
  min-height: 36px;
}
#blueprint-control .expand-box .expand-svg {
  position: absolute;
}
#blueprint-control .expand-box .expand-svg .grafx {
  display: none;
}
#blueprint-control .expand-box .expanded {
  position: relative;
  display: block;
}
#blueprint-control .expand-box .expanded .grafx {
  display: block;
}
#blueprint-control .expand-box.on {
  background: #0b0b0b;
}
#compass-control {
  width: 300px;
  max-width: 300px !important;
  right: 0px;
  position: absolute;
  top: 27px;
  z-index: 1000;
  height: 100%;
  background: #1a1a1a;
}
#compass-control #control-btn {
  max-width: 35px;
  position: absolute !important;
  left: -35px;
  top: 50px;
  cursor: pointer;
}
#compass-control svg {
  position: relative;
}
#activation-control-compass {
  width: 300px;
  max-width: 300px !important;
  right: 0px;
  position: absolute;
  top: 27px;
  z-index: 1000;
  height: 100%;
  background: #0f0f0f;
}
#activation-control-compass .border {
  fill: none;
  stroke: #4d4d4d;
  stroke-miterlimit: 10;
}
#activation-control-compass svg {
  position: relative;
}
#activation-control-compass .controlmedia {
  display: none;
}
#activation-control-compass #control-media {
  padding: 0 8px;
  top: -30px;
  position: relative;
}
#activation-control-compass #control-media .title {
  font-weight: 800;
  fill: #404040;
  margin-bottom: -10px;
  font-size: 48px;
}
#activation-control-compass #control-media .fluid-width-video-wrapper {
  padding-top: 0px !important;
}
#activation-control-compass #control-media iframe {
  position: relative !important;
  height: 15vh !important;
  min-height: 95px !important;
}
#activation-control-compass #codes {
  top: 15px;
  position: relative;
}
#activation-control-compass #codes div {
  color: #59555f;
  font-size: 78px;
}
#activation-control-compass #codes #number {
  font-weight: 800;
  text-align: center;
  width: 55px;
  padding-top: 10px;
}
#activation-control-compass #codes #hex {
  position: absolute;
  width: 350px;
  height: 88px;
  overflow: hidden;
  left: 110px;
  top: -22px;
}
#activation-control-compass #codes #hex .codes {
  margin-left: 0px;
  height: 2811px;
}
#activation-control-compass #codes #hex img {
  height: 100%;
  width: 100%;
}
#activation-control-compass #key-word {
  text-transform: uppercase;
}
#activation-control-compass #key-mantra {
  text-transform: uppercase;
}
#activation-control-compass #key-note {
  fill: #666;
  font-size: 47px;
  text-transform: uppercase;
}
#activation-control-compass .plyr--audio {
  /*width: 306px !important;*/
}
#activation-control-compass .plyr--audio .plyr__controls {
  background: #000 !important;
  border-radius: inherit;
  color: #4a5764;
  /*padding: 0px !important;
			height:50px;*/
  padding: 10px 0px !important;
}
#activation-control-compass .plyr__control {
  width: 40px;
  height: 30px;
  padding: 0px !important;
}
#activation-control-compass .plyr__control svg {
  height: 25px !important;
}
#activation-control-compass .nav-icon {
  fill: #000;
}
#activation-control-compass .nav-icon.selected {
  fill: #ffffff;
}
#activation-control-compass #audio-icons #icon-play.on {
  fill: #ffffff;
}
#activation-control-compass #icon-sound .obj {
  opacity: 1;
}
#activation-control-compass #icon-sound .off {
  opacity: .2;
}
#activation-control {
  width: 300px;
  max-width: 300px !important;
  right: 0px;
  position: absolute;
  top: 27px;
  z-index: 1000;
  height: 100%;
  background: #0f0f0f;
}
#activation-control .border {
  fill: none;
  stroke: #4d4d4d;
  stroke-miterlimit: 10;
}
#activation-control svg {
  position: relative;
}
#activation-control .controlmedia {
  display: none;
}
#activation-control #control-media {
  padding: 0 8px;
  top: -30px;
  position: relative;
}
#activation-control #control-media .title {
  font-weight: 800;
  fill: #404040;
  margin-bottom: -10px;
  font-size: 48px;
}
#activation-control #control-media .fluid-width-video-wrapper {
  padding-top: 0px !important;
}
#activation-control #control-media iframe {
  position: relative !important;
  height: 15vh !important;
  min-height: 95px !important;
}
#activation-control #codes {
  top: 15px;
  position: relative;
}
#activation-control #codes div {
  color: #59555f;
  font-size: 78px;
}
#activation-control #codes #number {
  font-weight: 800;
  text-align: center;
  width: 55px;
  padding-top: 10px;
}
#activation-control #codes #hex {
  position: absolute;
  width: 350px;
  height: 88px;
  overflow: hidden;
  left: 110px;
  top: -22px;
}
#activation-control #codes #hex .codes {
  margin-left: 0px;
  height: 2811px;
}
#activation-control #codes #hex img {
  height: 100%;
  width: 100%;
}
#activation-control #key-word {
  text-transform: uppercase;
}
#activation-control #key-mantra {
  text-transform: uppercase;
}
#activation-control #key-note {
  fill: #666;
  font-size: 47px;
  text-transform: uppercase;
}
#activation-control .plyr--audio {
  /*width: 306px !important;*/
}
#activation-control .plyr--audio .plyr__controls {
  background: #000 !important;
  border-radius: inherit;
  color: #4a5764;
  /*padding: 0px !important;
			height:50px;*/
  padding: 10px 0px !important;
}
#activation-control .plyr__control {
  width: 40px;
  height: 30px;
  padding: 0px !important;
}
#activation-control .plyr__control svg {
  height: 25px !important;
}
#activation-control .nav-icon {
  fill: #000;
}
#activation-control .nav-icon.selected {
  fill: #ffffff;
}
#activation-control #audio-icons #icon-play.on {
  fill: #ffffff;
}
#activation-control #icon-sound .obj {
  opacity: 1;
}
#activation-control #icon-sound .off {
  opacity: .2;
}
#descriptions {
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0px;
  display: none;
  line-height: 36px;
}
#descriptions h1 {
  color: #fff;
  font-weight: 800;
}
#descriptions .wrap {
  width: 80vw;
  margin: auto;
  max-width: 800px;
  position: relative;
  top: 46px;
  border: 1px solid #333;
  background: #111;
}
#descriptions .box {
  color: #a4a4a4;
  padding: 40px;
  overflow: scroll;
  height: 100%;
}
#descriptions .close-btn {
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 16px;
  border: 1px solid #9055b0;
  font-size: 25px;
  color: #999;
  position: absolute;
  right: -1px;
  top: -1px;
  cursor: pointer;
}
#descriptions .close-btn .btn {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
#activation-control.on {
  right: -340px;
}
/*show hamburger menu on desktop*/
@media (min-width: 980px) {
  .et_pb_menu .et_pb_menu__menu,
  .et_pb_fullwidth_menu .et_pb_menu__menu {
    display: none;
  }
  .et_pb_menu .et_mobile_nav_menu,
  .et_pb_fullwidth_menu .et_mobile_nav_menu {
    display: flex;
    float: none;
    margin: 0 6px;
    align-items: left;
  }
}
@media (max-width: 1400px) {
  .compass .flex-wrap {
    position: relative;
    width: 92vmin;
    max-width: 100vmin;
    /* background: rgba(0, 255, 0, .3);*/
    margin: auto;
  }
  .compass #flex-box {
    display: flex;
    align-items: stretch;
    flex-flow: row;
    width: 74vw;
  }
  .blueprint .flex-wrap {
    position: relative;
    width: 92vmin;
    max-width: 100vmin;
    /* background: rgba(0, 255, 0, .3);*/
    margin: auto;
  }
  .blueprint #flex-box {
    display: flex;
    align-items: stretch;
    flex-flow: row;
    width: 74vw;
  }
}
.et-menu-nav {
  display: none !important;
}
.et_pb_menu .et_mobile_nav_menu li {
  list-style-type: none;
}
.et_mobile_menu {
  right: 0px !important;
  left: auto !important;
  width: 300px !important;
  text-align: left !important;
}
@media (max-width: 1112px) {
  #activation-info #title {
    right: 13px;
    top: 7px;
  }
  #activation-info #title div {
    font-size: 26px;
  }
  .plyr__controls .plyr__controls__item.plyr__time {
    display: none;
  }
}
#mobile-turn {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  top: 0px;
  left: 0px;
  text-align: center;
  background: #000;
  display: none;
}
@media (max-width: 1024px) and (orientation: portrait) {
  #mobile-turn {
    display: block;
  }
}
@media (max-width: 1050px) {
  #main-nav {
    width: 330px;
  }
  #controls {
    display: none;
    position: absolute;
    top: 80px;
    left: 5px;
    z-index: 1000;
    width: 100px;
    height: 300px;
  }
  #activation-info #title {
    right: 13px;
    top: 7px;
  }
  #activation-info #title div {
    font-size: 20px;
  }
  #activation-info #codes {
    left: 10px;
    bottom: 4px;
  }
  #activation-info #codes div {
    font-size: 32px;
  }
  #activation-info #codes #hex {
    width: 138px;
    height: 44px;
    left: 60px;
    top: -2px;
  }
  #activation-info #key {
    right: 15px;
    bottom: 5px;
  }
  #activation-info #key div {
    font-size: 24px;
  }
  #top-nav #sequence-nav {
    max-width: 90px;
    top: 214px;
  }
  #activation-control .fluid-width-video-wrapper {
    top: -10px;
  }
  #activation-control #control-media iframe {
    min-height: 69px !important;
  }
}
@media (max-width: 900px) {
  #back-button {
    width: 120px;
    top: 0px;
  }
}
@media (max-width: 834px) {
  #main-nav {
    width: 240px;
  }
  #top-nav #sequence-nav {
    right: 0px;
    width: 80px;
    top: 20px;
  }
  #control-media .fluid-width-video-wrapper {
    max-height: 45px;
  }
  #controls {
    top: 60px;
    left: -10px;
    z-index: 1000;
    width: 100px;
    height: 285px;
  }
  #activation-info #title {
    top: 3px;
  }
  #activation-info #title div {
    font-size: 24px;
  }
  #compass #hex {
    width: 118px;
  }
  #activation-info #codes {
    left: 0px;
    bottom: 0px;
  }
  #activation-info #codes div {
    font-size: 30px;
  }
  #activation-info #codes #hex {
    top: 4px;
    left: 54px;
    width: 118px;
  }
  #activation-info #key {
    right: 10px;
    bottom: 0px;
  }
  #activation-info #key div {
    font-size: 24px;
  }
  #activation-nav {
    width: 134px;
    position: absolute;
    left: 64px;
    height: 4px;
    top: auto;
    bottom: 92px !important;
    transform: rotate(-90deg);
  }
}
@media (max-width: 785px) {
  html {
    margin-top: 0px !important;
  }
}
@media (max-width: 740px) and (orientation: landscape) {
  #top-nav #sequence-nav {
    max-width: 80px;
    top: 55px;
  }
  #main-nav {
    width: 210px;
  }
  #controls {
    top: 60px;
    left: -10px;
    z-index: 1000;
    width: 75px;
    height: 285px;
  }
  #activation-info #title {
    right: 10px;
    top: -4px;
  }
  #activation-info #title div {
    font-size: 16px;
  }
  #compass #hex {
    width: 118px;
  }
  #activation-info #codes {
    left: 0px;
    bottom: 0px;
  }
  #activation-info #codes div {
    font-size: 26px;
  }
  #activation-info #codes #hex {
    top: 4px;
    left: 54px;
    width: 118px;
  }
  #activation-info #key {
    right: 10px;
    bottom: 0px;
  }
  #activation-info #key div {
    font-size: 20px;
  }
  #activation-nav {
    width: 80px;
  }
}
@media (max-width: 420px) and (orientation: portrait) {
  #top-nav #sequence-nav {
    right: 0px;
    width: 60px;
    top: 20px;
  }
  #controls {
    top: 60px;
    left: -10px;
    z-index: 1000;
    width: 60px;
    height: 285px;
  }
  #activation-info #title {
    left: 10px;
    top: 24px;
  }
  #activation-info #title div {
    font-size: 20px;
  }
  #compass #hex {
    width: 118px;
  }
  #activation-info #codes {
    left: 0px;
    bottom: 0px;
  }
  #activation-info #codes div {
    font-size: 26px;
  }
  #activation-info #codes #hex {
    top: 4px;
    left: 54px;
    width: 118px;
  }
  #activation-info #key {
    right: 10px;
    bottom: 0px;
  }
  #activation-info #key div {
    font-size: 20px;
  }
  #activation-nav {
    width: 84px;
    position: absolute;
    left: -34px;
    height: 4px;
    top: auto;
    bottom: 92px !important;
    transform: rotate(-90deg);
  }
}
@media (max-width: 320px) and (orientation: portrait) {
  #top-nav #sequence-nav {
    right: -30px;
    min-width: 950px;
    top: 30px;
  }
  #activation-nav {
    width: 85px;
    position: absolute;
    left: -44px;
  }
  #activation-info #codes #hex {
    width: 85px;
  }
}