div.carousel {
	position: relative;	
	width: 100%;
	height: auto;
	overflow: hidden;

	div.control {
		position: absolute;
		top: 0;
		bottom: 0;

		width: 64px;

		button {
			width: 100%;
			height: 100%;

			border: none;

			background: none;
		}
	}

	div.control.prev {
		left: 0;

		&:hover {
			background: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.0));

			button {
				background: url('images/arrow-prev.png') no-repeat center left;
			}
		}
	}

	div.control.next {
		right: 0;

		&:hover {
			background: linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.0));

			button {
				background: url('images/arrow-next.png') no-repeat center right;
			}
		}
	}


	&:hover {
		div.skip-links {
			opacity: 1;
		}
	}

	div.skip-links {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 16px;

		text-align: center;

		opacity: 0;

		@media screen and (max-width: 960px) {
			opacity: 1;
		}

		-webkit-transition: opacity 0.3s ease-in-out;
		-moz-transition: opacity 0.3s ease-in-out;
		transition: opacity 0.3s ease-in-out;

		button.skip {
			background-color: rgba(0, 0, 0, 0.5);
			border: none;
			width: 8px;
			height: 8px;
			padding: 0;
			border-radius: 100%;
			margin: 0 6px;

			transition: all 0.3s ease-in-out;

			&:hover,
			&.active {
				background-color: #FFF;

				transform: scale(1.5);
			}
		}
	}

	div.slides {
		display: block;
		z-index: 2;

		a {
			display: none;
			position: absolute;
			top: 0;

			text-align: center;
			visibility: hidden;
			width: 100%;
			height: auto;

			text-decoration: none;
			border: none;
			margin: 0;

			transition: all 0.5s ease-in-out;

			&.active {
				visibility: visible;
				position: relative;
				display: block;
			}

			&.move-in,
			&.move-out {
				display: inline-block;
			}
		}

		img { 
			margin: 0;
		}

		a.move-in,
		a.move-out {
			visibility: visible;
			animation-duration: 0.6s;
			animation-timing-function: ease-out;
		}

		a.reverse {
			animation-direction: reverse;
			animation-timing-function: ease-in;
		}

		a.move-in {
			animation-name: move-in;
		}

		a.move-out { /* mmove right */
			animation-name: move-out;
		}

		@keyframes move-in {
			from { left: 100%; }
			to { left: 0%; }
		}

		@keyframes move-out {
			from { left: 0%; }
			to { left: -100%; }
		}
	}
}