/**
 * 1.3. =Main Helpers
 * ----------------------------------------------------------------------------
 */
 
/* Clearfix */
.cf {
	@include clearfix;
}
 
.limit-line { 
	overflow: hidden;
	white-space: nowrap;
}
	
.ellipsis { 
	text-overflow: ellipsis; 
}

/* Image replacement - via H5BP */

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/* Hide only visually, but have it available for screenreaders: H5BP */

.visuallyhidden, 
.screen-reader-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.main-color { 
	color: $main-color;
}

.fade {
	opacity: 0;
	transition: opacity .15s linear;
}

.fade.in {
  opacity: 1;
}

.fade-in-up {
	animation: 0.5s fade-in-up ease-out;
	animation-fill-mode: both;
}

.fade-in-up-lg {
	animation: 0.65s fade-in-up-lg ease-out;
	animation-fill-mode: both;
}

.fade-in-down-lg {
	animation: 0.65s fade-in-down-lg ease-out;
	animation-fill-mode: both;
}

.no-transition {
	transition: none !important;
}

a.blur {
	outline: none;
}

/* CSS Animations */
@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translate3d(0, 2px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fade-in-up-lg {
	from {
		opacity: 0;
		transform: translate3d(0, 8px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fade-in-down-lg {
	from {
		opacity: 0;
		transform: translate3d(0, -8px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}


@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes pulse {
	0%   { transform: scale(1); }
	25%  { transform: scale(1.3); }
	75%  { transform: scale(0.8); }
	100% { transform: scale(1); }
}


// Repsonsive helpers
.show-lg,
.show-md,
.show-sm,
.show-xs,
.show-ty {
	display: none !important;
}

@include breakpoint(false, medium) {
	.show-lg {
		display: block !important;
	}
}

@include breakpoint(medium, small) {
	.show-md {
		display: block !important;		
	}
}

@include breakpoint(small, x-small) {
	.show-sm {
		display: block !important;		
	}
}

@include breakpoint(x-small, tiny) {
	.show-xs {
		display: block !important;		
	}
}

@include breakpoint(tiny) {
	.show-ty {
		display: block !important;		
	}
}