html,body {
  font-family: 'Roboto', sans-serif;
	font-weight: 300;
  padding:0;
  margin:0;
  background:black;
  font-weight: 400;
}

* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bg-dark-blue {
	background-color: #011142 !important;
}

.scene-container {
	position: relative;
	width: 100%;
	height: 700px; 
  overflow:hidden;
}

.scene-container:focus {
  outline:none;
}

.scene-box {
	 width: 100%;
     height: 100%;            
     position: absolute;
     top: 0;
     left: 0;
	 background: none;
   outline: none !important;
   border: none;
   padding: 0 !important;
}

.scene-overlay {
	 width: 100%;
     height: 100%;            
     position: absolute;
     top: 0;
     left: 0;
	 z-index: 999;
	 background: none;
	 pointer-events: none;
}

.animationBtn {
	cursor: pointer;
	pointer-events: all;
}
.animationBtn:hover {
	/*text-decoration: underline;*/
}


.disabledBtn {
	opacity: .5;
	pointer-events: all;
};

#spine-btns {
	position: absolute;
	right: 50px;
	top: 20px;
	z-index: 10000;
	width: 200px;
	pointer-events: all;
}

#labels-menu {
	pointer-events: none;
}

#buttons {
	opacity: 0;
}

#renderCanvas {
  width: 100%;
   
	height: 700px !important;
    touch-action: none;
	top: 0;
  left: 0;
  outline: none;
}

.scene-ui {
	z-index: 10000;
	position: absolute;
	top: 0;
	left: 0;
	height: 700px !important;
	width: 100%;
	background: none;
	border-radius: 8px;
	color: white;
	pointer-events: none;
}

#spine-controls {
	width: 200px;
	height: 60px;
	border-radius: 8px;
	background: rgba(0,0,0,.5);
	margin-right: 30px;
	pointer-events: none;
}

#spine-key {
	width: 300px;
	border-radius: 8px;
	background: rgba(0,0,0,.5);
	margin-right: 30px;
	margin-top:30px;
}



#spine-labels-holder {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 60px;
	border-radius: 0px;
	background:#222;
  color: white;
}

.loading {
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	margin: auto;
	width: 400px;
	height: 60px;
}

.loading-label {
	color: #222222;
}

#label {
  font-size: 30px;
	line-height: 60px;
}


.uiBtn {
	cursor: pointer;
	pointer-events: all;
}

.labelBtn {
	cursor: pointer;
	pointer-events: all;
}

#zoomInBtn {
	display: block;
	position: relative;
	width: 50px;
	height: 50px;
	background: rgba(0,0,0,.5);
	color: white;
	pointer-events: all;
}

#zoomOutBtn {
	display: block;
	position: relative;
	width: 50px;
	height: 50px;
	background: rgba(0,0,0,.5);
	color: white;
	pointer-events: all;
}




.btn-label {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none; 
  pointer-events: none;
}


.btn-custom {
  color:#233138;
  background: white;
  border: solid 2px #233138;
  font-size: 24px;
}
.btn-custom:hover {
  color:white;
  background: #233138;
}

.purple-text {
  color:#233138;
  font-weight: 700;
}

ul li {
  font-weight: 400;
}

.page-count {
  font-size: 24px;
  line-height: 60px;
  color:#233138;
}

.nav-icon {
  font-size: 2em;
  color:#233138;
  cursor: pointer;
  width: 150px;
  white-space: nowrap; 
}

.nav-icon:hover {
  color:#a092a6;
}

.icon {
  font-size: 1em;
}

.nav-icon.disabled {
  color:#ccc;
  pointer-events: none;
}

.locked {
  pointer-events: none;
  color: #ccc;
}

button.nav-btn   {
	font-size: 22px;
  border:none !important;
  background: none !important;
}


.quiz-btn {
  border: solid 2px #233138;
  color: #233138;
}

.quiz-btn:hover {
  background: #233138;
  color: #fff;
}

.quiz-btn.disabled {
  border: solid 2px #e1e1e1;
  color:#e1e1e1;
  pointer-events: none;
}

.option-text {
  font-size: 28px;
  color: #222;
  border: solid 2px #CCC;
  padding: 20px;
}

.option-text:hover {
  font-size: 28px;
  color: #233138;
  border: solid 2px #233138;
  padding: 20px;
}

.option-text-selected {
  font-size: 28px;
  background: #233138;
  color: #fff;
  border: solid 2px #233138;
  padding: 20px;
}

.no-bullets li {
  list-style-type: none;
}

#footer {
	/*height:60px;
	background: none; /*#f1f1f1*/
	z-index: 20000;
}

.bg-light {
  background: #FFFFFF !important;
}

.tick {
  color: #233138;
}
.tick2 {
  background-color: red  !important;
}
/* TRANSITIONS */


.viewfade.ng-enter, .viewfade.ng-leave {
  transition: .5s linear all;
  opacity: 1;
}

.viewfade.ng-enter {
  opacity:0;
}

.viewfade.ng-enter.ng-enter-active {
  opacity:1;
}

.viewfade.ng-leave {
    opacity:0;
}

.viewfade.ng-leave.ng-leave-active {
  opacity:0;
}