/**
 * @name 	Functions API
 * This are all the API functions that are exposed by gridle.
 */
/**
 * Get states count
 * @return 	{Integer} 	The number of states defined
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Get the current state map
 * @return 		{Map} 	The current state map
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Get the current state name
 * @return 		{String} 	The current state name
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	{Integer} 		[$columns=1] 							The number of columns to calculate
 * @param 	{Integer} 		[$stateMap-or-stateName=current] 	 	The state to calculate the column width for
 * @return 	{Percent} 												The width in percent
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/*
 * Get a state map
 *
 * @param 	{String|Map} 		[$state=current] 		The name or map of the state to get
 * @return 	{Map} 				A state map object
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Check if a state exist :
 * @param 	{String} 		$name 		The name of the state to check
 * @return 	{Boolean} 					true if exist
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Get a state variable
 *
 * @param 	{String} 		$varName 								The variable name
 * @param  	{String} 		[$stateMap-or-stateName=current] 	 	The state name or a map state value
 * @return 	{Mixed} 												The finded value
 */
/**
 * Set a variable in a state
 * @param  		{String} 	$var                    	Variable name to assign
 * @param  		{Mixed} 	$newValue          			The new value to assign
 * @param 		{String} 	[$state=current] 			The state to apply the variable for
 * @return 		{List}                         			The states list (full)
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * get the registered gridle states
 * @return 	{Map} 		All the registered states
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * get the registered gridle states names
 * @return 	{List} 		All the registered states names
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Get the register columns map
 * @param 	{String|List<String>} 		[$state=current] 		The state name or map
 * @return 	{Map} 												The map of registered columns for the specified state
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Will return the generated selector depending on the "package" wanted, the state and some optional values that might be needed by the package (like for row-align that need a "side" value)
 * @param 		{String} 							$package 			The package to generate the selector for (see _settings.scss file)
 * @param 		{String|List<String} 				[$states=null] 		The list of state to generate the selector for. If not specified, will generate for all registered states
 * @param 		{Mixed} 							[$value=null] 		The value that will be used to replace the "%{tokenName}" inside the package pattern
 * @example 	scss
 * g-selector(grid, mobile, 2) {
 * 	// your code here
 * 	// The selector will be .gr-2@mobile
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the current used driver
 * @return 	{String} 		The used driver like default or driver
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Check if the used driver is the specified one
 * @param 		{String} 		$driver 	The driver to check
 * @return 		{Boolean} 					True if is the current driver
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Get the media query for a particular state, or width, etc...
 *
 * @param 	{Mixed} 		[$stateName-or-stateMap=current] 		The state name of the min width
 * @return 	{String} 												The media query string without the @media
 */
/**
 * @name 	Setting mixins
 * This are all the mixins that are exposed by gridle for the setting up your grid.
 */
/**
 * Setting up your grid
 * @param 		{Map} 		$settings 		Your default grid settings
 * @example 	scss
 * // default settings
 * $_gridle-settings : (
 *	name : default,
 *	min-width : null,
 *	max-width : null,
 *	query : null,
 *	classes : true,
 *	context : 12,
 *	column-width : null,
 *	gutter-width : 20px,
 *	gutter-height : 0,
 *	gutter-top : 0,
 *	gutter-right : 10px,
 *	gutter-bottom : 0,
 *	gutter-left : 10px,
 *	direction : ltr,
 *	dir-attribute : false,
 *	name-multiplicator : 1,
 *	states-classes : false,
 *	classes-prefix : null
 * );
 *
 * // setting up your grid
 * \@include g-setup((
 * 	context : 12
 * 	// other settings
 * ));
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Register a new state with some settings
 * @param 		{String} 		$name 		The new state name
 * @param 		{Map} 			$settings 	The state settings
 * @example 	scss
 * \@include g-register-state(mobile, (
 * 	max-width : 600px
 * ));
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Register some clear each that will been generated in classes
 * @param 		{Integer} 		$count 		The n each item to clear
 * @param 		{String} 		$what 		What to clear (left, right, both)
 * @example 	scss
 * \@include g-register-clear-each(2, left);
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Register a new custom column in case the generated ones are not enough.
 * This is useful when you have a 12 columns grid and you need some 1/5 ones.
 * @param 		{String} 		$name 		The column name
 * @param 		{Integer} 		$columns 	The column width
 * @param 		{Integer} 		$context 	The context on which to calculate the column width
 *
 * @example 	scss
 * \@include g-register-column(1on5, 1, 5);
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set a pattern for a specified package used to generate the classnames
 * @param 		{String} 	$package 		The package name to specify the pattern for
 * @param 		{List} 		$pattern 		The new classname pattern
 *
 * @example 	scss
 * \@include g-set-classname-map(grid, ('grid','-','%count','@','%state'));
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set a generic selector for a specific package. This generic selector will be used to target some elements like [class*="gr-"].
 * If not specified for a package, the generic selector will be generated automatically but sometimes it's better to hardcode it.
 * @param 		{String} 		$package 		The package to specify the generic selector for
 * @param 		{String} 		$selector 		The generic selector like [class*="gr-"], or whatever...
 * @example 	scss
 * \@include g-set-generic-selector(grid, '[class*="gr-"]');
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Register some basics states:
 *
 * - mobile : 0 to 480px
 * - tablet : 481px to 1024px
 *
 * @example 	scss
 * \@include g-register-default-states();
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Register some basics mobile first states:
 *
 * - mobile : 320px to infinite
 * - tablet : 640px to infinite
 * - desktop : 992px to infinite
 * - large : 1200px to infinite
 *
 * @example 	scss
 * \@include g-register-mobile-first-states();
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Register bootstrap 3 states
 *
 * - xs : 0 to 750px
 * - sm : 750px to infinite
 * - md : 970px to infinite
 * - lg : 1170px to infinite
 *
 * @example 	scss
 * \@include g-register-bootstrap3-states();
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Register bootstrap 4 states
 *
 * - xs : 0 to 576px
 * - sm : 576px to infinite
 * - md : 970px to infinite
 * - lg : 1200px to infinite
 *
 * @example 	scss
 * \@include g-register-bootstrap4-states();
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	Base API
 * This are all the base API mixins that are exposed by gridle.
 */
