/**
 * Base styling
 */

.speech .keyword{
	color: $colour-navy !important;

	&:hover{
		&:after{
			/** TODO: Add Microphone icon **/
		}
	}
}

.keyword--hidden{
	@extend .keyword;
	display: none;

	.speech &{
		display: inline;
	}
}

.speech_output{
	@include clearfix;
	display: none;
	padding: 10px 0;
	border-bottom: 3px solid $colour-navy;

	&.active{
		display: block;
	}
}

.speech_output__text{
	margin: 0 20px;
	text-align: center;
}

.speech_output__retry-link{
	color: #ffffff;
	@include opacity(0.3);

	&:hover,
	&:active{
		@include opacity(1);
	}
}

/**
 * Base styling
 */

.speech .keyword{
	color: $colour-navy !important;
	position: relative;

	&:after{
		/** TODO: Add Microphone icon **/
		font-family: FontAwesome;
		content: "\f130";
		display: block;
		position: absolute;
		top: -1.5em;
		left: 45%;
		opacity: 0;
		-webkit-transform: translateY(1em);

		-webkit-transition: all 0.4s;
	}

	&:hover{
		&:after{
			opacity: 1;
			-webkit-transform: translateY(0);
		}
	}
}

.keyword--hidden{
	@extend .keyword;
	display: none;

	.speech &{
		display: inline;
	}
}

.speech_output{
	@include clearfix;
	display: none;
	padding: 10px 0;
	border-bottom: 3px solid $colour-navy;

	&.active{
		display: block;
	}
}

.speech_output__text{
	margin: 0 20px;
	text-align: center;
}

.speech_output__retry-link{
	color: #ffffff;
	@include opacity(0.3);

	&:hover,
	&:active{
		@include opacity(1);
	}
}

Add hover style for speech keywords
Add hover style for speech keywords
