.thb-fancy-box {
	position: relative;
	min-height: 300px;

	.thb-fancy-image-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		background: $color1;
	}
	.thb-fancy-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		opacity: 0.8;

		img {
			height: 100%;
			object-fit:cover;
		}
	}
	.thb-fancy-hover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		opacity: 0;
		@extend .quick-transition;
	}
	.thb-fancy-text-content {
		max-width: 100%;
	}
	.thb-fancy-content {
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		padding: 10%;
		@extend .cover-bg;

		h1,h2,h3,h4,h5,h6 {
			color: $black;
			max-width: 100%;
		}

		svg {
			margin-bottom: 30px;
			width: 80px;
			flex-shrink: 0;
			path,
			circle,
			rect,
			ellipse {
				stroke: $black;
			}
		}
		p {
			max-width: 100%;
			font-size: 16px;
		}
		>*:last-child {
			margin-bottom: 0;
		}
	}
	.thb-fancy-link {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		padding: 10%;

		.thb-animated-arrow {
			@extend .linear-quick-transition;
		}
	}
	&.fancy-style1 {
		&.thb-center {
			.thb-fancy-link {
				justify-content: center;
				align-items: flex-end;
			}
		}
		&.thb-bottom-left {
			.thb-fancy-link {
				align-items: flex-start;
			}
		}
		&:hover {
			.thb-animated-arrow {
				border-color: #fff;
				background: #fff;

				svg {
					fill: $black;
				}
			}
			.handle {
				@include translateX(4px);
			}
			.bar {
				opacity: 1;
				@include transform(translateX(4px) scale(0.8));
			}
		}
	} // .fancy-style1
	&.fancy-style1,
	&.fancy-style4 {
		&:hover {
			.thb-fancy-hover {
				opacity: 1;
			}
		}
	}
	&.fancy-style1,
	&.fancy-style3 {
		&.small-shadow {
			@include box-shadow(0 2px 8px rgba(0,0,0,0.1));
		}
		&.medium-shadow {
			@include box-shadow(0 4px 20px rgba(0,0,0,0.1));
		}
		&.large-shadow {
			@include box-shadow(0 6px 30px rgba(0,0,0,0.1));
		}
		&.xlarge-shadow {
			@include box-shadow(0 8px 40px rgba(0,0,0,0.08));
		}
	}
	&.fancy-style2 {
		overflow: visible;
		&:hover {
			z-index: 20;

			& + .thb-fancy-box {
				z-index: 10;
			}
		}

		.atvImg-container .atvImg-shadow {
			box-shadow: none;
			top: 1%;
	    left: 1%;
	    width: 98%;
	    height: 98%;
		}
		&.small-shadow {
			.atvImg-container.over .atvImg-shadow {
				@include box-shadow(0 4px 20px rgba(0,0,0,0.1));;
			}
		}
		&.medium-shadow {
			.atvImg-container.over .atvImg-shadow {
				@include box-shadow(0 4px 20px rgba(0,0,0,0.1));
			}
		}
		&.large-shadow {
			.atvImg-container.over .atvImg-shadow {
				@include box-shadow(0 6px 30px rgba(0,0,0,0.1));
			}
		}
		&.xlarge-shadow {
			.atvImg-container.over .atvImg-shadow {
				@include box-shadow(0 8px 40px rgba(0,0,0,0.08));
			}
		}
	} // .fancy-style2
	&.fancy-style3 {

		will-change: scale;
		overflow: hidden;
		transform-origin: center center;
		@extend .linear-quick-transition;
		.thb-fancy-image-container {
			transform-origin: center center;
			will-change: scale;
			.thb-fancy-image {
				width: 101%;
				height: 101%;
			}
			@extend .linear-quick-transition;
		}
		&:hover {
			@include scale(0.98);

			.thb-fancy-image-container {
				@include scale(1.05);
			}
		}
	} // .fancy-style3
	&.fancy-style4 {
		.thb-fancy-image-container {
			background: none;
		}
		.thb-fancy-content {
			p {
				font-size: 14px;
			}
			svg {
				flex: 1;
				flex-shrink: 0;
			}
		}
		&.small-shadow {
			&:hover {
				@include box-shadow(0 4px 20px rgba(0,0,0,0.1));;
			}
		}
		&.medium-shadow {
			&:hover {
				@include box-shadow(0 4px 20px rgba(0,0,0,0.1));
			}
		}
		&.large-shadow {
			&:hover {
				@include box-shadow(0 6px 30px rgba(0,0,0,0.1));
			}
		}
		&.xlarge-shadow {
			&:hover {
				@include box-shadow(0 8px 40px rgba(0,0,0,0.08));
			}
		}
	} // .fancy-style4
	&.fancy-style5 {
		.thb-fancy-image-container,
		.thb-fancy-content {
			position: relative;
			@extend .quick-transition;
		}
		.thb-fancy-content {
			padding: 40px 0 35px;
			border-bottom: 1px solid rgba(0,0,0,0.07);
			border-radius: 0 !important;
		}
		&:hover {
			.thb-fancy-content {
				@include box-shadow(inset 0 -3px 0 $color2);
			}
		}
		&.small-shadow:hover .thb-fancy-image-container {
				@include box-shadow(0 4px 20px rgba(0,0,0,0.1));;
		}
		&.medium-shadow:hover .thb-fancy-image-container {
				@include box-shadow(0 4px 20px rgba(0,0,0,0.1));
		}
		&.large-shadow:hover .thb-fancy-image-container {
				@include box-shadow(0 6px 30px rgba(0,0,0,0.1));
		}
		&.xlarge-shadow:hover .thb-fancy-image-container {
				@include box-shadow(0 8px 40px rgba(0,0,0,0.08));
		}
	} // .fancy-style5
	&.fancy-style6 {
		.button {
			opacity: 0;
			@include translateY(100%);
		}
		.thb-fancy-image-container {
			background: $black;
		}
		.thb-fancy-image {
			opacity: 0.8;
		}
		.thb-fancy-content,
		.thb-fancy-image {
			@extend .quick-transition;
		}
		&:hover {
			.button {
				opacity: 1;
				@include translateY(0%);
			}
			.thb-fancy-image {
				opacity: 0.2;
			}
		}
		&.thb-bottom-left.has-link,
		&.thb-bottom-center.has-link {
			&:hover {

				.thb-fancy-content {
					@include translateY(-70px);
				}
			}
		}
		&.thb-bottom-center.has-link {
			.thb-fancy-link {
				justify-content: center;
			}
		}
	} // .fancy-style6
	&.fancy-style7 {
    backface-visibility: hidden;
    will-change: transform;
    margin-bottom: 12px;

    .thb-fancy-content {
      padding: 14%;
      @include translateZ(70px);
      svg {
        width: 30px;
        margin-bottom: 25px;
      }
    }
    .thb-fancy-link {
    	padding: 14%;
    }
    .thb-fancy-image-container {
      @include transform-origin(0, 50%);
      @include transform(perspective(1000px) rotateY(0deg) translateZ(0));
      @extend .quick-transition;

      .thb-fancy-image {
        opacity: 1;
      }
    }
    &.small-shadow .thb-fancy-image-container {
    	@include box-shadow(0 4px 20px rgba(0,0,0,0.1));;
    }
    &.medium-shadow .thb-fancy-image-container {
    	@include box-shadow(0 4px 20px rgba(0,0,0,0.1));
    }
    &.large-shadow .thb-fancy-image-container {
    	@include box-shadow(0 6px 30px rgba(0,0,0,0.1));
    }
    &.xlarge-shadow .thb-fancy-image-container {
    	@include box-shadow(0 8px 40px rgba(0,0,0,0.08));
    }
    .fancy-text-link {
      font-size: 12px;
      font-weight: 600;
      display: block;
      overflow: hidden;
      span {
        display: block;
        opacity: 0;
        @include translateY(50%);
        @extend .quick-transition;
      }
    }

    &:hover {
      .thb-fancy-image-container {
      	@include transform(perspective(1000px) rotateY(-10deg) translate3d(-3px,0,0));
      }
      .fancy-text-link span {
        opacity: 1;
        @include translateY(0%);
      }
    }
  }
	&.fancy-style8 {
		border: 1px solid rgba(#000, 0.06);

		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 2px;
			background: $black;
			transform-origin: top left;
			@include scale(0,1);
			@extend .quick-transition;
		}
		.thb-fancy-image-container {
			 background: transparent;
			 @extend .mid-transition;
		}
		.thb-fancy-content {
			padding: 9%;
			svg {
				width: 40px;
				margin-bottom: 25px;
				@extend .mid-transition;
			}
			.thb-fancy-text-content {
				@extend .mid-transition;

				p {
					font-size: 14px;
					@extend .mid-transition;
					opacity: 0;
				}
			}
		}
		.thb-fancy-link {
			padding: 9%;
			opacity: 0;

			.fancy-text-link {
				font-size: 13px;
				font-weight: 500;
			}
		}
		&:hover {
			&:after {
				@include scale(1,1);
			}
			.thb-fancy-text-content {
				p {
					opacity: 1;
				}
			}
			.thb-fancy-link {
				opacity: 1;
			}
		}
		&.has-icon {
			&:hover {
				.thb-fancy-content {
					svg {
						opacity: 0;
					}
				}
				.thb-fancy-text-content {
					@include translateY(-65px);
				}
			}
		}
		&.small-shadow:hover .thb-fancy-image-container {
				@include box-shadow(0 4px 20px rgba(0,0,0,0.1));;
		}
		&.medium-shadow:hover .thb-fancy-image-container {
				@include box-shadow(0 4px 20px rgba(0,0,0,0.1));
		}
		&.large-shadow:hover .thb-fancy-image-container {
				@include box-shadow(0 6px 30px rgba(0,0,0,0.1));
		}
		&.xlarge-shadow:hover .thb-fancy-image-container {
				@include box-shadow(0 8px 40px rgba(0,0,0,0.08));
		}
	} // .fancy-style8
  &.thb-center {
		.thb-fancy-content {
			justify-content: center;
			align-items: center;
			text-align: center;
		}
	}
	&.thb-bottom-left {
		.thb-fancy-content {
			justify-content: flex-end;
		}
	}
	&.thb-bottom-center {
		.thb-fancy-content {
			justify-content: flex-end;
			align-items: center;
		}
	}
	&.fancy-dark {
		.thb-animated-arrow {

			svg {
				fill: $black;
			}
			border-color: rgba($black,0.4);
		}
		&:hover {
			.thb-animated-arrow {
				border-color: $black;
				background: $black;

				svg {
					fill: #fff;
				}
			}
		}
	} // .fancy-dark
	&.fancy-light {

		&.fancy-style1,
		&.fancy-style2,
		&.fancy-style3,
		&.fancy-style6,
		&.fancy-style7 {
			.thb-fancy-content {
				color: #fff;

				h1,h2,h3,h4,h5,h6 {
					color: #fff;
				}
				svg {

					path,
					circle,
					rect,
					ellipse {
						stroke: #fff;
					}
				}
			}
		}
		&.fancy-style7 {
      .fancy-text-link {
        color: #fff;
      }
    }

    &.fancy-style4 {
			&:hover {
				.thb-fancy-content {
					color: #fff;

					h1,h2,h3,h4,h5,h6 {
						color: #fff;
					}
					svg {

						path,
						circle,
						rect,
						ellipse {
							stroke: #fff;
						}
					}
				}
			}
		}
	} // .fancy-light
}