@mixin hovering-overlay($overlay) {
	.#{$overlay} {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
		transition: .2s ease-in-out;
		transition-property: opacity, visibility;
	}

	&:hover {
		.#{$overlay} {
			opacity: 1;
			visibility: visible;
		}
	}
}

@mixin animate($property: all, $ease: $transition_function, $duration: .25s) {
	-webkit-transition: $property $ease $duration;
	-moz-transition: $property $ease $duration;
	-o-transition: $property $ease $duration;
	transition: $property $ease $duration;
}

// Fade up animation

@mixin divider() {
	content: '•';
    display: inline-block;
    vertical-align: middle;
    color: $color_text;
    margin: 0px 4px;
    font-size: 10px;
}

// Fade up animation

@mixin fade_up() {
	transform: translateY(5px);
    opacity: 0;
    visibility: hidden;
    @include animate();
}

@mixin fade_up_active() {
	transform: none;
	visibility: visible;
    opacity: 1;
    @include animate();
}

// Fade up animation with delay

@mixin fade_up_delay_active($property: all, $ease: $transition_function, $duration: .25s, $delay: .1s) {
	transform: none;
	visibility: visible;
    opacity: 1;
	-webkit-transition: $property $ease $duration $delay;
	-moz-transition: $property $ease $duration $delay;
	-o-transition: $property $ease $duration $delay;
	transition: $property $ease $duration $delay;
}

// Fade down animation

@mixin fade_down() {
	transform: translateY(-5px);
    opacity: 0;
    visibility: hidden;
    @include animate();
}

@mixin fade_down_active() {
	transform: none;
	visibility: visible;
    opacity: 1;
    @include animate();
}

@mixin btn_shadow() {
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

@mixin btn_shadow_inset() {
	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.04);
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.04);
}

@mixin shape_shadow() {
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
}

@mixin clearfix() {
	&:after {
		content: '';
		display: table;
		clear: both;
	}
}

@mixin border_radius($radius: 3px) {
	-webkit-border-radius: $radius;
	border-radius: $radius;
}

@mixin border_top_radius($radius: 3px) {
	-webkit-border-top-right-radius: $radius;
	border-top-right-radius: $radius;
	-webkit-border-top-left-radius: $radius;
	border-top-left-radius: $radius;
}

@mixin border_right_radius($radius: 3px) {
	-webkit-border-bottom-right-radius: $radius;
	border-bottom-right-radius: $radius;
	-webkit-border-top-right-radius: $radius;
	border-top-right-radius: $radius;
}

@mixin border_bottom_radius($radius: 3px) {
	-webkit-border-bottom-right-radius: $radius;
	border-bottom-right-radius: $radius;
	-webkit-border-bottom-left-radius: $radius;
	border-bottom-left-radius: $radius;
}

@mixin border_left_radius($radius: 3px) {
	-webkit-border-bottom-left-radius: $radius;
	border-bottom-left-radius: $radius;
	-webkit-border-top-left-radius: $radius;
	border-top-left-radius: $radius;
}

@mixin sm_screen {
	@media screen and (max-width: 768px) {
		@content;	
	}
}

@mixin md_screen {
	@media screen and (min-width: 769px) {
		@content;	
	}
}

@mixin tablet_vert_screen {
	@media screen and (max-width: 991px) {
		@content;	
	}
}

@mixin tablet_screen {
	@media screen and (max-width: 1024px) {
		@content;	
	}
}

@mixin lg_screen {
	@media screen and (min-width: 1025px) {
		@content;	
	}
}

@mixin xl_screen {
	@media screen and (min-width: 1200px) {
		@content;	
	}
}

@mixin note_screen {
	@media screen and (min-width: 1025px) and (max-width: 1440px) {
		@content;	
	}
}