.dotnav {
  /* THESE 2 LINES CENTER MENU CONTENT V */
  position: fixed;
  height: 100%;

  width: 1rem;
  /* top: calc((100vh - 12rem) / 2); * vertical placement */
  right: .75rem; /* space from browser right edge */
	/* display: none; * HIDE ON MOBILE */
  z-index: 998;
  margin: 0;
  padding: 0;

  /* background-color: rgba(0, 0, 255, 0.3); * FPO BLUE */
}

.dotnav > ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  cursor: default;

  /* THESE 5 LINES CENTER MENU LIST V&H */
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.dotnav > ul > li {
  position: relative;
  margin: 0 0 1.25rem 0; /* circle spacing */
  width: .75rem; /* circle width */
  height: .75rem; /* circle height */
  cursor: pointer;
}

.dotnav > ul > li > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2); /* border color */
  text-indent: -999rem; /* HIDE ELEMENTS */
  cursor: pointer;
  overflow: hidden; /* hidden HIDE ELEMENTS */
  /* background-color: rgba(255, 255, 255, 0.3); * circle fill color inactive */
  transition: all var(--duration-long) ease;

  box-shadow: 0 0 8px 8px rgba(51, 51, 51, 0.1), 0 0 2px 2px rgba(0, 0, 0, 0.1);
}

.dotnav > ul > li > a:hover,
  background-color: var(--white); /* circle fill color active */
}

/* These mirror the selector styles above but will be added/remove via js for scroll tracking. They only work this way, they cannot be combined or abbreviated. */
.dotnav-inactive {
  background-color: rgba(255, 255, 255, 0.3); /* circle fill color inactive */
}

.dotnav-inactive:hover {
  background-color: var(--white); /* circle fill color inactive */

  box-shadow: 0 0 0 0 rgba(51, 51, 51, 0), 0 0 0 0 rgba(0, 0, 0, 0);
}

.dotnav-active {
  background-color: var(--white); /* circle fill color active */
}

.dotnav-active :hover {
  background-color: var(--white); /* circle fill color active */

  box-shadow: 0 0 8px 8px rgba(51, 51, 51, 0.1), 0 0 2px 2px rgba(0, 0, 0, 0.1);
}

/* ::::: PHONES & TABLETS ::::: */
@media
	screen and (min-width: 420px) and (max-width: 768px) and (orientation: portrait),
	screen and (min-width: 650px) and (max-width: 768px) and (orientation: landscape)
{
	.dotnav {
		right: 1rem; /* space from browser right edge */
	}
}

/* ::::: TABLETS & DESKTOPS ::::: */
@media
	screen and (min-width: 769px) and (orientation: portrait),
	screen and (min-width: 769px) and (orientation: landscape)
{
	.dotnav {
		right: 2rem; /* space from browser right edge */
	}
}