/**
 * Specify a layout using a single call like in the example bellow
 * @param 		{Map} 				$layout 				The map layout wanted
 * @param 		{Map|List|String} 	[$context=null] 		The context in which to apply the layout
 * @example 	scss
 * body {
 * 	\@include g-layout((
 * 	 	'#header' : 12,
 * 	 	'#sidebar' : 4 mobile 12,
 * 	 	'#content' : 8 mobile 12,
 * 	 	'#footer' : 12
 * 	));
 * }
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply some styling in a passed state
 * @param 		{Map|List|String} 		$states 		The states to apply the css for. Can be a state map, a list of states or a state name
 * @example 	scss
 * .my-cool-element {
 * 	// specify a register state name
 * 	\@include g-state(mobile) {
 * 		// your css code here...
 * 	}
 * 	// specify more than one register states
 * 	\@include g-state(mobile tablet) {
 * 		// your css code here...
 * 	}
 *  // specify a min and max width
 * 	\@include g-state(200px, 500px) {
 * 		// your css code here...
 * 	}
 * 	// passing a state map (complexe usage)
 * 	\@include g-state((
 * 		query : 'print only'
 * 	)) {
 * 		// your code here...
 * 	}
 * }
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply some css depending on the element size (element queries)
 * **Using this mixin requires that you import the ```gridle-eq.js``` file into your javascript code**
 * @param 	{Number} 	$size 				The size to take care of. If negative, mean lower than, if positive, mean greater than.
 * @param 	{Boolean} 	[$height=false] 	Set to true to handle height instead of width
 * @example 	scss
 * .my-cool-element {
 *  	\@include g-eq(-400px) {
 *  		// your css that will be applied when element
 *  		// is between 0 and 399px wide
 *  	}
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Basically, this is the same as the ```g-state``` mixin, with the difference that it will not print any media queries. It will just create a state context in which your inside code will refer.
 * @param 		{Map|List|String} 		$states 		The states to apply the css for. Can be a state map, a list of states or a state name
 * @example 	scss
 * @warn(g-get-state-var(min-width)); // will output the min-width of the default state
 * \@include g-state-context(mobile) {
 *  	@warn(g-get-state-var(min-width)); // will output the min-width of the mobile state
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Will print the generated selector depending on the "package" wanted, the state and some optional values that might be needed by the package (like for row-align that need a "side" value)
 * @param 		{String} 							$package 			The package to generate the selector for (see _settings.scss file)
 * @param 		{String|List<String} 				[$states=null] 		The list of state to generate the selector for. If not specified, will generate for all registered states
 * @param 		{Mixed} 							[$value=null] 		The value that will be used to replace the "%{tokenName}" inside the package pattern
 * @example 	scss
 * \@include g-selector(grid, mobile, 2) {
 * 	// your code here
 * 	// The selector will be .gr-2@mobile
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Helper gridle mixin that let you specify the grid properties through ```g-set``` map, or a list of properties like "8 push 2 mobile 12 push 0"
 * @param 		{Map|List} 			$properties 			The grid properties to apply
 * @example 	scss
 * #content {
 * 	// using list
 * 	\@include gridle(8 mobile 12);
 * 	// using a map
 * 	\@include gridle((
 * 		grid : 8,
 * 		mobile : (
 * 			grid : 12
 * 		)
 * 	));
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Helper mixin that let you specify the grid properties through map formated like in the example bellow.
 * Here's the possible properties:
 *
 * - ```grid``` {Integer} : The grid column count
 * - ```container``` {Boolean} : Set the element as container
 * - ```grid-grow``` {Boolean} : Set the element a grid column that grow
 * - ```grid-adapt``` {Boolean} : Set the element a grid column that adapt
 * - ```grid-table``` {Boolean} : Set the element a grid column of type table
 * - ```push``` {Integer} : Set the push count
 * - ```pull``` {Integer} : Set the pull count
 * - ```prefix``` {Integer} : Set the prefix count
 * - ```suffix``` {Integer} : Set the suffix count
 * - ```clear-each``` {Integer} : Set the clear each count
 * - ```grid-centered``` {Boolean} : Set the grid column as centered
 * - ```row``` {Boolean} : Set the element as a grid row
 * - ```row-full``` {Boolean} : Set the element as a grid row full
 * - ```col``` {Boolean} : Set the element as a grid column (vertical)
 * - ```row-align``` {String} : Set the row alignement
 * - ```row-no-gutter``` {Boolean} : Remove the gutters on columns inside this row
 * - ```nowrap``` {Boolean} : Set a nowrap on the row
 * - ```wrap``` {Boolean} : Reset the wrap property on the row
 * - ```order``` {Integer} : Set the order of the column (flex driver)
 * - ```hide``` {Boolean} : Hide the element
 * - ```show``` {Boolean} : Show the element
 * - ```visible``` {Boolean} : Set the visibility of the element to visible
 * - ```not-visible``` {Boolean} : Set the visibility of the element to hidden
 * - ```invisible``` {Boolean} : Set the visibility of the element to hidden
 * - ```show-inline``` {Boolean} : Set the display of the element to inline-block
 * - ```float``` {String} : Set the specified float of the element
 * - ```clear``` {String} : Clear the specified float of the element
 * - ```no-gutter``` {Boolean|String|List<String>} : Remove the specified gutters
 * - ```gutter``` {Boolean|String|List<String>} : Apply the specified gutters
 *
 * @param 		{Map} 			$properties 			The grid map properties to apply
 * @example 	scss
 * #content {
 * 	// using a map
 * 	\@include gridle((
 * 		grid : 8,
 * 		push : 2
 * 		mobile : (
 * 			grid : 12
 * 		),
 * 		{stateName} : {mapProperties}
 * 	));
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the push count for the column
 * @param 		{Integer} 		$columns 			The number of columns to push this column
 * @param 		{Integer} 		[$context=null]  	The context on which to calculate the push value. By default, it is the default context setted with ```g-setup```.
 * @example 	scss
 * .my-cool-column {
 * 	\@include g-push(2);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the pull count for the column
 * @param 		{Integer} 		$columns 			The number of columns to pull this column
 * @param 		{Integer} 		[$context=null]  	The context on which to calculate the pull value. By default, it is the default context setted with ```g-setup```.
 * @example 	scss
 * .my-cool-column {
 * 	\@include g-pull(2);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the prefix count for the column
 * @param 		{Integer} 		$columns 			The number of columns to prefix this column
 * @param 		{Integer} 		[$context=null]  	The context on which to calculate the prefix value. By default, it is the default context setted with ```g-setup```.
 * @example 	scss
 * .my-cool-column {
 * 	\@include g-prefix(2);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the suffix count for the column
 * @param 		{Integer} 		$columns 			The number of columns to suffix this column
 * @param 		{Integer} 		[$context=null]  	The context on which to calculate the suffix value. By default, it is the default context setted with ```g-setup```.
 * @example 	scss
 * .my-cool-column {
 * 	\@include g-suffix(2);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Display a debug grid on top of the row
 * @example 	scss
 * .my-row {
 * 	\@include g-row-debug();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Make the element a grid container
 * @example 	scss
 * .my-cool-container {
 * 	\@include g-container();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Remove the gutters on each columns inside the row
 * @param 		{String|List<String>} 		[$sides=top right bottom left] 		The sides to clear
 * @example 	scss
 * .my-cool-row {
 * 	\@include g-row-no-gutter(left right);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Make a column centered
 * @example 	scss
 * .my-cool-column {
 * 	\@include g-grid-centered();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Hide an element
 * @example 	scss
 * .my-cool-element {
 * 	\@include g-hide();
 * }
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the visibility of an element to hidden
 * @example 	scss
 * .my-cool-element {
 * 	\@include g-not-visible();
 * }
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the visibility of an element to hidden
 * @example 	scss
 * .my-cool-element {
 * 	\@include g-invisible();
 * }
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the display of an element to block
 * @example 	scss
 * .my-cool-element {
 * 	\@include g-show();
 * }
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the display of an element to inline-block
 * @example 	scss
 * .my-cool-element {
 * 	\@include g-show();
 * }
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the visibility of an element to visible
 * @example 	scss
 * .my-cool-element {
 * 	\@include g-show();
 * }
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the float property of the element to the specified direction
 * @param 		{String} 		[$float=left] 		The float direction to set
 * @example 	scss
 * .my-cool-element {
 * 	\@include g-float(right);
 * }
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Clear the float property of the element to the specified direction
 * @param 		{String} 		[$float=left] 		The float direction to clear
 * @example 	scss
 * .my-cool-element {
 * 	\@include g-clear(right);
 * }
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Remove the gutters on the column
 * @param 		{String|List<String>} 		[$sides=top right bottom left] 		The sides to clear
 * @example 	scss
 * .my-cool-column {
 * 	\@include g-no-gutter(left right);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the gutters on the column
 * @param 		{String|List<String>} 		[$sides=top right bottom left] 		The sides to apply gutters on
 * @example 	scss
 * .my-cool-column {
 * 	\@include g-gutter(left right);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	Generate mixins
 * This are all the mixins that you can use to generate classes to use inside your HTML codebase
 */
