@if $use-flyout == true {

	/*------------------------------------*\
		$FLYOUT
	\*------------------------------------*/
	/**
	 * Flyouts are pieces of content that fly out of a parent when said parent is
	 * hovered. They typically appear bottom-left of the parent.
	 *
	   <div class=flyout>
		   Foo
		   <div class=flyout__content>
			   <h1>Lorem</h1>
			   <p>Ipsum</p>
		   </div>
	   </div>
	 *
	 * Extend these objects in your theme stylesheet.
	 *
	 * Demo: jsfiddle.net/inuitcss/B52HG
	 *
	 */
	.flyout,
	.flyout--alt {
		position: relative;
		overflow: hidden;
	}
	.flyout__content {
		/**
		 * Position the flyouts off-screen. This is typically better than
		 * `display:none;`.
		 */
		position: absolute;
		top: 100%;
		left: -99999px;
	}

	/**
	 * Bring the flyouts into view when you hover their parents.
	 * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
	 * (`.flyout--alt`).
	 */
	.flyout:hover,
	.flyout--alt:hover {
		overflow: visible;
	}

	/**
	 * Regular flyouts sit all the way from the top, flush left.
	 */
	.flyout:hover > .flyout__content {
		left: 0;
	}

	/**
	 * Alternative flyouts sit all the way from the left, flush top.
	 */
	.flyout--alt:hover > .flyout__content {
		top: 0;
		left: 100%;
	}

}

//endif
