.navigator {
	opacity: 0;
	position: fixed;
	top: 50%;
	right: 48px;
	z-index: 999;

	@include media-query(palm) {
		display: none;
	}
}

.navigator__item {
	display: block;
	padding: $_u4;
	background: rgba(255,255,255, 0.01);

	.bullet {
		width: $_u2;
		height: $_u2;
		border-radius: 50%;
		border: 2px solid white;
		@include transition(background-color, border-color .1s ease-in-out);
		cursor: pointer;
	}

	@include transform(scale(0.7));
	opacity: 0;
}

.navigator__item--selected {
	position: absolute;
	top: 0; left: 0;

	.bullet {
		background: white;
		border-color: transparent;
		border-color: rgba(255, 255, 255, 0.01);
		cursor: default;
	}

	@include transform(scale(0.7));
	opacity: 0;
}

.navigator--black {

	.navigator__item .bullet {
		border-color: black;
	}

	.navigator__item--selected .bullet {
		background: black;
	}
}