.service-slider{
	/*
		*	@note	Normally there is no width set since
					we are using this compnoent in a flex container.

					The width specified is for development purposes,
					change this when deploying to production or using
					it in a real project.
	*/
	/*width: 400px;*/
	margin: 32px auto 0px;
	text-align: center;
	/*border: 1px solid #DDD;*/
	box-sizing: border-box;
	overflow: hidden;
}
	.service-slider span{
		display: block;
		width: 219px;
		height: 72px;
		margin: 0px auto 8px;
		background-image: url("../media/svg/slider-nav.svg");
		background-repeat: no-repeat;
	}

	.arrow-slider-screen{
		position: relative;
		transition: transform 0.2s ease-in;
	}
		.arrow-slider-item{
			position: absolute;
			width: 100%;
			box-sizing: border-box;
			margin: 0px;
			margin-top: 8px;
			color: #ADD6D9;
			font-size: 24px;
			font-weight: 500;
			font-family: "Montserrat";
		}
		.arrow-slider-focused-item{
			display: block;
			color: #16CCD9;
		}


/* 	
	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

	*	Arrow Slider - Responsive Rules

	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
*/
@media screen and (min-width: 768px){
	.service-slider{
		display: flex;
		/*width: 480px;*/
		/*height: 220px;*/
		margin: 64px auto;
		text-align: center;
		/*border: 1px solid #DDD;*/
		box-sizing: border-box;
		overflow: hidden;
	}
		.service-slider span{
			display: block;
			background-repeat: no-repeat;
		    width: 72px;
		    height: 219px;
		    flex-shrink: 0;
		    margin: 0px;
		    background-image: url(../media/svg/slider-nav-v.svg);
		}
		.arrow-slider-screen{
			flex-grow: 1;
			position: relative;

			/*
				*	This starts the slider screen with an offset 
					from the top by 50% - (item.height / 2).
			*/
			transform: translateY(50%);
			text-align: center;
		}
			.arrow-slider-item{
				display: block;
				position: absolute;
					transform: translateX(-32px);
				margin: 0px 0px 0px 0px;
				box-sizing: border-box;

				text-align: left;

				transition-property: padding, margin, color, transform;
				transition-duration: 0.2s;
				transition-timing-function: ease-in;
			}
			.arrow-slider-focused-item{
				padding: 0px 0px 0px 8px;
				transform: translateX(0px);
			}
}