/**
 * Generate a custom class for all the states
 * @param 	{List} 	$pattern 					The name pattern of the class
 * @param 	{List} 	[$statesNames=null] 		The states names to generate. If null or all, will generate the class for all registered states
 * @example 	scss
 * \@include g-generate-custom-class(('my','-','cool','-','class','-','%state')) {
 * 	color: pink;
 * 	padding: g-get-state-var(gutter-left);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Generate all the classes depending on the packages you have specified like:
 * - ```.container@{state}``` : default container
 * - ```.row@{state}``` : default row
 * - ```.row-align-{align}@{state}``` : default row-align
 * - ```.row-full@{state}``` : default row-full
 * - ```.row-debug@{state}``` : default row-debug
 * - ```.row-no-gutter@{state}``` : default row-no-gutter
 * - ```.nowrap@{state}``` : default nowrap
 * - ```.wrap@{state}``` : default wrap
 * - ```.col@{state}``` : default col
 * - ```.gr-{column}@{state}``` : default grid
 * - ```.gr-table@{state}``` : default gr-table
 * - ```.gr-grow@{state}``` : default gr-grow
 * - ```.gr-adapt@{state}``` : default gr-adapt
 * - ```.gr-centered@{state}``` : default gr-centered
 * - ```.push@{state}``` : default push
 * - ```.pull@{state}``` : default pull
 * - ```.prefix@{state}``` : default prefix
 * - ```.suffix@{state}``` : default suffix
 * - ```.hide@{state}``` : helpers hide
 * - ```.show@{state}``` : helpers show
 * - ```.show-inline@{state}``` : helpers show-inline
 * - ```.not-visible@{state}``` : helpers not-visible
 * - ```.visible@{state}``` : helpers visible
 * - ```.float-{%float}@{state}``` : helpers float
 * - ```.clear-{%float}@{state}``` : helpers clear
 * - ```.clear-each-{%count}@{state}``` : helpers clear-each
 * - ```.gutter-{%side}@{state}``` : helpers gutter
 * - ```.no-gutter-{%side}@{state}``` : helpers no-gutter
 * - ```.auto-height@{state}``` : helpers auto-height
 * - ```.order-{%column-count}@{state}``` : helpers order
 *
 * @param 		{String|List<String>} 		[$states=all] 		The states to generate the classes for
 * @param 		{String|List<String>} 		[$package=all] 		The packages to generate the classes for
 * @param 		{String} 					[$scope=null] 		A classname to scope the classes in
 *
 * @example 	scss
 * // generate all the classes
 * \@include g-generate-classes();
 * // generate only certain states
 * \@include g-generate-classes(mobile tablet);
 * // generate only the helpers for all the states
 * \@include g-generate-classes(all, helpers);
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	Default driver API
 * This are all the API mixins that are exposed by gridle for the default driver.
 */
/**
 * Set the element as a row
 * @param 		{Boolean} 		[$reverse=false] 		Revert the columns order if true
 * @example 	scss
 * .my-cool-row {
 * 	\@include g-row();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the element as a col
 * @param 		{Boolean} 		[$reverse=false] 		Revert the columns order if true
 * @example 	scss
 * .my-cool-col {
 * 	\@include g-col();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply a nowrap on the element
 * @example 	scss
 * .my-cool-element {
 * 	\@include g-nowrap();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Reset the nowrap on the element
 * @example 	scss
 * .my-cool-element {
 * 	\@include g-wrap();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply a column width on the element
 * @param 		{Integer|String} 		$columns 			The column count to apply or a registered column name
 * @param 		{Integer} 				[$context=null]  	The context on which to calculate the column width. If null, take the context setted with ```g-setup```
 * @example 	scss
 * .my-cool-column {
 * 	\@include g-grid(2);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the grid element as a table display type
 * @example 	scss
 * .my-cool-column {
 * 	\@include g-grid(2);
 * 	\@include g-grid-table();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the width of the row element to full viewport width
 * @example 	scss
 * .my-cool-row {
 *  \@include g-row();
 * 	\@include g-row-full();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the width of the grid element to adapt to his content
 * @example 	scss
 * .my-cool-column {
 *  \@include g-grid-adapt();
 *  // or
 *  \@include g-grid(adapt);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the width of the grid element to grow depending on the place it has at disposal
 * @example 	scss
 * .my-cool-column {
 *  \@include g-grid-grow();
 *  // or
 *  \@include g-grid(grow);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Clear each n childs
 * @example 	scss
 * .my-cool-row {
 *  \@include g-clear-each(2);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the alignement of the columns inside the row using these alignement properties:
 *
 * - top : Align vertical top
 * - middle : Align vertical middle
 * - bottom : Align vertical bottom
 * - left : Align horizontal left
 * - center : Align horizontal center
 * - right : Align horizontal right
 *
 * @example 	scss
 * .my-cool-row {
 *  \@include g-row-align(middle center);
 *  \@include g-row-align(right);
 *  \@include g-row-align(middle);
 *  // etc...
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	default State
 * Here's the settings for the **default** state.
 * @styleguide 	Gridle / States
 * @display 	gridle-settings
 * @gridle-name 	default
 * @gridle-min-width 	
 * @gridle-max-width 	
 * @gridle-query 	
 * @gridle-classes 	true
 * @gridle-context 	12
 * @gridle-gutter-width 	20px
 * @gridle-gutter-height 	0
 * @gridle-gutter-top 	0
 * @gridle-gutter-right 	10px
 * @gridle-gutter-bottom 	0
 * @gridle-gutter-left 	10px
 * @gridle-direction 	ltr
 * @gridle-dir-attribute 	false
 * @gridle-name-multiplicator 	1
 * @gridle-states-classes 	false
 * @gridle-classes-prefix 	
 */
/**
 * @name 	m State
 * Here's the settings for the **m** state.
 * @styleguide 	Gridle / States
 * @display 	gridle-settings
 * @gridle-name 	m
 * @gridle-min-width 	
 * @gridle-max-width 	600px
 * @gridle-query 	
 * @gridle-classes 	true
 * @gridle-context 	12
 * @gridle-gutter-width 	0px
 * @gridle-gutter-height 	0
 * @gridle-gutter-top 	0
 * @gridle-gutter-right 	0px
 * @gridle-gutter-bottom 	0
 * @gridle-gutter-left 	0px
 * @gridle-direction 	ltr
 * @gridle-dir-attribute 	false
 * @gridle-name-multiplicator 	1
 * @gridle-states-classes 	false
 * @gridle-classes-prefix 	
 */
/**
 * @name 	t State
 * Here's the settings for the **t** state.
 * @styleguide 	Gridle / States
 * @display 	gridle-settings
 * @gridle-name 	t
 * @gridle-min-width 	600px
 * @gridle-max-width 	
 * @gridle-query 	
 * @gridle-classes 	true
 * @gridle-context 	12
 * @gridle-gutter-width 	0px
 * @gridle-gutter-height 	0
 * @gridle-gutter-top 	0
 * @gridle-gutter-right 	0px
 * @gridle-gutter-bottom 	0
 * @gridle-gutter-left 	0px
 * @gridle-direction 	ltr
 * @gridle-dir-attribute 	false
 * @gridle-name-multiplicator 	1
 * @gridle-states-classes 	false
 * @gridle-classes-prefix 	
 */
/**
 * @name 	s State
 * Here's the settings for the **s** state.
 * @styleguide 	Gridle / States
 * @display 	gridle-settings
 * @gridle-name 	s
 * @gridle-min-width 	900px
 * @gridle-max-width 	
 * @gridle-query 	
 * @gridle-classes 	true
 * @gridle-context 	12
 * @gridle-gutter-width 	0px
 * @gridle-gutter-height 	0
 * @gridle-gutter-top 	0
 * @gridle-gutter-right 	0px
 * @gridle-gutter-bottom 	0
 * @gridle-gutter-left 	0px
 * @gridle-direction 	ltr
 * @gridle-dir-attribute 	false
 * @gridle-name-multiplicator 	1
 * @gridle-states-classes 	false
 * @gridle-classes-prefix 	
 */
.container:after {
  content: "";
  display: table;
  clear: both;
}

.row:before, .row-reverse:before, .row:after, .row-reverse:after {
  content: "";
  display: table;
}
.row:after, .row-reverse:after {
  clear: both;
}
.row, .row-reverse {
  zoom: 1;
}

.gr-0, .gr-1, .gr-2, .gr-3, .gr-4, .gr-5, .gr-6, .gr-7, .gr-8, .gr-9, .gr-10, .gr-11, .gr-12 {
  display: inline-block;
  min-height: 1px;
  line-height: 1;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: top;
  padding-right: 10px;
  padding-left: 10px;
}

.gr-adapt {
  display: table-cell;
  width: 1px;
  white-space: nowrap !important;
  line-height: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 10px;
  padding-left: 10px;
}

.gr-grow {
  display: table-cell;
  width: 99999px;
  line-height: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 10px;
  padding-left: 10px;
}

.push-0, .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12 {
  position: relative;
}

.pull-0, .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12 {
  position: relative;
}

.nowrap {
  white-space: nowrap;
}
.nowrap > * {
  white-space: normal;
}

.wrap {
  white-space: normal;
}

.gr-centered {
  display: block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  clear: both !important;
}

