@mixin transform($transforms) {
	-moz-transform: $transforms;
	-o-transform: $transforms;
	-ms-transform: $transforms;
	-webkit-transform: $transforms;
    transform: $transforms;
}

@mixin transition($transition...) {
    -moz-transition:    $transition;
    -o-transition:      $transition;
    -webkit-transition: $transition;
    transition:         $transition;
}

div.carousel {
	position: relative;	
	max-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;

			cursor: pointer;
		}
	}

	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;
		}

		@include transition(opacity 0.3s ease-in-out);

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

			cursor: pointer;

			@include transition(all 0.3s ease-in-out);

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

				@include transform(scale(1.5));
			}
		}
	}

	div.slides {
		display: block;
		z-index: 2;
		width: auto;
		white-space: nowrap;

		@include transition(all 0.5s ease-in-out);

		a {
			display: inline-block;
			position: relative;
			
			max-width: 100%;
			height: auto;

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

			
		}

		img { 
			width: 100%;
			margin: 0;
		}
	}
}