/* Clickable cycling hero image.
   Behaviour: assets/js/hero-cycle.js   Image set: tools/build-hero-cycle.py
   Kept out of main.css so the vendor Fractal stylesheet stays untouched. */

#header .image.phone .inner img {
	cursor: pointer;
}

/* Nav arrows are spans, not buttons, so the template's #header button styling
   (big blue pill) never applies to them. */
#header .image.phone .hero-nav {
	position: absolute;
	bottom: 0.6em;
	width: 1.8em;
	height: 1.8em;
	line-height: 1.7em;
	text-align: center;
	border: solid 1px rgba(255, 255, 255, 0.45);
	border-radius: 100%;
	background-color: rgba(6, 14, 58, 0.55);
	color: #ffffff;
	font-size: 0.8em;
	cursor: pointer;
	opacity: 0;
	-moz-transition: opacity 0.2s ease, background-color 0.2s ease;
	-webkit-transition: opacity 0.2s ease, background-color 0.2s ease;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

#header .image.phone .hero-nav.prev {
	left: 0.5em;
}

#header .image.phone .hero-nav.next {
	right: 0.5em;
}

#header .image.phone:hover .hero-nav,
#header .image.phone .hero-nav:focus {
	opacity: 1;
}

#header .image.phone .hero-nav:hover {
	background-color: rgba(6, 14, 58, 0.9);
	border-color: #ffffff;
}

/* Touch devices have no hover, so keep the arrows permanently visible there. */
@media (hover: none) {
	#header .image.phone .hero-nav {
		opacity: 0.75;
	}
}