@import "variables";
//aimbox
.aimbox-link {
	&.hover {}
	&.click {
		cursor: pointer;
	}
	&.in {}
}

.aimbox {
	position: relative;
	visibility: hidden;
	opacity: 0;
	@media(min-width: 992px){
		touch-action: none;
		user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
	}
	//@include transition(none !important);
	.aimbox-controls {
		//position: absolute; top: 32px; right: 32px;
		position: relative;
		z-index: 555;
		padding: 0 0 4px;
		list-style: none;
		text-align: right;
		a {
			background-color: rgba(255,225,255,0.6);
			background-position: 50% 50%;
			background-size: 75%;
			background-repeat: no-repeat;
			border: none;
			display: inline-block; width: 20px; height: 20px;
			margin-left: 8px;
			opacity: 1;
			@include border-radius(2px);
			&:hover { opacity: 1; }
			&.closer {
				background: $white;
				position: relative; top: 0; right: 0;
				&:before, &:after {
					background: $black;
					width: 85%;
				}
			}
			&.fullscreen {
				background-color: $white;
				//background-size: 100%;
				//background-image: url(../templates/images/full-screen.png);
				background-image: url(../images/icons/full-screen.png);
				position: absolute; top: 100%; right: 0;
				width: 24px; height: 24px;
				margin: 8px 8px 0 0;
			}

			&:hover {
				opacity: 1;
			}
		}
	}
	.aimbox-image {
		position: relative;
		overflow: hidden;
		& > img {
			display: block;
			//width: 100%;
		}
		//.catwalk { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
	}
	.aimbox-zoom {
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 777;
		overflow: hidden;
		cursor: zoom-out;
		img {
			position: absolute; top: 0; left: 0;
		}
	}
	&.preview {
		background: #1A1A1A;
		position: absolute; top: 0; left: 0;
		z-index: 9999;
		padding: 24px;
		.aimbox-controls {
			margin: -15px 0 0;
		}
	}
	&.overlay {
		background: #2C2C2C;
		background: rgba(255,255,255,0.95);
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 9999;
		.aimbox-image {
			//position: absolute; top: 50%; left: 50%;
			position: absolute; top: 12px; right: 12px; bottom: 12px; left: 12px;
			display: block;
			overflow: visible;
			//@include transform(translateX(-50%) translateY(-50%));
			.closer {
				position: absolute; top: -12px; right: -12px; bottom: -12px; left: -12px;
				z-index: 1;
				display: block;
				width: auto;
				height: auto;
				&:before, &:after {
					display: none;
				}
			}
			img {
				position: absolute; top: 50%; left: 50%;
				z-index: 55;
				display: block;
				max-width: 100% !important;
				max-height: 100% !important;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
		.aimbox-controls {
			position: absolute; top: 16px; right: 16px;
			margin: 0;
			a {
				width: 24px;
				height: 24px;
				&.closer {
					background: #2C2C2C;
					&:before, &:after { background: #fff; }
				}
				&.fullscreen { display: none; }
			}
		}
		.overlay-tip {
			background: rgba(0,0,0,0.5);
			position: absolute; top: 16px; left: 50%;
			z-index: 888;
			display: block; padding: 8px 16px;
			color: #fff;
			@include border-radius(50px);
			@include transform(translateX(-50%));
			@media(max-width: 991px){
				display: none !important;
			}
		}
		.overlay-closer {
			position: absolute; bottom: 32px; left: 50%;
			z-index: 888;
			display: block;
			@include transform(translateX(-50%));
			.btn {
				padding: 8px 20px 10px;
			}
		}
	}
	&.in {
		visibility: visible;
		opacity: 1;
	}
}

.catwalk {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	z-index: 77;
	@media(min-width: 992px){
		touch-action: none;
		user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
	}
	.catwalk-loading {
		position: absolute; top: 24px; left: 24px;
		.cwl-number {
			position: relative; z-index: 5;
			display: block; width: 80px; height: 80px;
			font-size: 18px;
			line-height: 80px;
			text-align: center;
		}
		.cwl-progress {
			border: 6px solid #2DB92D;
			border-bottom-color: transparent;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 80px; height: 80px;
			margin: -40px 0 0 -40px;
			@include border-radius(50%);
			animation: rotate 1.5s linear infinite;
			-webkit-animation: rotate 1.5s linear infinite;
			@keyframes rotate {
				0% { @include transform(rotate(0deg)); }
				100% { @include transform(rotate(360deg)); }
			}
			@-webkit-keyframes rotate {
				0% { @include transform(rotate(0deg)); }
				100% { @include transform(rotate(360deg)); }
			}
		}
	}
	.catwalk-tip {
		background: rgba(0,0,0,0.5);
		position: absolute; bottom: 16px; left: 50%;
		z-index: 888;
		display: block; padding: 8px 16px 8px 40px;
		color: $white;
		@include border-radius(50px);
		@include transform(translateX(-50%));
		&:before {
			content: '';
			background: url(../images/icons/catwalk-rotater.png) no-repeat -1em 0;
			background-size: auto 100%;
			position: absolute; top: 50%; left: 12px;
			display: block; width: 24px; height: 24px;
			margin-top: -12px;
			font-size: 24px;
		}
	}
	.catwalk-list {
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		visibility: hidden;
		opacity: 0;
		&:before {
			content: '';
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			z-index: 444;
			@media (min-width: 992px){
				touch-action: none;
			}
		}
		li {
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			visibility: hidden;
			opacity: 0;
			img {
				display: block;
				width: 100%;
			}
			&.in {
				visibility: visible;
				opacity: 1;
				z-index: 333;
			}
		}
	}
	&.in {
		.catwalk-loading { display: none; }
		.catwalk-list {
			visibility: visible;
			opacity: 1;
		}
	}
	&.running {}

	&:not(.running){
		cursor: zoom-in;
	}
}
.catwalk-mark {
	background: #2C2C2C;
	background: rgba(0, 0, 0, 0.6);
	position: absolute; bottom: 0; right: 0;
	z-index: 3;
	padding: 2px 8px;
	color: #fff;
	@media (max-width: 767px){
		padding: 1px 4px;
		font-size: 11px;
	}
}