@charset "UTF-8";
/* CSS Document */

html {
	overflow:hidden;
}

body {
	margin:0;
	padding:0;
}

p, h1, h2, h3, h4, h5, h6 {
	font-family: "Trebuchet MS", Helvetica, sans-serif !important;
}

a {
	text-decoration: none;
}

#exploreAnchor {
	position: absolute;
	transform: translate(-60vw, -54vh);
}

.hideIt {
	display:none !important;
}
.showIt {
	display:block !important;
}

.guideMenuClosed {
	display: inline-block;
	font-size: 80%;
	margin-left: 20px;
	transform: translateY(-3px);
}

.guideMenuOpen {
	transform: translateY(-3px) scaleY(-1);
}

.tigerBirth {
	width: 1000px;
	height: 1000px;
	background: url("../img/tiger birth bg.jpg");
	  background-repeat: repeat;
	  background-size: auto;
	position: fixed;
	top:-40px;
	left: 300px;
	background-size: contain;
	background-repeat: no-repeat;
}

.dragscroll {
	position: relative;
	z-index:999;
	height:100vh;
	overflow: scroll;
	cursor: grab;
	cursor: -o-grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}

.dragscroll > img {
	-webkit-filter: drop-shadow(4px 2px 10px #222222a3);
 	filter: drop-shadow(4px 2px 10px #222222a3);
	width: 140vw;
	height: 140vw;
}

.story {
	position: absolute;
	width: 12vw;
	height: 12vw;
	border-radius: 43%;
	border:2px dashed;
	
}

.one {
	left: 66vw;
	top: 63vw;
}

.two {
	top: 71vw;
	left: 48vw;
}

.three {
	top: 83vw;
	left: 76vw;
}

.four {
	top: 69vw;
	left: 91vw;
}

.five {
	top: 47vw;
	left: 81vw;
}

.six {
	top: 50vw;
	left: 39vw;
}

.seven {
	top: 72vw;
	left: 30vw;
}

.seven .sticky-container {
	top: 33px;
}

.eight {
	top: 83vw;
	left: 59vw;
}

.nine {
	top: 44vw;
	left: 59vw;
}

.ten {
	top: 90vw;
	left: 39vw;
}

.spiral {
	position: absolute;
	top: 38vw;
	width: 85vw !important;
	left: 30vw;
	height: 71vw !important;
	opacity: 0.5;
}

.story {
	transform:scale(.7);
	transition:all .3s ease;
}
.eight, .nine, .ten {
	transform:scale(.66) !important;
	opacity:.75;
}

.story .text,
.story .link, 
.story .symbol {
	transform: scale(.8);
}
.story .title {
	transform: scale(.93);
}
.story .sticky-container {
	transform: scale(.4);
}

.story .text {
	transition: all .6s ease .1s;
}
.story .title {
	transition: all .2s ease 0s;
}
.story .sticky-container {
	transition: all .4s ease .1s;
}
.story .link {
	transition: all .2s ease 0s;
}
.story .symbol {
	transition: all .1s ease .13s;
}

.story:hover .text,
.story:hover .link,
.story:hover .symbol,
.story:hover .title {
	transform: scale(1);
}
.story:hover .sticky-container {
	transform: scale(.5);
}

.story:hover {
	transform: scale(1.2);
}

.story .title {
	background: #fff;
	padding: 3px 8px;
	font-size: 1.2vw;
	border-bottom: 2px solid;
	border-right: 1px solid;
}

.link {
	font-size: .9vw;
}

.story .text {
	color: #fff;
	background: #0000005e;
	font-size: .8vw;
	margin-left: -30px;
	width: calc(100% - 35px);
	line-height: 1.2;
	padding: 10px;
	margin-top: 17px;
}

.symbol {
	width: 5vw;
	background: #ffffff85;
	border-radius: 50%;
	padding: 7px;
	margin-left: 78%;
	margin-top: -65px;
}

.one .symbol {
	margin-top: -25px;
	margin-left: 80px;
}

.titleSpecial {
	font-size: 1.4vw;
	color: #fff;
	text-align: center;
	margin-top: 30px;
}

.question {
	text-align: center;
	font-size: 4vw;
	line-height: 1;
	margin:0;
}

.question span {
	background: #fff;
	padding: 0 26px;
	opacity: .7;
	border-radius: 45%;
}

.story .link a {
	text-transform: uppercase;
	color: #fff;
	font-weight: 800;
	border: 1px solid;
	padding: 3px;
	margin-left: -20px;
}

.tigerbirth-Click {
	position:absolute;
	z-index:9999999;
	left: 440px;
	top: 220px;
	width: 600px;
	height: 310px;
}

.tigerbirth-Click a {
	width: 100%;
	height: 100%;
	display: block;
	cursor:crosshair;
}

/* The sticky note itself */

.sticky-container {
	position: absolute;
	width: 200px;
	transform: scale(.5);
	top: -17px;
}

.one .sticky-container {
	left:90px;
	top: -37px;
}

.sticky-content {
  background: linear-gradient(
    2deg,
    rgba(187, 235, 255, 1) 0%,
    rgba(187, 235, 255, 1) 12%,
    rgba(170, 220, 241, 1) 75%,
    rgba(195, 229, 244, 1) 100%
  );
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  font-family: arial;
	font-size: 1rem;
	line-height: 1.5;
	padding: 11px 34px 34px 17px !important;
  clip-path: url(#stickyClip);
}

.nmc .sticky-content {
	background: linear-gradient(
    2deg,
    rgba(75, 119, 209, 1) 0%,
    rgba(86, 127, 212, 1) 12%,
    rgba(86, 127, 212, 1) 75%,
    rgba(75, 119, 209, 1) 100%
  );
	opacity:1;
}

.nmc .sticky-content p {
	color:#fff;
}

.three .sticky-container {
	width: 261px;
	top: 33px;
}

.four .sticky-container {
	width: 261px;
	left: -60px;
	top:23px;
}

.navControl-left {
	position: fixed;
	left: 5px;
	top: 30px;
	width: 143px;
	height: auto;
	padding: 0 10px;
	line-height: 1.3;
	background: url("../img/time shard map guide background copy.jpg");
	background-size:cover;
	background-position:right top;
	z-index: 999999;
	outline: 1px solid #b3b3b3;
	border: 1px solid #e1e1e1;
	font-size:11px !important;
	transition:all .4s ease;
	max-height: 52px;
	overflow: hidden;
}

.navControl-left h1 {
	cursor:pointer;
}

.openGuide {
	max-height: 90vh;
	overflow: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none !important; 
}

.openGuide::-webkit-scrollbar {
  width:10px !important;
}

.navControl-right {
	position: fixed;
	right: 15px;
	top: 30px;
	height: 105px;
	width: 70px;
	background: #fff;
	z-index: 99999;
}

.navControl-right img {
	width:80%;
	margin-left:10%;
	margin-top:10%;
	opacity:.6;
}

.navControl-right p {
	font-size:13px;
	text-align:center;
	line-height:1.1;
	margin-top:5px;
	color:#706E6E;
}