/*
 * West Coast Picture - Custom CSS
 * Accessibility and site-specific improvements
 */

/*
 * Multiscroll navigation accessibility
 * Large touch targets while keeping visible dots small.
 */
#multiscroll-nav li {
	display: block;
	position: relative;
	width: 56px;
	height: 56px;
	margin: 12px 0;
}

#multiscroll-nav li a {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 56px;
	height: 56px;
	cursor: pointer;
	text-decoration: none;
}

#multiscroll-nav li a span {
	position: static;
	display: block;
	width: 8px;
	height: 8px;
	margin: 0;
	border: 1px solid #000;
	border-radius: 50%;
}

/* Keep the navigation targets away from the up/down controls */
#multiscroll-nav.right {
	right: 0;
}

/*
 * Replace the old Ionicons arrows with Font Awesome.
 * This allows the Ionicons stylesheet and font to remain removed.
 */
#multiscroll-nav .control-top::before,
#multiscroll-nav .control-bottom::before {
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	display: inline-block;
}

#multiscroll-nav .control-top::before {
	content: "\f106";
}

#multiscroll-nav .control-bottom::before {
	content: "\f107";
}

/*
 * Multiscroll itself is disabled below 1200px,
 * so hide its navigation controls there as well.
 */
@media (max-width: 1199px) {
	#multiscroll-nav {
		display: none !important;
	}
}