//
// Fancy Box //
//
div[class^="fancy-box"] {
	overflow: hidden;
	position: relative;
	display: block;
	img {
		@include transition(transform 0.46s cubic-bezier(0.165, 0.84, 0.44, 1));
	}
}

.fancy-box-1 {
	a {
		display: block;
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			opacity: 0;
			background: $color-dark-01;
			width: 100%;
			height: 100%;
			@include transition(ease-out 0.16s);
		}
	}
	.content {
		position: absolute;
		top: 20px;
		left: 20px;
		z-index: 2;
		display: inline-block;
		background: $color-dark-09;
		padding: 10px 20px;
		color: $color-white-09;
		@include breakpoint-less(md) {
			top: 16px;
			left: 16px;
		}
		h1,h2,h3,h4,h5,h6 {
			color: $color-white-09;
		}
		//
		// Positions //
		//
		&.top-center {
			top: 20px;
			right: auto;
			bottom: auto;
			left: 50%;
			@include transform(translateX(-50%));
			@include breakpoint-less(md) {
				top: 16px;
				right: auto;
				bottom: auto;
				left: 50%;
			}
		}
		&.top-right {
			top: 20px;
			right: 20px;
			bottom: auto;
			left: auto;
			@include breakpoint-less(md) {
				top: 16px;
				right: 16px;
				bottom: auto;
				left: auto;
			}
		}
		&.middle {
			top: 50%;
			right: auto;
			bottom: auto;
			left: 50%;
			@include transform(translate(-50%,-50%));
		}
		&.bottom {
			top: auto;
			right: auto;
			bottom: 20px;
			left: 20px;
			@include breakpoint-less(md) {
				top: auto;
				right: auto;
				bottom: 16px;
				left: 16px;
			}
		}
		&.bottom-center {
			top: auto;
			right: auto;
			bottom: 20px;
			left: 50%;
			@include transform(translateX(-50%));
			@include breakpoint-less(md) {
				top: auto;
				right: auto;
				bottom: 16px;
				left: 50%;
			}
		}
		&.bottom-right {
			top: auto;
			right: 20px;
			bottom: 20px;
			left: auto;
			@include breakpoint-less(md) {
				top: auto;
				right: 16px;
				bottom: 16px;
				left: auto;
			}
		}
	}
	&:hover, &:focus {
		a {
			&:before {
				opacity: 1;
			}
		}
		img {
			@include transform(scale(1.04));
		}
	}
}

.fancy-box-2 {
	color: $color-primary;
	h1,h2,h3,h4,h5,h6 { color: $color-dark; }
	a {
		&:not([class*=' button'], [class^='button']) {
			color: $color-primary;
			&:hover, &:focus { color: $color-dark; }
		}
	}
	.hover-content {
		position: absolute;
		right: 20px;
		bottom: 20px;
		left: 20px;
		@include transform(translateY(4px));
		z-index: 1;
		visibility: hidden;
		opacity: 0;
		background: $color-dark-09;
		padding: 30px;
		@extend .bg-dark-content;
		@include transition(ease-out 0.16s);
		@include breakpoint-less(md) {
			right: 16px;
			bottom: 16px;
			left: 16px;
			padding: 20px;
		}
		&.top {
			top: 20px;
			bottom: auto;
			@include breakpoint-less(md) {
				top: 16px;
				bottom: auto;
			}
		}
	}
	&:hover, &:focus {
		img {
			@include transform(scale(1.04));
		}
		.hover-content {
			@include transform(translateY(0));
			visibility: visible;
			opacity: 1;
		}
	}
}

.fancy-box-3 {
	&:before, &:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		@include transition(ease-out 0.16s);
	}
	&:before {
		opacity: 1;
		background-image: linear-gradient(to top, $color-dark-05, transparent);
	}
	&:after {
		opacity: 0;
		background-image: linear-gradient(to top, $color-dark-06, $color-dark-01);
	}
	.content, 
	.hover-content {
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 36px;
		@include transition(ease-out 0.16s);
		@extend .bg-dark-content;
	}
	@include breakpoint-less(lg) {
		.content,
		.hover-content {
			padding: 30px;
		}
	}
	@include breakpoint-less(md) {
		.content,
		.hover-content {
			padding: 20px;
		}
	}
	.hover-content {
		@include transform(translateY(4px));
		visibility: hidden;
		opacity: 0;
	}
	.button-text-1, a.button-text-1, 
	.button-text-2, a.button-text-2, 
	.button-text-3, a.button-text-3 {
		color: $color-white-08;
		&:hover {
			color: $color-white;
		}
	}
	.button-text-1, a.button-text-1 {
		&:before { background: $color-white-03; }
		&:after { background: $color-white; }
	}
	.button-text-2, a.button-text-2 {
		&:before { background: $color-white-04; }
		&:after { background: $color-white; }
	}
	.button-text-3, a.button-text-3 {
		&:before { background: $color-white-08; }
		&:hover {
			&:before { background: $color-white; }
		}
	}
	&:hover, &:focus {
		&:before { opacity: 0; }
		&:after { opacity: 1; }
		img {
			@include transform(scale(1.04));
		}
		.content {
			@include transform(translateY(-4px));
			visibility: hidden;
			opacity: 0;
		}
		.hover-content {
			visibility: visible;
			opacity: 1;
			@include transform(translateY(0));
		}
	}
}