:root {
  /* cursor: none; */
  --cursorX: 50vw;
  --cursorY: 50vh;
}
:root:before {
  z-index:0;
  display: inline-block;
  position: static;
  pointer-events: none;
  background: transparent;
}	
html{ min-height: 100%}
body { 
    background-color: #000;
    background-size: 100%;
    font-family: "Open-Sans", sans-serif;
    color: #fff;
}
a {
	color:#fff;
	text-decoration: none;
}
a:hover {
	color: #fff;
}
p {
	margin-top: 1.1em;
}
img {
	max-width: 100%;
	height: auto;
}
a.audioLink {
	text-decoration: underline;
	cursor: pointer;
	}
.img-thumbnail{
    background: transparent;
	border: 0 none;
    box-shadow: none;
	margin: 0 1em 1em 0;
	width: 200px;
	height: auto;
	}

.hotspot-title {
	display: none;
	color: #fff;
	text-transform: lowercase;
 	transition: all cubic-bezier(.8,0,.2,1) .4s;
}
.hotspot-title {
	font-size: .75rem; 
	margin-left: -1rem; 
	width: min-content; 
	line-height: 75%;
	}
.osdImage {
	 height:70vh;
}	

.material .waypoints-text { display:none}
.material.waypoints-off .waypoints-text:last-of-type { display:none }
.material:not(.waypoints-off) .waypoints-text:first-of-type { display:none }		

.material .transcript-text { display:none}
.material.transcript-off .transcript-text:last-of-type { display:none }
.material:not(.transcript-off) .transcript-text:first-of-type { display:none }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .hotspot-title {
	  font-size: 1rem; 
	  margin-left: -1rem; 
	  width: min-content;
	}
	.osdImage {
	 
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .hotspot-title {
	  font-size: 1rem; 
	  margin-left: -1rem; 
	  width: min-content;
	}
	.osdImage {
	 
	}
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
	.hotspot-title {
	  font-size: 1rem; 
	  margin-left: -1.5rem; 
	  white-space: nowrap; 
	  display: block;
	}
	.osdImage {
	 
	}
	.material .waypoints-text { display:none}
	.material.waypoints-off .waypoints-text:last-of-type { display:inline }
	.material:not(.waypoints-off) .waypoints-text:first-of-type { display:inline }		

	.material .transcript-text { display:none}
	.material.transcript-off .transcript-text:last-of-type { display:inline }
	.material:not(.transcript-off) .transcript-text:first-of-type { display:inline }	
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
:root:before {
  z-index:9;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  pointer-events: none;
  background: radial-gradient(
    circle 20vmax at var(--cursorX) var(--cursorY),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.5) 80%,
    rgba(0,0,0,1) 100%
  )
}
  .hotspot-title {
	  font-size: 1rem; 
	  margin-left: -1.5rem; 
	  white-space: nowrap; 
	  display: block;
	}
	.osdImage {
		 
	}	
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  .hotspot-title {
	  font-size: 2rem; 
	  margin-left: -2rem; 
	  white-space: nowrap; 
	  display: block;
	}  
	.osdImage {
	  height: 85vh;
	}
}

.hotspot-wrapper {
  position: relative;
  margin: auto;
  max-width: 100vw;
}
.hotspot {
	position: absolute;
	display: block;
	text-decoration:none;
}

.pulse {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px; 
  margin-top: 10px;
  background: transparent;
  cursor: pointer;
 
}
.pulse:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: block;
  width: 300%;
  height: 300%;
  box-sizing: border-box;
  margin-left: -100%;
  margin-top: -100%;
  border-radius: 45px;
  background-color: #fff;
  opacity: 1;/* opacity: 0.2; */
 -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
         animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulse:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  z-index: 2;
  opacity: 0.5;
  background-color: #fff;
  -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
          animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@-webkit-keyframes pulse-ring {
  0% {
    -webkit-transform: scale(0.33);
            transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

@keyframes pulse-ring {
  0% {
    -webkit-transform: scale(0.33);
            transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes pulse-dot {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@keyframes pulse-dot {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}	

.my-modal {
    position: fixed;
    top: 0;
    left: 0;
}
.my-modal-bkgd {
	background-color: #605241;
}	
.my-modal-toolbar {
	background-color: #221c16;
}
	
.modal-content{
	color: #fff;
}
	
.modal-fullscreen .modal-body {
    overflow-y: scroll;
}
	
.offcanvas{
	background-color: #605241;
	color: #fff;
}
.offcanvas-start {
  width: 30vw;
}	

.osdImage {
	position: relative;
	background: #fff;
	width: 100%;
	overflow: visible;
}
.osdImage img {
	position: absolute;
	width: 100%;
	height:auto;
	top: 10%;
	left: 10%;
}

.toolbarOverlay {
	position: absolute;
	bottom: 20px;
	right: 1px;
	color: #efefef;
	text-align: right;
}
.toolbarDiv {
	z-index:99;
	padding-bottom:1rem;
}	
.toolbarOverlay a {
	color:#fff;
	text-decoration: none;
}
.toolbarOverlay a:hover {
	color: #fff;
}
.toolbarDiv .material-icons {
	vertical-align: middle;
	line-height: 0 !important;
}
 	
.material-icons.md-18 { font-size: 1.125rem; }
.material-icons.md-24 { font-size: 1.5rem; }
.material-icons.md-36 { font-size: 2.25rem; }
.material-icons.md-48 { font-size: 3rem; }
.material-icons.md-50 { font-size: 3rem; }
.material-icons.md-56 { font-size: 3.5rem; }
.material-icons.md-64 { font-size: 4rem; }
.material-icons.md-80 { font-size: 5rem; }


.material .material-icons { display:none }
.material.material-off .material-icons:last-of-type { display:inline }
.material:not(.material-off) .material-icons:first-of-type{ display:inline }
/*
.material .waypoints-text { display:none}
.material.waypoints-off .waypoints-text:last-of-type { display:inline }
.material:not(.waypoints-off) .waypoints-text:first-of-type { display:inline }		

.material .transcript-text { display:none}
.material.transcript-off .transcript-text:last-of-type { display:inline }
.material:not(.transcript-off) .transcript-text:first-of-type { display:inline }
*/

.hidden { visibility: hidden; }
.visible { visibility: visible; }