html {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		touch-action: manipulation;
	}
	
	body {
		margin: 0;
		margin-left: 1em;
		background-color: #1A1107;
	}

	text, li, p {
		font-family: 'Montserrat', sans-serif;
		font-size: 15px;
	   -moz-user-select: -moz-none;
	   -khtml-user-select: none;
	   -webkit-user-select: none;			
	}

	li, a, p {
		font-size: 14px;
		color: #fff;
		margin: 15px 0;
		text-decoration: none;
	}
	
	h2, h3 { font-family: 'Montserrat', sans-serif; }
		
	a:hover { color: #ffa845; }

	ul { list-style: none; }

	.modal-link {
		color: white;
		padding: 20px;
		font-size: 18px;
	}
	.modal-link:hover, 	.modal-bookLink:hover { color: #468966; }

	
	/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  padding-top: 100px; /* Location of the box */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	/* Modal Content */
	.modal-content {
	  position: relative;
	  background-color: #fefefe;
	  margin: auto;
	  padding: 0;
	  border: 0px solid #888;
	  width: 80%;
	  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	  -webkit-animation-name: animatetop;
	  -webkit-animation-duration: 0.4s;
	  animation-name: animatetop;
	  animation-duration: 0.4s
	}

	/* The Close Button */
	.close {
	  color: white;
	  float: right;
	  font-size: 28px;
	  font-weight: bold;
	}

	.close:hover,
	.close:focus {
	  color: #000;
	  text-decoration: none;
	  cursor: pointer;
	}

	.modal-header {
	  padding: 2px 16px;
	  background-color: #468966;
	  color: white;
	}

	.modal-body {
		padding: 2px 16px;
		background-color: #1A1107;
	}

	.modal-footer {
	  padding: 2px 16px;
	  background-color: #140d05;
	  color: white;
	}


	.inputfile {
		width: 0.1px;
		height: 0.1px;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		z-index: -1;
	}

	.inputfile + label {
		font-size: 14px;
		color: #fff;
		display: inline-block;
		cursor: pointer;		
	}

	.inputfile:focus + label,
	.inputfile + label:hover {
		color: #ffa845;
	}
		
	.worldText {	

	}
	
	
	.labelBox { 
		stroke: gray;
	}
	
	.labelBox:hover { 
		cursor: pointer;
		fill: #ffa845;
		fill-opacity: 0.1;
	}	


	.labelBoxAnim { 
		stroke-width: 1px;
		stroke: gray;
		fill-opacity: 0.1;
	}
	  
	.dropCircle {
  
	  animation: 1s grow;
		}
	  @keyframes grow {
		  0% { transform: scale(0.0); -webkit-transform: scale(0.0);} }
		  100% { transform: scale(1.0); -webkit-transform: scale(1.0);}
		}

	}
  
	.node {
	  stroke-width: 2px;
	}

 my-email::after{content:attr(data-domain)}my-email::before{content:attr(data-user) "\0040"}

.btn {
  position: absolute;
  top: 28px;
  left: 30px;
  width: 40px;
  height: 30px;
  cursor: pointer;
}


.menu {
  position: absolute;
  top: 65px;
  left: 0px;
  width: 235px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s;   
  background-color: #26190a;
}

.fade { 
	opacity: 1; 
	pointer-events: auto;
}

span {
  display: block;
  width: 100%;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);
  border-radius: 3px;
  height: 4px;
  background: #AAA;
  transition: all .3s;
  position: relative;
}

span + span {
  margin-top: 8px;
}



.active span:nth-child(1) {
  animation: ease .7s top forwards;
}

.not-active span:nth-child(1) {
  animation: ease .7s top-2 forwards;
}

.active span:nth-child(2) {
  animation: ease .7s scaled forwards;
}

.not-active span:nth-child(2) {
  animation: ease .7s scaled-2 forwards;
}

.active span:nth-child(3) {
  animation: ease .7s bottom forwards;
}

.not-active span:nth-child(3) {
  animation: ease .7s bottom-2 forwards;
}

@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 11px;
    transform: rotate(0);
  }
  100% {
    top: 11px;
    transform: rotate(45deg);
  }
}

@keyframes top-2 {
  0% {
    top: 11px;
    transform: rotate(45deg);
  }
  50% {
    top: 11px;
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}

@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: 11px;
    transform: rotate(0);
  }
  100% {
    bottom: 11px;
    transform: rotate(135deg);
  }
}

@keyframes bottom-2 {
  0% {
    bottom: 11px;
    transform: rotate(135deg);
  }
  50% {
    bottom: 11px;
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(0);
  }
}

@keyframes scaled {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes scaled-2 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}