.product_navigation
{
	@media #{$xlarge-down} {
		display: block;
		width: auto;
		text-align: center;
		padding: 20px 0;
		overflow: hidden;
		border-top-width: 1px;
		border-top-style: solid;

		#nav-below
		{
			padding: 0;

			.product-nav-previous,
			.product-nav-next
			{
				display: inline-block;
				text-align: center;
				width: 50%;

				a
				{
					display: inline-block;
					transition: all .5s;
					font-size: 20px;
					transition: all .3s ease;

					&:hover
					{
						opacity: 1 !important;
					}

					span
					{
						display: inline-block;
						font-size: 10px;
						text-transform: uppercase;
						font-weight: bold;
						text-align: left;
						position: relative;
						top: -5px;
						transition: all .3s ease;
					}

					i
					{
						display: inline-block;
						position: relative;
						width: 15px;
						height: 20px;
						transition: all .3s ease;
					}

					&:hover
					{
						opacity: .7;
					}
				}
			}

			.product-nav-previous
			{
				float: left;
				text-align: left;

				i
				{
					left: -8px;
				}
			}

			.product-nav-next
			{
				float: right;
				text-align: right;

				i
				{
					right: -1px;
				}
			}
		}
	}

	@media #{$xlarge-up} {
		position: fixed;
		left: 100%;
		top: 430px;
		z-index: 999;
		transition: all .5s;
		animation: slide-in-from-right;
		animation-duration: 3s;
		animation-delay: 1.5s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
		transform: translateX(0);

		#nav-below
		{
			.product-nav-previous,
			.product-nav-next
			{
				text-align: center;

				a
				{
					display: block;
					box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
					border-radius: 50%;
					text-align: center;
					padding-top: 6px;
					width: 38px;
					height: 38px;
					margin: 10px 0;
					transition: all .5s;
					font-size: 24px;

					span
					{
						display: none;
					}

					&:hover
					{
						opacity: .7;
					}
				}
			}

			.product-nav-previous
			{
				margin-bottom: 10px;
			}
		}
	}
}

@keyframes slide-in-from-right
{
	0%
	{
		transform: translateX(55px);
	}

	50%
	{
		transform: translateX(-95px);
	}

	75%
	{
		transform: translateX(-95px);
	}

	100%
	{
		transform: translateX(-95px);
	}

}