@media screen and (max-width: 900px) {
  .container\@m:after {
    content: "";
    display: table;
    clear: both;
  }
}
@media screen and (max-width: 900px) {
  .row\@m:before, .row-reverse\@m:before, .row\@m:after, .row-reverse\@m:after {
    content: "";
    display: table;
  }
  .row\@m:after, .row-reverse\@m:after {
    clear: both;
  }
  .row\@m, .row-reverse\@m {
    zoom: 1;
  }
}
@media screen and (max-width: 900px) {
  .gr-0\@m, .gr-1\@m, .gr-2\@m, .gr-3\@m, .gr-4\@m, .gr-5\@m, .gr-6\@m, .gr-7\@m, .gr-8\@m, .gr-9\@m, .gr-10\@m, .gr-11\@m, .gr-12\@m {
    display: inline-block;
    min-height: 1px;
    line-height: 1;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (max-width: 900px) {
  .gr-adapt\@m {
    display: table-cell;
    width: 1px;
    white-space: nowrap !important;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (max-width: 900px) {
  .gr-grow\@m {
    display: table-cell;
    width: 99999px;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (max-width: 900px) {
  .push-0\@m, .push-1\@m, .push-2\@m, .push-3\@m, .push-4\@m, .push-5\@m, .push-6\@m, .push-7\@m, .push-8\@m, .push-9\@m, .push-10\@m, .push-11\@m, .push-12\@m {
    position: relative;
  }
}
@media screen and (max-width: 900px) {
  .pull-0\@m, .pull-1\@m, .pull-2\@m, .pull-3\@m, .pull-4\@m, .pull-5\@m, .pull-6\@m, .pull-7\@m, .pull-8\@m, .pull-9\@m, .pull-10\@m, .pull-11\@m, .pull-12\@m {
    position: relative;
  }
}
@media screen and (max-width: 900px) {
  .nowrap\@m {
    white-space: nowrap;
  }
  .nowrap\@m > * {
    white-space: normal;
  }
}
@media screen and (max-width: 900px) {
  .wrap\@m {
    white-space: normal;
  }
}
@media screen and (max-width: 900px) {
  .gr-centered\@m {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both !important;
  }
}
@media screen and (min-width: 901px) {
  .container\@t:after {
    content: "";
    display: table;
    clear: both;
  }
}
@media screen and (min-width: 901px) {
  .row\@t:before, .row-reverse\@t:before, .row\@t:after, .row-reverse\@t:after {
    content: "";
    display: table;
  }
  .row\@t:after, .row-reverse\@t:after {
    clear: both;
  }
  .row\@t, .row-reverse\@t {
    zoom: 1;
  }
}
@media screen and (min-width: 901px) {
  .gr-0\@t, .gr-1\@t, .gr-2\@t, .gr-3\@t, .gr-4\@t, .gr-5\@t, .gr-6\@t, .gr-7\@t, .gr-8\@t, .gr-9\@t, .gr-10\@t, .gr-11\@t, .gr-12\@t {
    display: inline-block;
    min-height: 1px;
    line-height: 1;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (min-width: 901px) {
  .gr-adapt\@t {
    display: table-cell;
    width: 1px;
    white-space: nowrap !important;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (min-width: 901px) {
  .gr-grow\@t {
    display: table-cell;
    width: 99999px;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (min-width: 901px) {
  .push-0\@t, .push-1\@t, .push-2\@t, .push-3\@t, .push-4\@t, .push-5\@t, .push-6\@t, .push-7\@t, .push-8\@t, .push-9\@t, .push-10\@t, .push-11\@t, .push-12\@t {
    position: relative;
  }
}
@media screen and (min-width: 901px) {
  .pull-0\@t, .pull-1\@t, .pull-2\@t, .pull-3\@t, .pull-4\@t, .pull-5\@t, .pull-6\@t, .pull-7\@t, .pull-8\@t, .pull-9\@t, .pull-10\@t, .pull-11\@t, .pull-12\@t {
    position: relative;
  }
}
@media screen and (min-width: 901px) {
  .nowrap\@t {
    white-space: nowrap;
  }
  .nowrap\@t > * {
    white-space: normal;
  }
}
@media screen and (min-width: 901px) {
  .wrap\@t {
    white-space: normal;
  }
}
@media screen and (min-width: 901px) {
  .gr-centered\@t {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both !important;
  }
}
@media screen and (min-width: 901px) {
  .container\@s:after {
    content: "";
    display: table;
    clear: both;
  }
}
@media screen and (min-width: 901px) {
  .row\@s:before, .row-reverse\@s:before, .row\@s:after, .row-reverse\@s:after {
    content: "";
    display: table;
  }
  .row\@s:after, .row-reverse\@s:after {
    clear: both;
  }
  .row\@s, .row-reverse\@s {
    zoom: 1;
  }
}
@media screen and (min-width: 901px) {
  .gr-0\@s, .gr-1\@s, .gr-2\@s, .gr-3\@s, .gr-4\@s, .gr-5\@s, .gr-6\@s, .gr-7\@s, .gr-8\@s, .gr-9\@s, .gr-10\@s, .gr-11\@s, .gr-12\@s {
    display: inline-block;
    min-height: 1px;
    line-height: 1;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (min-width: 901px) {
  .gr-adapt\@s {
    display: table-cell;
    width: 1px;
    white-space: nowrap !important;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (min-width: 901px) {
  .gr-grow\@s {
    display: table-cell;
    width: 99999px;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (min-width: 901px) {
  .push-0\@s, .push-1\@s, .push-2\@s, .push-3\@s, .push-4\@s, .push-5\@s, .push-6\@s, .push-7\@s, .push-8\@s, .push-9\@s, .push-10\@s, .push-11\@s, .push-12\@s {
    position: relative;
  }
}
@media screen and (min-width: 901px) {
  .pull-0\@s, .pull-1\@s, .pull-2\@s, .pull-3\@s, .pull-4\@s, .pull-5\@s, .pull-6\@s, .pull-7\@s, .pull-8\@s, .pull-9\@s, .pull-10\@s, .pull-11\@s, .pull-12\@s {
    position: relative;
  }
}
@media screen and (min-width: 901px) {
  .nowrap\@s {
    white-space: nowrap;
  }
  .nowrap\@s > * {
    white-space: normal;
  }
}
@media screen and (min-width: 901px) {
  .wrap\@s {
    white-space: normal;
  }
}
@media screen and (min-width: 901px) {
  .gr-centered\@s {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both !important;
  }
}
@media screen and (max-width: 400px) {
  @-ms-viewport {
    width: device-width;
  }
}
#gridle-settings {
  content: '{ "version" : "3.0.0", "states" : { "default":{ "name" : "default", "min-width" : null, "max-width" : null, "query" : null, "classes" : true, "context" : "12", "column-width" : null, "gutter-width" : "20px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "10px", "gutter-bottom" : "0", "gutter-left" : "10px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "m":{ "name" : "m", "min-width" : null, "max-width" : "600px", "query" : "screen and (max-width: 900px)", "classes" : true, "context" : "12", "column-width" : null, "gutter-width" : "0px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "0px", "gutter-bottom" : "0", "gutter-left" : "0px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "t":{ "name" : "t", "min-width" : "600px", "max-width" : null, "query" : "screen and (min-width: 901px)", "classes" : true, "context" : "12", "column-width" : null, "gutter-width" : "0px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "0px", "gutter-bottom" : "0", "gutter-left" : "0px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "s":{ "name" : "s", "min-width" : "900px", "max-width" : null, "query" : "screen and (min-width: 901px)", "classes" : true, "context" : "12", "column-width" : null, "gutter-width" : "0px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "0px", "gutter-bottom" : "0", "gutter-left" : "0px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }} }';
}

/**
 * @name 	Columns
 * Grid columns available
 * @styleguide 	Gridle / Columns
 * @example 	html
 * <style>
 * .row.gridle-styleguide {
 * 	margin-bottom: 20px;
 * }
 * [class*="gr-"].gridle-styleguide {
 * 	background:#eee;
 * 	padding:20px;
 * }
 * </style>
 * <div class="gridle-styleguide .container">
 *   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-1"> .gr-1 </div> </div>   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-2"> .gr-2 </div> </div>   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-3"> .gr-3 </div> </div>   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-4"> .gr-4 </div> </div>   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-5"> .gr-5 </div> </div>   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-6"> .gr-6 </div> </div>   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-7"> .gr-7 </div> </div>   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-8"> .gr-8 </div> </div>   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-9"> .gr-9 </div> </div>   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-10"> .gr-10 </div> </div>   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-11"> .gr-11 </div> </div>   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-12"> .gr-12 </div> </div> 
 * </div>
 */
.gr-0 {
  width: 0%;
}

.push-0 {
  left: 0%;
  right: auto;
}

.pull-0 {
  right: 0%;
  left: auto;
}

.prefix-0 {
  margin-left: 0%;
}

.suffix-0 {
  margin-right: 0%;
}

.gr-1 {
  width: 8.33333%;
}

.push-1 {
  left: 8.33333%;
  right: auto;
}

.pull-1 {
  right: 8.33333%;
  left: auto;
}

.prefix-1 {
  margin-left: 8.33333%;
}

.suffix-1 {
  margin-right: 8.33333%;
}

.gr-2 {
  width: 16.66667%;
}

.push-2 {
  left: 16.66667%;
  right: auto;
}

.pull-2 {
  right: 16.66667%;
  left: auto;
}

.prefix-2 {
  margin-left: 16.66667%;
}

.suffix-2 {
  margin-right: 16.66667%;
}

.gr-3 {
  width: 25%;
}

.push-3 {
  left: 25%;
  right: auto;
}

.pull-3 {
  right: 25%;
  left: auto;
}

.prefix-3 {
  margin-left: 25%;
}

.suffix-3 {
  margin-right: 25%;
}

.gr-4 {
  width: 33.33333%;
}

.push-4 {
  left: 33.33333%;
  right: auto;
}

.pull-4 {
  right: 33.33333%;
  left: auto;
}

.prefix-4 {
  margin-left: 33.33333%;
}

.suffix-4 {
  margin-right: 33.33333%;
}

.gr-5 {
  width: 41.66667%;
}

.push-5 {
  left: 41.66667%;
  right: auto;
}

.pull-5 {
  right: 41.66667%;
  left: auto;
}

.prefix-5 {
  margin-left: 41.66667%;
}

.suffix-5 {
  margin-right: 41.66667%;
}

.gr-6 {
  width: 50%;
}

.push-6 {
  left: 50%;
  right: auto;
}

.pull-6 {
  right: 50%;
  left: auto;
}

.prefix-6 {
  margin-left: 50%;
}

.suffix-6 {
  margin-right: 50%;
}

.gr-7 {
  width: 58.33333%;
}

.push-7 {
  left: 58.33333%;
  right: auto;
}

.pull-7 {
  right: 58.33333%;
  left: auto;
}

.prefix-7 {
  margin-left: 58.33333%;
}

.suffix-7 {
  margin-right: 58.33333%;
}

.gr-8 {
  width: 66.66667%;
}

.push-8 {
  left: 66.66667%;
  right: auto;
}

.pull-8 {
  right: 66.66667%;
  left: auto;
}

.prefix-8 {
  margin-left: 66.66667%;
}

.suffix-8 {
  margin-right: 66.66667%;
}

.gr-9 {
  width: 75%;
}

.push-9 {
  left: 75%;
  right: auto;
}

.pull-9 {
  right: 75%;
  left: auto;
}

.prefix-9 {
  margin-left: 75%;
}

.suffix-9 {
  margin-right: 75%;
}

.gr-10 {
  width: 83.33333%;
}

.push-10 {
  left: 83.33333%;
  right: auto;
}

.pull-10 {
  right: 83.33333%;
  left: auto;
}

.prefix-10 {
  margin-left: 83.33333%;
}

.suffix-10 {
  margin-right: 83.33333%;
}

.gr-11 {
  width: 91.66667%;
}

.push-11 {
  left: 91.66667%;
  right: auto;
}

.pull-11 {
  right: 91.66667%;
  left: auto;
}

.prefix-11 {
  margin-left: 91.66667%;
}

.suffix-11 {
  margin-right: 91.66667%;
}

.gr-12 {
  width: 100%;
}

.push-12 {
  left: 100%;
  right: auto;
}

.pull-12 {
  right: 100%;
  left: auto;
}

.prefix-12 {
  margin-left: 100%;
}

.suffix-12 {
  margin-right: 100%;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clear {
  clear: both;
}

.clear-left {
  clear: left;
}

.clear-right {
  clear: right;
}

.auto-height {
  height: inherit;
  min-height: inherit;
  max-height: inherit;
}

.row {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: -10px;
  margin-right: -10px;
}
[class*="no-gutter"] > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.row-reverse {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: -10px;
  margin-right: -10px;
  transform: rotateY(180deg);
}
.row-reverse > [class*="gr-"] {
  transform: rotateY(-180deg);
}
[class*="no-gutter"] > .row-reverse {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.row-full {
  width: 100vw;
  margin-left: 50% !important;
  margin-right: 0 !important;
  -webkit-transform: translateX(-50%);
  -moz-transition: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

.col {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: -10px;
  margin-right: -10px;
}

.col-reverse {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: -10px;
  margin-right: -10px;
  transform: rotateX(180deg);
}
.col-reverse > [class*="gr-"] {
  transform: rotateX(-180deg);
}

.gr-table {
  display: table-cell;
  float: none;
  vertical-align: top;
}

.row-no-gutter {
  margin-left: 0;
  margin-right: 0;
}
.row-no-gutter > [class*="gr-"] {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.row-no-gutter-top {
  margin-left: 0;
  margin-right: 0;
}
.row-no-gutter-top > [class*="gr-"] {
  padding-top: 0;
}

.row-no-gutter-right {
  margin-left: 0;
  margin-right: 0;
}
.row-no-gutter-right > [class*="gr-"] {
  padding-right: 0;
}

.row-no-gutter-bottom {
  margin-left: 0;
  margin-right: 0;
}
.row-no-gutter-bottom > [class*="gr-"] {
  padding-bottom: 0;
}

.row-no-gutter-left {
  margin-left: 0;
  margin-right: 0;
}
.row-no-gutter-left > [class*="gr-"] {
  padding-left: 0;
}

.row-align-left {
  font-size: 0;
  word-spacing: 0;
  letter-spacing: 0;
  clear: both;
  text-align: left;
}
.row-align-left > * {
  word-spacing: normal;
  letter-spacing: normal;
  float: none !important;
  vertical-align: top;
  font-size: 1rem;
}

.row-align-center {
  font-size: 0;
  word-spacing: 0;
  letter-spacing: 0;
  clear: both;
  text-align: center;
}
.row-align-center > * {
  word-spacing: normal;
  letter-spacing: normal;
  float: none !important;
  vertical-align: top;
  font-size: 1rem;
}
.row-align-center > * {
  text-align: left;
}

.row-align-right {
  font-size: 0;
  word-spacing: 0;
  letter-spacing: 0;
  clear: both;
  text-align: right;
}
.row-align-right > * {
  word-spacing: normal;
  letter-spacing: normal;
  float: none !important;
  vertical-align: top;
  font-size: 1rem;
}
.row-align-right > * {
  text-align: left;
}

.row-align-middle {
  font-size: 0;
  word-spacing: 0;
  letter-spacing: 0;
  clear: both;
  vertical-align: middle;
}
.row-align-middle > * {
  word-spacing: normal;
  letter-spacing: normal;
  float: none !important;
  vertical-align: middle;
  font-size: 1rem;
}

.row-align-top {
  font-size: 0;
  word-spacing: 0;
  letter-spacing: 0;
  clear: both;
  vertical-align: top;
}
.row-align-top > * {
  word-spacing: normal;
  letter-spacing: normal;
  float: none !important;
  vertical-align: top;
  font-size: 1rem;
}

.row-align-bottom {
  font-size: 0;
  word-spacing: 0;
  letter-spacing: 0;
  clear: both;
  vertical-align: bottom;
}
.row-align-bottom > * {
  word-spacing: normal;
  letter-spacing: normal;
  float: none !important;
  vertical-align: bottom;
  font-size: 1rem;
}

.no-gutter {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.no-gutter-left {
  padding-left: 0;
}

.no-gutter-right {
  padding-right: 0;
}

.no-gutter-top {
  padding-top: 0;
}

.no-gutter-bottom {
  padding-bottom: 0;
}

.gutter {
  padding-right: 10px;
  padding-left: 10px;
}

.gutter-left {
  padding-left: 10px;
}

.gutter-right {
  padding-right: 10px;
}

.hide {
  display: none !important;
}

.not-visible {
  visibility: hidden;
}

.show {
  display: block !important;
}

.show-inline {
  display: inline-block !important;
}

.visible {
  visibility: visible;
}

.row-debug {
  position: relative;
  z-index: 99999;
  overflow: hidden;
}
.row-debug:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 99999px;
  background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%);
  background-size: 16.66667% 100%;
  z-index: 99999;
}

body {
  direction: ltr;
}

@media screen and (max-width: 900px) {
  .gr-0\@m {
    width: 0%;
  }

  .push-0\@m {
    left: 0%;
    right: auto;
  }

  .pull-0\@m {
    right: 0%;
    left: auto;
  }

  .prefix-0\@m {
    margin-left: 0%;
  }

  .suffix-0\@m {
    margin-right: 0%;
  }

  .gr-1\@m {
    width: 8.33333%;
  }

  .push-1\@m {
    left: 8.33333%;
    right: auto;
  }

  .pull-1\@m {
    right: 8.33333%;
    left: auto;
  }

  .prefix-1\@m {
    margin-left: 8.33333%;
  }

  .suffix-1\@m {
    margin-right: 8.33333%;
  }

  .gr-2\@m {
    width: 16.66667%;
  }

  .push-2\@m {
    left: 16.66667%;
    right: auto;
  }

  .pull-2\@m {
    right: 16.66667%;
    left: auto;
  }

  .prefix-2\@m {
    margin-left: 16.66667%;
  }

  .suffix-2\@m {
    margin-right: 16.66667%;
  }

  .gr-3\@m {
    width: 25%;
  }

  .push-3\@m {
    left: 25%;
    right: auto;
  }

  .pull-3\@m {
    right: 25%;
    left: auto;
  }

  .prefix-3\@m {
    margin-left: 25%;
  }

  .suffix-3\@m {
    margin-right: 25%;
  }

  .gr-4\@m {
    width: 33.33333%;
  }

  .push-4\@m {
    left: 33.33333%;
    right: auto;
  }

  .pull-4\@m {
    right: 33.33333%;
    left: auto;
  }

  .prefix-4\@m {
    margin-left: 33.33333%;
  }

  .suffix-4\@m {
    margin-right: 33.33333%;
  }

  .gr-5\@m {
    width: 41.66667%;
  }

  .push-5\@m {
    left: 41.66667%;
    right: auto;
  }

  .pull-5\@m {
    right: 41.66667%;
    left: auto;
  }

  .prefix-5\@m {
    margin-left: 41.66667%;
  }

  .suffix-5\@m {
    margin-right: 41.66667%;
  }

  .gr-6\@m {
    width: 50%;
  }

  .push-6\@m {
    left: 50%;
    right: auto;
  }

  .pull-6\@m {
    right: 50%;
    left: auto;
  }

  .prefix-6\@m {
    margin-left: 50%;
  }

  .suffix-6\@m {
    margin-right: 50%;
  }

  .gr-7\@m {
    width: 58.33333%;
  }

  .push-7\@m {
    left: 58.33333%;
    right: auto;
  }

  .pull-7\@m {
    right: 58.33333%;
    left: auto;
  }

  .prefix-7\@m {
    margin-left: 58.33333%;
  }

  .suffix-7\@m {
    margin-right: 58.33333%;
  }

  .gr-8\@m {
    width: 66.66667%;
  }

  .push-8\@m {
    left: 66.66667%;
    right: auto;
  }

  .pull-8\@m {
    right: 66.66667%;
    left: auto;
  }

  .prefix-8\@m {
    margin-left: 66.66667%;
  }

  .suffix-8\@m {
    margin-right: 66.66667%;
  }

  .gr-9\@m {
    width: 75%;
  }

  .push-9\@m {
    left: 75%;
    right: auto;
  }

  .pull-9\@m {
    right: 75%;
    left: auto;
  }

  .prefix-9\@m {
    margin-left: 75%;
  }

  .suffix-9\@m {
    margin-right: 75%;
  }

  .gr-10\@m {
    width: 83.33333%;
  }

  .push-10\@m {
    left: 83.33333%;
    right: auto;
  }

  .pull-10\@m {
    right: 83.33333%;
    left: auto;
  }

  .prefix-10\@m {
    margin-left: 83.33333%;
  }

  .suffix-10\@m {
    margin-right: 83.33333%;
  }

  .gr-11\@m {
    width: 91.66667%;
  }

  .push-11\@m {
    left: 91.66667%;
    right: auto;
  }

  .pull-11\@m {
    right: 91.66667%;
    left: auto;
  }

  .prefix-11\@m {
    margin-left: 91.66667%;
  }

  .suffix-11\@m {
    margin-right: 91.66667%;
  }

  .gr-12\@m {
    width: 100%;
  }

  .push-12\@m {
    left: 100%;
    right: auto;
  }

  .pull-12\@m {
    right: 100%;
    left: auto;
  }

  .prefix-12\@m {
    margin-left: 100%;
  }

  .suffix-12\@m {
    margin-right: 100%;
  }

  .float-left\@m {
    float: left;
  }

  .float-right\@m {
    float: right;
  }

  .clear\@m {
    clear: both;
  }

  .clear-left\@m {
    clear: left;
  }

  .clear-right\@m {
    clear: right;
  }

  .auto-height\@m {
    height: inherit;
    min-height: inherit;
    max-height: inherit;
  }

  .row\@m {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
  }
  [class*="no-gutter"] > .row\@m {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row-reverse\@m {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
    transform: rotateY(180deg);
  }
  .row-reverse\@m > [class*="gr-"] {
    transform: rotateY(-180deg);
  }
  [class*="no-gutter"] > .row-reverse\@m {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row-full\@m {
    width: 100vw;
    margin-left: 50% !important;
    margin-right: 0 !important;
    -webkit-transform: translateX(-50%);
    -moz-transition: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .col\@m {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
  }

  .col-reverse\@m {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
    transform: rotateX(180deg);
  }
  .col-reverse\@m > [class*="gr-"] {
    transform: rotateX(-180deg);
  }

  .gr-table\@m {
    display: table-cell;
    float: none;
    vertical-align: top;
  }

  .row-no-gutter\@m {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter\@m > [class*="gr-"] {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }

  .row-no-gutter-top\@m {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-top\@m > [class*="gr-"] {
    padding-top: 0;
  }

  .row-no-gutter-right\@m {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-right\@m > [class*="gr-"] {
    padding-right: 0;
  }

  .row-no-gutter-bottom\@m {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-bottom\@m > [class*="gr-"] {
    padding-bottom: 0;
  }

  .row-no-gutter-left\@m {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-left\@m > [class*="gr-"] {
    padding-left: 0;
  }

  .row-align-left\@m {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: left;
  }
  .row-align-left\@m > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }

  .row-align-center\@m {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: center;
  }
  .row-align-center\@m > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-center\@m > * {
    text-align: left;
  }

  .row-align-right\@m {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: right;
  }
  .row-align-right\@m > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-right\@m > * {
    text-align: left;
  }

  .row-align-middle\@m {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: middle;
  }
  .row-align-middle\@m > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: middle;
    font-size: 1rem;
  }

  .row-align-top\@m {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: top;
  }
  .row-align-top\@m > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }

  .row-align-bottom\@m {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: bottom;
  }
  .row-align-bottom\@m > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: bottom;
    font-size: 1rem;
  }

  .no-gutter\@m {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }

  .no-gutter-left\@m {
    padding-left: 0;
  }

  .no-gutter-right\@m {
    padding-right: 0;
  }

  .no-gutter-top\@m {
    padding-top: 0;
  }

  .no-gutter-bottom\@m {
    padding-bottom: 0;
  }

  .hide\@m {
    display: none !important;
  }

  .not-visible\@m {
    visibility: hidden;
  }

  .show\@m {
    display: block !important;
  }

  .show-inline\@m {
    display: inline-block !important;
  }

  .visible\@m {
    visibility: visible;
  }

  .row-debug\@m {
    position: relative;
    z-index: 99999;
    overflow: hidden;
  }
  .row-debug\@m:before {
    pointer-events: none;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 99999px;
    background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%);
    background-size: 16.66667% 100%;
    z-index: 99999;
  }

  body {
    direction: ltr;
  }
}
@media screen and (min-width: 901px) {
  .gr-0\@t {
    width: 0%;
  }

  .push-0\@t {
    left: 0%;
    right: auto;
  }

  .pull-0\@t {
    right: 0%;
    left: auto;
  }

  .prefix-0\@t {
    margin-left: 0%;
  }

  .suffix-0\@t {
    margin-right: 0%;
  }

  .gr-1\@t {
    width: 8.33333%;
  }

  .push-1\@t {
    left: 8.33333%;
    right: auto;
  }

  .pull-1\@t {
    right: 8.33333%;
    left: auto;
  }

  .prefix-1\@t {
    margin-left: 8.33333%;
  }

  .suffix-1\@t {
    margin-right: 8.33333%;
  }

  .gr-2\@t {
    width: 16.66667%;
  }

  .push-2\@t {
    left: 16.66667%;
    right: auto;
  }

  .pull-2\@t {
    right: 16.66667%;
    left: auto;
  }

  .prefix-2\@t {
    margin-left: 16.66667%;
  }

  .suffix-2\@t {
    margin-right: 16.66667%;
  }

  .gr-3\@t {
    width: 25%;
  }

  .push-3\@t {
    left: 25%;
    right: auto;
  }

  .pull-3\@t {
    right: 25%;
    left: auto;
  }

  .prefix-3\@t {
    margin-left: 25%;
  }

  .suffix-3\@t {
    margin-right: 25%;
  }

  .gr-4\@t {
    width: 33.33333%;
  }

  .push-4\@t {
    left: 33.33333%;
    right: auto;
  }

  .pull-4\@t {
    right: 33.33333%;
    left: auto;
  }

  .prefix-4\@t {
    margin-left: 33.33333%;
  }

  .suffix-4\@t {
    margin-right: 33.33333%;
  }

  .gr-5\@t {
    width: 41.66667%;
  }

  .push-5\@t {
    left: 41.66667%;
    right: auto;
  }

  .pull-5\@t {
    right: 41.66667%;
    left: auto;
  }

  .prefix-5\@t {
    margin-left: 41.66667%;
  }

  .suffix-5\@t {
    margin-right: 41.66667%;
  }

  .gr-6\@t {
    width: 50%;
  }

  .push-6\@t {
    left: 50%;
    right: auto;
  }

  .pull-6\@t {
    right: 50%;
    left: auto;
  }

  .prefix-6\@t {
    margin-left: 50%;
  }

  .suffix-6\@t {
    margin-right: 50%;
  }

  .gr-7\@t {
    width: 58.33333%;
  }

  .push-7\@t {
    left: 58.33333%;
    right: auto;
  }

  .pull-7\@t {
    right: 58.33333%;
    left: auto;
  }

  .prefix-7\@t {
    margin-left: 58.33333%;
  }

  .suffix-7\@t {
    margin-right: 58.33333%;
  }

  .gr-8\@t {
    width: 66.66667%;
  }

  .push-8\@t {
    left: 66.66667%;
    right: auto;
  }

  .pull-8\@t {
    right: 66.66667%;
    left: auto;
  }

  .prefix-8\@t {
    margin-left: 66.66667%;
  }

  .suffix-8\@t {
    margin-right: 66.66667%;
  }

  .gr-9\@t {
    width: 75%;
  }

  .push-9\@t {
    left: 75%;
    right: auto;
  }

  .pull-9\@t {
    right: 75%;
    left: auto;
  }

  .prefix-9\@t {
    margin-left: 75%;
  }

  .suffix-9\@t {
    margin-right: 75%;
  }

  .gr-10\@t {
    width: 83.33333%;
  }

  .push-10\@t {
    left: 83.33333%;
    right: auto;
  }

  .pull-10\@t {
    right: 83.33333%;
    left: auto;
  }

  .prefix-10\@t {
    margin-left: 83.33333%;
  }

  .suffix-10\@t {
    margin-right: 83.33333%;
  }

  .gr-11\@t {
    width: 91.66667%;
  }

  .push-11\@t {
    left: 91.66667%;
    right: auto;
  }

  .pull-11\@t {
    right: 91.66667%;
    left: auto;
  }

  .prefix-11\@t {
    margin-left: 91.66667%;
  }

  .suffix-11\@t {
    margin-right: 91.66667%;
  }

  .gr-12\@t {
    width: 100%;
  }

  .push-12\@t {
    left: 100%;
    right: auto;
  }

  .pull-12\@t {
    right: 100%;
    left: auto;
  }

  .prefix-12\@t {
    margin-left: 100%;
  }

  .suffix-12\@t {
    margin-right: 100%;
  }

  .float-left\@t {
    float: left;
  }

  .float-right\@t {
    float: right;
  }

  .clear\@t {
    clear: both;
  }

  .clear-left\@t {
    clear: left;
  }

  .clear-right\@t {
    clear: right;
  }

  .auto-height\@t {
    height: inherit;
    min-height: inherit;
    max-height: inherit;
  }

  .row\@t {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
  }
  [class*="no-gutter"] > .row\@t {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row-reverse\@t {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
    transform: rotateY(180deg);
  }
  .row-reverse\@t > [class*="gr-"] {
    transform: rotateY(-180deg);
  }
  [class*="no-gutter"] > .row-reverse\@t {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row-full\@t {
    width: 100vw;
    margin-left: 50% !important;
    margin-right: 0 !important;
    -webkit-transform: translateX(-50%);
    -moz-transition: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .col\@t {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
  }

  .col-reverse\@t {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
    transform: rotateX(180deg);
  }
  .col-reverse\@t > [class*="gr-"] {
    transform: rotateX(-180deg);
  }

  .gr-table\@t {
    display: table-cell;
    float: none;
    vertical-align: top;
  }

  .row-no-gutter\@t {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter\@t > [class*="gr-"] {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }

  .row-no-gutter-top\@t {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-top\@t > [class*="gr-"] {
    padding-top: 0;
  }

  .row-no-gutter-right\@t {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-right\@t > [class*="gr-"] {
    padding-right: 0;
  }

  .row-no-gutter-bottom\@t {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-bottom\@t > [class*="gr-"] {
    padding-bottom: 0;
  }

  .row-no-gutter-left\@t {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-left\@t > [class*="gr-"] {
    padding-left: 0;
  }

  .row-align-left\@t {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: left;
  }
  .row-align-left\@t > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }

  .row-align-center\@t {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: center;
  }
  .row-align-center\@t > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-center\@t > * {
    text-align: left;
  }

  .row-align-right\@t {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: right;
  }
  .row-align-right\@t > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-right\@t > * {
    text-align: left;
  }

  .row-align-middle\@t {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: middle;
  }
  .row-align-middle\@t > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: middle;
    font-size: 1rem;
  }

  .row-align-top\@t {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: top;
  }
  .row-align-top\@t > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }

  .row-align-bottom\@t {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: bottom;
  }
  .row-align-bottom\@t > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: bottom;
    font-size: 1rem;
  }

  .no-gutter\@t {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }

  .no-gutter-left\@t {
    padding-left: 0;
  }

  .no-gutter-right\@t {
    padding-right: 0;
  }

  .no-gutter-top\@t {
    padding-top: 0;
  }

  .no-gutter-bottom\@t {
    padding-bottom: 0;
  }

  .hide\@t {
    display: none !important;
  }

  .not-visible\@t {
    visibility: hidden;
  }

  .show\@t {
    display: block !important;
  }

  .show-inline\@t {
    display: inline-block !important;
  }

  .visible\@t {
    visibility: visible;
  }

  .row-debug\@t {
    position: relative;
    z-index: 99999;
    overflow: hidden;
  }
  .row-debug\@t:before {
    pointer-events: none;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 99999px;
    background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%);
    background-size: 16.66667% 100%;
    z-index: 99999;
  }

  body {
    direction: ltr;
  }
}
@media screen and (min-width: 901px) {
  .gr-0\@s {
    width: 0%;
  }

  .push-0\@s {
    left: 0%;
    right: auto;
  }

  .pull-0\@s {
    right: 0%;
    left: auto;
  }

  .prefix-0\@s {
    margin-left: 0%;
  }

  .suffix-0\@s {
    margin-right: 0%;
  }

  .gr-1\@s {
    width: 8.33333%;
  }

  .push-1\@s {
    left: 8.33333%;
    right: auto;
  }

  .pull-1\@s {
    right: 8.33333%;
    left: auto;
  }

  .prefix-1\@s {
    margin-left: 8.33333%;
  }

  .suffix-1\@s {
    margin-right: 8.33333%;
  }

  .gr-2\@s {
    width: 16.66667%;
  }

  .push-2\@s {
    left: 16.66667%;
    right: auto;
  }

  .pull-2\@s {
    right: 16.66667%;
    left: auto;
  }

  .prefix-2\@s {
    margin-left: 16.66667%;
  }

  .suffix-2\@s {
    margin-right: 16.66667%;
  }

  .gr-3\@s {
    width: 25%;
  }

  .push-3\@s {
    left: 25%;
    right: auto;
  }

  .pull-3\@s {
    right: 25%;
    left: auto;
  }

  .prefix-3\@s {
    margin-left: 25%;
  }

  .suffix-3\@s {
    margin-right: 25%;
  }

  .gr-4\@s {
    width: 33.33333%;
  }

  .push-4\@s {
    left: 33.33333%;
    right: auto;
  }

  .pull-4\@s {
    right: 33.33333%;
    left: auto;
  }

  .prefix-4\@s {
    margin-left: 33.33333%;
  }

  .suffix-4\@s {
    margin-right: 33.33333%;
  }

  .gr-5\@s {
    width: 41.66667%;
  }

  .push-5\@s {
    left: 41.66667%;
    right: auto;
  }

  .pull-5\@s {
    right: 41.66667%;
    left: auto;
  }

  .prefix-5\@s {
    margin-left: 41.66667%;
  }

  .suffix-5\@s {
    margin-right: 41.66667%;
  }

  .gr-6\@s {
    width: 50%;
  }

  .push-6\@s {
    left: 50%;
    right: auto;
  }

  .pull-6\@s {
    right: 50%;
    left: auto;
  }

  .prefix-6\@s {
    margin-left: 50%;
  }

  .suffix-6\@s {
    margin-right: 50%;
  }

  .gr-7\@s {
    width: 58.33333%;
  }

  .push-7\@s {
    left: 58.33333%;
    right: auto;
  }

  .pull-7\@s {
    right: 58.33333%;
    left: auto;
  }

  .prefix-7\@s {
    margin-left: 58.33333%;
  }

  .suffix-7\@s {
    margin-right: 58.33333%;
  }

  .gr-8\@s {
    width: 66.66667%;
  }

  .push-8\@s {
    left: 66.66667%;
    right: auto;
  }

  .pull-8\@s {
    right: 66.66667%;
    left: auto;
  }

  .prefix-8\@s {
    margin-left: 66.66667%;
  }

  .suffix-8\@s {
    margin-right: 66.66667%;
  }

  .gr-9\@s {
    width: 75%;
  }

  .push-9\@s {
    left: 75%;
    right: auto;
  }

  .pull-9\@s {
    right: 75%;
    left: auto;
  }

  .prefix-9\@s {
    margin-left: 75%;
  }

  .suffix-9\@s {
    margin-right: 75%;
  }

  .gr-10\@s {
    width: 83.33333%;
  }

  .push-10\@s {
    left: 83.33333%;
    right: auto;
  }

  .pull-10\@s {
    right: 83.33333%;
    left: auto;
  }

  .prefix-10\@s {
    margin-left: 83.33333%;
  }

  .suffix-10\@s {
    margin-right: 83.33333%;
  }

  .gr-11\@s {
    width: 91.66667%;
  }

  .push-11\@s {
    left: 91.66667%;
    right: auto;
  }

  .pull-11\@s {
    right: 91.66667%;
    left: auto;
  }

  .prefix-11\@s {
    margin-left: 91.66667%;
  }

  .suffix-11\@s {
    margin-right: 91.66667%;
  }

  .gr-12\@s {
    width: 100%;
  }

  .push-12\@s {
    left: 100%;
    right: auto;
  }

  .pull-12\@s {
    right: 100%;
    left: auto;
  }

  .prefix-12\@s {
    margin-left: 100%;
  }

  .suffix-12\@s {
    margin-right: 100%;
  }

  .float-left\@s {
    float: left;
  }

  .float-right\@s {
    float: right;
  }

  .clear\@s {
    clear: both;
  }

  .clear-left\@s {
    clear: left;
  }

  .clear-right\@s {
    clear: right;
  }

  .auto-height\@s {
    height: inherit;
    min-height: inherit;
    max-height: inherit;
  }

  .row\@s {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
  }
  [class*="no-gutter"] > .row\@s {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row-reverse\@s {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
    transform: rotateY(180deg);
  }
  .row-reverse\@s > [class*="gr-"] {
    transform: rotateY(-180deg);
  }
  [class*="no-gutter"] > .row-reverse\@s {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row-full\@s {
    width: 100vw;
    margin-left: 50% !important;
    margin-right: 0 !important;
    -webkit-transform: translateX(-50%);
    -moz-transition: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .col\@s {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
  }

  .col-reverse\@s {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0px;
    margin-right: -0px;
    transform: rotateX(180deg);
  }
  .col-reverse\@s > [class*="gr-"] {
    transform: rotateX(-180deg);
  }

  .gr-table\@s {
    display: table-cell;
    float: none;
    vertical-align: top;
  }

  .row-no-gutter\@s {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter\@s > [class*="gr-"] {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }

  .row-no-gutter-top\@s {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-top\@s > [class*="gr-"] {
    padding-top: 0;
  }

  .row-no-gutter-right\@s {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-right\@s > [class*="gr-"] {
    padding-right: 0;
  }

  .row-no-gutter-bottom\@s {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-bottom\@s > [class*="gr-"] {
    padding-bottom: 0;
  }

  .row-no-gutter-left\@s {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-left\@s > [class*="gr-"] {
    padding-left: 0;
  }

  .row-align-left\@s {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: left;
  }
  .row-align-left\@s > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }

  .row-align-center\@s {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: center;
  }
  .row-align-center\@s > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-center\@s > * {
    text-align: left;
  }

  .row-align-right\@s {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: right;
  }
  .row-align-right\@s > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-right\@s > * {
    text-align: left;
  }

  .row-align-middle\@s {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: middle;
  }
  .row-align-middle\@s > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: middle;
    font-size: 1rem;
  }

  .row-align-top\@s {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: top;
  }
  .row-align-top\@s > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }

  .row-align-bottom\@s {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: bottom;
  }
  .row-align-bottom\@s > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: bottom;
    font-size: 1rem;
  }

  .no-gutter\@s {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }

  .no-gutter-left\@s {
    padding-left: 0;
  }

  .no-gutter-right\@s {
    padding-right: 0;
  }

  .no-gutter-top\@s {
    padding-top: 0;
  }

  .no-gutter-bottom\@s {
    padding-bottom: 0;
  }

  .hide\@s {
    display: none !important;
  }

  .not-visible\@s {
    visibility: hidden;
  }

  .show\@s {
    display: block !important;
  }

  .show-inline\@s {
    display: inline-block !important;
  }

  .visible\@s {
    visibility: visible;
  }

  .row-debug\@s {
    position: relative;
    z-index: 99999;
    overflow: hidden;
  }
  .row-debug\@s:before {
    pointer-events: none;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 99999px;
    background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%);
    background-size: 16.66667% 100%;
    z-index: 99999;
  }

  body {
    direction: ltr;
  }
}
[class*="gr-"] > [class^="row"],
[class*="gr-"] > [class^="col"] {
  margin-left: -10px;
  margin-right: -10px;
}

@media screen and (max-width: 900px) {
  [class*="gr-"] > [class^="row"],
  [class*="gr-"] > [class^="col"] {
    margin-left: -0px;
    margin-right: -0px;
  }
}
@media screen and (min-width: 901px) {
  [class*="gr-"] > [class^="row"],
  [class*="gr-"] > [class^="col"] {
    margin-left: -0px;
    margin-right: -0px;
  }
}
@media screen and (min-width: 901px) {
  [class*="gr-"] > [class^="row"],
  [class*="gr-"] > [class^="col"] {
    margin-left: -0px;
    margin-right: -0px;
  }
}