/*----------------------------------------------------------------------------*\
Headhesive Specific Styles
/*----------------------------------------------------------------------------*/

/**
* Headhesive element clone
* > `clone` class for the cloned element:
*
* @example
* var options = {
*   classes {
*     clone: 'banner--clone';
*   }
* }
*/
.headhesive--clone {
  
  /* Required styles */
  position: fixed;
  z-index: 999999999;
  top: 0;
  left: 0;
  
  /* Translate -100% to move off screen */
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  
}


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