// @import 'compass';
// @import 'breakpoint';

.mk-carousel{
	height: 500px;
	overflow: hidden;
	display:none;
	position: relative;
	z-index: 999;
	font-size: 0;
	text-align: left;
	@media (max-width: 767px) {
		height: 300px;
	}
	>img{
		height: 200px;
		position: relative;
		left: 50%;
		top: 50%;
		margin-top: -100px;
		margin-bottom: 100%;
		opacity: 0.7;
		cursor: pointer;
		// @include transition(all 0.3s ease);
		// @include transform(perspective(200px) rotateY(-50deg));
		// -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(0, 0, 0, 0.5)));
		transition: all 0.3s ease;
		transform: perspective(200px) rotateY(-50deg);
		-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(0, 0, 0, 0.5)));
		@media (max-width: 767px) {
			height: 100px;
			margin-top: -50px;
		}
		&.active{
			z-index: 2;
			opacity: 1;
			// @include transition(all 0.3s ease);
			// @include transform(rotateY(0deg) scale(1.3));
			transition: all 0.3s ease;
			transform: rotateY(0deg) scale(1.3);
		}
		&.image-left{
			// @include transform(perspective(200px) rotateY(50deg));
			transform: perspective(200px) rotateY(50deg);
		}
	}
	.mk-nav-controls{
		position: absolute;
		z-index: 999;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		padding: 0;
		// width: 200px;
		font-size: 12px;
		text-align: center;
		li{
			display: inline-block;
			a{
				text-decoration: none;
				text-transform: uppercase;
				color: #999;
				display: inline-block;
				padding: 7px 16px;
				line-height: 1;
				border: 1px solid #ddd;
				transition: all 0.3s ease;
				// display: block;
				// margin: 3px;
				word-break: break-word;
				&:hover, &:focus, &:active{
					border-color: #eee;
					background: #eee;
					color: #777;
				}
			}
		}
	}
}