/* DOTS */
.dots canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
}

#dots {
	/* JS Overrides */
  	--dot-color: var(--blue, #1687ac);
  	--dot-line-color: #ffffff;
  	--dot-line-opacity: 0.22;
  	--dot-icon-background: #EE6F00;
  	
  	padding:0;
  	margin:20px 0px 20px;
	position: relative;
	height: 300px;
	width: 100%;
	overflow: hidden;
	background:
		radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06), transparent 5%),
		radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04), transparent 5%),
		linear-gradient(135deg, #005c78 0%, #003f54 10%);
	border-radius:4px;
	outline:2px solid var(--gray-9);
}

/* Caption accompanies the active dot sequence; JS controls only opacity/text. */
#dots-caption {
	position: absolute;
	z-index: 4;
	left: 20px;
	bottom: 20px;
	width:100%;
	color: #ffffff;
	font-size: 24px;
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 24px;
	opacity: 0;
	pointer-events: none;
	text-shadow:0px 0px 3px #000, 0px 0px 3px var(--blue), 0px 0px 3px var(--blue);
}

	#dots-caption::before {
		content: "What's hiding out there for you?";
		position: absolute;
		top:-16px;
		font-size: 11px;
		text-transform:uppercase;
		font-family: var(--font-body);
		font-weight: 300;
		line-height: 12px;
		pointer-events: none;
	}