/* Overlays */
.overlay {
	position: relative;
	&:before {
		content: ' ';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		background: $color-dark;
		opacity: 0;
		pointer-events: none;
		transition: ease opacity 300ms 100ms;
	}

	&:hover, &.overlay-show, &.show {
		&:before {
			opacity: 0.8;
		}
	}

	&.overlay-op-1 {
		&:hover, &.overlay-show, &.show {
			&:before {
				opacity: 0.1;
			}
		}
	}

	&.overlay-op-2 {
		&:hover, &.overlay-show, &.show {
			&:before {
				opacity: 0.2;
			}
		}
	}

	&.overlay-op-3 {
		&:hover, &.overlay-show, &.show {
			&:before {
				opacity: 0.3;
			}
		}
	}

	&.overlay-op-4 {
		&:hover, &.overlay-show, &.show {
			&:before {
				opacity: 0.4;
			}
		}
	}

	&.overlay-op-5 {
		&:hover, &.overlay-show, &.show {
			&:before {
				opacity: 0.5;
			}
		}
	}

	&.overlay-op-6 {
		&:hover, &.overlay-show, &.show {
			&:before {
				opacity: 0.6;
			}
		}
	}

	&.overlay-op-7 {
		&:hover, &.overlay-show, &.show {
			&:before {
				opacity: 0.7;
			}
		}
	}

	&.overlay-op-8 {
		&:hover, &.overlay-show, &.show {
			&:before {
				opacity: 0.8;
			}
		}
	}

	&.overlay-op-9 {
		&:hover, &.overlay-show, &.show {
			&:before {
				opacity: 0.9;
			}
		}
	}

	/* Backward */
	&.overlay-backward {
		&:hover, &.overlay-show, &.show {
			&:before {
				z-index: 0;
			}
		}
	}

	.container,
	.container-fluid {
		position: relative;
		z-index: 3;
	}
}

/* Overlay Colors */
.overlay-light {
	&:before {
		background-color: $color-light !important;
	}	
}

.overlay-dark {
	&:before {
		background-color: $color-dark !important;
	}
}