/*----------------------------------------------------------------------------*\
	Headhesive Specific Styles
/*----------------------------------------------------------------------------*/
/**
 * Headhesive element clone
 * > `clone` class for the cloned element:
 *
 * @example
 * var options = {
 *   classes {
 *     clone: 'banner--clone';
 *   }
 * }
 */
.banner--clone{
	/* Required styles */
	position: fixed;
	top: 0px; left: 0px; right: 0px;
	width: 100%; height: 150px;
	min-width: 980px;
	/* Additional styles */
	background-position: center center;
	background-image: url(../img/bg.jpg);
	background-size: 160px 160px;
	background-repeat: repeat;
	/* Translate -100% to move off screen */
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
	/* Animations */
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	z-index: 9999;
}

/**
 * Headhesive stick
 * > `stick` class for the cloned element:
 *
 * @example
 * var options = {
 *   classes {
 *     stick: 'banner--stick';
 *   }
 * }
 */
.banner--stick{
	/* Translate back to 0%; */
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}

/**
 * Headhesive unstick
 * > `unstick` class for the cloned element:
 *
 * @example
 * var options = {
 *   classes {
 *     unstick: 'banner--unstick';
 *   }
 * }
 */
.banner--unstick{
	/* Not required to use, but could be useful to have */
}