/* on-scoll effects */
.scrollable {
	opacity: 0;
	transition: 0.5s all;
	transition-timing-function: ease-out;
}

.scrollable.scrollable-in-view {
	opacity: 1;
}

.scrollable-parent {
	overflow: hidden;
}

.scrollable-fade {
	opacity: 0.7;
}

.scrollable-grow {
	transform: scale(0.2);
}

.scrollable-shrink {
	transform: scale(5);
}

.scrollable-grow.scrollable-in-view,
.scrollable-shrink.scrollable-in-view {
	transform: scale(1);
}

.scrollable-grow,
.scrollable-shrink,
.scrollable-grow.scrollable-in-view,
.scrollable-shrink.scrollable-in-view {
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.68, -0.1, 0.265, 1.55);
}

.scrollable[data-timing=cubic-bezier] {
	transition-timing-function: cubic-bezier(0.68, -0.1, 0.265, 1.55);
}

/* could be SCSS generated one day, attr() only works for "content" property */
.scrollable[data-duration="0.1s"] {
	transition-duration: 0.1s !important;
}
.scrollable[data-duration="0.15s"] {
	transition-duration: 0.15s !important;
}
.scrollable[data-duration="0.2s"] {
	transition-duration: 0.2s !important;
}
.scrollable[data-duration="0.25s"] {
	transition-duration: 0.25s !important;
}
.scrollable[data-duration="0.3s"] {
	transition-duration: 0.3s !important;
}
.scrollable[data-duration="0.35s"] {
	transition-duration: 0.35s !important;
}
.scrollable[data-duration="0.4s"] {
	transition-duration: 0.4s !important;
}
.scrollable[data-duration="0.45s"] {
	transition-duration: 0.45s !important;
}
.scrollable[data-duration="0.5s"] {
	transition-duration: 0.5s !important;
}
.scrollable[data-duration="1s"] {
	transition-duration: 1s !important;
}
.scrollable[data-duration="1.5s"] {
	transition-duration: 1.5s !important;
}
.scrollable[data-duration="2s"] {
	transition-duration: 2s !important;
}


/* simple css animations */
@keyframes bounce {
	0%   { transform: scale(1,1)      translateY(0); }
	10%  { transform: scale(1.1,.9)   translateY(0); }
	30%  { transform: scale(.9,1.1)   translateY(-25px); }
	50%  { transform: scale(1.05,.95) translateY(0); }
	57%  { transform: scale(1,1)      translateY(-7px); }
	64%  { transform: scale(1,1)      translateY(0); }
	100% { transform: scale(1,1)      translateY(0); }
}

/* slide in when element in view effects */
.slide-on-scroll {
	opacity: 0;
	transition: 1.5s all;
}

.slide-on-scroll.scrollable-in-view {
	opacity: 1;
}

.slide-from-right {
	margin-left: 50vw!important;
	margin-right: -50vw!important;
}

.slide-from-left {
	margin-left: -50vw!important;
	margin-right: 50vw!important;
}

.slide-from-right.scrollable-in-view,
.slide-from-left.scrollable-in-view {
	margin-left: 0!important;
	margin-right: 0!important;
}

.slide-grow {
	transform: scale(0.2);
}

.slide-shrink {
	transform: scale(5);
}

.slide-grow.scrollable-in-view,
.slide-shrink.scrollable-in-view {
	transform: scale(1);
}

/* custom effects for hipower */
.slide-from-top {
	bottom: -50px;
}
.slide-from-top.scrollable-in-view {
	bottom: 0;
}