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

/**
 * Headhesive element clone
 * > `clone` class for the cloned element:
 *
 * @example
 * var options = {
 *   classes {
 *     clone: 'banner--clone';
 *   }
 * }
 */
.menu_top--clone {

  /* Required styles */
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;

  /* Additional styles */
	background: #ea5a01;
  /* Translate -100% to move off screen */
  -webkit-transform: translateY(-110%);
      -ms-transform: translateY(-110%);
          transform: translateY(-110%);

  /* Animations */
  -webkit-transition: all 500ms ease-in-out;
     -moz-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;

}


/**
 * Headhesive stick
 * > `stick` class for the cloned element:
 *
 * @example
 * var options = {
 *   classes {
 *     stick: 'banner--stick';
 *   }
 * }
 */
.menu_top--stick {
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
  /* 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: 'menu_top--unstick';
 *   }
 * }
 */
.menu_top--unstick {
  /* Not required to use, but could be useful to have */
}