.caption-hotspot-parent {  }

.caption-text-hotspot { 
	width: 320px; background: rgba(0,0,0,0.7); color: #ccc; position: absolute; padding: 5px;  pointer-events: none; opacity: 0;
	transition: all 0.4s ease;
	font-size: 1em;
	cursor: default;
 }

.caption-text-hotspot-container {   }
.caption-text-hotspot-container .caption-text-hotspot-title { color: #fff; font-size: 1em; }
.caption-text-hotspot-container .caption-text-hotspot-title div:nth-child(1) { font-style: italic;  }
.caption-text-hotspot-container .caption-text-hotspot-option {  font-size: .8em; }
.caption-text-hotspot-container .caption-text-hotspot-desc { font-size: 0.8em; max-height: 140px; overflow: hidden; overflow-y: auto;}

.caption-text-hotspot-container .caption-text-hotspot-title,
.caption-text-hotspot-container .caption-text-hotspot-option,
.caption-text-hotspot-container .caption-text-hotspot-desc { padding: 0 10px; }


/*
.caption-hotspot-parent:hover .caption-text-hotspot { opacity: 1; pointer-events: auto; }*/

.caption-hotspot-parent.on .caption-text-hotspot { opacity: 1; pointer-events: auto; }


.caption-text-hotspot-arrow { 
	position: absolute; 
	width: 0; 
	height: 0;  }
.caption-text-hotspot-arrow.top {
	left: 50%;
	margin-left: -12px;
	top: -15px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	
	border-bottom: 15px solid rgba(0,0,0,0.7);
  }
  
.caption-text-hotspot-arrow.bottom {
	left: 50%;
	margin-left: -12px;
	bottom: -15px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	
	border-top: 15px solid rgba(0,0,0,0.7);
}


.caption-text-hotspot-arrow.lefttop {
	left: 0;
	margin-left: 0;
	top: -15px;
	border-left: 0px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 15px solid rgba(0,0,0,0.7);
}

.caption-text-hotspot-arrow.righttop {
	right: 0;
	margin-left: 0;
	top: -15px;
	border-left: 12px solid transparent;
	border-right: 0 solid transparent;
	border-bottom: 15px solid rgba(0,0,0,0.7);
}

.caption-text-hotspot-arrow.right {
top:50%;
right:0;
margin-top: -12px;
margin-right: -15px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;

border-left: 15px solid rgba(0,0,0,0.7);
}

.caption-text-hotspot-arrow.left {
left:0;
top:50%;
margin-left: -15px;
margin-top: -12px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent; 

border-right:15px solid rgba(0,0,0,0.7);
}

.caption-text-hotspot-arrow.rightbottom {
	right: 0;
	margin-left: -12px;
	bottom: -15px;
	border-left: 12px solid transparent;
	border-right: 0 solid transparent;
	
	border-top: 15px solid rgba(0,0,0,0.7);
}

.caption-text-hotspot-arrow.leftbottom {
	left: 0;
	margin-left: 0;
	bottom: -15px;
	border-left: 0 solid transparent;
	border-right: 12px solid transparent;
	
	border-top: 15px solid rgba(0,0,0,0.7);
}


.mobile-ver .caption-text-hotspot  { width: 240px; font-size: 0.7em; }