@charset "UTF-8";
/**
 * Vendors
 * All external librarie needed in the project.
 */
/**
 * Vendors
 * All external librarie needed in the project.
 */
/**
 * @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-classes();
 * // generate only certain states
 * \@include g-classes(mobile tablet);
 * // generate only the helpers for all the states
 * \@include g-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>
 */
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 0 0;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger:hover {
  opacity: 1;
}

.hamburger-box {
  width: 20px;
  height: 15px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1.5px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 20px;
  height: 3px;
  background-color: #000;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -6px;
}

.hamburger-inner::after {
  bottom: -6px;
}

/*
 * Arrow Turn
 */
.hamburger--arrowturn.is-active .hamburger-inner {
  transform: rotate(-180deg);
}

.hamburger--arrowturn.is-active .hamburger-inner::before {
  transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

.hamburger--arrowturn.is-active .hamburger-inner::after {
  transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

/*
 * Arrow Turn Right
 */
.hamburger--arrowturn-r.is-active .hamburger-inner {
  transform: rotate(-180deg);
}

.hamburger--arrowturn-r.is-active .hamburger-inner::before {
  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

.hamburger--arrowturn-r.is-active .hamburger-inner::after {
  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.hamburger--spin .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spin.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.hamburger--spin.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/**
 * @name 	Elastic Hamburger
 * Display a cool hamburger icon
 * @styleguide 		Objects / Hamburgers
 * @example 	html
 * <a is="s-activate" toggle="true" history="false" active-class="is-active" href="#menu" class="hamburger hamburger--spin p bkg-default">
 * 	<div class="hamburger-box">
 * 		<div class="hamburger-inner"></div>
 * 	</div>
 * </a>
 * <div id="menu"></div>
 */
/**
 * Parse and return the Map respresentation of a border property
 * The $border argument will be parsed with the [s-parse-properties](../core/functions/_s-parse-properties.scss) function.
 *
 * @param 		{List} 			$border 			The border property to parse
 * @return 		{Map} 								The Map represenration of the border
 *
 * @example
 * s-border(1px solid white);
 * // return
 * // (
 * // 	width : 1px,
 * // 	color : white,
 * // 	style : solid
 * // )
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the Map representation of a columns properties
 * @param  		{Interger} 			[$count=null] 			The number of columns
 * @param 		{Number} 			[$gap=null] 			The gap width between each columns
 * @param 		{String} 			[$fill=null] 			The fill property (balance,auto,initial,inherit)
 * @param 		{Number} 			[$width=null] 			The width of the columns
 * @param 		{Integer|String} 	[$span=null] 			The column-span property (1,all,initial,inherit)
 * @param 		{List} 				[$rule=null] 			The column-rule property
 * @param 		{String} 			[$rule-style=null]  	The column-rule-style property
 * @param 		{Color} 			[$rule-color=null] 		The column-rule-color property
 * @param 		{Number} 			[$rule-width=null] 		The column-rule-width property
 * @return 		{Map} 										The map representation or the columns properties
 *
 * @example
 * s-columns(2, 20px);
 * // return
 * // (
 * // 	column-count : 2,
 * // 	column-gap : 20px
 * // )
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Parse and return the Map respresentation of a margin property
 * The $margin argument will be parsed with the [s-parse-properties](../core/functions/_s-parse-properties.scss) function.
 *
 * @param 			{List|Number} 			$margin 			The margin property to parse
 * @return 			{Map} 										The map representation
 *
 * @example
 * s-margin(10px); // => ( top:10px, right:10px, bottom:10px, left:10px )
 * s-margin(10px 20px); // => ( top:10px, right:20px, bottom:10px, left:20px )
 * s-margin(5px 10px 15px 20px); // => ( top:5px, right:10px, bottom:15px, left:20px )
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the representation of a position styling like position:absolute; top:0; left:100%; etc...
 * This function gives you some shortcuts to align your element top, bottom, middle, center, etc...
 *
 * @param 		{String} 			[$position=absolute] 			The position css property
 * @param 		{String} 			[$vertical-align=top] 			The vertical alignement wanted (top,middle,bottom)
 * @param 		{String} 			[$align=left] 					The horizontal alignement wanted (left,center,right)
 * @param 		{Number} 			[$top=null] 					The top property wanted
 * @param 		{Number} 			[$right=null] 					The right property wanted
 * @param 		{Number} 			[$bottom=null] 					The bottom property wanted
 * @param 		{Number} 			[$left=null] 					The left property wanted
 * @return 		{Map} 												The map representation of the position wanted
 *
 * @example
 * s-position(absolute, top, right);
 * s-position(absolute, middle, center);
 * s-position(relative, bottom, right);
 * s-position(absolute, bottom, center);
 * // etc...
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the Map properties representation for the rhythme width
 * The rhythme width is the width of an element that target a certain number of letters by line
 *
 * @param 			{Integer} 			[$letters-count=settings.typography.line-letters-count] 		The number of letters to target by line
 * @return 			{Map} 																		The Map properties representation
 *
 * @example
 * s-rhythme-width(50);
 * // return
 * // (
 * // 	display : block,
 * // 	max-width : 50ex
 * // )
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the Map properties representation of a translate x,y and z
 *
 * @param 			{Number} 			[$x=0] 			The x translate value
 * @param 			{Number} 			[$y=0] 			The y translate value
 * @param 			{Number} 			[$z=0] 			The z translate value
 * @return 			{Map} 								The translate Map representation
 *
 * @example
 * s-translate(10px,20px);
 * // return
 * // (
 * // 	transform: translateX(10px) translateY(20px) translateZ(0)
 * // )
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the settings.vertical-rhythme.scope-class value
 *
 * @return 			{String} 			The settings.vertical-rhythme.scope-class value
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Helper mixin to set a background image
 *
 * @param 			{String} 				[$repeat=null] 				The background-repeat property
 * @param 			{String} 				[$size=null] 				The background-size property
 * @param 			{String} 				[$attachment=null] 			The background-attachment property
 * @param 			{String} 				[$blend-mode=null] 			The background-blend-mode property
 * @param 			{String} 				[$clip=null] 				The background-clip property
 * @param 			{String} 				[$url=null] 				The background-image url property
 * @param 			{Number} 				[$width=null] 				The background-size width property
 * @param 			{Number} 				[$height=null] 				The background-size height property
 * @param 			{Number} 				[$top=null] 				The background-position top property
 * @param 			{Number} 				[$left=null] 				The background-position left property
 * @param 			{String} 				[$suffix2x=@2x] 			The suffix to add the the url if the 2x resolution if wanted
 * @param 			{String} 				[$suffix3x=@3x] 			The suffix to add the the url if the 3x resolution if wanted
 * @param 			{String} 				[$suffix4x=@4x] 			The suffix to add the the url if the 4x resolution if wanted
 * @param 			{List} 					[$resolution=null] 			The resolution wanted like 2x, 3x and 4x
 * @param 			{List} 					[$position=null] 			The background-position property
 *
 * @example
 * .my-cool-element {
 * 		\@include s-background(
 * 			$url : 'img/my-cool-image.jpg',
 * 			$size : cover,
 * 			resolution : 2x 3x 4x
 * 		);
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	BEM mixins
 * Some useful mixins to work with BEM methodology
 */
/**
 * BEM block selector
 * @param 		{String} 				$name 		The block name
 * @param 		{String|List<String>} 	[$extend=false] 	The list of item to extends
 * @example 	scss
 * \@include s-Bem('card') {
 *  	background: white;
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * BEM element selector
 * @param 		{String} 				$name 		The block name
 * @param 		{String|List<String>} 	[$extend=false] 	The list of item to extends
 * @example 	scss
 * \@include s-Bem(card) {
 * 	background:white;
 *
 * 	\@include s-bEm(title) {
 * 		font-size:20px;
 * 	}
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * BEM modifier selector
 * @param 		{String} 				$name 		The block name
 * @param 		{String|List<String>} 	[$extend=false] 	The list of item to extends
 * @param 		{Boolean} 				[$standelone=s-setting('BEM.standelone')] 		If true, will automatically extends the base element
 * @example 	scss
 * \@include s-Bem(card) {
 * 	background:white;
 *
 * 	\@include s-beM(blue) {
 * 		background: blue;
 * 	}
 * }
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply some border radius
 * @param 		{Number} 		[$radius=null] 			The radius to apply globally
 * @param 		{Number} 		[$top=null] 			The radius to apply on top corners
 * @param 		{Number} 		[$right=null] 			The radius to apply on right corners
 * @param 		{Number} 		[$bottom=null] 			The radius to apply on bottom corners
 * @param 		{Number} 		[$left=null] 			The radius to apply on left corners
 * @param 		{Number} 		[$top-left=null] 		The radius to apply on top-left corners
 * @param 		{Number} 		[$top-right=null] 		The radius to apply on top-right corners
 * @param 		{Number} 		[$bottom-left=null] 	The radius to apply on bottom-left corners
 * @param 		{Number} 		[$bottom-right=null] 	The radius to apply on bottom-right corners
 *
 * @example 	scss
 * .my-cool-item {
 * 	// apply on top left and right corners
 * 	\@include s-border-radius(
 * 		$top : 10px;
 * 	);
 * 	// apply on each corners
 * 	\@include s-border-radius(10px);
 * 	// etc...
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Center a block element using margins etc...
 * @example 	scss
 * .my-cool-block-element {
 * 	\@include s-center-block();
 * }
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	s-clearfix
 * Apply a clearfix on the element.
 * Supported methods:
 * - micro
 * - facebook
 * - float
 * - micro
 *
 * @param 		{String} 		[$method=micro] 		The clearfix method to use
 *
 * @example 	scss
 * .my-cool-element {
 *  \@include s-clearfix();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
.clearfix-overflow {
  overflow: hidden;
}

.clearfix-facebook {
  display: table-cell;
  vertical-align: top;
  width: 10000px !important;
}

.clearfix-float {
  float: left;
  width: 100%;
}

.clearfix, .clearfix-micro {
  zoom: 1;
}

.clearfix:before, .clearfix-micro:before, .clearfix:after, .clearfix-micro:after {
  content: " ";
  display: table;
}

.clearfix:after, .clearfix-micro:after {
  clear: both;
}

/**
 * Display a coffeekraken logo with two specified colors
 * @param 		{Color} 		[$color=default] 	The base color to use
 * @param 		{Color} 		[$accent=primary] 	The accent color to use
 *
 * @example 	scss
 * .my-cool-coffeekraken-logo {
 * 	\@include s-coffeekraken-logo();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Create a column layout my setting each columns properties at once
 * @param 		{Integer} 		[$count=null] 		The number of columns wanted
 * @param 		{Number} 		[$gap=null] 		The column-gap width wanted
 * @param 		{String} 		[$fill=null] 		The column-fill wanted
 * @param 		{Number} 		[$width=null] 		THe width of each columns wanted
 * @param 		{String} 		[$span=null] 		Specify on how many columns the element has to span across
 * @param 		{List} 			[$rule=null] 		Specify the shorthand version of the column-rule-color, column-rule-style and column-rule-width
 * @param 		{String} 		[$rule-style=null] 	Specify the column-rule-style wanted
 * @param 		{Color} 		[$rule-color=null] 	Specify the column-rule-color wanted
 * @param 		{Number} 		[$rule-width=null] 	Specify the column-rule-width wanted
 *
 * @example 	scss
 * .my-cool-container {
 * 	\@include s-columns(
 * 		$count : 3,
 * 		$gap : 30px,
 * 		$span : solid s-color(primary) 20px
 * 	);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply some border radius
 * @param 		{Number} 		[$radius=null] 			The radius to apply globally
 * @param 		{Number} 		[$top=null] 			The radius to apply on top corners
 * @param 		{Number} 		[$right=null] 			The radius to apply on right corners
 * @param 		{Number} 		[$bottom=null] 			The radius to apply on bottom corners
 * @param 		{Number} 		[$left=null] 			The radius to apply on left corners
 * @param 		{Number} 		[$top-left=null] 		The radius to apply on top-left corners
 * @param 		{Number} 		[$top-right=null] 		The radius to apply on top-right corners
 * @param 		{Number} 		[$bottom-left=null] 	The radius to apply on bottom-left corners
 * @param 		{Number} 		[$bottom-right=null] 	The radius to apply on bottom-right corners
 *
 * @example 	scss
 * .my-cool-item {
 * 	// apply on top left and right corners
 * 	\@include s-corner(
 * 		$top : 10px;
 * 	);
 * 	// apply on each corners
 * 	\@include s-corner(10px);
 * 	// etc...
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@keyframes s-DOMNodeInserted {
  from {
    opacity: .99;
  }
  to {
    opacity: 1;
  }
}

/**
 * Make the element fit his container.
 * @param 	{String} 			[$position=null] 		The position how to fit the element.
 *
 * @example 	scss
 * .my-cool-element {
 * 	\@include s-fit(absolute);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Hide the contained text
 *
 * @example 	scss
 * .my-cool-container {
 * 	\@include s-hide-text();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply an icon on the element. This mixin support font-awesome and custom icons systems that have an icon name formated like "icon-{name}"
 * @param 		{String} 		$name 		The icon name to apply
 *
 * @example 	scss
 * .my-cool-icon {
 * 	\@include s-icon(fa-user);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set how to render the image
 * @param 		{String} 		[$mode=auto] 		The mode to use to render the image
 *
 * @example 	scss
 * img {
 * 	\@include s-image-rendering(crips-edges);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set how the list bullet has to be displayed.
 * @param 		{String} 		[$type=null] 				The list type to use. Can be all the list-style-type values
 * @param 		{Url} 			[$image=null] 				An image url to use as bullet
 * @param 		{String} 		[$icon=null] 				An icon name to use as bullet. Will use the s-icon mixin under the hood
 * @param 		{Color} 		[$color=s-color(default)] 	The color to use for the bullet
 * @param 		{Number} 		[$size=null] 				The size to use for the bullet
 * @param 		{Number|List<Number>} 	[$offset=null] 		A number that represent the top offset, or a list of two numbers that represent the top, left offset
 * @param 		{String} 		[$font=null] 				The font name to use for the bullet
 * @param 		{Number} 		[$space=null] 				The space between the bullet and the content
 *
 * @example 	scss
 * .my-cool-list__item {
 * 	@\include s-list-bullet(
 * 		$image : '../img/my-cool-bullet.svg',
 * 		$offset : 5px 10px,
 * 		$size : 1em,
 * 		$space : 2em
 * 	);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Start a new list
 * @param 		{String} 		[$counter-reset=s-list] 		A counter name to reset
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Easy to use media query mixin that support cssua classes to target specific browsers
 * @param 		{String} 		[$screen=null] 			Any of the @media screen type property like "screen, handheld, print, etc..."
 * @param 		{Number} 		[$min-width=null] 		The min width to target
 * @param 		{Number} 		[$max-width=null] 		The max width to target
 * @param 		{Number} 		[$min-height=null] 		The min height to target
 * @param 		{Number} 		[$max-height=null] 		The max height to target
 * @param 		{String} 		[$orientation=null] 	The orientation to target. Can be portrait or landscape
 * @param 		{String} 		[$resolution=null] 		The resolution to target. Can be 2x, 3x, 4x, etc...
 * @param 		{String} 		[$engine=null] 			The engine that powers the display. Can be gecko, webkit, trident, blink or presto
 * @param 		{String} 		[$device=null] 			The device to target. Can be mobile, tablet, desktop, iphone or ipad
 * @param 		{String} 		[$browser=null] 		The browser(s) to target. Can be chrome, safari, firefox, opera, ie, ie6-20
 * @param 		{String} 		[$system=null] 			The system(s) to target. Can be ios, osx, windows, linux, android, webos or blackberry
 *
 * @example 	scss
 * // simple min width
 * \@include s-media(
 * 	$min-width : 200px
 * ) {
 * 	// custom css here...
 * }
 *
 * // target a specific engine
 * \@include s-media(
 * 	$engine : gecko webkit
 * ) {
 * 	// custom css here
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the placeholder style for inputs, etc...
 *
 * @example 	scss
 * input, textarea {
 * 	\@include s-placeholder() {
 * 		color : red;
 * 	}
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set a complexe position styling like position:absolute; top:0; left:100%; etc...
 * This mixin gives you some shortcuts to align your element top, bottom, middle, center, etc...
 *
 * @param 		{String} 			[$position=absolute] 			The position css property
 * @param 		{String} 			[$vertical-align=top] 			The vertical alignement wanted (top,middle,bottom)
 * @param 		{String} 			[$align=left] 					The horizontal alignement wanted (left,center,right)
 * @param 		{Number} 			[$top=null] 					The top property wanted
 * @param 		{Number} 			[$right=null] 					The right property wanted
 * @param 		{Number} 			[$bottom=null] 					The bottom property wanted
 * @param 		{Number} 			[$left=null] 					The left property wanted
 * @return 		{Map} 												The map representation of the position wanted
 *
 * @example
 * .my-cool-element {
 * 	// absolute top right
 * 	\@include s-position(absolute, top, right);
 * 	// custom right and bottom values
 * 	\@include s-position(absolute,
 * 		$bottom : 20px,
 * 		$right : 20px
 * 	);
 * 	// etc...
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply a ratio css styling. This will apply a before or after content that will make the element keep the specified ratio.
 * The content need to be displayed as absolute top left and fit in size.
 *
 * @param 		{Number} 		$ratio 			The ratio to keep like 16/9, etc...
 * @param 		{String} 		[$type=before] 	The type of ratio to apply. Can be before or after
 *
 * @example 	scss
 * .my-cool-element {
 * 	\@include s-ratio(16/9);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Print out a reset css
 * @example 	scss
 *
 * \@include s-reset();
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Print out the css on a container that will make the lines displays a maximum number of characters.
 *
 * @example 	scss
 * h1 {
 * 	\@include s-rhythme-width(45);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply some css to have a rounded element with already an overflow on it
 *
 * @param 		{Number} 		[$size=null] 		The size (width and height) of the element wanted
 * @param 		{Number} 		[$width=null] 		The width of the element wanted
 * @param 		{Number} 		[$height=null] 		The height of the element wanted
 *
 * @example 	scss
 * .my-cool-image {
 * 	\@include s-round(100px);
 *
 * 	img {
 * 		\@include s-size(cover);
 * 	}
 * }
 */
/**
 * Quicky and easily set simple or complexe size to any element
 * @param 		{String|Number} 		$size-width				The size like "cover" or "contain", or the width un number
 * @param 		{Number} 				[$height=null] 			The height wanted
 * @param 		{String} 				[$position=absolute] 	The position wanted if the size is "cover" or "contain"
 *
 * @example 	scss
 * .my-cool-image {
 * 	\@include s-size(cover);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Quicky set some translates
 * @param 		{Number} 		[$x=0] 		The x translate value
 * @param 		{Number} 		[$y=0] 		The y translate value
 * @param 		{Number} 		[$z=0] 		The z translate value
 *
 * @example
 * .my-cool-element {
 * 	\@include s-translate(50%, 20px);
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Print out the style to truncate the text if needed
 *
 * @example 	scss
 * h1 {
 * 	\@include s-truncate-text();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Vertically align content by using the inline-block middle trick
 *
 * @example 	scss
 * .my-cool-container {
 * 	\@include s-vertical-aligner();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Hide an element only visually. This ensure that the element is still correctly displayed in the page for SEO
 * but will not being visible to the user
 *
 * @example 	scss
 * .my-cool-element {
 * 	\@include s-visually-hidden();
 * }
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Get a registered color by name or wrap a new color into a s-color call
 * to manipulate it with ease.
 * Supported actions :
 * - hue {Deg}
 * - lighten {Percent}
 * - darken {Percent}
 * - saturate {Percent}
 * - desaturate {Percent}
 * - grayscale {Boolean}
 * - complement {Boolean}
 * - invert {Boolean}
 * - opacity {Percent}
 * - mix {Color}
 *
 * @param 		{String|Color} 		$color 				The color name or the color value to manipulate
 * @param 		{String|List} 			[$modifier=null] 	The color modifier to apply. Can be a registered modifier name or a modifier list
 * @return 		{Color} 									The actual color value
 *
 * @example 	 	scss
 * // default color (settings.colors.default)
 * $myColor : s-color(default);
 * // primary color (settings.colors.primary)
 * $primary : s-color(primary);
 * // manipulate
 * $primary-dark : s-color(primary, -darken 10%);
 * // registered modifier
 * $primary-light : s-color(primary, light);
 * // $name as list
 * $modified primary : s-color((primary, -darken 10%));
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the color in a modifier list
 * @param 			{List} 			$modifiers 		The modifiers list
 * @return 			{String} 						The color name
 *
 * @example
 * $my-color : s-color-modifier(outline primary); // => primary
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the css class selector for the current component setted by the [core/mixins/_s-component.scss] mixin
 * and build with the passed arguments.
 *
 * @param 			{String} 			[$element=null] 		The element name of the class selector | '&' if target the same element like `&s-component-selector("&", ) {}`
 * @param 			{String} 			[$modifier=null] 		The modifier name of the class selector
 * @param 			{String} 			[$state=null] 			The state name of the class selector
 * @return 			{String} 									The generated class selector
 *
 * @example
 * \@incluse s-component('my-component') {
 * 		// if settings.selector.method === 'BEM'
 * 		s-component-selector('item') // => '.my-component__item'
 * 		s-component-selector(null, 'red') // => '.my-component--red'
 * 		s-component-selector('coco',null,'active') // => '.my-component__coco--active'
 * }
 *
 * // if target the same element with & :
 * \@include s-component('my-component') {
 * 		s-component-selector(, red, , "color") {
 * 			&s-component-selector("&", , "active") {
 * 				// something here...
 * 			}
 * 		}
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the name of the top level component setted with the [../mixins/_s-component.scss] mixin
 *
 * @param 			{String} 			[$default=null] 		The name to return if no top component name exist
 * @return 			{String} 									The component name
 *
 * @example
 * s-component('hello') // => 'hello'
 * \@include s-component('my-component') {
 * 		s-component('hello') // => 'my-component'
 * 		\@include s-component('another-component') {
 * 			s-component('hello') // => 'my-component'
 * 		}
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>;
 */
/**
 * Convert a passed value to the wanted unit
 * The conversion between some units that depends on a font-size will take the settings.typography.font-size value as reference.
 *
 * Available conversions
 * - from px
 * 	- to em
 * 	- to rem
 * 	- to pt
 * 	- to %
 *
 * - from em
 * 	- to rem
 * 	- to px
 * 	- to pt
 * 	- to %
 *
 * - from pt
 * 	- to em
 * 	- to rem
 * 	- to px
 * 	- to pt
 * 	- to %
 *
 * - from rem
 * 	- to em
 * 	- to px
 * 	- to pt
 * 	- to %
 *
 * @param 			{Number} 		$value 			The value to convert
 * @param 			{String} 		$unit 			The unit in which to convert the value
 * @return 			{Number} 						The converted value
 *
 * @example
 * // if the settings.typography.font-size === 16px
 * s-convert(24px, rem) // 1.5rem
 * s-convert(3rem, pt) // 36pt
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Transform a dash notation value into a map
 * Dash notation value is : -key1 value1 -key2 value2
 *
 * @param 			{List} 			$dash 			The dash list notation to transform
 * @return 			{Map} 							The map generated
 *
 * @example
 * $dash : -hello world -coco universe
 * s-dash-to-map($dash);
 * // (
 * // 	hello : world,
 * // 	coco : universe
 * // )
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Convert the passed value to em
 *
 * @param 			{Number} 		$value 		The value to convert
 * @return 			{Number} 					The em converted value
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Convert the passed value to the closest even value
 *
 * @param 			{Number} 		$value 		The value to convert
 * @return 			{Number} 					The closest even converted value
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Take a filter as parameter and parse it to return the {Map} corresponding
 * The $filter parameter can be either a registered filter name or a filter formated like `filterName(filterValue)`
 *
 * @param 			{List}<String> 			$filter 			The registered filter name or the filter string to transform into map
 * @return 			{Map} 										The corresponding filter map properties
 *
 * @example
 * // register a filter
 * \@include s-setup((
 * 		filters : (
 * 			myCoolFilter : box-shadow(#000 0 0 10px) blur(30px),
 * 			// other filters...
 * 		)
 * ));
 *
 * // registered filter
 * s-filter-map(myCoolFilter);
 * // {
 * // 	box-shadow : #000 0 0 10px,
 * // 	blur : 30px
 * // }
 *
 * // custom filter
 * s-filter-map(blur(10px));
 * // {
 * // 	blur : 10px
 * // }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return a list with all the filters that are passed as argument
 * This will use the [./_s-filter-map.scss] function to parse the filters
 *
 * @param 	 	{List}<String> 			$filters 			The registered filter(s) name(s) or the filter(s) string(s) to transform into list
 * @return 		{List} 										The converted filters list to use as css property
 *
 * @example
 * // register a filter
 * \@include s-setup((
 * 		filters : (
 * 			myCoolFilter : box-shadow(#000 0 0 10px) blur(30px),
 * 			// other filters...
 * 		)
 * ));
 *
 * // registered filter
 * .my-cool-elememt {
 * 		filter : s-filter(myCoolFilter);
 * 		// filter : box-shadow(#000 0 0 10px) blur(30px);
 * }
 *
 * // custom filter
 * .my-cool-element {
 * 		filter : s-filter(myCoolFilter invert(100%));
 * 		// filter : box-shadow(#000 0 0 10px) blur(30px) invert(100%);
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the font-family string or a registered font
 *
 * @param 			{String} 		$name 		The name of the registered font
 * @return 			{String} 					The corresponding font-family property to set in your css
 *
 * @example
 * // register a font
 * \@include s-setup((
 * 		fonts : (
 * 			myCoolFont : (
 * 				font-family : 'Helvetica Neue',
 * 				font-weight : 'bold',
 * 				// etc...
 * 			),
 * 			// other fonts...
 * 		)
 * ));
 *
 * // apply the font
 * .my-cool-element {
 * 		font-family : s-font-family(myCoolFont);
 * 		// font-family : 'Helvetica Neue';
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the font {Map} that correspond to the passed arguments
 *
 * @param 		{String} 			[$family=null] 			The font family wanted (can be a registered font name)
 * @param 		{Color} 			[$color=null] 			The color wanted (can be a registered color name)
 * @param 		{Number} 			[$size=null] 			The font-size wanted
 * @param 		{String} 			[$style=null] 			The font-style wanted
 * @param 		{String} 			[$variant=null] 		The font-variant wanted
 * @param 		{String|Number} 	[$weight=null] 			The font-weight wanted
 * @param 		{String} 			[$decoration=null] 		The text-decoration wanted
 * @param 		{String} 			[$align=null] 			The text-align wanted
 * @param 		{String} 			[$transform=null] 		The text-transform wanted
 * @param 		{String} 			[$stretch=null] 		The font-stretch wanted
 * @param 		{String} 			[$white-space=null] 	The white-space wanted
 * @param 		{Number} 			[$height=null] 			The line-height wanted
 * @param 		{Number} 			[$spacing=null] 		The letter-spacing wanted
 * @param 		{Number} 			[$indent=null] 			The text-indent wanted
 * @param 		{String} 			[$break=null] 			The line-break wanted
 * @param 		{String} 			[$wrap=null] 			The word-wrap wanted
 * @return 		{Map} 										The corresponding font map
 *
 * @example
 * s-font(
 * 		$family : 'Helvetica Neue',
 * 		$size : 12px,
 * 		$wrap : norwap
 * );
 * // (
 * 		font-family : 'Helvetica Neue',
 * 		font-size : 12px,
 * 		word-wrap : nowrap
 * // )
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Check if the provided color is a registered one or not
 * @param 		{String} 		$color 		The color nane to check
 * @return 		{Boolean} 					True if exists, false if not
 */
/**
 * Return the specified or calculated value of the given stack and size
 * depending on the settings.sizes ratios stack
 *
 * @param 		{Map} 			$stack 			The stack from which to interpolate the value
 * @param 		{String} 		$size 			The size wanted (has to exist in the settings.sizes stack)
 * @return 		{Number} 						The $stack.$size value or the interpolated one depending on the settings.sizes ratios
 *
 * @example
 *
 * // settings.sizes
 * \@include s-setup((
 * 		sizes : (
 * 			small : 0.5,
 * 			default : 1, // default is ALWAYS 1
 * 			big : 1.5
 * 		)
 * ));
 *
 * $myStack : (
 * 		default : 3rem,
 * 		big : 6rem
 * )
 *
 * s-interpolate($myStack, big) // 6rem cause specified in the $myStack value
 * s-interpolate($myStack, small) // 1.5rem => calculated like : 3rem * 0.5 = 1.5rem
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Check if the passed value is of a certain type
 *
 * Here's the available types that you can check
 * - mixed => mean anything
 * - null
 * - url
 * - px
 * - pt
 * - rem
 * - em
 * - percent | %
 * - vw
 * - vh
 * - ex
 * - ch
 * - cm
 * - mm
 * - in
 * - pc
 * - s | second
 * - boolean | bool
 * - function
 * - number
 * - int | integer
 * - string
 * - color
 * - list
 * - map
 * - deg | degree
 * - list-{type} => check if is a list of the specified type
 * - map-{type} => check if is a map of the specified type
 *
 * @param 			{Mixed} 			$value 			The value to check
 * @param 			{String} 			$type 			The type to check
 * @return 			{Boolean} 							true if match the type, false if not
 *
 * @example
 * s-is(hello, string) // => true
 * s-is('hello', string) // => true
 * s-is(#fff, color) // => true
 * s-is(hello #fff, list-color) // => false
 * s-is(#fff #ddd, list-color) // => true
 * // etc...
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Alias to the [./_s-look-and-feel.scss] function
 *
 * Return a settings.look-and-feel stack value
 *
 * @param 		{String} 		$name					The look and feel value name
 * @return 		{Number} 								The look and feel value in em
 *
 * @example
 * .my-cool-element {
 * 		padding : s-lnf(padding-horizontal) s-lnf(padding-vertical);
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return a settings.look-and-feel stack value
 *
 * @param 		{String} 		$name					The look and feel value name
 * @return 		{Number} 								The look and feel value in em
 *
 * @example
 * .my-cool-element {
 * 		padding : s-look-and-feel(padding-horizontal) s-look-and-feel(padding-vertical);
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the modular scale value based on the settings ```modular-scale.base``` and ```modular-scale.ratio```.
 *
 * @param 			{Number} 		$scale 		The wanted scale
 * @param 			{Number} 		[$base=settings.modular-scale.base] 	The base of calculation
 * @return 			{Number} 					The calculated resulting value
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Convert the passed value to the closest odd value
 *
 * @param 			{Number} 		$value 		The value to convert
 * @return 			{Number} 					The closest odd converted value
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Parse a given string/list properties and return the Map corresponding to the Map description
 *
 * @param 				{List} 				$properties 			The properties to parse
 * @param 				{Map} 				$descriptor 			The descriptor map to use to parse the properties
 * @return 				{Map} 										The properties in map format
 *
 * @example
 * s-parse-properties(10px hello -delay 20s, (
 *  	myNumber : Number,
 *  	myOtherNumber : Number,
 *  	myString : String,
 *  	myCoolVar : String,
 *  	delay : second
 * ));
 * // => (
 * //  	myNumber : 10px,
 * // 	myString : hello,
 * // 	delay : 20s
 * // )
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Convert the passed value to %
 *
 * @param 			{Number} 		$value 		The value to convert
 * @return 			{Number} 					The % converted value
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Convert the passed value to pt
 *
 * @param 			{Number} 		$value 		The value to convert
 * @return 			{Number} 					The pt converted value
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Convert the passed value to px
 *
 * @param 			{Number} 		$value 		The value to convert
 * @return 			{Number} 					The px converted value
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Convert the passed value to rem
 *
 * @param 			{Number} 		$value 		The value to convert
 * @return 			{Number} 					The rem converted value
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the passed values in the same unit but that has been even rounded on the corresponding px value
 * This ensure that your passed value will be a round px value for final rander in the viewport
 *
 * @param 		{Number} 		$value 			The value to process
 * @return 		{Number} 						The rounded value in same input unit but px rounded
 *
 * @example
 * // if settings.typography.font-size == 16px
 * s-render-round-even(5.2rem);
 * // 1. transform to px values : 5.2 * 16px = 83.2px
 * // 2. round even the px value : 84px
 * // 3. transform to passed unit value : 84px / 16px = 5.25rem
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the passed values in the same unit but that has been odd rounded on the corresponding px value
 * This ensure that your passed value will be a round px value for final rander in the viewport
 *
 * @param 		{Number} 		$value 			The value to process
 * @return 		{Number} 						The rounded value in same input unit but px rounded
 *
 * @example
 * // if settings.typography.font-size == 16px
 * s-render-round-odd(5.2rem);
 * // 1. transform to px values : 5.2 * 16px = 83.2px
 * // 2. round odd the px value : 83px
 * // 3. transform to passed unit value : 84px / 16px = 5.1875rem
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the passed values in the same unit but that has been rounded on the corresponding px value
 * This ensure that your passed value will be a round px value for final rander in the viewport
 *
 * @param 		{Number} 		$value 			The value to process
 * @return 		{Number} 						The rounded value in same input unit but px rounded
 *
 * @example
 * // if settings.typography.font-size == 16px
 * s-render-round(5.2rem);
 * // 1. transform to px values : 5.2 * 16px = 83.2px
 * // 2. round even the px value : 83px
 * // 3. transform to passed unit value : 84px / 16px = 5.1875rem
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Search and replace tokens like colors #primary in a passed string, list or map
 * Supported tokens types :
 * 1. Colors : colorName
 *
 * @example
 * s-replace-tokens(12px #primary hello #secondary); // > 12px #ddd hello #fff;
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Process selector to avoid having --default, etc...
 * @param 		{String} 		$selector 		The selector to process
 * @return 		{String} 						The processed selector
 * @example 	scss
 * s-selector('.input--default'); // => .input
 * s-selector('.input-default'); // => .input
 * s-selector('.input.default'); // => .input
 */
/**
 * Get a settings from the global settings stack
 *
 * @param 				{String} 			$path 						The setting path wanted separated by dots
 * @param 				{String} 			[$context=s-context()] 		The context name to get the setting
 * @param 				{Mixed} 			[$default=null] 			The value to return if no value is found
 * @return 				{Mixed} 										The setting value¨
 *
 * @example
 * $font-size : s-setting('typography.font-size');
 * // etc...
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return a value interpolated from the settings.spaces stack
 *
 * @param 			{String} 			$size 			The space size wanted. Must exist in the settings.sizes stack
 * @return 			{Number} 							The actual space value
 *
 * @example
 * .my-cool-section {
 * 		padding : s-pace(big);
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return a number without any units
 *
 * @param 			{Number} 		$number 		The number to process
 * @return 			{Number} 						The number without units
 *
 * @example
 * s-strip-units(12px); // => 12
 * s-strip-units(30rem); // => 30
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Test an argument passed to a function or a mixin to ensure his type, value, etc...
 * If the argument does not pass the test, an error will be thrown, unless the $check-only argument is true
 *
 * @param 				{String} 				$method 				The function/mixin name (debug purpose)
 * @param 				{String} 				$argument 				The argument name to test (debug purpose)
 * @param 				{List|String} 			$type-or-values 		If string, the type(s) that the argument must match, if list, the possible values that the argument can take
 * @param 				{Mixed} 				$value 					The actual argument value
 * @param 				{Boolean} 				[$check-only=false]		If this is true, will not thrown any error
 * @return 				{Mixed} 										The value if ok, false if not
 *
 * @example
 * \@mixin my-cool-mixin($argument1, $argument2) {
 *        $argument1 : s-test-argument(my-cool-mixin, argument1, string, $argument1);
 *        $argument2 : s-test-argument(my-cool-mixin, argument2, (hello,world,12), $argument2);
 * }
 * \@mixin my-cool-mixin(hello, world); // ok
 * \@mixin my-cool-mixin(hello, universe); // throw an error
 * \@mixin my-cool-mixin(12, world); // throw an error
 *
 * @author 				Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the text-format setting scope class
 * @return 		{String} 		The text-format scope class from settings.text-format.scope-class
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Take a transition as parameter and parse it to return the {Map} corresponding
 * The $transition parameter can be either a registered transition name or a custom css transition like : all .2s ease-in-out 2s
 * The $transition argument will be parsed with the [./_s-parse-properties.scss] function.
 *
 * @param 			{List} 				$transition 			The registered transition name or the transition string to transform into map
 * @return 			{Map} 										The corresponding transition map properties
 *
 * @example
 * // register a transition
 * \@include s-setup((
 * 		transitions : (
 * 			fast : all .2s ease-in-out,
 * 			// other transitions...
 * 		)
 * ));
 *
 * // registered transition
 * s-transition-map(fast);
 * // {
 * // 	property : all,
 * // 	duration : .2s,
 * // 	ease : ease-in-out
 * // }
 *
 * // custom transition
 * s-transition-map(fast -delay .5s);
 * // {
 * // 	property : all,
 * // 	duration : .2s,
 * // 	ease : ease-in-out,
 * // 	delay : .5s
 * // }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Take a transition as parameter and parse it to return the {List} corresponding
 * The $transitions parameter can be either a registered transition name or a custom css transition like : all .2s ease-in-out 2s
 * The $transitions argument will be parsed with the [./_s-parse-properties.scss] function.
 *
 * @param 			{List} 				$transitions 			The registered transition(s) name(s) or the transition(s) strings(s) to transform into list
 * @return 			{List} 										The corresponding transition list properties
 *
 * @example
 * // register a transition
 * \@include s-setup((
 * 		transitions : (
 * 			fast : all .2s ease-in-out 0s,
 * 			// other transitions...
 * 		)
 * ));
 *
 * // registered transition
 * .my-cool-element {
 * 		transition : s-transition(fast);
 * 		// transition : all .2s ease-in-out 0s;
 * }
 *
 * // custom transition
 * .my-cool-element {
 *  	transition : s-transition(fast -delay .5s, fast width ease-in);
 *  	// transition : all .2s ease-in-out .5s, width .2s ease-in 0s;
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the unit context if has been set by the [s-unit-context mixin](../mixins/_s-unit-context.scss)
 *
 * @return 		{String} 				The unit context setted
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the generated vertical rhythme properties map calculated depending on the passed arguments
 *
 * @param 			{Number} 				[$font-size=settings.typography.font-size] 			The font size wanted
 * @param 			{String} 				[$font-family=settings.typography.font-family] 		The font family to use
 * @param 			{Number} 				[$line-height=null] 							The line height to use
 * @param 			{Number} 				[$margin-top=0] 								The targeted margin-top
 * @param 			{Number} 				[$margin-bottom=0] 								The targeted margin-bottom
 * @param 			{Number} 				[$padding-top=0] 								The targeted padding-top
 * @param 			{Number} 				[$padding-bottom=0] 							The targeted padding-bottom
 * @param 			{List} 					[$margin=null] 									The targeted margin property
 * @param 			{List} 					[$padding=null] 								The targeted padding property
 * @param 			{List} 					[$border-top=null] 								The targeted border-top property
 * @param 			{List} 					[$border-bottom=null] 							The targeted border-bottom property
 * @param 			{Number} 				[$border-top-width=0] 							The targeted border-top-width property
 * @param 			{Number} 				[$border-bottom-width=0] 						The targeted border-bottom-width property
 * @param 			{Number} 				[$border=null] 									The targeted border property
 * @param 			{Number} 				[$cap-height=null] 								The font cap-height used to calculate the vertical ryhthme
 * @param 			{Boolean|String} 		[$calculate-height=false] 						If true|min-height|max-height|height, will return the corresponding absolute height value in the map
 *
 * @TODO example
 *
 * @see 			https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b#.lck2lgbni
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Return the vertical-rhythme setting scope class
 * @return 		{String} 		The vertical-rhythme scope class from settings.vertical-rhythme.scope-class
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Generic sugar function can return multiple settings types like:
 * - any settings : s('settings.{path}')
 * - look and feel : s('look-and-feel.{property}', $size)
 *  	- s('lnf.{property}', $size)
 * - space : s('space.{size}')
 * - color : s('color.{name}', $modifier)
 * - transition : s('transition.{name}')
 * - filter : s('filter.{name}')
 *
 * @example
 * $my-color : s('color.primary');
 * $my-transition : s('transition.fast');
 * $my-font-size : s('settings.typography.font.size')
 * // etc...
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Print out the animation property calculated with the passed arguments
 * This mixin support all the standard css animation properties like name, duration, delay, ease, direction and fill-mode.
 * The $animations argument will be parsed with the [../functions/_s-parse-properties.scss] function.
 * If you specify multiple animations at a time, this mixin will take care
 * of the delay calculation for each animations and make them play one after another
 *
 * @param 			{List} 				$animations 			The animations wanted like : coco .2s ease-in-out reverse
 *
 * @example
 * .my-cool-element {
 * 		@include s-animation(my-animation 1s ease-in-out, another-animation 4s);
 * 		// animation : my-animation 1s 0s ease-in-out 1 normal forwards, another-animation 4s 1s ease-in-out 1 normal forwards;
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Print out all wanted registered classes like padding helpers, margin helpers, font helpers, etc...
 * Available namespaces
 * - sugar.filter.{name} : .fi-{name}
 * - sugar.transition.{name} : .tr-{name}
 * - sugar.font.family.{name} : .f-{name}
 * - sugar.margin.bottom.{size} : .m-b-{size}
 * - sugar.margin.top.{size} : .m-t-{size}
 * - sugar.margin.left.{size} : .m-l-{size}
 * - sugar.margin.right.{size} : .m-r-{size}
 * - sugar.margin.side.{size} : .m-s-{size}
 * - sugar.padding.all.{size} : .p-{size}
 * - sugar.padding.top.{size} : .p-t-{size}
 * - sugar.padding.bottom.{size} : .p-b-{size}
 * - sugar.padding.left.{size} : .p-l-{size}
 * - sugar.padding.right.{size} : .p-r-{size}
 * - sugar.padding.side.{size} : .p-s-{size}
 * - sugar.size.{size} : .s-{size}
 * - sugar.size.rel.{size} : .s-{size}-rel
 * - sugar.padding.no.top : .no-p-t
 * - sugar.padding.no.bottom : .no-p-b
 * - sugar.padding.no.left : .no-p-l
 * - sugar.padding.no.right : .no-p-r
 * - sugar.padding.no.side : .no-p-s
 * - sugar.margin.no.top : .no-m-t
 * - sugar.margin.no.bottom : .no-m-b
 * - sugar.margin.no.left : .no-m-l
 * - sugar.margin.no.right : .no-m-r
 * - sugar.margin.no.side : .no-m-s
 * - sugar.color.{name}.color` .c-{name}
 * - sugar.color.{name}.bkg : .bkg-{name}
 * - sugar.color.{name}.modifier.{mod-name}.color : .c-{name}--{mod-name}
 * - sugar.color.{name}.modifier.{mod-name}.bkg : .bkg-{name}--{mod-name}
 * - sugar.pull.left : .pull-left
 * - sugar.pull.right : .pull-right
 * - sugar.position.relative : .relative
 * - sugar.position.absolute : .absolute
 * - sugar.clear.left : .clear-left
 * - sugar.clear.right : .clear-right
 * - sugar.clear.both : .clear
 * - sugar.pointer.events.all : .pointer-events-all
 * - sugar.pointer.events.none : .pointer-events-none
 * - sugar.display.show : .show
 * - sugar.display.show-inline : .show-inline
 * - sugar.display.hidden : .hidden
 * - sugar.display.hide : .hide
 * - sugar.display.visible : .visible
 * - sugar.display.invisible : .invisible
 * - sugar.display.visually-hidden : .visually-hidden
 * - sugar.text.hidden : .t-hidden
 * - sugar.text.truncate : .t-truncate
 * - sugar.text.align.left : .t-left
 * - sugar.text.align.right : .t-right
 * - sugar.text.align.center : .t-center
 * - sugar.text.align.justify : .t-justify
 * - sugar.text.transform.lowercase : .t-lowercase
 * - sugar.text.transform.uppercase : .t-uppercase
 * - sugar.text.transform.capitalize : .t-capitalize
 * - sugar.font.weight.bold : .f-bold
 * - sugar.font.weight.lighter : .f-lighter
 * - sugar.font.weight.bolder : .f-bolder
 * - sugar.font.weight.normal : .f-normal
 * - sugar.font.style.italic : .f-italic
 * - sugar.font.style.oblique : .f-oblique
 * - sugar.font.variant.small-caps : .f-small-caps
 * - sugar.block.align.center : .block-center
 * - sugar.ratio.21-9 : ```.ratio-21-9```
 * - sugar.ratio.16-9 : ```.ratio-16-9```
 * - sugar.ratio.4-3 : ```.ratio-4-3```
 * - sugar.ratio.1-1 : ```.ratio-1-1```
 * - sugar.size.abs.cover : ```.abs-cover```
 * - sugar.size.abs.contain : ```.abs-contain```
 * - sugar.size.abs.fit : ```.abs-fit```
 * - sugar.clearfix.default : .clearfix
 * - sugar.clearfix.float : .clearfix-float
 * - sugar.clearfix.micro : .clearfix-micro
 * - sugar.clearfix.overflow : .clearfix-overflow
 * - sugar.clearfix.facebook : .clearfix-facebook
 * - sugar.no-transitions : .no-transitions
 * - sugar.clear-transitions : .clear-transitions
 * - sugar.no-animations : .no-animations
 * - sugar.clear-animations : .clear-animations
 * - sugar.no-transmations : .no-transmations
 * - sugar.clear-transmations : .clear-transmations
 *
 * @param 			{List}<string> 			$namespaces 		The classes namespaces wanted
 *
 * @example
 * \@include s-classes(); // will print out all the classes
 * \@include s-classes('sugar.font'); // will print all the font classes
 * \@include s-classes('sugar.clearfix' 'sugar.pull'); // the clearfixes and the pull classes
 * // etc...
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Print out the scoped color schema css
 *
 * @param 		{String} 			$name 			The color schema name
 *
 * @example
 * \@include s-color-schema(light) {
 * 		h1, h2 {
 * 			color : white;
 * 		}
 * }
 * // will print
 * .cs-light h1,
 * .cs-light h2 {
 * 		color : white;
 * }
 *
 * h1, h2 {
 * 		\@include s-color-schema(light) {
 * 			color : white;
 * 		}
 * }
 * // will print
 * .cs-light h1, h1.cs-light,
 * .cs-light h2, h2.cs-light {
 * 		color : white;
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the name of the component that will be handled inside the mixin
 *
 * @param 			{String} 			[$name=null] 			The name of the component to set
 * @param 			{String|Map} 		[$context=null] 		A context name or map to use inside the mixin
 *
 * @example
 * \@include s-component('my-component') {
 * 		s-component('hello') // => 'my-component'
 * 		\@include s-component('another-component') {
 * 			s-component('hello') // => 'my-component'
 * 		}
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>;
 */
/**
 * Register a context with a name to use it later
 *
 * @param 			{String} 		$name 			The context name
 * @param 			{Map} 			$settings 		The settings to override for this context
 *
 * @example
 * \@include s-context-setup(my-cool-context, (
 * 		look-and-feel : (
 * 			padding-vertical : (
 * 				default : 0.6em
 * 			)
 * 		)
 * ));
 *
 * // using your context
 * \@include s-context(my-cool-context) {
 * 		s-look-and-feel(padding-vertical); // => 0.6em
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set a context to be used inside the mixin
 *
 * @param 			{String|Map} 			$name-or-map 		The name of a registered context or a map
 *
 * @example
 * // register a context
 * \@include s-context-setup(my-cool-context, (
 * 		look-and-feel : (
 * 			padding-vertical : (
 * 				default : 0.6em
 * 			)
 * 		)
 * ));
 *
 * // registered context
 * \@include s-context(my-cool-context) {
 * 		// your code here...
 * }
 *
 * // inline context
 * \@include s-context((
 * 		look-and-feel : (
 * 			padding-vertical : (
 * 				default : .3em
 * 			)
 * 		)
 * )) {
 * 		// your code here...
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Print out a list with all the filters that are passed as argument
 * This will use the [../functions/_s-filter-map.scss] function to parse the filters
 *
 * @param 	 	{List}<String> 			$filters 			The registered filter(s) name(s) or the filter(s) string(s) to transform into list
 *
 * @example
 * // register a filter
 * \@include s-setup((
 * 		filters : (
 * 			myCoolFilter : box-shadow(#000 0 0 10px) blur(30px),
 * 			// other filters...
 * 		)
 * ));
 *
 * // registered filter
 * .my-cool-elememt {
 * 		\@include s-filter(myCoolFilter);
 * 		// filter : box-shadow(#000 0 0 10px) blur(30px);
 * }
 *
 * // custom filter
 * .my-cool-element {
 * 		\@include s-filter(myCoolFilter invert(100%));
 * 		// filter : box-shadow(#000 0 0 10px) blur(30px) invert(100%);
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Helper to print a font-face
 *
 * @param 			{String} 		$font-family 			The font-family
 * @param 			{String} 		$src 					The source url (only 1 extension)
 * @param 			{List} 			[$extensions=woff2] 	The extensions list that you have available
 * @param 			{String} 		[$font-weight=normal] 	The font-weight property
 * @param 			{String} 		[$font-style=normal] 	The font-style property
 *
 * @example
 * // if you have these extensions files : .woff .eot .woff2
 * \@include s-font-face(
 * 		$name : my-cool-font,
 * 		$src : '/fonts/my-font.eot',
 * 		$extensions : eot woff woff2
 * )
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Print all the fonts properties that correspond to the passed arguments
 *
 * @param 		{String} 			[$family=null] 			The font family wanted (can be a registered font name)
 * @param 		{Color} 			[$color=null] 			The color wanted (can be a registered color name)
 * @param 		{Number} 			[$size=null] 			The font-size wanted
 * @param 		{String} 			[$style=null] 			The font-style wanted
 * @param 		{String} 			[$variant=null] 		The font-variant wanted
 * @param 		{String|Number} 	[$weight=null] 			The font-weight wanted
 * @param 		{String} 			[$decoration=null] 		The text-decoration wanted
 * @param 		{String} 			[$align=null] 			The text-align wanted
 * @param 		{String} 			[$transform=null] 		The text-transform wanted
 * @param 		{String} 			[$stretch=null] 		The font-stretch wanted
 * @param 		{String} 			[$white-space=null] 	The white-space wanted
 * @param 		{Number} 			[$height=null] 			The line-height wanted
 * @param 		{Number} 			[$spacing=null] 		The letter-spacing wanted
 * @param 		{Number} 			[$indent=null] 			The text-indent wanted
 * @param 		{String} 			[$break=null] 			The line-break wanted
 * @param 		{String} 			[$wrap=null] 			The word-wrap wanted
 * @return 		{Map} 										The corresponding font map
 *
 * @example
 * .my-cool-elememt {
 * 		\@include s-font(
 * 			$family : 'Helvetica Neue',
 * 		 	$size : 12px,
 * 		  	$wrap : norwap
 *      );
 *      // print
 * 		font-family : 'Helvetica Neue',
 * 		font-size : 12px,
 * 		word-wrap : nowrap
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Init the sugar toolkit.
 * This has to be called **AFTER** all the [./_s-setup.scss] mixin call
 * and **BEFORE** all the others sugar mixins and functions calls
 *
 * @example
 * \@include s-init();
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Register all the dynamic helper classes that depends on the settings, etc...
 * This is used internaly
 *
 * @example
 * \@include s-init-classes();
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Register a helper class under a certain namespace
 *
 * @param 			{String} 		$classname 		The classname that will be printed out
 * @param 			{String} 		$namespace 		The dots separated namespace under which the class will live
 *
 * @example
 * \@include s-register-class(my-cool-class, 'my.cool.namespace') {
 * 		background : pink;
 * }
 * \@include s-register-class(another-cool-class, 'my.another.namespace') {
 * 		background : red;
 * }
 *
 * // print out my helpers classes
 * \@include s-classes('my');
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Setup sugar toolkit by overriding the default [settings](../_settings.scss)
 * This has to be called **BEFORE** the [s-init mixin](./_s-init.scss)
 *
 * @param 			{Map} 			$settings 		The settings to override
 *
 * @example
 * \@include s-setup((
 * 		typo : (
 * 			font-size : 12px
 * 		),
 * 		sizes : (
 * 			small : 0.5,
 * 			big : 1.5
 * 		)
 * ));
 * // this mixin can be called as many times as you need
 * // this allows you to separate your configs setup into multiple
 * // files...
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Display the vertical rhythme
 *
 * @param 			{Color} 		The color wanted
 *
 * @example
 * body {
 * 		@include s-show-vertical-rhythme();
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Take a transition as parameter and print the corresponding transition property
 * The $transitions parameter can be either a registered transition name or a custom css transition like : all .2s ease-in-out 2s
 * The $transitions argument will be parsed with the [./_s-parse-properties.scss] function.
 *
 * @param 			{List} 				$transitions 			The registered transition(s) name(s) or the transition(s) strings(s) to transform into list
 * @return 			{List} 										The corresponding transition list properties
 *
 * @example
 * // register a transition
 * \@include s-setup((
 * 		transitions : (
 * 			fast : all .2s ease-in-out 0s,
 * 			// other transitions...
 * 		)
 * ));
 *
 * // registered transition
 * .my-cool-element {
 * 		\@include s-transition(fast>);
 * 		// transition : all .2s ease-in-out 0s;
 * }
 *
 * // custom transition
 * .my-cool-element {
 * 		\@include s-transition(fast -delay .5s, fase width ease-in);
 *  	// transition : all .2s ease-in-out .5s, width .2s ease-in 0s;
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the unit context to use inside the mixin.
 * This mean that if you set a unit context, then get a number setting through the [s-setting function](../functions/_s-setting.scss),
 * The value that will be returned will be converted into the unit context if possible
 *
 * @param 			{String} 			$unit 			The unit wanted
 *
 * @example
 * // if settings.typography.font-size == 16px
 * s-setting('typography.font-size'); // => 16px
 * \@incluse s-unit-context(rem) {
 * 		s-setting('typography.font-size'); // => 1rem
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	s-vertical-rhythme
 * Print out the vertical rhythme properties map calculated depending on the passed arguments
 *
 * @param 			{Number} 				[$font-size=settings.typography.font-size] 			The font size wanted
 * @param 			{String} 				[$font-family=settings.typography.font-family] 		The font family to use
 * @param 			{Number} 				[$line-height=null] 							The line height to use
 * @param 			{Number} 				[$margin-top=0] 								The targeted margin-top
 * @param 			{Number} 				[$margin-bottom=0] 								The targeted margin-bottom
 * @param 			{Number} 				[$padding-top=0] 								The targeted padding-top
 * @param 			{Number} 				[$padding-bottom=0] 							The targeted padding-bottom
 * @param 			{List} 					[$margin=null] 									The targeted margin property
 * @param 			{List} 					[$padding=null] 								The targeted padding property
 * @param 			{List} 					[$border-top=null] 								The targeted border-top property
 * @param 			{List} 					[$border-bottom=null] 							The targeted border-bottom property
 * @param 			{Number} 				[$border-top-width=0] 							The targeted border-top-width property
 * @param 			{Number} 				[$border-bottom-width=0] 						The targeted border-bottom-width property
 * @param 			{Number} 				[$border=null] 									The targeted border property
 * @param 			{Number} 				[$cap-height=null] 								The font cap-height used to calculate the vertical ryhthme
 * @param 			{Boolean|String} 		[$calculate-height=false] 						If true|min-height|max-height|height, will return the corresponding absolute height value in the map
 *
 * @TODO example
 *
 * @see 			https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b#.lck2lgbni
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	Helper Classes
 * This file is responsible to register the static helper classes like:
 *
 * - sugar.pull.left : ```.pull-left```
 * - sugar.pull.right : ```.pull-right```
 * - sugar.position.relative : ```.relative```
 * - sugar.position.absolute : ```.absolute```
 * - sugar.clear.left : ```.clear-left```
 * - sugar.clear.right : ```.clear-right```
 * - sugar.clear.both : ```.clear```
 * - sugar.pointer.events.all : ```.pointer-events-all```
 * - sugar.pointer.events.none : ```.pointer-events-none```
 * - sugar.display.show : ```.show```
 * - sugar.display.show-inline : ```.show-inline```
 * - sugar.display.hidden : ```.hidden```
 * - sugar.display.hide : ```.hide```
 * - sugar.display.visible : ```.visible```
 * - sugar.display.invisible : ```.invisible```
 * - sugar.display.visually-hidden : ```.visually-hidden```
 * - sugar.text.hidden : ```.t-hidden```
 * - sugar.text.truncate : ```.t-truncate```
 * - sugar.text.align.left : ```.t-left```
 * - sugar.text.align.right : ```.t-right```
 * - sugar.text.align.center : ```.t-center```
 * - sugar.text.align.justify : ```.t-justify```
 * - sugar.text.transform.lowercase : ```.t-lowercase```
 * - sugar.text.transform.uppercase : ```.t-uppercase```
 * - sugar.text.transform.capitalize : ```.t-capitalize```
 * - sugar.font.weight.bold : ```.f-bold```
 * - sugar.font.weight.lighter : ```.f-lighter```
 * - sugar.font.weight.bolder : ```.f-bolder```
 * - sugar.font.weight.normal : ```.f-normal```
 * - sugar.font.style.italic : ```.f-italic```
 * - sugar.font.style.oblique : ```.f-oblique```
 * - sugar.font.variant.small-caps : ```.f-small-caps```
 * - sugar.block.align.center : ```.block-center```
 * - sugar.ratio.21-9 : ```.ratio-21-9```
 * - sugar.ratio.16-9 : ```.ratio-16-9```
 * - sugar.ratio.4-3 : ```.ratio-4-3```
 * - sugar.ratio.1-1 : ```.ratio-1-1```
 * - sugar.size.abs.cover : ```.abs-cover```
 * - sugar.size.abs.contain : ```.abs-contain```
 * - sugar.size.abs.fit : ```.abs-fit```
 * - sugar.clearfix.default : ```.clearfix```
 * - sugar.clearfix.float : ```.clearfix-float```
 * - sugar.clearfix.micro : ```.clearfix-micro```
 * - sugar.clearfix.overflow : ```.clearfix-overflow```
 * - sugar.clearfix.facebook : ```.clearfix-facebook```
 * - sugar.no-transitions : ```.no-transitions```
 * - sugar.clear-transitions : ```.clear-transitions```
 * - sugar.no-animations : ```.no-animations```
 * - sugar.clear-animations : ```.clear-animations```
 * - sugar.no-transmations : ```.no-transmations```
 * - sugar.clear-transmations : ```.clear-transmations```
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
.pull-left {
  /**
	 * @name 		```.pull-left```
	 * Allows you to pull an element to the left side
	 * @styleguide 	Helpers / Pull
	 * @example 	html
	 * 	<span class="pull-left">Hello world</span>
	 * </div>
	 */
  float: left;
}

.pull-right {
  /**
	 * @name 		```.pull-right```
	 * Allows you to pull an element to the right side
	 * @styleguide 	Helpers / Pull
	 * @example 	html
	 * 	<span class="pull-right">Hello world</span>
	 * </div>
	 */
  float: right;
}

.relative {
  /**
	 * @name 		```.relative```
	 * Set an element position as ```relative```
	 * @styleguide 	Helpers / Position
	 * @example 	html
	 * <div class="relative">
	 * 	I'm relative now
	 * </div>
	 */
  position: relative;
}

.absolute {
  /**
	 * @name 		```.absolute```
	 * Set an element position as ```absolute```
	 * @styleguide 	Helpers / Position
	 * @example 	html
	 * <div class="absolute">
	 * 	I'm absolute now
	 * </div>
	 */
  position: absolute;
}

.clear-left {
  /**
	 * @name 		```.clear-left```
	 * Clear the left float on the element
	 * @styleguide 	Helpers / Float
	 * @example 	html
	 * <div class="clear-left">
	 * 	I clear the left float
	 * </div>
	 */
  clear: left;
}

.clear-right {
  /**
	 * @name 		```.clear-right```
	 * Clear the right float on the element
	 * @styleguide 	Helpers / Float
	 * @example 	html
	 * <div class="clear-right">
	 * 	I clear the right float
	 * </div>
	 */
  clear: right;
}

.clear {
  /**
	 * @name 		```.clear```
	 * Clear both float on the element
	 * @styleguide 	Helpers / Float
	 * @example 	html
	 * <div class="clear">
	 * 	I clear both floats
	 * </div>
	 */
  clear: both;
}

.pointer-events-none {
  /**
	 * @name 		```.pointer-events-none```
	 * Disable any pointer events
	 * @styleguide 	Helpers / Pointer events
	 * @example 	html
	 * <div class="pointer-events-none">
	 * 	I will not react to any pointer events
	 * </div>
	 */
  pointer-events: none;
}

.pointer-events-all {
  /**
	 * @name 		```.pointer-events-all```
	 * Disable any pointer events
	 * @styleguide 	Helpers / Pointer events
	 * @example 	html
	 * <div class="pointer-events-all">
	 * 	I will not react to any pointer events
	 * </div>
	 */
  pointer-events: all;
}

.block {
  /**
	 * @name 		```.block```
	 * Display the element as ```block```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="block">
	 * 	I'm displayed as block
	 * </div>
	 */
  display: block;
}

.inline {
  /**
	 * @name 		```.inline```
	 * Display the element as ```inline```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="inline">
	 * 	I'm displayed as inline
	 * </div>
	 */
  display: inline;
}

.inline-block {
  /**
	 * @name 		```.inline-block```
	 * Display the element as ```inline-block```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="inline-block">
	 * 	I'm displayed as inline-block
	 * </div>
	 */
  display: inline-block;
}

.show {
  /**
	 * @name 		```.show```
	 * Display the element as ```block```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="show">
	 * 	I'm displayed
	 * </div>
	 */
  display: block;
}

.show-inline {
  /**
	 * @name 		```.show-inline```
	 * Display the element as ```inline-block```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="show-inline">
	 * 	I'm inline displayed
	 * </div>
	 */
  display: inline-block;
}

.hidden {
  /**
	 * @name 		```.hidden```
	 * Hide the element by setting the display to ```none```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="hidden">
	 * 	I'm hidden
	 * </div>
	 */
  display: none;
}

.hide {
  /**
	 * @name 		```.hide```
	 * Hide the element by setting the display to ```none```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="hide">
	 * 	I'm hidden
	 * </div>
	 */
  display: none;
}

.visible {
  /**
	 * @name 		```.visible```
	 * Display the element by setting the visibility to ```visible```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="visible">
	 * 	I'm visible
	 * </div>
	 */
  visibility: visible;
}

.invisible {
  /**
	 * @name 		```.invisible```
	 * Display the element by setting the visibility to ```hidden```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="invisible">
	 * 	I'm invisible
	 * </div>
	 */
  visibility: hidden;
}

.visually-hidden {
  /**
	 * @name 		```.visually-hidden```
	 * Hide the element from display but not for SEO.
	 * This class use some tricks to make the element dissapear without using some ```display:none;```, etc...
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="visually-hidden">
	 * 	I'm only visually hidden
	 * </div>
	 */
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

.t-hidden {
  /**
	 * @name 		```.t-hidden```
	 * Hide the text
	 * @styleguide 	Helpers / Text
	 * @example 	html
	 * <div class="t-hidden">
	 * 	I'm not visible
	 * </div>
	 */
  overflow: hidden;
  text-indent: -9000px;
  display: block;
}

.t-truncate {
  /**
	 * @name 		```.t-truncate```
	 * Hide the text
	 * @styleguide 	Helpers / Text
	 * @example 	html
	 * <div class="t-truncate">
	 * 	I'm truncated cause I talk a lot too much Nulla mauris eros, finibus ac faucibus et, tempus quis risus. Praesent sit amet nulla vel libero euismod sodales eu nec.
	 * </div>
	 */
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-truncate > * {
  text-overflow: ellipsis;
  overflow: hidden;
}

.t-left {
  /**
	 * @name 		```.t-left```
	 * Align the text to the left
	 * @styleguide 	Helpers / Text Align
	 * @example 	html
	 * <div class="t-left">
	 * 	I'm left aligned
	 * </div>
	 */
  text-align: left;
}

.t-right {
  /**
	 * @name 		```.t-right```
	 * Align the text to the right
	 * @styleguide 	Helpers / Text Align
	 * @example 	html
	 * <div class="t-right">
	 * 	I'm right aligned
	 * </div>
	 */
  text-align: right;
}

.t-center {
  /**
	 * @name 		```.t-center```
	 * Align the text to the center
	 * @styleguide 	Helpers / Text Align
	 * @example 	html
	 * <div class="t-center">
	 * 	I'm centered
	 * </div>
	 */
  text-align: center;
}

.t-justify {
  /**
	 * @name 		```.t-justify```
	 * Make the text justified
	 * @styleguide 	Helpers / Text Align
	 * @example 	html
	 * <div class="t-justify">
	 * 	Nullam vel feugiat nunc. Phasellus facilisis, nisi sit amet viverra rhoncus, arcu risus volutpat dolor, sed euismod magna tellus ac purus. Praesent augue lorem, ullamcorper ac accumsan nec, suscipit eu.
	 * </div>
	 */
  text-align: justify;
}

.t-lowercase {
  /**
	 * @name 		```.t-lowercase```
	 * Transform the text to lowercase
	 * @styleguide 	Helpers / Text Transform
	 * @example 	html
	 * <div class="t-lowercase">
	 * 	I'M LOWERCASE
	 * </div>
	 */
  text-transform: lowercase;
}

.t-uppercase {
  /**
	 * @name 		```.t-uppercase```
	 * Transform the text to uppercase
	 * @styleguide 	Helpers / Text Transform
	 * @example 	html
	 * <div class="t-uppercase">
	 * 	I'm uppercase
	 * </div>
	 */
  text-transform: uppercase;
}

.t-capitalize {
  /**
	 * @name 		```.t-capitalize```
	 * Capizalize the words
	 * @styleguide 	Helpers / Text Transform
	 * @example 	html
	 * <div class="t-capitalize">
	 * 	I'm capitalized
	 * </div>
	 */
  text-transform: capitalize;
}

.f-bold {
  /**
	 * @name 		```.f-bold```
	 * Set the font-weight to ```bold```
	 * @styleguide 	Helpers / Font Weight
	 * @example 	html
	 * This <span class="f-bold">word</span> is bold
	 */
  font-weight: bold;
}

.f-lighter {
  /**
	 * @name 		```.f-lighter```
	 * Set the font-weight to ```lighter```
	 * @styleguide 	Helpers / Font Weight
	 * @example 	html
	 * 	This <span class="f-lighter">word</span> is lighter
	 */
  font-weight: lighter;
}

.f-bolder {
  /**
	 * @name 		```.f-bolder```
	 * Set the font-weight to ```bolder```
	 * @styleguide 	Helpers / Font Weight
	 * @example 	html
	 * This <span class="f-bolder">word</span> is bolder
	 */
  font-weight: bolder;
}

.f-normal {
  /**
	 * @name 		```.f-normal```
	 * Set the font-weight to ```normal```
	 * @styleguide 	Helpers / Font Weight
	 * @example 	html
	 * <div class="f-bold">
	 * 	This <span class="f-normal">word</span> is normal
	 * </div>
	 */
  font-weight: normal;
  font-style: normal;
}

.f-italic {
  /**
	 * @name 		```.f-italic```
	 * Set the font-style to ```italic```
	 * @styleguide 	Helpers / Font
	 * @example 	html
	 * This <span class="f-italic">word</span> is italic
	 */
  font-style: italic;
}

.f-oblique {
  /**
	 * @name 		```.f-oblique```
	 * Set the font-style to ```oblique```
	 * @styleguide 	Helpers / Font Style
	 * @example 	html
	 * This <span class="f-oblique">word</span> is oblique
	 */
  font-style: oblique;
}

.f-small-caps {
  /**
	 * @name 		```.f-small-caps```
	 * Set the font-variant to ```small-caps```
	 * @styleguide 	Helpers / Font Variant
	 * @example 	html
	 * This <span class="f-small-caps">word</span> is small-caps
	 */
  font-variant: small-caps;
}

.block-center {
  /**
	 * @name 		```.block-center```
	 * Set the element to as ```display:block``` and center it
	 * @styleguide 	Helpers / Block
	 * @example 	html
	 * <div class="block-center bkg-primary" style="width:100px;">
	 * 	I'm a centered block
	 * </div>
	 */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.abs-cover {
  /**
	 * @name 		```.abs-cover```
	 * Set a size that will cover the entire parent surface by positionning it in absolute
	 * @styleguide 	Helpers / Sizes
	 * @example 	html
	 * <div class="ratio-16-9">
	 * 	<img src="https://source.unsplash.com/random" class="abs-cover" />
	 * </div>
	 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%;
  min-height: 100%;
}

.abs-contain {
  /**
	 * @name 		```.abs-contain```
	 * Set a size that will contain the entire parent surface by positionning it in absolute
	 * @styleguide 	Helpers / Sizes
	 * @example 	html
	 * <div class="ratio-16-9">
	 * 	<img src="https://source.unsplash.com/random" class="abs-contain" />
	 * </div>
	 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 100%;
  max-height: 100%;
}

.abs-fit {
  /**
	 * @name 		```.abs-fit```
	 * Set a size that will fit the entire parent surface by positionning it in absolute
	 * @styleguide 	Helpers / Sizes
	 * @example 	html
	 * <div class="ratio-16-9">
	 * 	<img src="https://source.unsplash.com/random" class="abs-fit" />
	 * </div>
	 */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.clearfix {
  /**
	 * @name 		```.clearfix```
	 * Apply the micro clearfix on the element
	 * @styleguide 	Helpers / Clearfix
	 * @example 	html
	 * <div class="clearfix bkg-primary">
	 * 	<div class="pull-right">right pulled</div>
	 * </div>
	 * <div class="bkg-primary">
	 * 	<div class="pull-right">right pulled without clearfix</div>
	 * </div>
	 */
}

.clearfix-float {
  /**
	 * @name 		```.clearfix-float```
	 * Apply the float clearfix on the element
	 * @styleguide 	Helpers / Clearfix
	 * @example 	html
	 * <div class="clearfix-float bkg-primary">
	 * 	<div class="pull-right">right pulled</div>
	 * </div>
	 * <div class="bkg-primary">
	 * 	<div class="pull-right">right pulled without clearfix</div>
	 * </div>
	 */
}

.clearfix, .clearfix-micro {
  /**
	 * @name 		```.clearfix```
	 * Apply the micro clearfix on the element
	 * @styleguide 	Helpers / Clearfix
	 * @example 	html
	 * <div class="clearfix bkg-primary">
	 * 	<div class="pull-right">right pulled</div>
	 * </div>
	 * <div class="bkg-primary">
	 * 	<div class="pull-right">right pulled without clearfix</div>
	 * </div>
	 */
}

.clearfix-overflow {
  /**
	 * @name 		```.clearfix-overflow```
	 * Apply the overflow clearfix on the element
	 * @styleguide 	Helpers / Clearfix
	 * @example 	html
	 * <div class="clearfix-overflow bkg-primary">
	 * 	<div class="pull-right">right pulled</div>
	 * </div>
	 * <div class="bkg-primary">
	 * 	<div class="pull-right">right pulled without clearfix</div>
	 * </div>
	 */
}

.clearfix-facebook {
  /**
	 * @name 		```.clearfix-facebook```
	 * Apply the facebook clearfix on the element
	 * @styleguide 	Helpers / Clearfix
	 * @example 	html
	 * <div class="clearfix-facebook bkg-primary">
	 * 	<div class="pull-right">right pulled</div>
	 * </div>
	 * <div class="bkg-primary">
	 * 	<div class="pull-right">right pulled without clearfix</div>
	 * </div>
	 */
}

.ratio-21-9 {
  /**
	 * @name 		```.ratio-21-9```
	 * Keep a 16/9 ratio on a particular element. Applied by setting height to 0 and paddingtop to 100% / 16 * 9
	 * @styleguide 	Helpers / Ratios
	 * @example 	html
	 * <div class="bkg-primary ratio-21-9"></div>
	 */
  position: relative;
  overflow: hidden;
}

.ratio-21-9:before {
  content: '';
  display: block;
  height: 0;
  padding-top: 42.85714%;
}

.ratio-16-9 {
  /**
	 * @name 		```.ratio-16-9```
	 * Keep a 16/9 ratio on a particular element. Applied by setting height to 0 and paddingtop to 100% / 16 * 9
	 * @styleguide 	Helpers / Ratios
	 * @example 	html
	 * <div class="bkg-primary ratio-16-9"></div>
	 */
  position: relative;
  overflow: hidden;
}

.ratio-16-9:before {
  content: '';
  display: block;
  height: 0;
  padding-top: 56.25%;
}

.ratio-4-3 {
  /**
	 * @name 		```.ratio-4-3```
	 * Keep a 4/3 ratio on a particular element. Applied by setting height to 0 and paddingtop to 100% / 4 * 3
	 * @styleguide 	Helpers / Ratios
	 * @example 	html
	 * <div class="bkg-primary ratio-4-3"></div>
	 */
  position: relative;
  overflow: hidden;
}

.ratio-4-3:before {
  content: '';
  display: block;
  height: 0;
  padding-top: 75%;
}

.ratio-1-1 {
  /**
	 * @name 		```.ratio-1-1```
	 * Keep a 1/1 ratio on a particular element. Applied by setting height to 0 and paddingtop to 100%
	 * @styleguide 	Helpers / Ratios
	 * @example 	html
	 * <div class="bkg-primary ratio-1-1"></div>
	 */
  position: relative;
  overflow: hidden;
}

.ratio-1-1:before {
  content: '';
  display: block;
  height: 0;
  padding-top: 100%;
}

.no-transitions {
  /**
	 * @name 		```.no-transitions```
	 * Disable the transitions <span class="f-bold">only on the element</span>
	 * @styleguide 	Helpers / Transitions
	 * @example 	html
	 * <div class="no-transitions">
	 * 	I have no more transitions
	 * 	<div>But I have</div>
	 * </div>
	 */
}

.no-transitions, .no-transitions:before, .no-transitions:after {
  transition: none !important;
}

.clear-transitions {
  /**
	 * @name 		```.clear-transitions```
	 * Disable the transitions <span class="f-bold">on the element and all his children</span>
	 * @styleguide 	Helpers / Transitions
	 * @example 	html
	 * <div class="clear-transitions">
	 * 	I have no more transitions
	 * 	<div>Me neither</div>
	 * </div>
	 */
}

.clear-transitions, .clear-transitions:before, .clear-transitions:after, .clear-transitions *, .clear-transitions *:before, .clear-transitions *:after {
  transition: none !important;
}

.no-animations {
  /**
	 * @name 		```.no-animations```
	 * Disable the animations <span class="f-bold">only on the element</span>
	 * @styleguide 	Helpers / Animations
	 * @example 	html
	 * <div class="no-animations">
	 * 	I have no more animations
	 * 	<div>But I have</div>
	 * </div>
	 */
}

.no-animations, .no-animations:before, .no-animations:after {
  animation: none !important;
}

.clear-animations {
  /**
	 * @name 		```.clear-animations```
	 * Disable the transitions <span class="f-bold">on the element and all his children</span>
	 * @styleguide 	Helpers / Animations
	 * @example 	html
	 * <div class="clear-animations">
	 * 	I have no more animations
	 * 	<div>Me neither</div>
	 * </div>
	 */
}

.clear-animations, .clear-animations:before, .clear-animations:after, .clear-animations *, .clear-animations *:before, .clear-animations *:after {
  animation: none !important;
}

.no-transmations {
  /**
	 * @name 		```.no-transmations```
	 * Disable the animations and transitions <span class="f-bold">only on the element</span>
	 * @styleguide 	Helpers / Transmations
	 * @example 	html
	 * <div class="no-transmations">
	 * 	I have no more animations or transitions
	 * 	<div>But I have</div>
	 * </div>
	 */
}

.no-transmations, .no-transmations:before, .no-transmations:after {
  transition: none !important;
  animation: none !important;
}

.clear-transmations {
  /**
	 * @name 		```.clear-transmations```
	 * Disable the animations and transitions <span class="f-bold">on the element and all his children</span>
	 * @styleguide 	Helpers / Transmations
	 * @example 	html
	 * <div class="clear-transmations">
	 * 	I have no more animations or transitions
	 * 	<div>Me neither</div>
	 * </div>
	 */
}

.clear-transmations, .clear-transmations:before, .clear-transmations:after, .clear-transmations *, .clear-transmations *:before, .clear-transmations *:after {
  transition: none !important;
  animation: none !important;
}

/**
 * This file contains all the default settings that can be overrided by the [s-setup mixin](./mixins/_s-setup.scss).
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Create an arrow bubble effect
 *
 * @param 		{String} 			[$side=bottom] 				The side (top,right,bottom,left)
 * @param 		{String} 			[$align=center] 			The alignement (left,center,right,top,middle,bottom)
 * @param 		{Number} 			[$size=10px] 				The size of the arrow
 * @param 		{Color} 			[$color=s-color(primary)] 	The color of the bubble
 * @param 		{Number} 			[$arrow-offset=10px] 		The arrow offset from the side of the bubble
 * @param 		{Number} 			[$border-width=0] 			The border width of the bubble
 * @param 		{Color} 			[$border-color=null] 		The border color of the bubble
 *
 * @example
 * .my-cool-bubble {
 * 		\@include s-bubble(
 * 			$color : s-color(secondary)
 * 		);
 * 		color : white;
 * }
 *
 * @see 			https://codepen.io/kirkas/pen/otqyJ
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Generate a drop shadow depending on the depth specified
 *
 * @param 		{Integer} 			$depth 							The depth wanted (1,2,3,4,etc...)
 * @param 		{Color} 			[$color=rgba(0,0,0,.2)] 		The drop shadow color
 *
 * @example
 * .my-cool-element {
 * 		\@include s-depth(2);
 * }
 *
 * @author 	 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Create a poping dot effect to catch user attention on a particular item
 * This mixin affect the :before and :after pseudo selector of the item
 *
 * @param 		{String} 		[$vertical-align=top] 			Where to put the dot verticaly (top,middle,bottom)
 * @param 		{String} 		[$align=left] 					Where to put the dot horizontaly (left,center,right)
 * @param 		{Number} 		[$size=20px] 					The size of the dot
 * @param 		{Color} 		[$color=primary] 				The color of the dot
 * @param 		{Number} 		[$offset-top=0] 				The offset top
 * @param 		{Number} 		[$offset-right=0] 				The offset right
 * @param 		{Number} 		[$offset-bottom=0] 				The offset bottom
 * @param 		{Number} 		[$offset-left=0] 				The offset left
 *
 * @example
 * .my-cool-element {
 * 		\@include s-hey(
 * 			$align : right,
 * 			$color : secondary,
 * 			$size : 10px,
 * 			$offset-top : -10px,
 * 			$offset-right : -10px
 * 		);
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Generate a full animated, single element, bars loader
 *
 * @param 			{String} 			[$shape=rect] 				The shape of the bars (rect,circle)
 * @param 			{Color} 			[$color=primary] 			The color(s) of the loader. Can be a list of colors
 * @param 			{Number} 			[$width=.5em] 				The width of each bars
 * @param 			{Number} 			[$height=2em] 				The height of each bars
 * @param 			{Integer} 			[$count=5] 					How many bars you want
 * @param 			{Number} 			[$gap=.5em] 				The gap between each bars
 * @param 			{Number} 			[$opacity=1] 				The initial opacity of each bars
 * @param 			{Number} 			[$a-opacity=null] 			The opacity of the animated bars
 * @param 			{Second} 			[$a-duration=1s] 			The overall animation duration
 * @param 			{Second} 			[$a-delay=0s] 				The delay between two animation cycle
 * @param 			{Integer} 			[$a-near=1] 				How many bars are affected by the animated one
 * @param 			{String} 			[$a-ease=ease-in-out] 		The ease to use to animate each bars
 * @param 			{Number} 			[$a-offset=null] 			The offset to move the animated bar
 * @param 			{String} 			[$a-direction=both] 		The direction in which to move the bars (up,down,both)
 * @param 			{Boolean} 			[$a-continuous=true] 		If true, the first bars will be animated at same time at the last ones
 *
 * @example
 * .my-cool-loader {
 * 		\@include s-loader-bars(
 * 			$color : primary,
 * 			$a-offset : .5em
 * 		);
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Generate a full animated, single element, circle loader
 *
 * @param 			{Color} 			[$color=primary] 			The color(s) of the loader. Can be a list of colors
 * @param 			{Number} 			[$size=.33em] 				The size of each dot
 * @param 			{Number} 			[$radius=1em] 				The distance of each dot from the center of the loader
 * @param 			{Integer} 			[$count=5] 					How many bars you want
 * @param 			{Number} 			[$opacity=1] 				The initial opacity of each bars
 * @param 			{Number} 			[$a-opacity=null] 			The opacity of the animated bars
 * @param 			{Second} 			[$a-duration=1s] 			The overall animation duration
 * @param 			{Second} 			[$a-delay=0s] 				The delay between two animation cycle
 * @param 			{Integer} 			[$a-near=1] 				How many bars are affected by the animated one
 * @param 			{String} 			[$a-ease=ease-in-out] 		The ease to use to animate each bars
 *
 * @TODO finish documentation
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Generate a full animated, single element, couch-potato style loader
 *
 * @param 		{Number} 		[$size=1em] 				The size of the loader
 * @param 		{Color} 		[$color=primary] 			The color of the loader
 * @param 		{Second} 		[$a-duration=1s] 			The overall animation duration
 * @param 		{Second} 		[$a-delay=0s] 				The delay between two animation cycle
 * @param 		{String} 		[$a-ease=ease-in-out]		The ease to use for the animation
 * @param 		{Degree}		[$a-rotate=360deg] 			The animation rotation
 * @param 		{Number} 		[$a-scale=.7] 				The animation scale
 *
 * @example
 * .my-cool-loader {
 * 		\@include s-loader-couch-potato();
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Generate a full animated, single element, flip ball style loader
 *
 * @param 		{String} 		[$shape=circle] 			The shape of the loader (circle,rect)
 * @param 		{Number} 		[$size=1em] 				The size of the loader
 * @param 		{Color} 		[$color=primary] 			The color of the loader. Can be a list of colors
 * @param 		{Second} 		[$a-duration=1s] 			The overall animation duration
 * @param 		{Second} 		[$a-delay=0s] 				The delay between two animation cycle
 * @param 		{String} 		[$a-ease=ease-in-out]		The ease to use for the animation
 *
 * @example
 * .my-cool-loader {
 * 		\@include s-loader-flip-ball();
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Generate a long shadow effect like [this](https://www.google.ch/search?q=long+shadow&espv=2&biw=2560&bih=1316&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjjne6x49LPAhVBHRQKHat8AW8Q_AUIBigB)
 *
 * @param 		{Color} 		[$color=rgba(0,0,0,.3)] 			The shadow color
 * @param 		{String} 		[$type=text] 						The shadow type (text,box)
 * @param 		{Degree} 		[$angle=135deg] 					The shadow angle
 * @param 		{Integer} 		[$depth=20] 						The shadow depth
 * @param 		{Boolean} 		[$fade=false] 						If true, the shadow will fade itself
 * @param 		{Number} 		[$blur=0] 							The blur amount of the shadow
 * @param 		{Number} 		[$blur-ratio=0] 					The ratio to blur each depth more
 *
 * @example
 * .my-cool-title {
 * 		\@include s-long-shadow(
 * 			$depth : 10
 * 		);
 * }
 * .my-cool-box {
 * 		\@include s-long-shadow(
 * 			$type : box
 * 		);
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Create side lines around an item
 *
 * @param 			{String} 		[$style=solid] 			The line style, same possible values as the border-style property
 * @param 			{String} 		[$side=both] 			The side where to put lines (left,right,both)
 * @param 			{Number} 		[$height=1px] 			The lines height
 * @param 			{Number} 		[$width=50%] 			The width of the lines
 * @param 			{Color} 		[$color=text]			The color of the lines
 * @param 			{Number} 		[$padding=0] 			The padding between the lines and the content
 * @param 			{Number} 		[$offset-top=null] 		The line offset top
 *
 * @example
 * h1 {
 * 		\@include s-side-lined(
 * 			$padding : 20px,
 * 			$side : right,
 * 			$width : 100%
 * 		);
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	SAnimationComponent Classes
 * This file provide the mixins to generate animation classes
 */
/**
 * Provide the classes for the anim="letters-in-reveal" animation
 * - ```[anim="letters-in-reveal"]```
 * @param 		{Integer} 		[$words-letters-count=100] 		The max letters count of words that the animation will handle
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the bare styling for the anim="letters-in-reveal" classes
 * - ```[anim="letters-in-reveal"]```
 * @param 		{Integer} 		[$words-letters-count=100] 		The max letters count of words that the animation will handle
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the style styling for the anim="letters-in-reveal" classes
 * - ```[anim="letters-in-reveal"]```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	SAnimationComponent Classes
 * This file provide the mixins to generate animation classes
 */
/**
 * Provide the classes for the anim="lines-in-boxes" animation
 * - ```[anim="lines-in-boxes"]```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@keyframes lines-in-boxes {
  0% {
    width: 0;
    transform: translateX(200vw);
  }
  49.99999% {
    transform: translateX(200vw);
  }
  50% {
    width: 100%;
    left: 0;
    transform: translateX(0);
  }
  100% {
    width: 0;
    left: 100%;
    transform: translateX(0);
  }
}

@keyframes lines-in-boxes-hover {
  0% {
    width: 0;
    transform: translateX(200vw);
  }
  49.99999% {
    transform: translateX(200vw);
  }
  50% {
    width: 100%;
    left: 0;
    transform: translateX(0);
  }
  80% {
    width: 0;
    left: 100%;
    transform: translateX(0);
  }
  100% {
    width: 0;
    left: 100%;
    transform: translateX(0);
  }
}

@keyframes lines-in-boxes-text {
  0% {
    transform: translateX(-200vw);
  }
  49.99999% {
    transform: translateX(-200vw);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

/**
* Provide the bare styling for the anim="lines-in-boxes" classes
* - ```[anim="lines-in-boxes"]```
* @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Provide the style styling for the anim="lines-in-boxes" classes
* - ```[anim="lines-in-boxes"]```
* @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
 * @name 	SAnimationComponent Classes
 * This file provide the mixins to generate animation classes
 */
/**
 * Provide the classes for the anim="slide-in" animation
 * - ```[anim="slide-in-up"]```
 * - ```[anim="slide-in-right"]```
 * - ```[anim="slide-in-bottom"]```
 * - ```[anim="slide-in-left"]```
 * @param 	{List} 		[$directions=up right down left]		Specify the directions to generate the classes for
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the bare styling for the anim="slide-in" classes
 * - ```[anim="slide-in-up"]```
 * - ```[anim="slide-in-right"]```
 * - ```[anim="slide-in-bottom"]```
 * - ```[anim="slide-in-left"]```
 * @param 	{List} 		[$directions=up right down left]		Specify the directions to generate the classes for
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
 * Provide the style styling for the anim="slide-in" classes
 * - ```[anim="slide-in"]```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	SButtonComponent
 * Provide ability to generate buttons that follow your settings like colors, look and feel, etc...
 *
 * - ```.btn```
 * - ```.btn--block```
 * - ```.btn--{color}```
 * - ```.btn--outline```
 * - ```.btn--link```
 * - ```.btn:disabled```
 * - ```.btn--hover-{$color}```
 *
 * See:
 * - [Element level mixins API](./sass/_main.md)
 * - [Classes level mixins API](./sass/_classes.md)
 *
 * @example 	scss
 * // apply the button bare and style to my custom element
 * .my-cool-element {
 * 	\@include s-button();
 * }
 * // apply only the bare styling to my custom element
 * .my-cool-element {
 * 	\@include s-button-bare();
 * }
 * // apply only the style styling to my custom element
 * .my-cool-element {
 * 	\@include s-button-style();
 * }

 * // will print out classes for the button including bare and style part
 * \@include s-button-classes(
 * 	$colors : default primary secondary
 * );
 * // will print out classes for the button including only bare part
 * \@include s-button-classes-bare();
 * // will print out classes for the button including only style part
 * \@include s-button-classes-style(
 * 	$colors : default primary secondary
 * );
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	SButtonComponent
 * This file provide the mixins to create buttons
 */
.a-btn, .a-btn--block {
  display: inline-block;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  cursor: pointer;
  outline-width: 0;
  -webkit-appearance: none;
  line-height: 0;
  text-decoration: none;
  font-size: 1em;
  user-select: none;
}

.a-btn:not(button):not(input), .a-btn--block:not(button):not(input) {
  line-height: 0.9;
}

button {
  line-height: 1;
}

/**
 * Apply the button css
 * @param 		{Number} 		[$modifiers=null] 			The modifiers that represent the button you want. Available : {color} outline link
 * @param 		{Integer}		[$state=null] 				The state of the button you want like. Available : disabled
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the button bare css
 * @param 		{Number} 		[$modifiers=null] 			The modifiers that represent the button you want. Available : {color} outline link
 * @param 		{Integer}		[$state=null] 				The state of the button you want like. Available : disabled
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the button style css
 * @param 		{Number} 		[$modifiers=null] 			The modifiers that represent the button you want. Available : {color} outline link
 * @param 		{Integer}		[$state=null] 				The state of the button you want like. Available : disabled
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	SButtonComponent Classes
 * This file provide the mixins to generate button classes
 */
/**
 * Provide all the classes of the button component like .btn, .btn--outline, etc...
 * - ```.btn```
 * - ```.btn--{color}```
 * - ```.btn--outline```
 * - ```.btn--link```
 * - ```.btn--block```
 * @param 		{List<Color>} 		[$colors=default primary secondary] 		The colors to generate
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the bare styling for the buttons classes
 * - ```.btn```
 * - ```.btn--block```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the style styling for the buttons classes
 * - ```.btn--{color}```
 * - ```.btn--outline```
 * - ```.btn--link```
 * - ```.btn:disabled```
 * - ```.btn--hover-{$color}```
 * @param 		{List<Color>} 		[$colors=default primary secondary] 		The colors to generate
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	SCornerBadgeComponent
 * Provide ability to generate corner badges that follow your settings like colors.
 *
 * - ```.corner-badge```
 * - ```.corner-badge--tl```
 * - ```.corner-badge--tr```
 * - ```.corner-badge--bl```
 * - ```.corner-badge--br```
 * - ```.corner-badge--{color}```
 *
 * See:
 * - [Element level mixins API](./sass/_main.md)
 * - [Classes level mixins API](./sass/_classes.md)
 *
 * @example 	scss
 * // apply the corner badge bare and style to my custom element
 * .my-cool-element {
 * 	\@include s-corner-badge(primary tr);
 * }
 * // apply only the bare styling to my custom element
 * .my-cool-element {
 * 	\@include s-corner-badge-bare(tr);
 * }
 * // apply only the style styling to my custom element
 * .my-cool-element {
 * 	\@include s-corner-badge-style(primary);
 * }

 * // will print out classes for the corner badges including bare and style part
 * \@include s-corner-badge-classes(
 * 	$corners : tr tl br bl,
 * 	$colors : default primary secondary
 * );
 * // will print out classes for the button including only bare part
 * \@include s-button-classes-bare(
 * 	$corners : tr tl br bl
 * );
 * // will print out classes for the button including only style part
 * \@include s-button-classes-style(
 * 	$colors : default primary secondary
 * );
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	SCornerBadgeComponent
 * This file provide the mixins to create corner badges
 */
.a-corner-badge, .a-corner-badge--tl, .a-corner-badge--tr, .a-corner-badge--bl, .a-corner-badge--br {
  position: absolute;
  display: block;
}

.a-corner-badge > *, .a-corner-badge--tl > *, .a-corner-badge--tr > *, .a-corner-badge--bl > *, .a-corner-badge--br > * {
  position: relative;
}

.a-corner-badge:before, .a-corner-badge--tl:before, .a-corner-badge--tr:before, .a-corner-badge--bl:before, .a-corner-badge--br:before {
  content: '';
  display: block;
  position: absolute;
  border-style: solid;
  border-color: transparent;
}

/**
 * Apply the corner badge css
 * @param 		{Number} 		[$modifiers=default tr] 			The modifiers that represent the corner badge you want. Available : {color} tl tr bl br
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the corner badge bare css
 * @param 		{Number} 		[$modifiers=tr] 			The modifiers that represent the corner badge you want. Available : tl tr bl br
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the corner badge style css
 * @param 		{Number} 		[$modifiers=default] 			The modifiers that represent the corner badge you want. Available : {color}
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	SCornerBadgeComponent Classes
 * This file provide the mixins to generate corner badge classes
 */
/**
 * Provide all the classes of the corner badge component like:
 * - ```.corner-badge```
 * - ```.corner-badge--tl```
 * - ```.corner-badge--tr```
 * - ```.corner-badge--bl```
 * - ```.corner-badge--br```
 * - ```.corner-badge--{color}```
 *
 * @param 		{List<String>} 		[$corners=tl tr bl br] 						The corners to generate
 * @param 		{List<Color>} 		[$colors=default primary secondary] 		The colors to generate
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide all the bare classes of the corner badge component like:
 * - ```.corner-badge```
 * - ```.corner-badge--tl```
 * - ```.corner-badge--tr```
 * - ```.corner-badge--bl```
 * - ```.corner-badge--br```
 *
 * @param 		{List<String>} 		[$corners=tl tr bl br] 						The corners to generate
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide all the style classes of the corner badge component like:
 * - ```.corner-badge--{color}```
 *
 * @param 		{List<Color>} 		[$colors=default primary secondary] 		The colors to generate
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	SDropdownComponent
 * Documentation coming soon...
 */
.a-dropdown__menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  pointer-events: none;
}

.a-dropdown:hover .a-dropdown__menu, .a-dropdown.active .a-dropdown__menu, .a-dropdown:active .a-dropdown__menu, .a-dropdown.a-dropdown--active .a-dropdown__menu {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

/**
 * @name 	SFormComponent
 * Documentation coming soon...
 */
/**
 * @name 	SFormComponent
 * This file provide the mixins and functions to create form elements
 */
.a-form-input, .a-form-select, .a-form-textarea, .a-form-addon {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  outline: none;
  width: 100%;
  font-size: 1em;
}

/**
 * Set the styling for field sizes like padding, height, etc...
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the styling for field color like borders
 * @param 		{Color} 		$color 		The color wanted for the field
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the bare and style css for input field (text, email, etc...)
 * @param 		{Color} 		[$color=default] 		The color wanted for the field
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the bare css for input field (text, email, etc...)
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the style css for input field (text, email, etc...)
 * @param 		{Color} 		[$color=default] 		The color wanted for the field
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the bare and style css for textarea
 * @param 		{Color} 		[$color=default] 		The color wanted for the textarea
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Set the styling for textarea sizes like padding, etc...
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the bare css for textarea
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the style css for textarea
 * @param 		{Color} 		[$color=default] 		The color wanted for the textarea
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
* Apply the bare and style css for select
* @param 		{Color} 		[$color=default] 		The color wanted for the select
* @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
 * Set the styling for select colors like background arrow, etc...
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
* Apply the bare css for select
* @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply the style css for select
* @param 		{Color} 		[$color=default] 		The color wanted for the select
* @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply the bare and style css for form group
* @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply the bare css for form group
* @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply the style css for form group
* @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply the bare and style css for form addon
* @param 		{Color} 		[$color=default] 		The color wanted for the form addon
* @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply the bare css for form group
* @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
* Apply the bare and style css for form group
* @param 		{Color} 		[$color=default] 		The color wanted for the select
* @author 		Olivier Bossel <olivier.bossel@gmail.com>
*/
/**
 * @name 	SFormComponent Classes
 * This file provide the mixins to generate form classes
 */
/**
 * Provide all the classes of the form component like .form-input, .form-textarea, etc...
 * - ```.form-input```
 * - ```.form-input--{color}```
 * - ```.form-textarea```
 * - ```.form-textarea--{color}```
 * - ```.form-select```
 * - ```.form-select--{color}```
 * - ```.form-group````
 * - ```.form-addon```
 * - ```.form-addon--{color}```
 * @param 		{List<Color>} 		[$colors=default primary secondary] 		The colors to generate
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide all the bare classes of the form component like .form-input, .form-textarea, etc...
 * - ```.form-input```
 * - ```.form-textarea```
 * - ```.form-select```
 * - ```.form-group````
 * - ```.form-addon```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide all the style classes of the form component like .form-input, .form-textarea, etc...
 * - ```.form-input```
 * - ```.form-input--{color}```
 * - ```.form-textarea```
 * - ```.form-textarea--{color}```
 * - ```.form-select```
 * - ```.form-select--{color}```
 * - ```.form-group````
 * - ```.form-addon```
 * - ```.form-addon--{color}```
 * @param 		{List<Color>} 		[$colors=default primary secondary] 		The colors to generate
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	SNavComponent
 * Documentation coming soon...
 */
/**
 * @name 	STableComponent
 * Documentation coming soon...
 */
/**
 * Print out the responsive style for a table.
 * This responsive style make the table display as block and take the "label" attribute on the td to display correctly the line label
 */
/**
 * @name 	STableComponent Classes
 * This file provide the mixins to generate table classes
 */
/**
 * Provide all the classes of the button component like .table, .table--striped, etc...
 * - ```.table```
 * - ```.table--striped```
 * - ```.table--bordered```
 * - ```.table--hover```
 * - ```.table--responsive```
 * - ```.table--responsive-overflow```
 * - ```.table--interactive```
 * - ```.table--middle```
 * - ```.table--center```
 *
 * @param 		{Color} 		[$colors=default primary secondary]	 		Specify the colors to generate
 * @param 		{String} 		[$modifiers=striped bordered hover responsive responsive-overflow interactive middle center] 		Specify the modifiers to generate
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide all the style classes of the button component like .table, .table--striped, etc...
 * - ```.table```
 * - ```.table--striped```
 * - ```.table--bordered```
 * - ```.table--hover```
 * - ```.table--responsive```
 * - ```.table--responsive-overflow```
 * - ```.table--interactive```
 * - ```.table--middle```
 * - ```.table--center```
 *
 * @param 		{Color} 		[$colors=default primary secondary]	 		Specify the colors to generate
 * @param 		{String} 		[$modifiers=striped bordered hover responsive responsive-overflow interactive middle center] 		Specify the modifiers to generate
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide all the bare classes of the button component like .table, .table--striped, etc...
 * - ```.table```
 * - ```.table--striped```
 * - ```.table--bordered```
 * - ```.table--hover```
 * - ```.table--responsive```
 * - ```.table--responsive-overflow```
 * - ```.table--interactive```
 * - ```.table--middle```
 * - ```.table--center```
 *
 * @param 		{String} 		[$modifiers=striped bordered hover responsive responsive-overflow interactive middle center] 		Specify the modifiers to generate
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
.a-tooltip {
  position: absolute !important;
  pointer-events: none;
  opacity: 0;
}

:hover > .a-tooltip,
.active > .a-tooltip {
  opacity: 1;
}

/**
 * @name 	STypographyComponent
 * Provide ability to generate base typography classes for:
 * - Titles:
 * 	- ```.h1-h6```
 * 	- ```.tf h1-h6```
 * - Paragraphs
 * 	- ```.p```, ```.tf p```
 * 	- ```.p--lead```, ```.tf p.p--lead```
 * - Links
 * 	- ```.link```, ```.tf a```
 * - Inline text elements
 *  - ```.mark```, ```.tf mark```
 *  - ```.del```, ```.tf del```
 *  - ```.s```, ```.tf s```
 *  - ```.ins```, ```.tf ins```
 *  - ```.u```, ```.tf u```
 *  - ```.small```, ```.tf small```
 *  - ```.strong```, ```.tf strong```
 *  - ```.em```, ```.tf em```
 * - Lists
 * 	- ```.dl```, ```.tf dl```
 * 		- ```.dt```, ```.tf dt```
 * 		- ```.dd```, ```.tf dd```
 * 	- ```.ul```, ```.tf ul```
 * 		- ```.li```, ```.tf li```
 * 	- ```.ol```, ```.tf ol```
 * 		- ```.li```, ```.tf li```
 * - Captions
 * 	- ```.caption```, ```.tf caption```, ```.tf figcaption```
 * - Quotes
 * 	- ```.quote```, ```.tf quote```
 * 	- ```.blockquote```, ```.tf blockquote```
 *
 * See:
 * - [Element level mixins API](./sass/_main.md)
 * - [Classes level mixins API](./sass/_classes.md)
 *
 * @example 	scss
 * // apply the title bare and style to my custom element
 * h1 {
 * 	\@include s-typography-title(4em);
 * }
 * // apply only the bare styling to my custom title
 * h1 {
 * 	\@include s-typography-title-bare(4em);
 * }
 * // apply only the style styling to my custom title
 * h1 {
 * 	\@include s-typography-title-style(4em);
 * }
 *
 * // provide classes for all the typography elements
 * \@include s-typography-classes();
 *
 * @author 	Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	STypographyComponent
 * This file provide the mixins to create typography elements
 */
/**
 * Apply the title css
 * @param 		{Number} 		$size 		The size wanted. If unitless, will use modular scale to calculate size
 * @param 		{Integer}		[$base=null] 		The base on which to calculate the modular scale if needed
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the title bare css
 * @param 		{Number} 		$size 				The size wanted. If unitless, will use modular scale to calculate size
 * @param 		{Integer}		[$base=null] 		The base on which to calculate the modular scale if needed
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the title style css
 * @param 		{Number} 		$size 				The size wanted. If unitless, will use modular scale to calculate size
 * @param 		{Integer}		[$base=null] 		The base on which to calculate the modular scale if needed
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the paragraph bare css
 * @param 		{Number} 		$size 				The size wanted
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the paragraph style css
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the link css
 * @param 		{Color} 		[$color=primary] 		The color used to style link
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the link bare css
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the link style css
 * @param 		{Color} 		[$color=primary] 		The color used to style link
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the inline-text css
 * @param 		{String} 		$tag 		The tag to use the style for
 * @param 		{Color} 		[$color=primary] 		The color used to style different inline text elements
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the inline-text bare css
 * @param 		{String} 		$tag 		The tag to use the style for
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the inline-text css
 * @param 		{String} 		$tag 		The tag to use the style for
 * @param 		{Color} 		[$color=primary] 		The color used to style different inline text elements
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the list css
 * @param 		{String|List} 		$tag 				The tag to style like "ul", "ol li" or "dl dt"
 * @param 		{Color} 			[$color=primary] 	The color used for styling bullets
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the list bare css
 * @param 		{String|List} 		$tag 				The tag to style like "ul", "ol li" or "dl dt"
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the list style css
 * @param 		{String|List} 		$tag 				The tag to style like "ul", "ol li" or "dl dt"
 * @param 		{Color} 			[$color=primary] 	The color used for styling bullets
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the caption css
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the caption bare css
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the caption style css
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the quote css
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the quote bare css
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Apply the quote style css
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * @name 	STypographyComponent Classes
 * This file provide the mixins to generate typography classes
 */
/**
 * Provide all the classes of the typography component like titles, paragraphs, lists, etc..
 * @param 		{Color} 	[$color=primary] 		The main color used to generate the texts styles
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the styling for the titles classes:
 * - ```.h1-h6```
 * - ```.tf h1-h6```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the bare styling for the titles classes
 * - ```.h1-h6```
 * - ```.tf h1-h6```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the style styling for the titles classes
 * - ```.h1-h6```
 * - ```.tf h1-h6```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the styling for the paragraphs classes
 * - ```.p```, ```.tf p```
 * - ```.p--lead```, ```.tf p.p--lead```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the bare styling for the ```.p``` and ```.p--lead``` classes
 * - ```.p```, ```.tf p```
 * - ```.p--lead```, ```.tf p.p--lead```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the bare styling for the ```.p``` class
 * - ```.p```, ```.tf p```
 * - ```.p--lead```, ```.tf p.p--lead```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the styling for the links classes
 * - ```.link```, ```.tf a```
 * @param 		{Color} 		[$color=primary] 		The color used to style links
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the bare styling for the links classes
 * - ```.link```, ```.tf a```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the style styling for the links classes
 * - ```.link```, ```.tf a```
 * @param 		{Color} 		[$color=primary] 		The color used to style links
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the styling for the inline-text classes
 * - ```.mark```, ```.tf mark```
 * - ```.del```, ```.tf del```
 * - ```.s```, ```.tf s```
 * - ```.ins```, ```.tf ins```
 * - ```.u```, ```.tf u```
 * - ```.small```, ```.tf small```
 * - ```.strong```, ```.tf strong```
 * - ```.em```, ```.tf em```
 * @param 		{Color} 		[$color=primary] 		The color used to style different inline text elements
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the bare styling for the inline-text classes
 * - ```.mark```, ```.tf mark```
 * - ```.del```, ```.tf del```
 * - ```.s```, ```.tf s```
 * - ```.ins```, ```.tf ins```
 * - ```.u```, ```.tf u```
 * - ```.small```, ```.tf small```
 * - ```.strong```, ```.tf strong```
 * - ```.em```, ```.tf em```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the style styling for the inline-text classes
 * - ```.mark```, ```.tf mark```
 * - ```.del```, ```.tf del```
 * - ```.s```, ```.tf s```
 * - ```.ins```, ```.tf ins```
 * - ```.u```, ```.tf u```
 * - ```.small```, ```.tf small```
 * - ```.strong```, ```.tf strong```
 * - ```.em```, ```.tf em```
 * @param 		{Color} 		[$color=primary] 		The color used to style different inline text elements
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the styling for the lists classes
 * - ```.dl```, ```.tf dl```
 * 	- ```.dt```, ```.tf dt```
 * 	- ```.dd```, ```.tf dd```
 * - ```.ul```, ```.tf ul```
 * 	- ```.li```, ```.tf li```
 * - ```.ol```, ```.tf ol```
 * 	- ```.li```, ```.tf li```
 * @param 		{Color} 		[$color=primary] 		The color used to style bullets
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the bare styling for the lists classes
 * - ```.dl```, ```.tf dl```
 * 	- ```.dt```, ```.tf dt```
 * 	- ```.dd```, ```.tf dd```
 * - ```.ul```, ```.tf ul```
 * 	- ```.li```, ```.tf li```
 * - ```.ol```, ```.tf ol```
 * 	- ```.li```, ```.tf li```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the style styling for the lists classes
 * - ```.dl```, ```.tf dl```
 * 	- ```.dt```, ```.tf dt```
 * 	- ```.dd```, ```.tf dd```
 * - ```.ul```, ```.tf ul```
 * 	- ```.li```, ```.tf li```
 * - ```.ol```, ```.tf ol```
 * 	- ```.li```, ```.tf li```
 * @param 		{Color} 		[$color=primary] 		The color used to style bullets
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the styling for the captions classes
 * - ```.caption```, ```.figcaption```, ```.tf caption```, ```.tf figcaption```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the bare styling for the captions classes
 * - ```.caption```, ```.figcaption```, ```.tf caption```, ```.tf figcaption```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the style styling for the captions classes
 * - ```.caption```, ```.figcaption```, ```.tf caption```, ```.tf figcaption```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the styling for the quotes classes
 * - ```.quote```, ```.tf quote```
 * - ```.blockquote```, ```.tf blockquote```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the bare styling for the quotes classes
 * - ```.quote```, ```.tf quote```
 * - ```.blockquote```, ```.tf blockquote```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Provide the style styling for the quotes classes
 * - ```.quote```, ```.tf quote```
 * - ```.blockquote```, ```.tf blockquote```
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
/**
 * Setup
 * Setup all the different parts/modules/libraries.
 */
/**
 * Setup
 * Setup all the different parts/modules/libraries.
 */
/* This stylesheet generated by Transfonter (https://transfonter.org) on November 17, 2017 2:59 PM */
@font-face {
  font-family: 'Gotham HTF';
  src: url("../fonts/gotham/GothamHTF-Medium.eot");
  src: url("../fonts/gotham/GothamHTF-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/gotham/GothamHTF-Medium.woff2") format("woff2"), url("../fonts/gotham/GothamHTF-Medium.woff") format("woff"), url("../fonts/gotham/GothamHTF-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham HTF';
  src: url("../fonts/gotham/GothamHTF-XLight.eot");
  src: url("../fonts/gotham/GothamHTF-XLight.eot?#iefix") format("embedded-opentype"), url("../fonts/gotham/GothamHTF-XLight.woff2") format("woff2"), url("../fonts/gotham/GothamHTF-XLight.woff") format("woff"), url("../fonts/gotham/GothamHTF-XLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham HTF';
  src: url("../fonts/gotham/GothamHTF-Bold.eot");
  src: url("../fonts/gotham/GothamHTF-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/gotham/GothamHTF-Bold.woff2") format("woff2"), url("../fonts/gotham/GothamHTF-Bold.woff") format("woff"), url("../fonts/gotham/GothamHTF-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham HTF';
  src: url("../fonts/gotham/GothamHTF-Thin.eot");
  src: url("../fonts/gotham/GothamHTF-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/gotham/GothamHTF-Thin.woff2") format("woff2"), url("../fonts/gotham/GothamHTF-Thin.woff") format("woff"), url("../fonts/gotham/GothamHTF-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham HTF';
  src: url("../fonts/gotham/GothamHTF-Book.eot");
  src: url("../fonts/gotham/GothamHTF-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/gotham/GothamHTF-Book.woff2") format("woff2"), url("../fonts/gotham/GothamHTF-Book.woff") format("woff"), url("../fonts/gotham/GothamHTF-Book.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham HTF';
  src: url("../fonts/gotham/GothamHTF-Light.eot");
  src: url("../fonts/gotham/GothamHTF-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/gotham/GothamHTF-Light.woff2") format("woff2"), url("../fonts/gotham/GothamHTF-Light.woff") format("woff"), url("../fonts/gotham/GothamHTF-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

/**
	 * @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 	16px
	 * @gridle-gutter-height 	16px
	 * @gridle-gutter-top 	8px
	 * @gridle-gutter-right 	8px
	 * @gridle-gutter-bottom 	8px
	 * @gridle-gutter-left 	8px
	 * @gridle-direction 	ltr
	 * @gridle-dir-attribute 	false
	 * @gridle-name-multiplicator 	1
	 * @gridle-states-classes 	false
	 * @gridle-classes-prefix 	
	 */
/**
 * Mobile first states
 * - mobile : 320px to infinite
 * - tablet : 640px to infinite
 * - desktop : 992px to infinite
 * - large : 1200px to infinite
 */
/**
	 * @name 	mobile State
	 * Here's the settings for the **mobile** state.
	 * @styleguide 	Gridle / States
	 * @display 	gridle-settings
	 * @gridle-name 	mobile
	 * @gridle-min-width 	320px
	 * @gridle-max-width 	
	 * @gridle-query 	
	 * @gridle-classes 	true
	 * @gridle-context 	12
	 * @gridle-gutter-width 	16px
	 * @gridle-gutter-height 	16px
	 * @gridle-gutter-top 	8px
	 * @gridle-gutter-right 	8px
	 * @gridle-gutter-bottom 	8px
	 * @gridle-gutter-left 	8px
	 * @gridle-direction 	ltr
	 * @gridle-dir-attribute 	false
	 * @gridle-name-multiplicator 	1
	 * @gridle-states-classes 	false
	 * @gridle-classes-prefix 	
	 */
/**
	 * @name 	tablet State
	 * Here's the settings for the **tablet** state.
	 * @styleguide 	Gridle / States
	 * @display 	gridle-settings
	 * @gridle-name 	tablet
	 * @gridle-min-width 	768px
	 * @gridle-max-width 	
	 * @gridle-query 	
	 * @gridle-classes 	true
	 * @gridle-context 	12
	 * @gridle-gutter-width 	16px
	 * @gridle-gutter-height 	16px
	 * @gridle-gutter-top 	8px
	 * @gridle-gutter-right 	8px
	 * @gridle-gutter-bottom 	8px
	 * @gridle-gutter-left 	8px
	 * @gridle-direction 	ltr
	 * @gridle-dir-attribute 	false
	 * @gridle-name-multiplicator 	1
	 * @gridle-states-classes 	false
	 * @gridle-classes-prefix 	
	 */
/**
	 * @name 	desktop State
	 * Here's the settings for the **desktop** state.
	 * @styleguide 	Gridle / States
	 * @display 	gridle-settings
	 * @gridle-name 	desktop
	 * @gridle-min-width 	992px
	 * @gridle-max-width 	
	 * @gridle-query 	
	 * @gridle-classes 	true
	 * @gridle-context 	12
	 * @gridle-gutter-width 	16px
	 * @gridle-gutter-height 	16px
	 * @gridle-gutter-top 	8px
	 * @gridle-gutter-right 	8px
	 * @gridle-gutter-bottom 	8px
	 * @gridle-gutter-left 	8px
	 * @gridle-direction 	ltr
	 * @gridle-dir-attribute 	false
	 * @gridle-name-multiplicator 	1
	 * @gridle-states-classes 	false
	 * @gridle-classes-prefix 	
	 */
/**
	 * @name 	desktop-large State
	 * Here's the settings for the **desktop-large** state.
	 * @styleguide 	Gridle / States
	 * @display 	gridle-settings
	 * @gridle-name 	desktop-large
	 * @gridle-min-width 	1200px
	 * @gridle-max-width 	
	 * @gridle-query 	
	 * @gridle-classes 	true
	 * @gridle-context 	12
	 * @gridle-gutter-width 	16px
	 * @gridle-gutter-height 	16px
	 * @gridle-gutter-top 	8px
	 * @gridle-gutter-right 	8px
	 * @gridle-gutter-bottom 	8px
	 * @gridle-gutter-left 	8px
	 * @gridle-direction 	ltr
	 * @gridle-dir-attribute 	false
	 * @gridle-name-multiplicator 	1
	 * @gridle-states-classes 	false
	 * @gridle-classes-prefix 	
	 */
/**
 * Utils
 * Import all the different utils functions, mixins, classes, etc...
 */
/**
 * Utils
 * Import all the different utils functions, mixins, classes, etc...
 */
/*
 * Temporary hardcoded !important responsive helpers,
 * until finding a better solution
 */
@media screen and (max-width: 768px) {
  .m-t-big {
    margin-top: 10rem !important;
  }
  .m-b-big {
    margin-bottom: 10rem !important;
  }
  .m-t-bigger {
    margin-top: 26.66667rem !important;
  }
  .m-b-bigger {
    margin-bottom: 26.66667rem !important;
  }
}

/**
 * Generic
 * All the generic codebase for the project like typography, resets, etc...
 */
/**
 * Generic
 * All the generic codebase for the project like typography, resets, etc...
 */
.cs-light,
.cs-lighter {
  color: rgba(255, 255, 255, 0.6);
}

@font-face {
  font-family: "fonticons";
  src: url("../fonts/fonticons/fonticons.eot");
  src: url("../fonts/fonticons/fonticons.eot?#iefix") format("eot"), url("../fonts/fonticons/fonticons.woff2") format("woff2"), url("../fonts/fonticons/fonticons.woff") format("woff"), url("../fonts/fonticons/fonticons.ttf") format("truetype"), url("../fonts/fonticons/fonticons.svg#fonticons") format("svg");
}

.icon:before {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon:before:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-angle-down {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-angle-down:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-angle-down:before {
  content: "\E001";
}

.icon-angle-left {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-angle-left:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-angle-left:before {
  content: "\E002";
}

.icon-angle-right {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-angle-right:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-angle-right:before {
  content: "\E003";
}

.icon-angle-up {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-angle-up:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-angle-up:before {
  content: "\E004";
}

.icon-arrow-down {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-arrow-down:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-arrow-down:before {
  content: "\E005";
}

.icon-arrow-left {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-arrow-left:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-arrow-left:before {
  content: "\E006";
}

.icon-arrow-right {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-arrow-right:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-arrow-right:before {
  content: "\E007";
}

.icon-arrow-simple-down {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-arrow-simple-down:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-arrow-simple-down:before {
  content: "\E008";
}

.icon-arrow-simple-left {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-arrow-simple-left:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-arrow-simple-left:before {
  content: "\E009";
}

.icon-arrow-simple-right {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-arrow-simple-right:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-arrow-simple-right:before {
  content: "\E00A";
}

.icon-arrow-sinple-up {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-arrow-sinple-up:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-arrow-sinple-up:before {
  content: "\E00B";
}

.icon-arrow-up {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-arrow-up:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-arrow-up:before {
  content: "\E00C";
}

.icon-bubble {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-bubble:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-bubble:before {
  content: "\E00D";
}

.icon-check {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-check:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-check:before {
  content: "\E00E";
}

.icon-circle-plus {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-circle-plus:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-circle-plus:before {
  content: "\E00F";
}

.icon-cross {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-cross:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-cross:before {
  content: "\E010";
}

.icon-envelop {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-envelop:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-envelop:before {
  content: "\E011";
}

.icon-facebook {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-facebook:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-facebook:before {
  content: "\E012";
}

.icon-formular {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-formular:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-formular:before {
  content: "\E013";
}

.icon-link {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-link:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-link:before {
  content: "\E014";
}

.icon-location-pin {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-location-pin:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-location-pin:before {
  content: "\E015";
}

.icon-pencil-modify {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-pencil-modify:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-pencil-modify:before {
  content: "\E016";
}

.icon-phone-round {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-phone-round:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-phone-round:before {
  content: "\E017";
}

.icon-phone {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-phone:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-phone:before {
  content: "\E018";
}

.icon-pin-localisation {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-pin-localisation:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-pin-localisation:before {
  content: "\E019";
}

.icon-play {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-play:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-play:before {
  content: "\E01A";
}

.icon-search {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-search:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-search:before {
  content: "\E01B";
}

.icon-time {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-time:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-time:before {
  content: "\E01C";
}

.icon-twitter {
  min-width: 1em;
  min-height: 1em;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.icon-twitter:before {
  font: normal normal normal 1em/1 "fonticons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.icon-twitter:before {
  content: "\E01D";
}

/**
 * @name 	Icons
 * Display an icon
 * @styleguide 		Generic / Icons
 * @example 		html
 * <i class="icon icon-angle-down s-bigger"></i>
 * <i class="icon icon-angle-left s-bigger"></i>
 * <i class="icon icon-angle-right s-bigger"></i>
 * <i class="icon icon-angle-up s-bigger"></i>
 * <i class="icon icon-arrow-down s-bigger"></i>
 * <i class="icon icon-arrow-left s-bigger"></i>
 * <i class="icon icon-arrow-right s-bigger"></i>
 * <i class="icon icon-arrow-simple-down s-bigger"></i>
 * <i class="icon icon-arrow-simple-left s-bigger"></i>
 * <i class="icon icon-arrow-simple-right s-bigger"></i>
 * <i class="icon icon-arrow-sinple-up s-bigger"></i>
 * <i class="icon icon-arrow-up s-bigger"></i>
 * <i class="icon icon-bubble s-bigger"></i>
 * <i class="icon icon-check s-bigger"></i>
 * <i class="icon icon-circle-plus s-bigger"></i>
 * <i class="icon icon-cross s-bigger"></i>
 * <i class="icon icon-envelop s-bigger"></i>
 * <i class="icon icon-facebook s-bigger"></i>
 * <i class="icon icon-formular s-bigger"></i>
 * <i class="icon icon-link s-bigger"></i>
 * <i class="icon icon-location-pin s-bigger"></i>
 * <i class="icon icon-pencil-modify s-bigger"></i>
 * <i class="icon icon-phone-round s-bigger"></i>
 * <i class="icon icon-phone s-bigger"></i>
 * <i class="icon icon-pin-localisation s-bigger"></i>
 * <i class="icon icon-play s-bigger"></i>
 * <i class="icon icon-search s-bigger"></i>
 * <i class="icon icon-time s-bigger"></i>
 * <i class="icon icon-twitter s-bigger"></i>

 */
.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-1-5, .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, .o-404__div {
  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: 8px;
  padding-left: 8px;
}

.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: 8px;
  padding-left: 8px;
}

.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: 8px;
  padding-left: 8px;
}

.push-1-5, .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-1-5, .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, .o-404__div {
  display: block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  clear: both !important;
}

@media screen and (min-width: 320px) {
  .container\@mobile:after {
    content: "";
    display: table;
    clear: both;
  }
}

@media screen and (min-width: 320px) {
  .row\@mobile:before, .row-reverse\@mobile:before, .row\@mobile:after, .row-reverse\@mobile:after {
    content: "";
    display: table;
  }
  .row\@mobile:after, .row-reverse\@mobile:after {
    clear: both;
  }
  .row\@mobile, .row-reverse\@mobile {
    zoom: 1;
  }
}

@media screen and (min-width: 320px) {
  .gr-1-5\@mobile, .gr-0\@mobile, .gr-1\@mobile, .gr-2\@mobile, .gr-3\@mobile, .gr-4\@mobile, .gr-5\@mobile, .gr-6\@mobile, .gr-7\@mobile, .gr-8\@mobile, .gr-9\@mobile, .gr-10\@mobile, .gr-11\@mobile, .gr-12\@mobile {
    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: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 320px) {
  .gr-adapt\@mobile {
    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: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 320px) {
  .gr-grow\@mobile {
    display: table-cell;
    width: 99999px;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 320px) {
  .push-1-5\@mobile, .push-0\@mobile, .push-1\@mobile, .push-2\@mobile, .push-3\@mobile, .push-4\@mobile, .push-5\@mobile, .push-6\@mobile, .push-7\@mobile, .push-8\@mobile, .push-9\@mobile, .push-10\@mobile, .push-11\@mobile, .push-12\@mobile {
    position: relative;
  }
}

@media screen and (min-width: 320px) {
  .pull-1-5\@mobile, .pull-0\@mobile, .pull-1\@mobile, .pull-2\@mobile, .pull-3\@mobile, .pull-4\@mobile, .pull-5\@mobile, .pull-6\@mobile, .pull-7\@mobile, .pull-8\@mobile, .pull-9\@mobile, .pull-10\@mobile, .pull-11\@mobile, .pull-12\@mobile {
    position: relative;
  }
}

@media screen and (min-width: 320px) {
  .nowrap\@mobile {
    white-space: nowrap;
  }
  .nowrap\@mobile > * {
    white-space: normal;
  }
}

@media screen and (min-width: 320px) {
  .wrap\@mobile {
    white-space: normal;
  }
}

@media screen and (min-width: 320px) {
  .gr-centered\@mobile {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both !important;
  }
}

@media screen and (min-width: 768px) {
  .container\@tablet:after {
    content: "";
    display: table;
    clear: both;
  }
}

@media screen and (min-width: 768px) {
  .row\@tablet:before, .row-reverse\@tablet:before, .row\@tablet:after, .row-reverse\@tablet:after {
    content: "";
    display: table;
  }
  .row\@tablet:after, .row-reverse\@tablet:after {
    clear: both;
  }
  .row\@tablet, .row-reverse\@tablet {
    zoom: 1;
  }
}

@media screen and (min-width: 768px) {
  .gr-1-5\@tablet, .gr-0\@tablet, .gr-1\@tablet, .gr-2\@tablet, .gr-3\@tablet, .gr-4\@tablet, .gr-5\@tablet, .gr-6\@tablet, .gr-7\@tablet, .gr-8\@tablet, .gr-9\@tablet, .gr-10\@tablet, .gr-11\@tablet, .gr-12\@tablet {
    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: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 768px) {
  .gr-adapt\@tablet {
    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: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 768px) {
  .gr-grow\@tablet {
    display: table-cell;
    width: 99999px;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 768px) {
  .push-1-5\@tablet, .push-0\@tablet, .push-1\@tablet, .push-2\@tablet, .push-3\@tablet, .push-4\@tablet, .push-5\@tablet, .push-6\@tablet, .push-7\@tablet, .push-8\@tablet, .push-9\@tablet, .push-10\@tablet, .push-11\@tablet, .push-12\@tablet {
    position: relative;
  }
}

@media screen and (min-width: 768px) {
  .pull-1-5\@tablet, .pull-0\@tablet, .pull-1\@tablet, .pull-2\@tablet, .pull-3\@tablet, .pull-4\@tablet, .pull-5\@tablet, .pull-6\@tablet, .pull-7\@tablet, .pull-8\@tablet, .pull-9\@tablet, .pull-10\@tablet, .pull-11\@tablet, .pull-12\@tablet {
    position: relative;
  }
}

@media screen and (min-width: 768px) {
  .nowrap\@tablet {
    white-space: nowrap;
  }
  .nowrap\@tablet > * {
    white-space: normal;
  }
}

@media screen and (min-width: 768px) {
  .wrap\@tablet {
    white-space: normal;
  }
}

@media screen and (min-width: 768px) {
  .gr-centered\@tablet {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both !important;
  }
}

@media screen and (min-width: 992px) {
  .container\@desktop:after {
    content: "";
    display: table;
    clear: both;
  }
}

@media screen and (min-width: 992px) {
  .row\@desktop:before, .row-reverse\@desktop:before, .row\@desktop:after, .row-reverse\@desktop:after {
    content: "";
    display: table;
  }
  .row\@desktop:after, .row-reverse\@desktop:after {
    clear: both;
  }
  .row\@desktop, .row-reverse\@desktop {
    zoom: 1;
  }
}

@media screen and (min-width: 992px) {
  .gr-1-5\@desktop, .gr-0\@desktop, .gr-1\@desktop, .gr-2\@desktop, .gr-3\@desktop, .gr-4\@desktop, .gr-5\@desktop, .gr-6\@desktop, .gr-7\@desktop, .gr-8\@desktop, .gr-9\@desktop, .gr-10\@desktop, .gr-11\@desktop, .gr-12\@desktop {
    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: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 992px) {
  .gr-adapt\@desktop {
    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: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 992px) {
  .gr-grow\@desktop {
    display: table-cell;
    width: 99999px;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 992px) {
  .push-1-5\@desktop, .push-0\@desktop, .push-1\@desktop, .push-2\@desktop, .push-3\@desktop, .push-4\@desktop, .push-5\@desktop, .push-6\@desktop, .push-7\@desktop, .push-8\@desktop, .push-9\@desktop, .push-10\@desktop, .push-11\@desktop, .push-12\@desktop {
    position: relative;
  }
}

@media screen and (min-width: 992px) {
  .pull-1-5\@desktop, .pull-0\@desktop, .pull-1\@desktop, .pull-2\@desktop, .pull-3\@desktop, .pull-4\@desktop, .pull-5\@desktop, .pull-6\@desktop, .pull-7\@desktop, .pull-8\@desktop, .pull-9\@desktop, .pull-10\@desktop, .pull-11\@desktop, .pull-12\@desktop {
    position: relative;
  }
}

@media screen and (min-width: 992px) {
  .nowrap\@desktop {
    white-space: nowrap;
  }
  .nowrap\@desktop > * {
    white-space: normal;
  }
}

@media screen and (min-width: 992px) {
  .wrap\@desktop {
    white-space: normal;
  }
}

@media screen and (min-width: 992px) {
  .gr-centered\@desktop {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both !important;
  }
}

@media screen and (min-width: 1200px) {
  .container\@desktop-large:after {
    content: "";
    display: table;
    clear: both;
  }
}

@media screen and (min-width: 1200px) {
  .row\@desktop-large:before, .row-reverse\@desktop-large:before, .row\@desktop-large:after, .row-reverse\@desktop-large:after {
    content: "";
    display: table;
  }
  .row\@desktop-large:after, .row-reverse\@desktop-large:after {
    clear: both;
  }
  .row\@desktop-large, .row-reverse\@desktop-large {
    zoom: 1;
  }
}

@media screen and (min-width: 1200px) {
  .gr-1-5\@desktop-large, .gr-0\@desktop-large, .gr-1\@desktop-large, .gr-2\@desktop-large, .gr-3\@desktop-large, .gr-4\@desktop-large, .gr-5\@desktop-large, .gr-6\@desktop-large, .gr-7\@desktop-large, .gr-8\@desktop-large, .gr-9\@desktop-large, .gr-10\@desktop-large, .gr-11\@desktop-large, .gr-12\@desktop-large {
    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: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 1200px) {
  .gr-adapt\@desktop-large {
    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: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 1200px) {
  .gr-grow\@desktop-large {
    display: table-cell;
    width: 99999px;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 1200px) {
  .push-1-5\@desktop-large, .push-0\@desktop-large, .push-1\@desktop-large, .push-2\@desktop-large, .push-3\@desktop-large, .push-4\@desktop-large, .push-5\@desktop-large, .push-6\@desktop-large, .push-7\@desktop-large, .push-8\@desktop-large, .push-9\@desktop-large, .push-10\@desktop-large, .push-11\@desktop-large, .push-12\@desktop-large {
    position: relative;
  }
}

@media screen and (min-width: 1200px) {
  .pull-1-5\@desktop-large, .pull-0\@desktop-large, .pull-1\@desktop-large, .pull-2\@desktop-large, .pull-3\@desktop-large, .pull-4\@desktop-large, .pull-5\@desktop-large, .pull-6\@desktop-large, .pull-7\@desktop-large, .pull-8\@desktop-large, .pull-9\@desktop-large, .pull-10\@desktop-large, .pull-11\@desktop-large, .pull-12\@desktop-large {
    position: relative;
  }
}

@media screen and (min-width: 1200px) {
  .nowrap\@desktop-large {
    white-space: nowrap;
  }
  .nowrap\@desktop-large > * {
    white-space: normal;
  }
}

@media screen and (min-width: 1200px) {
  .wrap\@desktop-large {
    white-space: normal;
  }
}

@media screen and (min-width: 1200px) {
  .gr-centered\@desktop-large {
    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" : "16px", "gutter-height" : "16px", "gutter-top" : "8px", "gutter-right" : "8px", "gutter-bottom" : "8px", "gutter-left" : "8px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "mobile":{ "name" : "mobile", "min-width" : "320px", "max-width" : null, "query" : "screen and (min-width: 320px)", "classes" : true, "context" : "12", "column-width" : null, "gutter-width" : "16px", "gutter-height" : "16px", "gutter-top" : "8px", "gutter-right" : "8px", "gutter-bottom" : "8px", "gutter-left" : "8px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "tablet":{ "name" : "tablet", "min-width" : "768px", "max-width" : null, "query" : "screen and (min-width: 768px)", "classes" : true, "context" : "12", "column-width" : null, "gutter-width" : "16px", "gutter-height" : "16px", "gutter-top" : "8px", "gutter-right" : "8px", "gutter-bottom" : "8px", "gutter-left" : "8px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "desktop":{ "name" : "desktop", "min-width" : "992px", "max-width" : null, "query" : "screen and (min-width: 992px)", "classes" : true, "context" : "12", "column-width" : null, "gutter-width" : "16px", "gutter-height" : "16px", "gutter-top" : "8px", "gutter-right" : "8px", "gutter-bottom" : "8px", "gutter-left" : "8px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "desktop-large":{ "name" : "desktop-large", "min-width" : "1200px", "max-width" : null, "query" : "screen and (min-width: 1200px)", "classes" : true, "context" : "12", "column-width" : null, "gutter-width" : "16px", "gutter-height" : "16px", "gutter-top" : "8px", "gutter-right" : "8px", "gutter-bottom" : "8px", "gutter-left" : "8px", "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: 16px;
	 * }
	 * [class*="gr-"].gridle-styleguide {
	 * 	background:#eee;
	 * 	padding:16px;
	 * }
	 * </style>
	 * <div class="gridle-styleguide .container">
	 *   <div class="gridle-styleguide row row-debug"> <div class="gridle-styleguide gr-1-5"> .gr-1-5 </div> </div>   <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-1-5 {
  width: 20%;
}

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

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

.prefix-1-5 {
  margin-left: 20%;
}

.suffix-1-5 {
  margin-right: 20%;
}

.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%;
}

body {
  direction: ltr;
}

@media screen and (min-width: 320px) {
  .gr-1-5\@mobile {
    width: 20%;
  }
  .push-1-5\@mobile {
    left: 20%;
    right: auto;
  }
  .pull-1-5\@mobile {
    right: 20%;
    left: auto;
  }
  .prefix-1-5\@mobile {
    margin-left: 20%;
  }
  .suffix-1-5\@mobile {
    margin-right: 20%;
  }
  .gr-0\@mobile {
    width: 0%;
  }
  .push-0\@mobile {
    left: 0%;
    right: auto;
  }
  .pull-0\@mobile {
    right: 0%;
    left: auto;
  }
  .prefix-0\@mobile {
    margin-left: 0%;
  }
  .suffix-0\@mobile {
    margin-right: 0%;
  }
  .gr-1\@mobile {
    width: 8.33333%;
  }
  .push-1\@mobile {
    left: 8.33333%;
    right: auto;
  }
  .pull-1\@mobile {
    right: 8.33333%;
    left: auto;
  }
  .prefix-1\@mobile {
    margin-left: 8.33333%;
  }
  .suffix-1\@mobile {
    margin-right: 8.33333%;
  }
  .gr-2\@mobile {
    width: 16.66667%;
  }
  .push-2\@mobile {
    left: 16.66667%;
    right: auto;
  }
  .pull-2\@mobile {
    right: 16.66667%;
    left: auto;
  }
  .prefix-2\@mobile {
    margin-left: 16.66667%;
  }
  .suffix-2\@mobile {
    margin-right: 16.66667%;
  }
  .gr-3\@mobile {
    width: 25%;
  }
  .push-3\@mobile {
    left: 25%;
    right: auto;
  }
  .pull-3\@mobile {
    right: 25%;
    left: auto;
  }
  .prefix-3\@mobile {
    margin-left: 25%;
  }
  .suffix-3\@mobile {
    margin-right: 25%;
  }
  .gr-4\@mobile {
    width: 33.33333%;
  }
  .push-4\@mobile {
    left: 33.33333%;
    right: auto;
  }
  .pull-4\@mobile {
    right: 33.33333%;
    left: auto;
  }
  .prefix-4\@mobile {
    margin-left: 33.33333%;
  }
  .suffix-4\@mobile {
    margin-right: 33.33333%;
  }
  .gr-5\@mobile {
    width: 41.66667%;
  }
  .push-5\@mobile {
    left: 41.66667%;
    right: auto;
  }
  .pull-5\@mobile {
    right: 41.66667%;
    left: auto;
  }
  .prefix-5\@mobile {
    margin-left: 41.66667%;
  }
  .suffix-5\@mobile {
    margin-right: 41.66667%;
  }
  .gr-6\@mobile {
    width: 50%;
  }
  .push-6\@mobile {
    left: 50%;
    right: auto;
  }
  .pull-6\@mobile {
    right: 50%;
    left: auto;
  }
  .prefix-6\@mobile {
    margin-left: 50%;
  }
  .suffix-6\@mobile {
    margin-right: 50%;
  }
  .gr-7\@mobile {
    width: 58.33333%;
  }
  .push-7\@mobile {
    left: 58.33333%;
    right: auto;
  }
  .pull-7\@mobile {
    right: 58.33333%;
    left: auto;
  }
  .prefix-7\@mobile {
    margin-left: 58.33333%;
  }
  .suffix-7\@mobile {
    margin-right: 58.33333%;
  }
  .gr-8\@mobile {
    width: 66.66667%;
  }
  .push-8\@mobile {
    left: 66.66667%;
    right: auto;
  }
  .pull-8\@mobile {
    right: 66.66667%;
    left: auto;
  }
  .prefix-8\@mobile {
    margin-left: 66.66667%;
  }
  .suffix-8\@mobile {
    margin-right: 66.66667%;
  }
  .gr-9\@mobile {
    width: 75%;
  }
  .push-9\@mobile {
    left: 75%;
    right: auto;
  }
  .pull-9\@mobile {
    right: 75%;
    left: auto;
  }
  .prefix-9\@mobile {
    margin-left: 75%;
  }
  .suffix-9\@mobile {
    margin-right: 75%;
  }
  .gr-10\@mobile {
    width: 83.33333%;
  }
  .push-10\@mobile {
    left: 83.33333%;
    right: auto;
  }
  .pull-10\@mobile {
    right: 83.33333%;
    left: auto;
  }
  .prefix-10\@mobile {
    margin-left: 83.33333%;
  }
  .suffix-10\@mobile {
    margin-right: 83.33333%;
  }
  .gr-11\@mobile {
    width: 91.66667%;
  }
  .push-11\@mobile {
    left: 91.66667%;
    right: auto;
  }
  .pull-11\@mobile {
    right: 91.66667%;
    left: auto;
  }
  .prefix-11\@mobile {
    margin-left: 91.66667%;
  }
  .suffix-11\@mobile {
    margin-right: 91.66667%;
  }
  .gr-12\@mobile {
    width: 100%;
  }
  .push-12\@mobile {
    left: 100%;
    right: auto;
  }
  .pull-12\@mobile {
    right: 100%;
    left: auto;
  }
  .prefix-12\@mobile {
    margin-left: 100%;
  }
  .suffix-12\@mobile {
    margin-right: 100%;
  }
  body {
    direction: ltr;
  }
}

@media screen and (min-width: 768px) {
  .gr-1-5\@tablet {
    width: 20%;
  }
  .push-1-5\@tablet {
    left: 20%;
    right: auto;
  }
  .pull-1-5\@tablet {
    right: 20%;
    left: auto;
  }
  .prefix-1-5\@tablet {
    margin-left: 20%;
  }
  .suffix-1-5\@tablet {
    margin-right: 20%;
  }
  .gr-0\@tablet {
    width: 0%;
  }
  .push-0\@tablet {
    left: 0%;
    right: auto;
  }
  .pull-0\@tablet {
    right: 0%;
    left: auto;
  }
  .prefix-0\@tablet {
    margin-left: 0%;
  }
  .suffix-0\@tablet {
    margin-right: 0%;
  }
  .gr-1\@tablet {
    width: 8.33333%;
  }
  .push-1\@tablet {
    left: 8.33333%;
    right: auto;
  }
  .pull-1\@tablet {
    right: 8.33333%;
    left: auto;
  }
  .prefix-1\@tablet {
    margin-left: 8.33333%;
  }
  .suffix-1\@tablet {
    margin-right: 8.33333%;
  }
  .gr-2\@tablet {
    width: 16.66667%;
  }
  .push-2\@tablet {
    left: 16.66667%;
    right: auto;
  }
  .pull-2\@tablet {
    right: 16.66667%;
    left: auto;
  }
  .prefix-2\@tablet {
    margin-left: 16.66667%;
  }
  .suffix-2\@tablet {
    margin-right: 16.66667%;
  }
  .gr-3\@tablet {
    width: 25%;
  }
  .push-3\@tablet {
    left: 25%;
    right: auto;
  }
  .pull-3\@tablet {
    right: 25%;
    left: auto;
  }
  .prefix-3\@tablet {
    margin-left: 25%;
  }
  .suffix-3\@tablet {
    margin-right: 25%;
  }
  .gr-4\@tablet {
    width: 33.33333%;
  }
  .push-4\@tablet {
    left: 33.33333%;
    right: auto;
  }
  .pull-4\@tablet {
    right: 33.33333%;
    left: auto;
  }
  .prefix-4\@tablet {
    margin-left: 33.33333%;
  }
  .suffix-4\@tablet {
    margin-right: 33.33333%;
  }
  .gr-5\@tablet {
    width: 41.66667%;
  }
  .push-5\@tablet {
    left: 41.66667%;
    right: auto;
  }
  .pull-5\@tablet {
    right: 41.66667%;
    left: auto;
  }
  .prefix-5\@tablet {
    margin-left: 41.66667%;
  }
  .suffix-5\@tablet {
    margin-right: 41.66667%;
  }
  .gr-6\@tablet {
    width: 50%;
  }
  .push-6\@tablet {
    left: 50%;
    right: auto;
  }
  .pull-6\@tablet {
    right: 50%;
    left: auto;
  }
  .prefix-6\@tablet {
    margin-left: 50%;
  }
  .suffix-6\@tablet {
    margin-right: 50%;
  }
  .gr-7\@tablet {
    width: 58.33333%;
  }
  .push-7\@tablet {
    left: 58.33333%;
    right: auto;
  }
  .pull-7\@tablet {
    right: 58.33333%;
    left: auto;
  }
  .prefix-7\@tablet {
    margin-left: 58.33333%;
  }
  .suffix-7\@tablet {
    margin-right: 58.33333%;
  }
  .gr-8\@tablet {
    width: 66.66667%;
  }
  .push-8\@tablet {
    left: 66.66667%;
    right: auto;
  }
  .pull-8\@tablet {
    right: 66.66667%;
    left: auto;
  }
  .prefix-8\@tablet {
    margin-left: 66.66667%;
  }
  .suffix-8\@tablet {
    margin-right: 66.66667%;
  }
  .gr-9\@tablet {
    width: 75%;
  }
  .push-9\@tablet {
    left: 75%;
    right: auto;
  }
  .pull-9\@tablet {
    right: 75%;
    left: auto;
  }
  .prefix-9\@tablet {
    margin-left: 75%;
  }
  .suffix-9\@tablet {
    margin-right: 75%;
  }
  .gr-10\@tablet {
    width: 83.33333%;
  }
  .push-10\@tablet {
    left: 83.33333%;
    right: auto;
  }
  .pull-10\@tablet {
    right: 83.33333%;
    left: auto;
  }
  .prefix-10\@tablet {
    margin-left: 83.33333%;
  }
  .suffix-10\@tablet {
    margin-right: 83.33333%;
  }
  .gr-11\@tablet {
    width: 91.66667%;
  }
  .push-11\@tablet {
    left: 91.66667%;
    right: auto;
  }
  .pull-11\@tablet {
    right: 91.66667%;
    left: auto;
  }
  .prefix-11\@tablet {
    margin-left: 91.66667%;
  }
  .suffix-11\@tablet {
    margin-right: 91.66667%;
  }
  .gr-12\@tablet {
    width: 100%;
  }
  .push-12\@tablet {
    left: 100%;
    right: auto;
  }
  .pull-12\@tablet {
    right: 100%;
    left: auto;
  }
  .prefix-12\@tablet {
    margin-left: 100%;
  }
  .suffix-12\@tablet {
    margin-right: 100%;
  }
  body {
    direction: ltr;
  }
}

@media screen and (min-width: 992px) {
  .gr-1-5\@desktop {
    width: 20%;
  }
  .push-1-5\@desktop {
    left: 20%;
    right: auto;
  }
  .pull-1-5\@desktop {
    right: 20%;
    left: auto;
  }
  .prefix-1-5\@desktop {
    margin-left: 20%;
  }
  .suffix-1-5\@desktop {
    margin-right: 20%;
  }
  .gr-0\@desktop {
    width: 0%;
  }
  .push-0\@desktop {
    left: 0%;
    right: auto;
  }
  .pull-0\@desktop {
    right: 0%;
    left: auto;
  }
  .prefix-0\@desktop {
    margin-left: 0%;
  }
  .suffix-0\@desktop {
    margin-right: 0%;
  }
  .gr-1\@desktop {
    width: 8.33333%;
  }
  .push-1\@desktop {
    left: 8.33333%;
    right: auto;
  }
  .pull-1\@desktop {
    right: 8.33333%;
    left: auto;
  }
  .prefix-1\@desktop {
    margin-left: 8.33333%;
  }
  .suffix-1\@desktop {
    margin-right: 8.33333%;
  }
  .gr-2\@desktop {
    width: 16.66667%;
  }
  .push-2\@desktop {
    left: 16.66667%;
    right: auto;
  }
  .pull-2\@desktop {
    right: 16.66667%;
    left: auto;
  }
  .prefix-2\@desktop {
    margin-left: 16.66667%;
  }
  .suffix-2\@desktop {
    margin-right: 16.66667%;
  }
  .gr-3\@desktop {
    width: 25%;
  }
  .push-3\@desktop {
    left: 25%;
    right: auto;
  }
  .pull-3\@desktop {
    right: 25%;
    left: auto;
  }
  .prefix-3\@desktop {
    margin-left: 25%;
  }
  .suffix-3\@desktop {
    margin-right: 25%;
  }
  .gr-4\@desktop {
    width: 33.33333%;
  }
  .push-4\@desktop {
    left: 33.33333%;
    right: auto;
  }
  .pull-4\@desktop {
    right: 33.33333%;
    left: auto;
  }
  .prefix-4\@desktop {
    margin-left: 33.33333%;
  }
  .suffix-4\@desktop {
    margin-right: 33.33333%;
  }
  .gr-5\@desktop {
    width: 41.66667%;
  }
  .push-5\@desktop {
    left: 41.66667%;
    right: auto;
  }
  .pull-5\@desktop {
    right: 41.66667%;
    left: auto;
  }
  .prefix-5\@desktop {
    margin-left: 41.66667%;
  }
  .suffix-5\@desktop {
    margin-right: 41.66667%;
  }
  .gr-6\@desktop {
    width: 50%;
  }
  .push-6\@desktop {
    left: 50%;
    right: auto;
  }
  .pull-6\@desktop {
    right: 50%;
    left: auto;
  }
  .prefix-6\@desktop {
    margin-left: 50%;
  }
  .suffix-6\@desktop {
    margin-right: 50%;
  }
  .gr-7\@desktop {
    width: 58.33333%;
  }
  .push-7\@desktop {
    left: 58.33333%;
    right: auto;
  }
  .pull-7\@desktop {
    right: 58.33333%;
    left: auto;
  }
  .prefix-7\@desktop {
    margin-left: 58.33333%;
  }
  .suffix-7\@desktop {
    margin-right: 58.33333%;
  }
  .gr-8\@desktop {
    width: 66.66667%;
  }
  .push-8\@desktop {
    left: 66.66667%;
    right: auto;
  }
  .pull-8\@desktop {
    right: 66.66667%;
    left: auto;
  }
  .prefix-8\@desktop {
    margin-left: 66.66667%;
  }
  .suffix-8\@desktop {
    margin-right: 66.66667%;
  }
  .gr-9\@desktop {
    width: 75%;
  }
  .push-9\@desktop {
    left: 75%;
    right: auto;
  }
  .pull-9\@desktop {
    right: 75%;
    left: auto;
  }
  .prefix-9\@desktop {
    margin-left: 75%;
  }
  .suffix-9\@desktop {
    margin-right: 75%;
  }
  .gr-10\@desktop {
    width: 83.33333%;
  }
  .push-10\@desktop {
    left: 83.33333%;
    right: auto;
  }
  .pull-10\@desktop {
    right: 83.33333%;
    left: auto;
  }
  .prefix-10\@desktop {
    margin-left: 83.33333%;
  }
  .suffix-10\@desktop {
    margin-right: 83.33333%;
  }
  .gr-11\@desktop {
    width: 91.66667%;
  }
  .push-11\@desktop {
    left: 91.66667%;
    right: auto;
  }
  .pull-11\@desktop {
    right: 91.66667%;
    left: auto;
  }
  .prefix-11\@desktop {
    margin-left: 91.66667%;
  }
  .suffix-11\@desktop {
    margin-right: 91.66667%;
  }
  .gr-12\@desktop {
    width: 100%;
  }
  .push-12\@desktop {
    left: 100%;
    right: auto;
  }
  .pull-12\@desktop {
    right: 100%;
    left: auto;
  }
  .prefix-12\@desktop {
    margin-left: 100%;
  }
  .suffix-12\@desktop {
    margin-right: 100%;
  }
  body {
    direction: ltr;
  }
}

@media screen and (min-width: 1200px) {
  .gr-1-5\@desktop-large {
    width: 20%;
  }
  .push-1-5\@desktop-large {
    left: 20%;
    right: auto;
  }
  .pull-1-5\@desktop-large {
    right: 20%;
    left: auto;
  }
  .prefix-1-5\@desktop-large {
    margin-left: 20%;
  }
  .suffix-1-5\@desktop-large {
    margin-right: 20%;
  }
  .gr-0\@desktop-large {
    width: 0%;
  }
  .push-0\@desktop-large {
    left: 0%;
    right: auto;
  }
  .pull-0\@desktop-large {
    right: 0%;
    left: auto;
  }
  .prefix-0\@desktop-large {
    margin-left: 0%;
  }
  .suffix-0\@desktop-large {
    margin-right: 0%;
  }
  .gr-1\@desktop-large {
    width: 8.33333%;
  }
  .push-1\@desktop-large {
    left: 8.33333%;
    right: auto;
  }
  .pull-1\@desktop-large {
    right: 8.33333%;
    left: auto;
  }
  .prefix-1\@desktop-large {
    margin-left: 8.33333%;
  }
  .suffix-1\@desktop-large {
    margin-right: 8.33333%;
  }
  .gr-2\@desktop-large {
    width: 16.66667%;
  }
  .push-2\@desktop-large {
    left: 16.66667%;
    right: auto;
  }
  .pull-2\@desktop-large {
    right: 16.66667%;
    left: auto;
  }
  .prefix-2\@desktop-large {
    margin-left: 16.66667%;
  }
  .suffix-2\@desktop-large {
    margin-right: 16.66667%;
  }
  .gr-3\@desktop-large {
    width: 25%;
  }
  .push-3\@desktop-large {
    left: 25%;
    right: auto;
  }
  .pull-3\@desktop-large {
    right: 25%;
    left: auto;
  }
  .prefix-3\@desktop-large {
    margin-left: 25%;
  }
  .suffix-3\@desktop-large {
    margin-right: 25%;
  }
  .gr-4\@desktop-large {
    width: 33.33333%;
  }
  .push-4\@desktop-large {
    left: 33.33333%;
    right: auto;
  }
  .pull-4\@desktop-large {
    right: 33.33333%;
    left: auto;
  }
  .prefix-4\@desktop-large {
    margin-left: 33.33333%;
  }
  .suffix-4\@desktop-large {
    margin-right: 33.33333%;
  }
  .gr-5\@desktop-large {
    width: 41.66667%;
  }
  .push-5\@desktop-large {
    left: 41.66667%;
    right: auto;
  }
  .pull-5\@desktop-large {
    right: 41.66667%;
    left: auto;
  }
  .prefix-5\@desktop-large {
    margin-left: 41.66667%;
  }
  .suffix-5\@desktop-large {
    margin-right: 41.66667%;
  }
  .gr-6\@desktop-large {
    width: 50%;
  }
  .push-6\@desktop-large {
    left: 50%;
    right: auto;
  }
  .pull-6\@desktop-large {
    right: 50%;
    left: auto;
  }
  .prefix-6\@desktop-large {
    margin-left: 50%;
  }
  .suffix-6\@desktop-large {
    margin-right: 50%;
  }
  .gr-7\@desktop-large {
    width: 58.33333%;
  }
  .push-7\@desktop-large {
    left: 58.33333%;
    right: auto;
  }
  .pull-7\@desktop-large {
    right: 58.33333%;
    left: auto;
  }
  .prefix-7\@desktop-large {
    margin-left: 58.33333%;
  }
  .suffix-7\@desktop-large {
    margin-right: 58.33333%;
  }
  .gr-8\@desktop-large {
    width: 66.66667%;
  }
  .push-8\@desktop-large {
    left: 66.66667%;
    right: auto;
  }
  .pull-8\@desktop-large {
    right: 66.66667%;
    left: auto;
  }
  .prefix-8\@desktop-large {
    margin-left: 66.66667%;
  }
  .suffix-8\@desktop-large {
    margin-right: 66.66667%;
  }
  .gr-9\@desktop-large {
    width: 75%;
  }
  .push-9\@desktop-large {
    left: 75%;
    right: auto;
  }
  .pull-9\@desktop-large {
    right: 75%;
    left: auto;
  }
  .prefix-9\@desktop-large {
    margin-left: 75%;
  }
  .suffix-9\@desktop-large {
    margin-right: 75%;
  }
  .gr-10\@desktop-large {
    width: 83.33333%;
  }
  .push-10\@desktop-large {
    left: 83.33333%;
    right: auto;
  }
  .pull-10\@desktop-large {
    right: 83.33333%;
    left: auto;
  }
  .prefix-10\@desktop-large {
    margin-left: 83.33333%;
  }
  .suffix-10\@desktop-large {
    margin-right: 83.33333%;
  }
  .gr-11\@desktop-large {
    width: 91.66667%;
  }
  .push-11\@desktop-large {
    left: 91.66667%;
    right: auto;
  }
  .pull-11\@desktop-large {
    right: 91.66667%;
    left: auto;
  }
  .prefix-11\@desktop-large {
    margin-left: 91.66667%;
  }
  .suffix-11\@desktop-large {
    margin-right: 91.66667%;
  }
  .gr-12\@desktop-large {
    width: 100%;
  }
  .push-12\@desktop-large {
    left: 100%;
    right: auto;
  }
  .pull-12\@desktop-large {
    right: 100%;
    left: auto;
  }
  .prefix-12\@desktop-large {
    margin-left: 100%;
  }
  .suffix-12\@desktop-large {
    margin-right: 100%;
  }
  body {
    direction: ltr;
  }
}

.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: -8px;
  margin-right: -8px;
}

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

.row-reverse {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: -8px;
  margin-right: -8px;
  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: -8px;
  margin-right: -8px;
}

.col-reverse {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: -8px;
  margin-right: -8px;
  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-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
}

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

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

.gutter-top {
  padding-top: 8px;
}

.gutter-bottom {
  padding-bottom: 8px;
}

.hide {
  display: none !important;
}

.not-visible {
  visibility: hidden;
}

.show {
  display: block !important;
}

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

.visible {
  visibility: visible;
}

.clear-each-2 > [class*="gr-"]:nth-of-type(1n+0) {
  clear: none;
}

.clear-each-2 > [class*="gr-"]:nth-of-type(2n+1) {
  clear: both;
}

.clear-each-3 > [class*="gr-"]:nth-of-type(1n+0) {
  clear: none;
}

.clear-each-3 > [class*="gr-"]:nth-of-type(3n+1) {
  clear: both;
}

.clear-each-4 > [class*="gr-"]:nth-of-type(1n+0) {
  clear: none;
}

.clear-each-4 > [class*="gr-"]:nth-of-type(4n+1) {
  clear: both;
}

.clear-each-5 > [class*="gr-"]:nth-of-type(1n+0) {
  clear: none;
}

.clear-each-5 > [class*="gr-"]:nth-of-type(5n+1) {
  clear: both;
}

.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;
}

@media screen and (min-width: 320px) {
  .float-left\@mobile {
    float: left;
  }
  .float-right\@mobile {
    float: right;
  }
  .clear\@mobile {
    clear: both;
  }
  .clear-left\@mobile {
    clear: left;
  }
  .clear-right\@mobile {
    clear: right;
  }
  .auto-height\@mobile {
    height: inherit;
    min-height: inherit;
    max-height: inherit;
  }
  .row\@mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
  }
  [class*="no-gutter"] > .row\@mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row-reverse\@mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
    transform: rotateY(180deg);
  }
  .row-reverse\@mobile > [class*="gr-"] {
    transform: rotateY(-180deg);
  }
  [class*="no-gutter"] > .row-reverse\@mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row-full\@mobile {
    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\@mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
  }
  .col-reverse\@mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
    transform: rotateX(180deg);
  }
  .col-reverse\@mobile > [class*="gr-"] {
    transform: rotateX(-180deg);
  }
  .gr-table\@mobile {
    display: table-cell;
    float: none;
    vertical-align: top;
  }
  .row-no-gutter\@mobile {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter\@mobile > [class*="gr-"] {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
  .row-no-gutter-top\@mobile {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-top\@mobile > [class*="gr-"] {
    padding-top: 0;
  }
  .row-no-gutter-right\@mobile {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-right\@mobile > [class*="gr-"] {
    padding-right: 0;
  }
  .row-no-gutter-bottom\@mobile {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-bottom\@mobile > [class*="gr-"] {
    padding-bottom: 0;
  }
  .row-no-gutter-left\@mobile {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-left\@mobile > [class*="gr-"] {
    padding-left: 0;
  }
  .row-align-left\@mobile {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: left;
  }
  .row-align-left\@mobile > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-center\@mobile {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: center;
  }
  .row-align-center\@mobile > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-center\@mobile > * {
    text-align: left;
  }
  .row-align-right\@mobile {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: right;
  }
  .row-align-right\@mobile > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-right\@mobile > * {
    text-align: left;
  }
  .row-align-middle\@mobile {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: middle;
  }
  .row-align-middle\@mobile > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: middle;
    font-size: 1rem;
  }
  .row-align-top\@mobile {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: top;
  }
  .row-align-top\@mobile > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-bottom\@mobile {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: bottom;
  }
  .row-align-bottom\@mobile > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: bottom;
    font-size: 1rem;
  }
  .no-gutter\@mobile {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
  .no-gutter-left\@mobile {
    padding-left: 0;
  }
  .no-gutter-right\@mobile {
    padding-right: 0;
  }
  .no-gutter-top\@mobile {
    padding-top: 0;
  }
  .no-gutter-bottom\@mobile {
    padding-bottom: 0;
  }
  .gutter\@mobile {
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
  }
  .gutter-left\@mobile {
    padding-left: 8px;
  }
  .gutter-right\@mobile {
    padding-right: 8px;
  }
  .gutter-top\@mobile {
    padding-top: 8px;
  }
  .gutter-bottom\@mobile {
    padding-bottom: 8px;
  }
  .hide\@mobile {
    display: none !important;
  }
  .not-visible\@mobile {
    visibility: hidden;
  }
  .show\@mobile {
    display: block !important;
  }
  .show-inline\@mobile {
    display: inline-block !important;
  }
  .visible\@mobile {
    visibility: visible;
  }
  .clear-each-2\@mobile > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-2\@mobile > [class*="gr-"]:nth-of-type(2n+1) {
    clear: both;
  }
  .clear-each-3\@mobile > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-3\@mobile > [class*="gr-"]:nth-of-type(3n+1) {
    clear: both;
  }
  .clear-each-4\@mobile > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-4\@mobile > [class*="gr-"]:nth-of-type(4n+1) {
    clear: both;
  }
  .clear-each-5\@mobile > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-5\@mobile > [class*="gr-"]:nth-of-type(5n+1) {
    clear: both;
  }
  .row-debug\@mobile {
    position: relative;
    z-index: 99999;
    overflow: hidden;
  }
  .row-debug\@mobile: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;
  }
}

@media screen and (min-width: 768px) {
  .float-left\@tablet {
    float: left;
  }
  .float-right\@tablet {
    float: right;
  }
  .clear\@tablet {
    clear: both;
  }
  .clear-left\@tablet {
    clear: left;
  }
  .clear-right\@tablet {
    clear: right;
  }
  .auto-height\@tablet {
    height: inherit;
    min-height: inherit;
    max-height: inherit;
  }
  .row\@tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
  }
  [class*="no-gutter"] > .row\@tablet {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row-reverse\@tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
    transform: rotateY(180deg);
  }
  .row-reverse\@tablet > [class*="gr-"] {
    transform: rotateY(-180deg);
  }
  [class*="no-gutter"] > .row-reverse\@tablet {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row-full\@tablet {
    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\@tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
  }
  .col-reverse\@tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
    transform: rotateX(180deg);
  }
  .col-reverse\@tablet > [class*="gr-"] {
    transform: rotateX(-180deg);
  }
  .gr-table\@tablet {
    display: table-cell;
    float: none;
    vertical-align: top;
  }
  .row-no-gutter\@tablet {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter\@tablet > [class*="gr-"] {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
  .row-no-gutter-top\@tablet {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-top\@tablet > [class*="gr-"] {
    padding-top: 0;
  }
  .row-no-gutter-right\@tablet {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-right\@tablet > [class*="gr-"] {
    padding-right: 0;
  }
  .row-no-gutter-bottom\@tablet {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-bottom\@tablet > [class*="gr-"] {
    padding-bottom: 0;
  }
  .row-no-gutter-left\@tablet {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-left\@tablet > [class*="gr-"] {
    padding-left: 0;
  }
  .row-align-left\@tablet {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: left;
  }
  .row-align-left\@tablet > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-center\@tablet {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: center;
  }
  .row-align-center\@tablet > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-center\@tablet > * {
    text-align: left;
  }
  .row-align-right\@tablet {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: right;
  }
  .row-align-right\@tablet > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-right\@tablet > * {
    text-align: left;
  }
  .row-align-middle\@tablet {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: middle;
  }
  .row-align-middle\@tablet > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: middle;
    font-size: 1rem;
  }
  .row-align-top\@tablet {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: top;
  }
  .row-align-top\@tablet > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-bottom\@tablet {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: bottom;
  }
  .row-align-bottom\@tablet > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: bottom;
    font-size: 1rem;
  }
  .no-gutter\@tablet {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
  .no-gutter-left\@tablet {
    padding-left: 0;
  }
  .no-gutter-right\@tablet {
    padding-right: 0;
  }
  .no-gutter-top\@tablet {
    padding-top: 0;
  }
  .no-gutter-bottom\@tablet {
    padding-bottom: 0;
  }
  .gutter\@tablet {
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
  }
  .gutter-left\@tablet {
    padding-left: 8px;
  }
  .gutter-right\@tablet {
    padding-right: 8px;
  }
  .gutter-top\@tablet {
    padding-top: 8px;
  }
  .gutter-bottom\@tablet {
    padding-bottom: 8px;
  }
  .hide\@tablet {
    display: none !important;
  }
  .not-visible\@tablet {
    visibility: hidden;
  }
  .show\@tablet {
    display: block !important;
  }
  .show-inline\@tablet {
    display: inline-block !important;
  }
  .visible\@tablet {
    visibility: visible;
  }
  .clear-each-2\@tablet > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-2\@tablet > [class*="gr-"]:nth-of-type(2n+1) {
    clear: both;
  }
  .clear-each-3\@tablet > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-3\@tablet > [class*="gr-"]:nth-of-type(3n+1) {
    clear: both;
  }
  .clear-each-4\@tablet > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-4\@tablet > [class*="gr-"]:nth-of-type(4n+1) {
    clear: both;
  }
  .clear-each-5\@tablet > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-5\@tablet > [class*="gr-"]:nth-of-type(5n+1) {
    clear: both;
  }
  .row-debug\@tablet {
    position: relative;
    z-index: 99999;
    overflow: hidden;
  }
  .row-debug\@tablet: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;
  }
}

@media screen and (min-width: 992px) {
  .float-left\@desktop {
    float: left;
  }
  .float-right\@desktop {
    float: right;
  }
  .clear\@desktop {
    clear: both;
  }
  .clear-left\@desktop {
    clear: left;
  }
  .clear-right\@desktop {
    clear: right;
  }
  .auto-height\@desktop {
    height: inherit;
    min-height: inherit;
    max-height: inherit;
  }
  .row\@desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
  }
  [class*="no-gutter"] > .row\@desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row-reverse\@desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
    transform: rotateY(180deg);
  }
  .row-reverse\@desktop > [class*="gr-"] {
    transform: rotateY(-180deg);
  }
  [class*="no-gutter"] > .row-reverse\@desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row-full\@desktop {
    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\@desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
  }
  .col-reverse\@desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
    transform: rotateX(180deg);
  }
  .col-reverse\@desktop > [class*="gr-"] {
    transform: rotateX(-180deg);
  }
  .gr-table\@desktop {
    display: table-cell;
    float: none;
    vertical-align: top;
  }
  .row-no-gutter\@desktop {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter\@desktop > [class*="gr-"] {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
  .row-no-gutter-top\@desktop {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-top\@desktop > [class*="gr-"] {
    padding-top: 0;
  }
  .row-no-gutter-right\@desktop {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-right\@desktop > [class*="gr-"] {
    padding-right: 0;
  }
  .row-no-gutter-bottom\@desktop {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-bottom\@desktop > [class*="gr-"] {
    padding-bottom: 0;
  }
  .row-no-gutter-left\@desktop {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-left\@desktop > [class*="gr-"] {
    padding-left: 0;
  }
  .row-align-left\@desktop {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: left;
  }
  .row-align-left\@desktop > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-center\@desktop {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: center;
  }
  .row-align-center\@desktop > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-center\@desktop > * {
    text-align: left;
  }
  .row-align-right\@desktop {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: right;
  }
  .row-align-right\@desktop > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-right\@desktop > * {
    text-align: left;
  }
  .row-align-middle\@desktop {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: middle;
  }
  .row-align-middle\@desktop > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: middle;
    font-size: 1rem;
  }
  .row-align-top\@desktop {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: top;
  }
  .row-align-top\@desktop > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-bottom\@desktop {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: bottom;
  }
  .row-align-bottom\@desktop > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: bottom;
    font-size: 1rem;
  }
  .no-gutter\@desktop {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
  .no-gutter-left\@desktop {
    padding-left: 0;
  }
  .no-gutter-right\@desktop {
    padding-right: 0;
  }
  .no-gutter-top\@desktop {
    padding-top: 0;
  }
  .no-gutter-bottom\@desktop {
    padding-bottom: 0;
  }
  .gutter\@desktop {
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
  }
  .gutter-left\@desktop {
    padding-left: 8px;
  }
  .gutter-right\@desktop {
    padding-right: 8px;
  }
  .gutter-top\@desktop {
    padding-top: 8px;
  }
  .gutter-bottom\@desktop {
    padding-bottom: 8px;
  }
  .hide\@desktop {
    display: none !important;
  }
  .not-visible\@desktop {
    visibility: hidden;
  }
  .show\@desktop {
    display: block !important;
  }
  .show-inline\@desktop {
    display: inline-block !important;
  }
  .visible\@desktop {
    visibility: visible;
  }
  .clear-each-2\@desktop > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-2\@desktop > [class*="gr-"]:nth-of-type(2n+1) {
    clear: both;
  }
  .clear-each-3\@desktop > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-3\@desktop > [class*="gr-"]:nth-of-type(3n+1) {
    clear: both;
  }
  .clear-each-4\@desktop > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-4\@desktop > [class*="gr-"]:nth-of-type(4n+1) {
    clear: both;
  }
  .clear-each-5\@desktop > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-5\@desktop > [class*="gr-"]:nth-of-type(5n+1) {
    clear: both;
  }
  .row-debug\@desktop {
    position: relative;
    z-index: 99999;
    overflow: hidden;
  }
  .row-debug\@desktop: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;
  }
}

@media screen and (min-width: 1200px) {
  .float-left\@desktop-large {
    float: left;
  }
  .float-right\@desktop-large {
    float: right;
  }
  .clear\@desktop-large {
    clear: both;
  }
  .clear-left\@desktop-large {
    clear: left;
  }
  .clear-right\@desktop-large {
    clear: right;
  }
  .auto-height\@desktop-large {
    height: inherit;
    min-height: inherit;
    max-height: inherit;
  }
  .row\@desktop-large {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
  }
  [class*="no-gutter"] > .row\@desktop-large {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row-reverse\@desktop-large {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
    transform: rotateY(180deg);
  }
  .row-reverse\@desktop-large > [class*="gr-"] {
    transform: rotateY(-180deg);
  }
  [class*="no-gutter"] > .row-reverse\@desktop-large {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row-full\@desktop-large {
    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\@desktop-large {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
  }
  .col-reverse\@desktop-large {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -8px;
    margin-right: -8px;
    transform: rotateX(180deg);
  }
  .col-reverse\@desktop-large > [class*="gr-"] {
    transform: rotateX(-180deg);
  }
  .gr-table\@desktop-large {
    display: table-cell;
    float: none;
    vertical-align: top;
  }
  .row-no-gutter\@desktop-large {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter\@desktop-large > [class*="gr-"] {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
  .row-no-gutter-top\@desktop-large {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-top\@desktop-large > [class*="gr-"] {
    padding-top: 0;
  }
  .row-no-gutter-right\@desktop-large {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-right\@desktop-large > [class*="gr-"] {
    padding-right: 0;
  }
  .row-no-gutter-bottom\@desktop-large {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-bottom\@desktop-large > [class*="gr-"] {
    padding-bottom: 0;
  }
  .row-no-gutter-left\@desktop-large {
    margin-left: 0;
    margin-right: 0;
  }
  .row-no-gutter-left\@desktop-large > [class*="gr-"] {
    padding-left: 0;
  }
  .row-align-left\@desktop-large {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: left;
  }
  .row-align-left\@desktop-large > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-center\@desktop-large {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: center;
  }
  .row-align-center\@desktop-large > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-center\@desktop-large > * {
    text-align: left;
  }
  .row-align-right\@desktop-large {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    text-align: right;
  }
  .row-align-right\@desktop-large > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-right\@desktop-large > * {
    text-align: left;
  }
  .row-align-middle\@desktop-large {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: middle;
  }
  .row-align-middle\@desktop-large > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: middle;
    font-size: 1rem;
  }
  .row-align-top\@desktop-large {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: top;
  }
  .row-align-top\@desktop-large > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: top;
    font-size: 1rem;
  }
  .row-align-bottom\@desktop-large {
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
    clear: both;
    vertical-align: bottom;
  }
  .row-align-bottom\@desktop-large > * {
    word-spacing: normal;
    letter-spacing: normal;
    float: none !important;
    vertical-align: bottom;
    font-size: 1rem;
  }
  .no-gutter\@desktop-large {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
  .no-gutter-left\@desktop-large {
    padding-left: 0;
  }
  .no-gutter-right\@desktop-large {
    padding-right: 0;
  }
  .no-gutter-top\@desktop-large {
    padding-top: 0;
  }
  .no-gutter-bottom\@desktop-large {
    padding-bottom: 0;
  }
  .gutter\@desktop-large {
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
  }
  .gutter-left\@desktop-large {
    padding-left: 8px;
  }
  .gutter-right\@desktop-large {
    padding-right: 8px;
  }
  .gutter-top\@desktop-large {
    padding-top: 8px;
  }
  .gutter-bottom\@desktop-large {
    padding-bottom: 8px;
  }
  .hide\@desktop-large {
    display: none !important;
  }
  .not-visible\@desktop-large {
    visibility: hidden;
  }
  .show\@desktop-large {
    display: block !important;
  }
  .show-inline\@desktop-large {
    display: inline-block !important;
  }
  .visible\@desktop-large {
    visibility: visible;
  }
  .clear-each-2\@desktop-large > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-2\@desktop-large > [class*="gr-"]:nth-of-type(2n+1) {
    clear: both;
  }
  .clear-each-3\@desktop-large > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-3\@desktop-large > [class*="gr-"]:nth-of-type(3n+1) {
    clear: both;
  }
  .clear-each-4\@desktop-large > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-4\@desktop-large > [class*="gr-"]:nth-of-type(4n+1) {
    clear: both;
  }
  .clear-each-5\@desktop-large > [class*="gr-"]:nth-of-type(1n+0) {
    clear: none;
  }
  .clear-each-5\@desktop-large > [class*="gr-"]:nth-of-type(5n+1) {
    clear: both;
  }
  .row-debug\@desktop-large {
    position: relative;
    z-index: 99999;
    overflow: hidden;
  }
  .row-debug\@desktop-large: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;
  }
}

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

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

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

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

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

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.33333rem;
}

img[src] {
  opacity: 0.001;
  transition: all .3s ease-in-out 0s !important;
}

img[src][loaded] {
  opacity: 1;
}

@media screen and (min-width: 320px) {
  .t-center\@mobile {
    /**
			 * @name  			```.t-center@mobile```
			 * Align the text to center for the "mobile" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-center@mobile">
			 * 	Hello world
			 * </div>
			 */
    text-align: center;
  }
}

@media screen and (min-width: 768px) {
  .t-center\@tablet {
    /**
			 * @name  			```.t-center@tablet```
			 * Align the text to center for the "tablet" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-center@tablet">
			 * 	Hello world
			 * </div>
			 */
    text-align: center;
  }
}

@media screen and (min-width: 992px) {
  .t-center\@desktop {
    /**
			 * @name  			```.t-center@desktop```
			 * Align the text to center for the "desktop" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-center@desktop">
			 * 	Hello world
			 * </div>
			 */
    text-align: center;
  }
}

@media screen and (min-width: 1200px) {
  .t-center\@desktop-large {
    /**
			 * @name  			```.t-center@desktop-large```
			 * Align the text to center for the "desktop-large" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-center@desktop-large">
			 * 	Hello world
			 * </div>
			 */
    text-align: center;
  }
}

@media screen and (min-width: 320px) {
  .t-right\@mobile {
    /**
			 * @name  			```.t-right@mobile```
			 * Align the text to right for the "mobile" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-right@mobile">
			 * 	Hello world
			 * </div>
			 */
    text-align: right;
  }
}

@media screen and (min-width: 768px) {
  .t-right\@tablet {
    /**
			 * @name  			```.t-right@tablet```
			 * Align the text to right for the "tablet" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-right@tablet">
			 * 	Hello world
			 * </div>
			 */
    text-align: right;
  }
}

@media screen and (min-width: 992px) {
  .t-right\@desktop {
    /**
			 * @name  			```.t-right@desktop```
			 * Align the text to right for the "desktop" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-right@desktop">
			 * 	Hello world
			 * </div>
			 */
    text-align: right;
  }
}

@media screen and (min-width: 1200px) {
  .t-right\@desktop-large {
    /**
			 * @name  			```.t-right@desktop-large```
			 * Align the text to right for the "desktop-large" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-right@desktop-large">
			 * 	Hello world
			 * </div>
			 */
    text-align: right;
  }
}

@media screen and (min-width: 320px) {
  .t-left\@mobile {
    /**
			 * @name  			```.t-left@mobile```
			 * Align the text to left for the "mobile" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-left@mobile">
			 * 	Hello world
			 * </div>
			 */
    text-align: left;
  }
}

@media screen and (min-width: 768px) {
  .t-left\@tablet {
    /**
			 * @name  			```.t-left@tablet```
			 * Align the text to left for the "tablet" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-left@tablet">
			 * 	Hello world
			 * </div>
			 */
    text-align: left;
  }
}

@media screen and (min-width: 992px) {
  .t-left\@desktop {
    /**
			 * @name  			```.t-left@desktop```
			 * Align the text to left for the "desktop" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-left@desktop">
			 * 	Hello world
			 * </div>
			 */
    text-align: left;
  }
}

@media screen and (min-width: 1200px) {
  .t-left\@desktop-large {
    /**
			 * @name  			```.t-left@desktop-large```
			 * Align the text to left for the "desktop-large" state
			 * @styleguide 		Helpers / Text Align
			 * @example 		html
			 * <div class="t-left@desktop-large">
			 * 	Hello world
			 * </div>
			 */
    text-align: left;
  }
}

/**
 * Responsive spaces if gridle is available
 */
@media screen and (min-width: 320px) {
  /**
					 * @name  			```.m-b@mobile```
					 * Apply the margin bottom "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b\@mobile {
    margin-bottom: 1.33333rem;
  }
  /**
					 * @name  			```.m-t@mobile```
					 * Apply the margin top "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t\@mobile {
    margin-top: 1.33333rem;
  }
  /**
					 * @name  			```.m-l@mobile```
					 * Apply the margin left "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l\@mobile {
    margin-left: 1.33333rem;
  }
  /**
					 * @name  			```.m-r@mobile```
					 * Apply the margin right "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r\@mobile {
    margin-right: 1.33333rem;
  }
  /**
					 * @name  			```.m-s@mobile```
					 * Apply the margin side "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s\@mobile {
    margin-left: 1.33333rem;
    margin-right: 1.33333rem;
  }
  /**
					 * @name  			```.m@mobile```
					 * Apply the margin "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m\@mobile {
    margin: 1.33333rem;
  }
  /**
					 * @name  			```.no-m-b@mobile```
					 * Remove the margin bottom "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b\@mobile {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t@mobile```
					 * Remove the margin top "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t\@mobile {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l@mobile```
					 * Remove the margin left "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l\@mobile {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r@mobile```
					 * Remove the margin top "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r\@mobile {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s@mobile```
					 * Remove the margin side "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s\@mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b@mobile```
					 * Apply the padding bottom "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b\@mobile {
    padding-bottom: 1.33333rem;
  }
  /**
					 * @name  			```.p-t@mobile```
					 * Apply the padding top "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t\@mobile {
    padding-top: 1.33333rem;
  }
  /**
					 * @name  			```.p-l@mobile```
					 * Apply the padding left "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l\@mobile {
    padding-left: 1.33333rem;
  }
  /**
					 * @name  			```.p-r@mobile```
					 * Apply the padding right "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r\@mobile {
    padding-right: 1.33333rem;
  }
  /**
					 * @name  			```.p-s@mobile```
					 * Apply the padding side "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s\@mobile {
    padding-left: 1.33333rem;
    padding-right: 1.33333rem;
  }
  /**
					 * @name  			```.m@mobile```
					 * Apply the padding "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m\@mobile {
    padding: 1.33333rem;
  }
  /**
					 * @name  			```.no-p-b@mobile```
					 * Remove the padding bottom "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b\@mobile {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t@mobile```
					 * Remove the padding top "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t\@mobile {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l@mobile```
					 * Remove the padding left "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l\@mobile {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r@mobile```
					 * Remove the padding top "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r\@mobile {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s@mobile```
					 * Remove the padding side "default" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s\@mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 320px) {
  /**
					 * @name  			```.m-b-smaller@mobile```
					 * Apply the margin bottom "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-smaller\@mobile {
    margin-bottom: 0.33333rem;
  }
  /**
					 * @name  			```.m-t-smaller@mobile```
					 * Apply the margin top "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-smaller\@mobile {
    margin-top: 0.33333rem;
  }
  /**
					 * @name  			```.m-l-smaller@mobile```
					 * Apply the margin left "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-smaller@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-smaller\@mobile {
    margin-left: 0.33333rem;
  }
  /**
					 * @name  			```.m-r-smaller@mobile```
					 * Apply the margin right "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-smaller@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-smaller\@mobile {
    margin-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-s-smaller@mobile```
					 * Apply the margin side "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-smaller@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-smaller\@mobile {
    margin-left: 0.33333rem;
    margin-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-smaller@mobile```
					 * Apply the margin "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-smaller@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-smaller\@mobile {
    margin: 0.33333rem;
  }
  /**
					 * @name  			```.no-m-b-smaller@mobile```
					 * Remove the margin bottom "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-smaller\@mobile {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-smaller@mobile```
					 * Remove the margin top "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-smaller\@mobile {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-smaller@mobile```
					 * Remove the margin left "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-smaller\@mobile {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-smaller@mobile```
					 * Remove the margin top "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-smaller\@mobile {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-smaller@mobile```
					 * Remove the margin side "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-smaller\@mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-smaller@mobile```
					 * Apply the padding bottom "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-smaller\@mobile {
    padding-bottom: 0.33333rem;
  }
  /**
					 * @name  			```.p-t-smaller@mobile```
					 * Apply the padding top "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-smaller\@mobile {
    padding-top: 0.33333rem;
  }
  /**
					 * @name  			```.p-l-smaller@mobile```
					 * Apply the padding left "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-smaller@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-smaller\@mobile {
    padding-left: 0.33333rem;
  }
  /**
					 * @name  			```.p-r-smaller@mobile```
					 * Apply the padding right "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-smaller@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-smaller\@mobile {
    padding-right: 0.33333rem;
  }
  /**
					 * @name  			```.p-s-smaller@mobile```
					 * Apply the padding side "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-smaller@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-smaller\@mobile {
    padding-left: 0.33333rem;
    padding-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-smaller@mobile```
					 * Apply the padding "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-smaller@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-smaller\@mobile {
    padding: 0.33333rem;
  }
  /**
					 * @name  			```.no-p-b-smaller@mobile```
					 * Remove the padding bottom "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-smaller\@mobile {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-smaller@mobile```
					 * Remove the padding top "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-smaller\@mobile {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-smaller@mobile```
					 * Remove the padding left "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-smaller\@mobile {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-smaller@mobile```
					 * Remove the padding top "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-smaller\@mobile {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-smaller@mobile```
					 * Remove the padding side "smaller" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-smaller@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-smaller\@mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 320px) {
  /**
					 * @name  			```.m-b-small@mobile```
					 * Apply the margin bottom "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-small\@mobile {
    margin-bottom: 0.66667rem;
  }
  /**
					 * @name  			```.m-t-small@mobile```
					 * Apply the margin top "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-small\@mobile {
    margin-top: 0.66667rem;
  }
  /**
					 * @name  			```.m-l-small@mobile```
					 * Apply the margin left "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-small\@mobile {
    margin-left: 0.66667rem;
  }
  /**
					 * @name  			```.m-r-small@mobile```
					 * Apply the margin right "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-small\@mobile {
    margin-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-s-small@mobile```
					 * Apply the margin side "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-small\@mobile {
    margin-left: 0.66667rem;
    margin-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-small@mobile```
					 * Apply the margin "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-small\@mobile {
    margin: 0.66667rem;
  }
  /**
					 * @name  			```.no-m-b-small@mobile```
					 * Remove the margin bottom "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-small\@mobile {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-small@mobile```
					 * Remove the margin top "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-small\@mobile {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-small@mobile```
					 * Remove the margin left "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-small\@mobile {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-small@mobile```
					 * Remove the margin top "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-small\@mobile {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-small@mobile```
					 * Remove the margin side "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-small\@mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-small@mobile```
					 * Apply the padding bottom "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-small\@mobile {
    padding-bottom: 0.66667rem;
  }
  /**
					 * @name  			```.p-t-small@mobile```
					 * Apply the padding top "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-small\@mobile {
    padding-top: 0.66667rem;
  }
  /**
					 * @name  			```.p-l-small@mobile```
					 * Apply the padding left "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-small\@mobile {
    padding-left: 0.66667rem;
  }
  /**
					 * @name  			```.p-r-small@mobile```
					 * Apply the padding right "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-small\@mobile {
    padding-right: 0.66667rem;
  }
  /**
					 * @name  			```.p-s-small@mobile```
					 * Apply the padding side "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-small\@mobile {
    padding-left: 0.66667rem;
    padding-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-small@mobile```
					 * Apply the padding "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-small\@mobile {
    padding: 0.66667rem;
  }
  /**
					 * @name  			```.no-p-b-small@mobile```
					 * Remove the padding bottom "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-small\@mobile {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-small@mobile```
					 * Remove the padding top "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-small\@mobile {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-small@mobile```
					 * Remove the padding left "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-small\@mobile {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-small@mobile```
					 * Remove the padding top "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-small\@mobile {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-small@mobile```
					 * Remove the padding side "small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-small\@mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 320px) {
  /**
					 * @name  			```.m-b-medium-small@mobile```
					 * Apply the margin bottom "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-medium-small\@mobile {
    margin-bottom: 2.66667rem;
  }
  /**
					 * @name  			```.m-t-medium-small@mobile```
					 * Apply the margin top "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-medium-small\@mobile {
    margin-top: 2.66667rem;
  }
  /**
					 * @name  			```.m-l-medium-small@mobile```
					 * Apply the margin left "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-medium-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-medium-small\@mobile {
    margin-left: 2.66667rem;
  }
  /**
					 * @name  			```.m-r-medium-small@mobile```
					 * Apply the margin right "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-medium-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-medium-small\@mobile {
    margin-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-s-medium-small@mobile```
					 * Apply the margin side "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-medium-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-medium-small\@mobile {
    margin-left: 2.66667rem;
    margin-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-medium-small@mobile```
					 * Apply the margin "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-medium-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium-small\@mobile {
    margin: 2.66667rem;
  }
  /**
					 * @name  			```.no-m-b-medium-small@mobile```
					 * Remove the margin bottom "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-medium-small\@mobile {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-medium-small@mobile```
					 * Remove the margin top "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-medium-small\@mobile {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-medium-small@mobile```
					 * Remove the margin left "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-medium-small\@mobile {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-medium-small@mobile```
					 * Remove the margin top "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-medium-small\@mobile {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-medium-small@mobile```
					 * Remove the margin side "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-medium-small\@mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-medium-small@mobile```
					 * Apply the padding bottom "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-medium-small\@mobile {
    padding-bottom: 2.66667rem;
  }
  /**
					 * @name  			```.p-t-medium-small@mobile```
					 * Apply the padding top "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-medium-small\@mobile {
    padding-top: 2.66667rem;
  }
  /**
					 * @name  			```.p-l-medium-small@mobile```
					 * Apply the padding left "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-medium-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-medium-small\@mobile {
    padding-left: 2.66667rem;
  }
  /**
					 * @name  			```.p-r-medium-small@mobile```
					 * Apply the padding right "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-medium-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-medium-small\@mobile {
    padding-right: 2.66667rem;
  }
  /**
					 * @name  			```.p-s-medium-small@mobile```
					 * Apply the padding side "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-medium-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-medium-small\@mobile {
    padding-left: 2.66667rem;
    padding-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-medium-small@mobile```
					 * Apply the padding "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-medium-small@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium-small\@mobile {
    padding: 2.66667rem;
  }
  /**
					 * @name  			```.no-p-b-medium-small@mobile```
					 * Remove the padding bottom "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-medium-small\@mobile {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-medium-small@mobile```
					 * Remove the padding top "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-medium-small\@mobile {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-medium-small@mobile```
					 * Remove the padding left "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-medium-small\@mobile {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-medium-small@mobile```
					 * Remove the padding top "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-medium-small\@mobile {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-medium-small@mobile```
					 * Remove the padding side "medium-small" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-medium-small@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-medium-small\@mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 320px) {
  /**
					 * @name  			```.m-b-medium@mobile```
					 * Apply the margin bottom "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-medium\@mobile {
    margin-bottom: 5.33333rem;
  }
  /**
					 * @name  			```.m-t-medium@mobile```
					 * Apply the margin top "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-medium\@mobile {
    margin-top: 5.33333rem;
  }
  /**
					 * @name  			```.m-l-medium@mobile```
					 * Apply the margin left "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-medium@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-medium\@mobile {
    margin-left: 5.33333rem;
  }
  /**
					 * @name  			```.m-r-medium@mobile```
					 * Apply the margin right "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-medium@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-medium\@mobile {
    margin-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-s-medium@mobile```
					 * Apply the margin side "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-medium@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-medium\@mobile {
    margin-left: 5.33333rem;
    margin-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-medium@mobile```
					 * Apply the margin "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-medium@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium\@mobile {
    margin: 5.33333rem;
  }
  /**
					 * @name  			```.no-m-b-medium@mobile```
					 * Remove the margin bottom "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-medium\@mobile {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-medium@mobile```
					 * Remove the margin top "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-medium\@mobile {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-medium@mobile```
					 * Remove the margin left "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-medium\@mobile {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-medium@mobile```
					 * Remove the margin top "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-medium\@mobile {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-medium@mobile```
					 * Remove the margin side "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-medium\@mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-medium@mobile```
					 * Apply the padding bottom "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-medium\@mobile {
    padding-bottom: 5.33333rem;
  }
  /**
					 * @name  			```.p-t-medium@mobile```
					 * Apply the padding top "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-medium\@mobile {
    padding-top: 5.33333rem;
  }
  /**
					 * @name  			```.p-l-medium@mobile```
					 * Apply the padding left "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-medium@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-medium\@mobile {
    padding-left: 5.33333rem;
  }
  /**
					 * @name  			```.p-r-medium@mobile```
					 * Apply the padding right "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-medium@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-medium\@mobile {
    padding-right: 5.33333rem;
  }
  /**
					 * @name  			```.p-s-medium@mobile```
					 * Apply the padding side "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-medium@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-medium\@mobile {
    padding-left: 5.33333rem;
    padding-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-medium@mobile```
					 * Apply the padding "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-medium@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium\@mobile {
    padding: 5.33333rem;
  }
  /**
					 * @name  			```.no-p-b-medium@mobile```
					 * Remove the padding bottom "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-medium\@mobile {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-medium@mobile```
					 * Remove the padding top "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-medium\@mobile {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-medium@mobile```
					 * Remove the padding left "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-medium\@mobile {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-medium@mobile```
					 * Remove the padding top "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-medium\@mobile {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-medium@mobile```
					 * Remove the padding side "medium" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-medium@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-medium\@mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 320px) {
  /**
					 * @name  			```.m-b-big@mobile```
					 * Apply the margin bottom "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-big\@mobile {
    margin-bottom: 20rem;
  }
  /**
					 * @name  			```.m-t-big@mobile```
					 * Apply the margin top "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-big\@mobile {
    margin-top: 20rem;
  }
  /**
					 * @name  			```.m-l-big@mobile```
					 * Apply the margin left "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-big@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-big\@mobile {
    margin-left: 20rem;
  }
  /**
					 * @name  			```.m-r-big@mobile```
					 * Apply the margin right "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-big@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-big\@mobile {
    margin-right: 20rem;
  }
  /**
					 * @name  			```.m-s-big@mobile```
					 * Apply the margin side "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-big@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-big\@mobile {
    margin-left: 20rem;
    margin-right: 20rem;
  }
  /**
					 * @name  			```.m-big@mobile```
					 * Apply the margin "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-big@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-big\@mobile {
    margin: 20rem;
  }
  /**
					 * @name  			```.no-m-b-big@mobile```
					 * Remove the margin bottom "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-big\@mobile {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-big@mobile```
					 * Remove the margin top "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-big\@mobile {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-big@mobile```
					 * Remove the margin left "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-big\@mobile {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-big@mobile```
					 * Remove the margin top "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-big\@mobile {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-big@mobile```
					 * Remove the margin side "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-big\@mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-big@mobile```
					 * Apply the padding bottom "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-big\@mobile {
    padding-bottom: 20rem;
  }
  /**
					 * @name  			```.p-t-big@mobile```
					 * Apply the padding top "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-big\@mobile {
    padding-top: 20rem;
  }
  /**
					 * @name  			```.p-l-big@mobile```
					 * Apply the padding left "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-big@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-big\@mobile {
    padding-left: 20rem;
  }
  /**
					 * @name  			```.p-r-big@mobile```
					 * Apply the padding right "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-big@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-big\@mobile {
    padding-right: 20rem;
  }
  /**
					 * @name  			```.p-s-big@mobile```
					 * Apply the padding side "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-big@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-big\@mobile {
    padding-left: 20rem;
    padding-right: 20rem;
  }
  /**
					 * @name  			```.m-big@mobile```
					 * Apply the padding "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-big@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-big\@mobile {
    padding: 20rem;
  }
  /**
					 * @name  			```.no-p-b-big@mobile```
					 * Remove the padding bottom "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-big\@mobile {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-big@mobile```
					 * Remove the padding top "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-big\@mobile {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-big@mobile```
					 * Remove the padding left "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-big\@mobile {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-big@mobile```
					 * Remove the padding top "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-big\@mobile {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-big@mobile```
					 * Remove the padding side "big" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-big@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-big\@mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 320px) {
  /**
					 * @name  			```.m-b-bigger@mobile```
					 * Apply the margin bottom "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-bigger\@mobile {
    margin-bottom: 53.33333rem;
  }
  /**
					 * @name  			```.m-t-bigger@mobile```
					 * Apply the margin top "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-bigger\@mobile {
    margin-top: 53.33333rem;
  }
  /**
					 * @name  			```.m-l-bigger@mobile```
					 * Apply the margin left "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-bigger@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-bigger\@mobile {
    margin-left: 53.33333rem;
  }
  /**
					 * @name  			```.m-r-bigger@mobile```
					 * Apply the margin right "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-bigger@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-bigger\@mobile {
    margin-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-s-bigger@mobile```
					 * Apply the margin side "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-bigger@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-bigger\@mobile {
    margin-left: 53.33333rem;
    margin-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-bigger@mobile```
					 * Apply the margin "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-bigger@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-bigger\@mobile {
    margin: 53.33333rem;
  }
  /**
					 * @name  			```.no-m-b-bigger@mobile```
					 * Remove the margin bottom "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-bigger\@mobile {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-bigger@mobile```
					 * Remove the margin top "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-bigger\@mobile {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-bigger@mobile```
					 * Remove the margin left "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-bigger\@mobile {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-bigger@mobile```
					 * Remove the margin top "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-bigger\@mobile {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-bigger@mobile```
					 * Remove the margin side "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-bigger\@mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-bigger@mobile```
					 * Apply the padding bottom "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-bigger\@mobile {
    padding-bottom: 53.33333rem;
  }
  /**
					 * @name  			```.p-t-bigger@mobile```
					 * Apply the padding top "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-bigger\@mobile {
    padding-top: 53.33333rem;
  }
  /**
					 * @name  			```.p-l-bigger@mobile```
					 * Apply the padding left "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-bigger@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-bigger\@mobile {
    padding-left: 53.33333rem;
  }
  /**
					 * @name  			```.p-r-bigger@mobile```
					 * Apply the padding right "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-bigger@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-bigger\@mobile {
    padding-right: 53.33333rem;
  }
  /**
					 * @name  			```.p-s-bigger@mobile```
					 * Apply the padding side "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-bigger@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-bigger\@mobile {
    padding-left: 53.33333rem;
    padding-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-bigger@mobile```
					 * Apply the padding "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-bigger@mobile" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-bigger\@mobile {
    padding: 53.33333rem;
  }
  /**
					 * @name  			```.no-p-b-bigger@mobile```
					 * Remove the padding bottom "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-bigger\@mobile {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-bigger@mobile```
					 * Remove the padding top "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-bigger\@mobile {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-bigger@mobile```
					 * Remove the padding left "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-bigger\@mobile {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-bigger@mobile```
					 * Remove the padding top "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-bigger\@mobile {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-bigger@mobile```
					 * Remove the padding side "bigger" on the "mobile" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-bigger@mobile" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-bigger\@mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  /**
					 * @name  			```.m-b@tablet```
					 * Apply the margin bottom "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b\@tablet {
    margin-bottom: 1.33333rem;
  }
  /**
					 * @name  			```.m-t@tablet```
					 * Apply the margin top "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t\@tablet {
    margin-top: 1.33333rem;
  }
  /**
					 * @name  			```.m-l@tablet```
					 * Apply the margin left "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l\@tablet {
    margin-left: 1.33333rem;
  }
  /**
					 * @name  			```.m-r@tablet```
					 * Apply the margin right "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r\@tablet {
    margin-right: 1.33333rem;
  }
  /**
					 * @name  			```.m-s@tablet```
					 * Apply the margin side "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s\@tablet {
    margin-left: 1.33333rem;
    margin-right: 1.33333rem;
  }
  /**
					 * @name  			```.m@tablet```
					 * Apply the margin "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m\@tablet {
    margin: 1.33333rem;
  }
  /**
					 * @name  			```.no-m-b@tablet```
					 * Remove the margin bottom "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b\@tablet {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t@tablet```
					 * Remove the margin top "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t\@tablet {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l@tablet```
					 * Remove the margin left "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l\@tablet {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r@tablet```
					 * Remove the margin top "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r\@tablet {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s@tablet```
					 * Remove the margin side "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s\@tablet {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b@tablet```
					 * Apply the padding bottom "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b\@tablet {
    padding-bottom: 1.33333rem;
  }
  /**
					 * @name  			```.p-t@tablet```
					 * Apply the padding top "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t\@tablet {
    padding-top: 1.33333rem;
  }
  /**
					 * @name  			```.p-l@tablet```
					 * Apply the padding left "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l\@tablet {
    padding-left: 1.33333rem;
  }
  /**
					 * @name  			```.p-r@tablet```
					 * Apply the padding right "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r\@tablet {
    padding-right: 1.33333rem;
  }
  /**
					 * @name  			```.p-s@tablet```
					 * Apply the padding side "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s\@tablet {
    padding-left: 1.33333rem;
    padding-right: 1.33333rem;
  }
  /**
					 * @name  			```.m@tablet```
					 * Apply the padding "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m\@tablet {
    padding: 1.33333rem;
  }
  /**
					 * @name  			```.no-p-b@tablet```
					 * Remove the padding bottom "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b\@tablet {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t@tablet```
					 * Remove the padding top "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t\@tablet {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l@tablet```
					 * Remove the padding left "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l\@tablet {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r@tablet```
					 * Remove the padding top "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r\@tablet {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s@tablet```
					 * Remove the padding side "default" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s\@tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  /**
					 * @name  			```.m-b-smaller@tablet```
					 * Apply the margin bottom "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-smaller\@tablet {
    margin-bottom: 0.33333rem;
  }
  /**
					 * @name  			```.m-t-smaller@tablet```
					 * Apply the margin top "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-smaller\@tablet {
    margin-top: 0.33333rem;
  }
  /**
					 * @name  			```.m-l-smaller@tablet```
					 * Apply the margin left "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-smaller@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-smaller\@tablet {
    margin-left: 0.33333rem;
  }
  /**
					 * @name  			```.m-r-smaller@tablet```
					 * Apply the margin right "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-smaller@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-smaller\@tablet {
    margin-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-s-smaller@tablet```
					 * Apply the margin side "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-smaller@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-smaller\@tablet {
    margin-left: 0.33333rem;
    margin-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-smaller@tablet```
					 * Apply the margin "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-smaller@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-smaller\@tablet {
    margin: 0.33333rem;
  }
  /**
					 * @name  			```.no-m-b-smaller@tablet```
					 * Remove the margin bottom "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-smaller\@tablet {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-smaller@tablet```
					 * Remove the margin top "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-smaller\@tablet {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-smaller@tablet```
					 * Remove the margin left "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-smaller\@tablet {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-smaller@tablet```
					 * Remove the margin top "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-smaller\@tablet {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-smaller@tablet```
					 * Remove the margin side "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-smaller\@tablet {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-smaller@tablet```
					 * Apply the padding bottom "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-smaller\@tablet {
    padding-bottom: 0.33333rem;
  }
  /**
					 * @name  			```.p-t-smaller@tablet```
					 * Apply the padding top "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-smaller\@tablet {
    padding-top: 0.33333rem;
  }
  /**
					 * @name  			```.p-l-smaller@tablet```
					 * Apply the padding left "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-smaller@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-smaller\@tablet {
    padding-left: 0.33333rem;
  }
  /**
					 * @name  			```.p-r-smaller@tablet```
					 * Apply the padding right "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-smaller@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-smaller\@tablet {
    padding-right: 0.33333rem;
  }
  /**
					 * @name  			```.p-s-smaller@tablet```
					 * Apply the padding side "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-smaller@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-smaller\@tablet {
    padding-left: 0.33333rem;
    padding-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-smaller@tablet```
					 * Apply the padding "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-smaller@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-smaller\@tablet {
    padding: 0.33333rem;
  }
  /**
					 * @name  			```.no-p-b-smaller@tablet```
					 * Remove the padding bottom "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-smaller\@tablet {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-smaller@tablet```
					 * Remove the padding top "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-smaller\@tablet {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-smaller@tablet```
					 * Remove the padding left "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-smaller\@tablet {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-smaller@tablet```
					 * Remove the padding top "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-smaller\@tablet {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-smaller@tablet```
					 * Remove the padding side "smaller" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-smaller@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-smaller\@tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  /**
					 * @name  			```.m-b-small@tablet```
					 * Apply the margin bottom "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-small\@tablet {
    margin-bottom: 0.66667rem;
  }
  /**
					 * @name  			```.m-t-small@tablet```
					 * Apply the margin top "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-small\@tablet {
    margin-top: 0.66667rem;
  }
  /**
					 * @name  			```.m-l-small@tablet```
					 * Apply the margin left "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-small\@tablet {
    margin-left: 0.66667rem;
  }
  /**
					 * @name  			```.m-r-small@tablet```
					 * Apply the margin right "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-small\@tablet {
    margin-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-s-small@tablet```
					 * Apply the margin side "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-small\@tablet {
    margin-left: 0.66667rem;
    margin-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-small@tablet```
					 * Apply the margin "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-small\@tablet {
    margin: 0.66667rem;
  }
  /**
					 * @name  			```.no-m-b-small@tablet```
					 * Remove the margin bottom "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-small\@tablet {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-small@tablet```
					 * Remove the margin top "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-small\@tablet {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-small@tablet```
					 * Remove the margin left "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-small\@tablet {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-small@tablet```
					 * Remove the margin top "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-small\@tablet {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-small@tablet```
					 * Remove the margin side "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-small\@tablet {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-small@tablet```
					 * Apply the padding bottom "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-small\@tablet {
    padding-bottom: 0.66667rem;
  }
  /**
					 * @name  			```.p-t-small@tablet```
					 * Apply the padding top "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-small\@tablet {
    padding-top: 0.66667rem;
  }
  /**
					 * @name  			```.p-l-small@tablet```
					 * Apply the padding left "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-small\@tablet {
    padding-left: 0.66667rem;
  }
  /**
					 * @name  			```.p-r-small@tablet```
					 * Apply the padding right "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-small\@tablet {
    padding-right: 0.66667rem;
  }
  /**
					 * @name  			```.p-s-small@tablet```
					 * Apply the padding side "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-small\@tablet {
    padding-left: 0.66667rem;
    padding-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-small@tablet```
					 * Apply the padding "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-small\@tablet {
    padding: 0.66667rem;
  }
  /**
					 * @name  			```.no-p-b-small@tablet```
					 * Remove the padding bottom "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-small\@tablet {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-small@tablet```
					 * Remove the padding top "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-small\@tablet {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-small@tablet```
					 * Remove the padding left "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-small\@tablet {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-small@tablet```
					 * Remove the padding top "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-small\@tablet {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-small@tablet```
					 * Remove the padding side "small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-small\@tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  /**
					 * @name  			```.m-b-medium-small@tablet```
					 * Apply the margin bottom "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-medium-small\@tablet {
    margin-bottom: 2.66667rem;
  }
  /**
					 * @name  			```.m-t-medium-small@tablet```
					 * Apply the margin top "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-medium-small\@tablet {
    margin-top: 2.66667rem;
  }
  /**
					 * @name  			```.m-l-medium-small@tablet```
					 * Apply the margin left "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-medium-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-medium-small\@tablet {
    margin-left: 2.66667rem;
  }
  /**
					 * @name  			```.m-r-medium-small@tablet```
					 * Apply the margin right "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-medium-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-medium-small\@tablet {
    margin-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-s-medium-small@tablet```
					 * Apply the margin side "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-medium-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-medium-small\@tablet {
    margin-left: 2.66667rem;
    margin-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-medium-small@tablet```
					 * Apply the margin "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-medium-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium-small\@tablet {
    margin: 2.66667rem;
  }
  /**
					 * @name  			```.no-m-b-medium-small@tablet```
					 * Remove the margin bottom "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-medium-small\@tablet {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-medium-small@tablet```
					 * Remove the margin top "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-medium-small\@tablet {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-medium-small@tablet```
					 * Remove the margin left "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-medium-small\@tablet {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-medium-small@tablet```
					 * Remove the margin top "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-medium-small\@tablet {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-medium-small@tablet```
					 * Remove the margin side "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-medium-small\@tablet {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-medium-small@tablet```
					 * Apply the padding bottom "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-medium-small\@tablet {
    padding-bottom: 2.66667rem;
  }
  /**
					 * @name  			```.p-t-medium-small@tablet```
					 * Apply the padding top "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-medium-small\@tablet {
    padding-top: 2.66667rem;
  }
  /**
					 * @name  			```.p-l-medium-small@tablet```
					 * Apply the padding left "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-medium-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-medium-small\@tablet {
    padding-left: 2.66667rem;
  }
  /**
					 * @name  			```.p-r-medium-small@tablet```
					 * Apply the padding right "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-medium-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-medium-small\@tablet {
    padding-right: 2.66667rem;
  }
  /**
					 * @name  			```.p-s-medium-small@tablet```
					 * Apply the padding side "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-medium-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-medium-small\@tablet {
    padding-left: 2.66667rem;
    padding-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-medium-small@tablet```
					 * Apply the padding "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-medium-small@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium-small\@tablet {
    padding: 2.66667rem;
  }
  /**
					 * @name  			```.no-p-b-medium-small@tablet```
					 * Remove the padding bottom "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-medium-small\@tablet {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-medium-small@tablet```
					 * Remove the padding top "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-medium-small\@tablet {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-medium-small@tablet```
					 * Remove the padding left "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-medium-small\@tablet {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-medium-small@tablet```
					 * Remove the padding top "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-medium-small\@tablet {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-medium-small@tablet```
					 * Remove the padding side "medium-small" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-medium-small@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-medium-small\@tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  /**
					 * @name  			```.m-b-medium@tablet```
					 * Apply the margin bottom "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-medium\@tablet {
    margin-bottom: 5.33333rem;
  }
  /**
					 * @name  			```.m-t-medium@tablet```
					 * Apply the margin top "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-medium\@tablet {
    margin-top: 5.33333rem;
  }
  /**
					 * @name  			```.m-l-medium@tablet```
					 * Apply the margin left "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-medium@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-medium\@tablet {
    margin-left: 5.33333rem;
  }
  /**
					 * @name  			```.m-r-medium@tablet```
					 * Apply the margin right "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-medium@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-medium\@tablet {
    margin-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-s-medium@tablet```
					 * Apply the margin side "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-medium@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-medium\@tablet {
    margin-left: 5.33333rem;
    margin-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-medium@tablet```
					 * Apply the margin "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-medium@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium\@tablet {
    margin: 5.33333rem;
  }
  /**
					 * @name  			```.no-m-b-medium@tablet```
					 * Remove the margin bottom "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-medium\@tablet {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-medium@tablet```
					 * Remove the margin top "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-medium\@tablet {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-medium@tablet```
					 * Remove the margin left "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-medium\@tablet {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-medium@tablet```
					 * Remove the margin top "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-medium\@tablet {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-medium@tablet```
					 * Remove the margin side "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-medium\@tablet {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-medium@tablet```
					 * Apply the padding bottom "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-medium\@tablet {
    padding-bottom: 5.33333rem;
  }
  /**
					 * @name  			```.p-t-medium@tablet```
					 * Apply the padding top "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-medium\@tablet {
    padding-top: 5.33333rem;
  }
  /**
					 * @name  			```.p-l-medium@tablet```
					 * Apply the padding left "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-medium@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-medium\@tablet {
    padding-left: 5.33333rem;
  }
  /**
					 * @name  			```.p-r-medium@tablet```
					 * Apply the padding right "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-medium@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-medium\@tablet {
    padding-right: 5.33333rem;
  }
  /**
					 * @name  			```.p-s-medium@tablet```
					 * Apply the padding side "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-medium@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-medium\@tablet {
    padding-left: 5.33333rem;
    padding-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-medium@tablet```
					 * Apply the padding "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-medium@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium\@tablet {
    padding: 5.33333rem;
  }
  /**
					 * @name  			```.no-p-b-medium@tablet```
					 * Remove the padding bottom "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-medium\@tablet {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-medium@tablet```
					 * Remove the padding top "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-medium\@tablet {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-medium@tablet```
					 * Remove the padding left "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-medium\@tablet {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-medium@tablet```
					 * Remove the padding top "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-medium\@tablet {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-medium@tablet```
					 * Remove the padding side "medium" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-medium@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-medium\@tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  /**
					 * @name  			```.m-b-big@tablet```
					 * Apply the margin bottom "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-big\@tablet {
    margin-bottom: 20rem;
  }
  /**
					 * @name  			```.m-t-big@tablet```
					 * Apply the margin top "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-big\@tablet {
    margin-top: 20rem;
  }
  /**
					 * @name  			```.m-l-big@tablet```
					 * Apply the margin left "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-big@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-big\@tablet {
    margin-left: 20rem;
  }
  /**
					 * @name  			```.m-r-big@tablet```
					 * Apply the margin right "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-big@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-big\@tablet {
    margin-right: 20rem;
  }
  /**
					 * @name  			```.m-s-big@tablet```
					 * Apply the margin side "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-big@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-big\@tablet {
    margin-left: 20rem;
    margin-right: 20rem;
  }
  /**
					 * @name  			```.m-big@tablet```
					 * Apply the margin "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-big@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-big\@tablet {
    margin: 20rem;
  }
  /**
					 * @name  			```.no-m-b-big@tablet```
					 * Remove the margin bottom "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-big\@tablet {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-big@tablet```
					 * Remove the margin top "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-big\@tablet {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-big@tablet```
					 * Remove the margin left "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-big\@tablet {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-big@tablet```
					 * Remove the margin top "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-big\@tablet {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-big@tablet```
					 * Remove the margin side "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-big\@tablet {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-big@tablet```
					 * Apply the padding bottom "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-big\@tablet {
    padding-bottom: 20rem;
  }
  /**
					 * @name  			```.p-t-big@tablet```
					 * Apply the padding top "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-big\@tablet {
    padding-top: 20rem;
  }
  /**
					 * @name  			```.p-l-big@tablet```
					 * Apply the padding left "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-big@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-big\@tablet {
    padding-left: 20rem;
  }
  /**
					 * @name  			```.p-r-big@tablet```
					 * Apply the padding right "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-big@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-big\@tablet {
    padding-right: 20rem;
  }
  /**
					 * @name  			```.p-s-big@tablet```
					 * Apply the padding side "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-big@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-big\@tablet {
    padding-left: 20rem;
    padding-right: 20rem;
  }
  /**
					 * @name  			```.m-big@tablet```
					 * Apply the padding "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-big@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-big\@tablet {
    padding: 20rem;
  }
  /**
					 * @name  			```.no-p-b-big@tablet```
					 * Remove the padding bottom "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-big\@tablet {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-big@tablet```
					 * Remove the padding top "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-big\@tablet {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-big@tablet```
					 * Remove the padding left "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-big\@tablet {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-big@tablet```
					 * Remove the padding top "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-big\@tablet {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-big@tablet```
					 * Remove the padding side "big" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-big@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-big\@tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  /**
					 * @name  			```.m-b-bigger@tablet```
					 * Apply the margin bottom "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-bigger\@tablet {
    margin-bottom: 53.33333rem;
  }
  /**
					 * @name  			```.m-t-bigger@tablet```
					 * Apply the margin top "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-bigger\@tablet {
    margin-top: 53.33333rem;
  }
  /**
					 * @name  			```.m-l-bigger@tablet```
					 * Apply the margin left "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-bigger@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-bigger\@tablet {
    margin-left: 53.33333rem;
  }
  /**
					 * @name  			```.m-r-bigger@tablet```
					 * Apply the margin right "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-bigger@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-bigger\@tablet {
    margin-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-s-bigger@tablet```
					 * Apply the margin side "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-bigger@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-bigger\@tablet {
    margin-left: 53.33333rem;
    margin-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-bigger@tablet```
					 * Apply the margin "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-bigger@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-bigger\@tablet {
    margin: 53.33333rem;
  }
  /**
					 * @name  			```.no-m-b-bigger@tablet```
					 * Remove the margin bottom "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-bigger\@tablet {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-bigger@tablet```
					 * Remove the margin top "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-bigger\@tablet {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-bigger@tablet```
					 * Remove the margin left "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-bigger\@tablet {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-bigger@tablet```
					 * Remove the margin top "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-bigger\@tablet {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-bigger@tablet```
					 * Remove the margin side "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-bigger\@tablet {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-bigger@tablet```
					 * Apply the padding bottom "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-bigger\@tablet {
    padding-bottom: 53.33333rem;
  }
  /**
					 * @name  			```.p-t-bigger@tablet```
					 * Apply the padding top "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-bigger\@tablet {
    padding-top: 53.33333rem;
  }
  /**
					 * @name  			```.p-l-bigger@tablet```
					 * Apply the padding left "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-bigger@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-bigger\@tablet {
    padding-left: 53.33333rem;
  }
  /**
					 * @name  			```.p-r-bigger@tablet```
					 * Apply the padding right "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-bigger@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-bigger\@tablet {
    padding-right: 53.33333rem;
  }
  /**
					 * @name  			```.p-s-bigger@tablet```
					 * Apply the padding side "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-bigger@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-bigger\@tablet {
    padding-left: 53.33333rem;
    padding-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-bigger@tablet```
					 * Apply the padding "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-bigger@tablet" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-bigger\@tablet {
    padding: 53.33333rem;
  }
  /**
					 * @name  			```.no-p-b-bigger@tablet```
					 * Remove the padding bottom "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-bigger\@tablet {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-bigger@tablet```
					 * Remove the padding top "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-bigger\@tablet {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-bigger@tablet```
					 * Remove the padding left "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-bigger\@tablet {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-bigger@tablet```
					 * Remove the padding top "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-bigger\@tablet {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-bigger@tablet```
					 * Remove the padding side "bigger" on the "tablet" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-bigger@tablet" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-bigger\@tablet {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 992px) {
  /**
					 * @name  			```.m-b@desktop```
					 * Apply the margin bottom "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b\@desktop {
    margin-bottom: 1.33333rem;
  }
  /**
					 * @name  			```.m-t@desktop```
					 * Apply the margin top "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t\@desktop {
    margin-top: 1.33333rem;
  }
  /**
					 * @name  			```.m-l@desktop```
					 * Apply the margin left "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l\@desktop {
    margin-left: 1.33333rem;
  }
  /**
					 * @name  			```.m-r@desktop```
					 * Apply the margin right "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r\@desktop {
    margin-right: 1.33333rem;
  }
  /**
					 * @name  			```.m-s@desktop```
					 * Apply the margin side "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s\@desktop {
    margin-left: 1.33333rem;
    margin-right: 1.33333rem;
  }
  /**
					 * @name  			```.m@desktop```
					 * Apply the margin "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m\@desktop {
    margin: 1.33333rem;
  }
  /**
					 * @name  			```.no-m-b@desktop```
					 * Remove the margin bottom "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b\@desktop {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t@desktop```
					 * Remove the margin top "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t\@desktop {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l@desktop```
					 * Remove the margin left "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l\@desktop {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r@desktop```
					 * Remove the margin top "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r\@desktop {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s@desktop```
					 * Remove the margin side "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s\@desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b@desktop```
					 * Apply the padding bottom "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b\@desktop {
    padding-bottom: 1.33333rem;
  }
  /**
					 * @name  			```.p-t@desktop```
					 * Apply the padding top "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t\@desktop {
    padding-top: 1.33333rem;
  }
  /**
					 * @name  			```.p-l@desktop```
					 * Apply the padding left "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l\@desktop {
    padding-left: 1.33333rem;
  }
  /**
					 * @name  			```.p-r@desktop```
					 * Apply the padding right "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r\@desktop {
    padding-right: 1.33333rem;
  }
  /**
					 * @name  			```.p-s@desktop```
					 * Apply the padding side "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s\@desktop {
    padding-left: 1.33333rem;
    padding-right: 1.33333rem;
  }
  /**
					 * @name  			```.m@desktop```
					 * Apply the padding "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m\@desktop {
    padding: 1.33333rem;
  }
  /**
					 * @name  			```.no-p-b@desktop```
					 * Remove the padding bottom "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b\@desktop {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t@desktop```
					 * Remove the padding top "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t\@desktop {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l@desktop```
					 * Remove the padding left "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l\@desktop {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r@desktop```
					 * Remove the padding top "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r\@desktop {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s@desktop```
					 * Remove the padding side "default" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s\@desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 992px) {
  /**
					 * @name  			```.m-b-smaller@desktop```
					 * Apply the margin bottom "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-smaller\@desktop {
    margin-bottom: 0.33333rem;
  }
  /**
					 * @name  			```.m-t-smaller@desktop```
					 * Apply the margin top "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-smaller\@desktop {
    margin-top: 0.33333rem;
  }
  /**
					 * @name  			```.m-l-smaller@desktop```
					 * Apply the margin left "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-smaller@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-smaller\@desktop {
    margin-left: 0.33333rem;
  }
  /**
					 * @name  			```.m-r-smaller@desktop```
					 * Apply the margin right "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-smaller@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-smaller\@desktop {
    margin-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-s-smaller@desktop```
					 * Apply the margin side "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-smaller@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-smaller\@desktop {
    margin-left: 0.33333rem;
    margin-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-smaller@desktop```
					 * Apply the margin "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-smaller@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-smaller\@desktop {
    margin: 0.33333rem;
  }
  /**
					 * @name  			```.no-m-b-smaller@desktop```
					 * Remove the margin bottom "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-smaller\@desktop {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-smaller@desktop```
					 * Remove the margin top "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-smaller\@desktop {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-smaller@desktop```
					 * Remove the margin left "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-smaller\@desktop {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-smaller@desktop```
					 * Remove the margin top "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-smaller\@desktop {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-smaller@desktop```
					 * Remove the margin side "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-smaller\@desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-smaller@desktop```
					 * Apply the padding bottom "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-smaller\@desktop {
    padding-bottom: 0.33333rem;
  }
  /**
					 * @name  			```.p-t-smaller@desktop```
					 * Apply the padding top "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-smaller\@desktop {
    padding-top: 0.33333rem;
  }
  /**
					 * @name  			```.p-l-smaller@desktop```
					 * Apply the padding left "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-smaller@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-smaller\@desktop {
    padding-left: 0.33333rem;
  }
  /**
					 * @name  			```.p-r-smaller@desktop```
					 * Apply the padding right "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-smaller@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-smaller\@desktop {
    padding-right: 0.33333rem;
  }
  /**
					 * @name  			```.p-s-smaller@desktop```
					 * Apply the padding side "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-smaller@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-smaller\@desktop {
    padding-left: 0.33333rem;
    padding-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-smaller@desktop```
					 * Apply the padding "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-smaller@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-smaller\@desktop {
    padding: 0.33333rem;
  }
  /**
					 * @name  			```.no-p-b-smaller@desktop```
					 * Remove the padding bottom "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-smaller\@desktop {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-smaller@desktop```
					 * Remove the padding top "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-smaller\@desktop {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-smaller@desktop```
					 * Remove the padding left "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-smaller\@desktop {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-smaller@desktop```
					 * Remove the padding top "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-smaller\@desktop {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-smaller@desktop```
					 * Remove the padding side "smaller" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-smaller@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-smaller\@desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 992px) {
  /**
					 * @name  			```.m-b-small@desktop```
					 * Apply the margin bottom "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-small\@desktop {
    margin-bottom: 0.66667rem;
  }
  /**
					 * @name  			```.m-t-small@desktop```
					 * Apply the margin top "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-small\@desktop {
    margin-top: 0.66667rem;
  }
  /**
					 * @name  			```.m-l-small@desktop```
					 * Apply the margin left "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-small\@desktop {
    margin-left: 0.66667rem;
  }
  /**
					 * @name  			```.m-r-small@desktop```
					 * Apply the margin right "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-small\@desktop {
    margin-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-s-small@desktop```
					 * Apply the margin side "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-small\@desktop {
    margin-left: 0.66667rem;
    margin-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-small@desktop```
					 * Apply the margin "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-small\@desktop {
    margin: 0.66667rem;
  }
  /**
					 * @name  			```.no-m-b-small@desktop```
					 * Remove the margin bottom "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-small\@desktop {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-small@desktop```
					 * Remove the margin top "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-small\@desktop {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-small@desktop```
					 * Remove the margin left "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-small\@desktop {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-small@desktop```
					 * Remove the margin top "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-small\@desktop {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-small@desktop```
					 * Remove the margin side "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-small\@desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-small@desktop```
					 * Apply the padding bottom "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-small\@desktop {
    padding-bottom: 0.66667rem;
  }
  /**
					 * @name  			```.p-t-small@desktop```
					 * Apply the padding top "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-small\@desktop {
    padding-top: 0.66667rem;
  }
  /**
					 * @name  			```.p-l-small@desktop```
					 * Apply the padding left "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-small\@desktop {
    padding-left: 0.66667rem;
  }
  /**
					 * @name  			```.p-r-small@desktop```
					 * Apply the padding right "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-small\@desktop {
    padding-right: 0.66667rem;
  }
  /**
					 * @name  			```.p-s-small@desktop```
					 * Apply the padding side "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-small\@desktop {
    padding-left: 0.66667rem;
    padding-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-small@desktop```
					 * Apply the padding "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-small\@desktop {
    padding: 0.66667rem;
  }
  /**
					 * @name  			```.no-p-b-small@desktop```
					 * Remove the padding bottom "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-small\@desktop {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-small@desktop```
					 * Remove the padding top "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-small\@desktop {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-small@desktop```
					 * Remove the padding left "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-small\@desktop {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-small@desktop```
					 * Remove the padding top "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-small\@desktop {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-small@desktop```
					 * Remove the padding side "small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-small\@desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 992px) {
  /**
					 * @name  			```.m-b-medium-small@desktop```
					 * Apply the margin bottom "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-medium-small\@desktop {
    margin-bottom: 2.66667rem;
  }
  /**
					 * @name  			```.m-t-medium-small@desktop```
					 * Apply the margin top "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-medium-small\@desktop {
    margin-top: 2.66667rem;
  }
  /**
					 * @name  			```.m-l-medium-small@desktop```
					 * Apply the margin left "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-medium-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-medium-small\@desktop {
    margin-left: 2.66667rem;
  }
  /**
					 * @name  			```.m-r-medium-small@desktop```
					 * Apply the margin right "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-medium-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-medium-small\@desktop {
    margin-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-s-medium-small@desktop```
					 * Apply the margin side "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-medium-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-medium-small\@desktop {
    margin-left: 2.66667rem;
    margin-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-medium-small@desktop```
					 * Apply the margin "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-medium-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium-small\@desktop {
    margin: 2.66667rem;
  }
  /**
					 * @name  			```.no-m-b-medium-small@desktop```
					 * Remove the margin bottom "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-medium-small\@desktop {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-medium-small@desktop```
					 * Remove the margin top "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-medium-small\@desktop {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-medium-small@desktop```
					 * Remove the margin left "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-medium-small\@desktop {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-medium-small@desktop```
					 * Remove the margin top "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-medium-small\@desktop {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-medium-small@desktop```
					 * Remove the margin side "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-medium-small\@desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-medium-small@desktop```
					 * Apply the padding bottom "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-medium-small\@desktop {
    padding-bottom: 2.66667rem;
  }
  /**
					 * @name  			```.p-t-medium-small@desktop```
					 * Apply the padding top "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-medium-small\@desktop {
    padding-top: 2.66667rem;
  }
  /**
					 * @name  			```.p-l-medium-small@desktop```
					 * Apply the padding left "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-medium-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-medium-small\@desktop {
    padding-left: 2.66667rem;
  }
  /**
					 * @name  			```.p-r-medium-small@desktop```
					 * Apply the padding right "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-medium-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-medium-small\@desktop {
    padding-right: 2.66667rem;
  }
  /**
					 * @name  			```.p-s-medium-small@desktop```
					 * Apply the padding side "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-medium-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-medium-small\@desktop {
    padding-left: 2.66667rem;
    padding-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-medium-small@desktop```
					 * Apply the padding "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-medium-small@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium-small\@desktop {
    padding: 2.66667rem;
  }
  /**
					 * @name  			```.no-p-b-medium-small@desktop```
					 * Remove the padding bottom "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-medium-small\@desktop {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-medium-small@desktop```
					 * Remove the padding top "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-medium-small\@desktop {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-medium-small@desktop```
					 * Remove the padding left "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-medium-small\@desktop {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-medium-small@desktop```
					 * Remove the padding top "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-medium-small\@desktop {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-medium-small@desktop```
					 * Remove the padding side "medium-small" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-medium-small@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-medium-small\@desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 992px) {
  /**
					 * @name  			```.m-b-medium@desktop```
					 * Apply the margin bottom "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-medium\@desktop {
    margin-bottom: 5.33333rem;
  }
  /**
					 * @name  			```.m-t-medium@desktop```
					 * Apply the margin top "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-medium\@desktop {
    margin-top: 5.33333rem;
  }
  /**
					 * @name  			```.m-l-medium@desktop```
					 * Apply the margin left "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-medium@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-medium\@desktop {
    margin-left: 5.33333rem;
  }
  /**
					 * @name  			```.m-r-medium@desktop```
					 * Apply the margin right "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-medium@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-medium\@desktop {
    margin-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-s-medium@desktop```
					 * Apply the margin side "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-medium@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-medium\@desktop {
    margin-left: 5.33333rem;
    margin-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-medium@desktop```
					 * Apply the margin "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-medium@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium\@desktop {
    margin: 5.33333rem;
  }
  /**
					 * @name  			```.no-m-b-medium@desktop```
					 * Remove the margin bottom "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-medium\@desktop {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-medium@desktop```
					 * Remove the margin top "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-medium\@desktop {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-medium@desktop```
					 * Remove the margin left "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-medium\@desktop {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-medium@desktop```
					 * Remove the margin top "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-medium\@desktop {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-medium@desktop```
					 * Remove the margin side "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-medium\@desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-medium@desktop```
					 * Apply the padding bottom "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-medium\@desktop {
    padding-bottom: 5.33333rem;
  }
  /**
					 * @name  			```.p-t-medium@desktop```
					 * Apply the padding top "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-medium\@desktop {
    padding-top: 5.33333rem;
  }
  /**
					 * @name  			```.p-l-medium@desktop```
					 * Apply the padding left "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-medium@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-medium\@desktop {
    padding-left: 5.33333rem;
  }
  /**
					 * @name  			```.p-r-medium@desktop```
					 * Apply the padding right "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-medium@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-medium\@desktop {
    padding-right: 5.33333rem;
  }
  /**
					 * @name  			```.p-s-medium@desktop```
					 * Apply the padding side "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-medium@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-medium\@desktop {
    padding-left: 5.33333rem;
    padding-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-medium@desktop```
					 * Apply the padding "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-medium@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium\@desktop {
    padding: 5.33333rem;
  }
  /**
					 * @name  			```.no-p-b-medium@desktop```
					 * Remove the padding bottom "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-medium\@desktop {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-medium@desktop```
					 * Remove the padding top "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-medium\@desktop {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-medium@desktop```
					 * Remove the padding left "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-medium\@desktop {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-medium@desktop```
					 * Remove the padding top "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-medium\@desktop {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-medium@desktop```
					 * Remove the padding side "medium" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-medium@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-medium\@desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 992px) {
  /**
					 * @name  			```.m-b-big@desktop```
					 * Apply the margin bottom "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-big\@desktop {
    margin-bottom: 20rem;
  }
  /**
					 * @name  			```.m-t-big@desktop```
					 * Apply the margin top "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-big\@desktop {
    margin-top: 20rem;
  }
  /**
					 * @name  			```.m-l-big@desktop```
					 * Apply the margin left "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-big@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-big\@desktop {
    margin-left: 20rem;
  }
  /**
					 * @name  			```.m-r-big@desktop```
					 * Apply the margin right "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-big@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-big\@desktop {
    margin-right: 20rem;
  }
  /**
					 * @name  			```.m-s-big@desktop```
					 * Apply the margin side "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-big@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-big\@desktop {
    margin-left: 20rem;
    margin-right: 20rem;
  }
  /**
					 * @name  			```.m-big@desktop```
					 * Apply the margin "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-big@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-big\@desktop {
    margin: 20rem;
  }
  /**
					 * @name  			```.no-m-b-big@desktop```
					 * Remove the margin bottom "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-big\@desktop {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-big@desktop```
					 * Remove the margin top "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-big\@desktop {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-big@desktop```
					 * Remove the margin left "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-big\@desktop {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-big@desktop```
					 * Remove the margin top "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-big\@desktop {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-big@desktop```
					 * Remove the margin side "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-big\@desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-big@desktop```
					 * Apply the padding bottom "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-big\@desktop {
    padding-bottom: 20rem;
  }
  /**
					 * @name  			```.p-t-big@desktop```
					 * Apply the padding top "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-big\@desktop {
    padding-top: 20rem;
  }
  /**
					 * @name  			```.p-l-big@desktop```
					 * Apply the padding left "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-big@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-big\@desktop {
    padding-left: 20rem;
  }
  /**
					 * @name  			```.p-r-big@desktop```
					 * Apply the padding right "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-big@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-big\@desktop {
    padding-right: 20rem;
  }
  /**
					 * @name  			```.p-s-big@desktop```
					 * Apply the padding side "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-big@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-big\@desktop {
    padding-left: 20rem;
    padding-right: 20rem;
  }
  /**
					 * @name  			```.m-big@desktop```
					 * Apply the padding "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-big@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-big\@desktop {
    padding: 20rem;
  }
  /**
					 * @name  			```.no-p-b-big@desktop```
					 * Remove the padding bottom "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-big\@desktop {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-big@desktop```
					 * Remove the padding top "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-big\@desktop {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-big@desktop```
					 * Remove the padding left "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-big\@desktop {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-big@desktop```
					 * Remove the padding top "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-big\@desktop {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-big@desktop```
					 * Remove the padding side "big" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-big@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-big\@desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 992px) {
  /**
					 * @name  			```.m-b-bigger@desktop```
					 * Apply the margin bottom "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-bigger\@desktop {
    margin-bottom: 53.33333rem;
  }
  /**
					 * @name  			```.m-t-bigger@desktop```
					 * Apply the margin top "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-bigger\@desktop {
    margin-top: 53.33333rem;
  }
  /**
					 * @name  			```.m-l-bigger@desktop```
					 * Apply the margin left "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-bigger@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-bigger\@desktop {
    margin-left: 53.33333rem;
  }
  /**
					 * @name  			```.m-r-bigger@desktop```
					 * Apply the margin right "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-bigger@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-bigger\@desktop {
    margin-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-s-bigger@desktop```
					 * Apply the margin side "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-bigger@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-bigger\@desktop {
    margin-left: 53.33333rem;
    margin-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-bigger@desktop```
					 * Apply the margin "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-bigger@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-bigger\@desktop {
    margin: 53.33333rem;
  }
  /**
					 * @name  			```.no-m-b-bigger@desktop```
					 * Remove the margin bottom "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-bigger\@desktop {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-bigger@desktop```
					 * Remove the margin top "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-bigger\@desktop {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-bigger@desktop```
					 * Remove the margin left "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-bigger\@desktop {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-bigger@desktop```
					 * Remove the margin top "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-bigger\@desktop {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-bigger@desktop```
					 * Remove the margin side "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-bigger\@desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-bigger@desktop```
					 * Apply the padding bottom "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-bigger\@desktop {
    padding-bottom: 53.33333rem;
  }
  /**
					 * @name  			```.p-t-bigger@desktop```
					 * Apply the padding top "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-bigger\@desktop {
    padding-top: 53.33333rem;
  }
  /**
					 * @name  			```.p-l-bigger@desktop```
					 * Apply the padding left "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-bigger@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-bigger\@desktop {
    padding-left: 53.33333rem;
  }
  /**
					 * @name  			```.p-r-bigger@desktop```
					 * Apply the padding right "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-bigger@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-bigger\@desktop {
    padding-right: 53.33333rem;
  }
  /**
					 * @name  			```.p-s-bigger@desktop```
					 * Apply the padding side "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-bigger@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-bigger\@desktop {
    padding-left: 53.33333rem;
    padding-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-bigger@desktop```
					 * Apply the padding "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-bigger@desktop" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-bigger\@desktop {
    padding: 53.33333rem;
  }
  /**
					 * @name  			```.no-p-b-bigger@desktop```
					 * Remove the padding bottom "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-bigger\@desktop {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-bigger@desktop```
					 * Remove the padding top "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-bigger\@desktop {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-bigger@desktop```
					 * Remove the padding left "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-bigger\@desktop {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-bigger@desktop```
					 * Remove the padding top "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-bigger\@desktop {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-bigger@desktop```
					 * Remove the padding side "bigger" on the "desktop" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-bigger@desktop" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-bigger\@desktop {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  /**
					 * @name  			```.m-b@desktop-large```
					 * Apply the margin bottom "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b\@desktop-large {
    margin-bottom: 1.33333rem;
  }
  /**
					 * @name  			```.m-t@desktop-large```
					 * Apply the margin top "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t\@desktop-large {
    margin-top: 1.33333rem;
  }
  /**
					 * @name  			```.m-l@desktop-large```
					 * Apply the margin left "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l\@desktop-large {
    margin-left: 1.33333rem;
  }
  /**
					 * @name  			```.m-r@desktop-large```
					 * Apply the margin right "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r\@desktop-large {
    margin-right: 1.33333rem;
  }
  /**
					 * @name  			```.m-s@desktop-large```
					 * Apply the margin side "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s\@desktop-large {
    margin-left: 1.33333rem;
    margin-right: 1.33333rem;
  }
  /**
					 * @name  			```.m@desktop-large```
					 * Apply the margin "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m\@desktop-large {
    margin: 1.33333rem;
  }
  /**
					 * @name  			```.no-m-b@desktop-large```
					 * Remove the margin bottom "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b\@desktop-large {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t@desktop-large```
					 * Remove the margin top "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t\@desktop-large {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l@desktop-large```
					 * Remove the margin left "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l\@desktop-large {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r@desktop-large```
					 * Remove the margin top "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r\@desktop-large {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s@desktop-large```
					 * Remove the margin side "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s\@desktop-large {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b@desktop-large```
					 * Apply the padding bottom "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b\@desktop-large {
    padding-bottom: 1.33333rem;
  }
  /**
					 * @name  			```.p-t@desktop-large```
					 * Apply the padding top "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t\@desktop-large {
    padding-top: 1.33333rem;
  }
  /**
					 * @name  			```.p-l@desktop-large```
					 * Apply the padding left "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l\@desktop-large {
    padding-left: 1.33333rem;
  }
  /**
					 * @name  			```.p-r@desktop-large```
					 * Apply the padding right "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r\@desktop-large {
    padding-right: 1.33333rem;
  }
  /**
					 * @name  			```.p-s@desktop-large```
					 * Apply the padding side "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s\@desktop-large {
    padding-left: 1.33333rem;
    padding-right: 1.33333rem;
  }
  /**
					 * @name  			```.m@desktop-large```
					 * Apply the padding "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m\@desktop-large {
    padding: 1.33333rem;
  }
  /**
					 * @name  			```.no-p-b@desktop-large```
					 * Remove the padding bottom "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b\@desktop-large {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t@desktop-large```
					 * Remove the padding top "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t\@desktop-large {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l@desktop-large```
					 * Remove the padding left "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l\@desktop-large {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r@desktop-large```
					 * Remove the padding top "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r\@desktop-large {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s@desktop-large```
					 * Remove the padding side "default" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s\@desktop-large {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  /**
					 * @name  			```.m-b-smaller@desktop-large```
					 * Apply the margin bottom "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-smaller\@desktop-large {
    margin-bottom: 0.33333rem;
  }
  /**
					 * @name  			```.m-t-smaller@desktop-large```
					 * Apply the margin top "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-smaller\@desktop-large {
    margin-top: 0.33333rem;
  }
  /**
					 * @name  			```.m-l-smaller@desktop-large```
					 * Apply the margin left "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-smaller@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-smaller\@desktop-large {
    margin-left: 0.33333rem;
  }
  /**
					 * @name  			```.m-r-smaller@desktop-large```
					 * Apply the margin right "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-smaller@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-smaller\@desktop-large {
    margin-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-s-smaller@desktop-large```
					 * Apply the margin side "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-smaller@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-smaller\@desktop-large {
    margin-left: 0.33333rem;
    margin-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-smaller@desktop-large```
					 * Apply the margin "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-smaller@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-smaller\@desktop-large {
    margin: 0.33333rem;
  }
  /**
					 * @name  			```.no-m-b-smaller@desktop-large```
					 * Remove the margin bottom "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-smaller\@desktop-large {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-smaller@desktop-large```
					 * Remove the margin top "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-smaller\@desktop-large {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-smaller@desktop-large```
					 * Remove the margin left "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-smaller\@desktop-large {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-smaller@desktop-large```
					 * Remove the margin top "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-smaller\@desktop-large {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-smaller@desktop-large```
					 * Remove the margin side "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-smaller\@desktop-large {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-smaller@desktop-large```
					 * Apply the padding bottom "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-smaller\@desktop-large {
    padding-bottom: 0.33333rem;
  }
  /**
					 * @name  			```.p-t-smaller@desktop-large```
					 * Apply the padding top "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-smaller\@desktop-large {
    padding-top: 0.33333rem;
  }
  /**
					 * @name  			```.p-l-smaller@desktop-large```
					 * Apply the padding left "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-smaller@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-smaller\@desktop-large {
    padding-left: 0.33333rem;
  }
  /**
					 * @name  			```.p-r-smaller@desktop-large```
					 * Apply the padding right "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-smaller@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-smaller\@desktop-large {
    padding-right: 0.33333rem;
  }
  /**
					 * @name  			```.p-s-smaller@desktop-large```
					 * Apply the padding side "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-smaller@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-smaller\@desktop-large {
    padding-left: 0.33333rem;
    padding-right: 0.33333rem;
  }
  /**
					 * @name  			```.m-smaller@desktop-large```
					 * Apply the padding "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-smaller@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-smaller\@desktop-large {
    padding: 0.33333rem;
  }
  /**
					 * @name  			```.no-p-b-smaller@desktop-large```
					 * Remove the padding bottom "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-smaller\@desktop-large {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-smaller@desktop-large```
					 * Remove the padding top "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-smaller\@desktop-large {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-smaller@desktop-large```
					 * Remove the padding left "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-smaller\@desktop-large {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-smaller@desktop-large```
					 * Remove the padding top "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-smaller\@desktop-large {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-smaller@desktop-large```
					 * Remove the padding side "smaller" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-smaller@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-smaller\@desktop-large {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  /**
					 * @name  			```.m-b-small@desktop-large```
					 * Apply the margin bottom "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-small\@desktop-large {
    margin-bottom: 0.66667rem;
  }
  /**
					 * @name  			```.m-t-small@desktop-large```
					 * Apply the margin top "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-small\@desktop-large {
    margin-top: 0.66667rem;
  }
  /**
					 * @name  			```.m-l-small@desktop-large```
					 * Apply the margin left "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-small\@desktop-large {
    margin-left: 0.66667rem;
  }
  /**
					 * @name  			```.m-r-small@desktop-large```
					 * Apply the margin right "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-small\@desktop-large {
    margin-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-s-small@desktop-large```
					 * Apply the margin side "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-small\@desktop-large {
    margin-left: 0.66667rem;
    margin-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-small@desktop-large```
					 * Apply the margin "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-small\@desktop-large {
    margin: 0.66667rem;
  }
  /**
					 * @name  			```.no-m-b-small@desktop-large```
					 * Remove the margin bottom "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-small\@desktop-large {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-small@desktop-large```
					 * Remove the margin top "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-small\@desktop-large {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-small@desktop-large```
					 * Remove the margin left "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-small\@desktop-large {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-small@desktop-large```
					 * Remove the margin top "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-small\@desktop-large {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-small@desktop-large```
					 * Remove the margin side "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-small\@desktop-large {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-small@desktop-large```
					 * Apply the padding bottom "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-small\@desktop-large {
    padding-bottom: 0.66667rem;
  }
  /**
					 * @name  			```.p-t-small@desktop-large```
					 * Apply the padding top "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-small\@desktop-large {
    padding-top: 0.66667rem;
  }
  /**
					 * @name  			```.p-l-small@desktop-large```
					 * Apply the padding left "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-small\@desktop-large {
    padding-left: 0.66667rem;
  }
  /**
					 * @name  			```.p-r-small@desktop-large```
					 * Apply the padding right "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-small\@desktop-large {
    padding-right: 0.66667rem;
  }
  /**
					 * @name  			```.p-s-small@desktop-large```
					 * Apply the padding side "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-small\@desktop-large {
    padding-left: 0.66667rem;
    padding-right: 0.66667rem;
  }
  /**
					 * @name  			```.m-small@desktop-large```
					 * Apply the padding "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-small\@desktop-large {
    padding: 0.66667rem;
  }
  /**
					 * @name  			```.no-p-b-small@desktop-large```
					 * Remove the padding bottom "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-small\@desktop-large {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-small@desktop-large```
					 * Remove the padding top "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-small\@desktop-large {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-small@desktop-large```
					 * Remove the padding left "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-small\@desktop-large {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-small@desktop-large```
					 * Remove the padding top "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-small\@desktop-large {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-small@desktop-large```
					 * Remove the padding side "small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-small\@desktop-large {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  /**
					 * @name  			```.m-b-medium-small@desktop-large```
					 * Apply the margin bottom "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-medium-small\@desktop-large {
    margin-bottom: 2.66667rem;
  }
  /**
					 * @name  			```.m-t-medium-small@desktop-large```
					 * Apply the margin top "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-medium-small\@desktop-large {
    margin-top: 2.66667rem;
  }
  /**
					 * @name  			```.m-l-medium-small@desktop-large```
					 * Apply the margin left "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-medium-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-medium-small\@desktop-large {
    margin-left: 2.66667rem;
  }
  /**
					 * @name  			```.m-r-medium-small@desktop-large```
					 * Apply the margin right "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-medium-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-medium-small\@desktop-large {
    margin-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-s-medium-small@desktop-large```
					 * Apply the margin side "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-medium-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-medium-small\@desktop-large {
    margin-left: 2.66667rem;
    margin-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-medium-small@desktop-large```
					 * Apply the margin "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-medium-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium-small\@desktop-large {
    margin: 2.66667rem;
  }
  /**
					 * @name  			```.no-m-b-medium-small@desktop-large```
					 * Remove the margin bottom "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-medium-small\@desktop-large {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-medium-small@desktop-large```
					 * Remove the margin top "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-medium-small\@desktop-large {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-medium-small@desktop-large```
					 * Remove the margin left "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-medium-small\@desktop-large {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-medium-small@desktop-large```
					 * Remove the margin top "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-medium-small\@desktop-large {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-medium-small@desktop-large```
					 * Remove the margin side "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-medium-small\@desktop-large {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-medium-small@desktop-large```
					 * Apply the padding bottom "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-medium-small\@desktop-large {
    padding-bottom: 2.66667rem;
  }
  /**
					 * @name  			```.p-t-medium-small@desktop-large```
					 * Apply the padding top "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-medium-small\@desktop-large {
    padding-top: 2.66667rem;
  }
  /**
					 * @name  			```.p-l-medium-small@desktop-large```
					 * Apply the padding left "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-medium-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-medium-small\@desktop-large {
    padding-left: 2.66667rem;
  }
  /**
					 * @name  			```.p-r-medium-small@desktop-large```
					 * Apply the padding right "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-medium-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-medium-small\@desktop-large {
    padding-right: 2.66667rem;
  }
  /**
					 * @name  			```.p-s-medium-small@desktop-large```
					 * Apply the padding side "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-medium-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-medium-small\@desktop-large {
    padding-left: 2.66667rem;
    padding-right: 2.66667rem;
  }
  /**
					 * @name  			```.m-medium-small@desktop-large```
					 * Apply the padding "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-medium-small@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium-small\@desktop-large {
    padding: 2.66667rem;
  }
  /**
					 * @name  			```.no-p-b-medium-small@desktop-large```
					 * Remove the padding bottom "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-medium-small\@desktop-large {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-medium-small@desktop-large```
					 * Remove the padding top "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-medium-small\@desktop-large {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-medium-small@desktop-large```
					 * Remove the padding left "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-medium-small\@desktop-large {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-medium-small@desktop-large```
					 * Remove the padding top "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-medium-small\@desktop-large {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-medium-small@desktop-large```
					 * Remove the padding side "medium-small" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-medium-small@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-medium-small\@desktop-large {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  /**
					 * @name  			```.m-b-medium@desktop-large```
					 * Apply the margin bottom "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-medium\@desktop-large {
    margin-bottom: 5.33333rem;
  }
  /**
					 * @name  			```.m-t-medium@desktop-large```
					 * Apply the margin top "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-medium\@desktop-large {
    margin-top: 5.33333rem;
  }
  /**
					 * @name  			```.m-l-medium@desktop-large```
					 * Apply the margin left "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-medium@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-medium\@desktop-large {
    margin-left: 5.33333rem;
  }
  /**
					 * @name  			```.m-r-medium@desktop-large```
					 * Apply the margin right "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-medium@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-medium\@desktop-large {
    margin-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-s-medium@desktop-large```
					 * Apply the margin side "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-medium@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-medium\@desktop-large {
    margin-left: 5.33333rem;
    margin-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-medium@desktop-large```
					 * Apply the margin "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-medium@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium\@desktop-large {
    margin: 5.33333rem;
  }
  /**
					 * @name  			```.no-m-b-medium@desktop-large```
					 * Remove the margin bottom "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-medium\@desktop-large {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-medium@desktop-large```
					 * Remove the margin top "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-medium\@desktop-large {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-medium@desktop-large```
					 * Remove the margin left "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-medium\@desktop-large {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-medium@desktop-large```
					 * Remove the margin top "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-medium\@desktop-large {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-medium@desktop-large```
					 * Remove the margin side "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-medium\@desktop-large {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-medium@desktop-large```
					 * Apply the padding bottom "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-medium\@desktop-large {
    padding-bottom: 5.33333rem;
  }
  /**
					 * @name  			```.p-t-medium@desktop-large```
					 * Apply the padding top "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-medium\@desktop-large {
    padding-top: 5.33333rem;
  }
  /**
					 * @name  			```.p-l-medium@desktop-large```
					 * Apply the padding left "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-medium@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-medium\@desktop-large {
    padding-left: 5.33333rem;
  }
  /**
					 * @name  			```.p-r-medium@desktop-large```
					 * Apply the padding right "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-medium@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-medium\@desktop-large {
    padding-right: 5.33333rem;
  }
  /**
					 * @name  			```.p-s-medium@desktop-large```
					 * Apply the padding side "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-medium@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-medium\@desktop-large {
    padding-left: 5.33333rem;
    padding-right: 5.33333rem;
  }
  /**
					 * @name  			```.m-medium@desktop-large```
					 * Apply the padding "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-medium@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-medium\@desktop-large {
    padding: 5.33333rem;
  }
  /**
					 * @name  			```.no-p-b-medium@desktop-large```
					 * Remove the padding bottom "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-medium\@desktop-large {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-medium@desktop-large```
					 * Remove the padding top "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-medium\@desktop-large {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-medium@desktop-large```
					 * Remove the padding left "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-medium\@desktop-large {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-medium@desktop-large```
					 * Remove the padding top "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-medium\@desktop-large {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-medium@desktop-large```
					 * Remove the padding side "medium" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-medium@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-medium\@desktop-large {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  /**
					 * @name  			```.m-b-big@desktop-large```
					 * Apply the margin bottom "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-big\@desktop-large {
    margin-bottom: 20rem;
  }
  /**
					 * @name  			```.m-t-big@desktop-large```
					 * Apply the margin top "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-big\@desktop-large {
    margin-top: 20rem;
  }
  /**
					 * @name  			```.m-l-big@desktop-large```
					 * Apply the margin left "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-big@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-big\@desktop-large {
    margin-left: 20rem;
  }
  /**
					 * @name  			```.m-r-big@desktop-large```
					 * Apply the margin right "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-big@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-big\@desktop-large {
    margin-right: 20rem;
  }
  /**
					 * @name  			```.m-s-big@desktop-large```
					 * Apply the margin side "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-big@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-big\@desktop-large {
    margin-left: 20rem;
    margin-right: 20rem;
  }
  /**
					 * @name  			```.m-big@desktop-large```
					 * Apply the margin "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-big@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-big\@desktop-large {
    margin: 20rem;
  }
  /**
					 * @name  			```.no-m-b-big@desktop-large```
					 * Remove the margin bottom "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-big\@desktop-large {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-big@desktop-large```
					 * Remove the margin top "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-big\@desktop-large {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-big@desktop-large```
					 * Remove the margin left "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-big\@desktop-large {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-big@desktop-large```
					 * Remove the margin top "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-big\@desktop-large {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-big@desktop-large```
					 * Remove the margin side "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-big\@desktop-large {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-big@desktop-large```
					 * Apply the padding bottom "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-big\@desktop-large {
    padding-bottom: 20rem;
  }
  /**
					 * @name  			```.p-t-big@desktop-large```
					 * Apply the padding top "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-big\@desktop-large {
    padding-top: 20rem;
  }
  /**
					 * @name  			```.p-l-big@desktop-large```
					 * Apply the padding left "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-big@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-big\@desktop-large {
    padding-left: 20rem;
  }
  /**
					 * @name  			```.p-r-big@desktop-large```
					 * Apply the padding right "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-big@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-big\@desktop-large {
    padding-right: 20rem;
  }
  /**
					 * @name  			```.p-s-big@desktop-large```
					 * Apply the padding side "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-big@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-big\@desktop-large {
    padding-left: 20rem;
    padding-right: 20rem;
  }
  /**
					 * @name  			```.m-big@desktop-large```
					 * Apply the padding "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-big@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-big\@desktop-large {
    padding: 20rem;
  }
  /**
					 * @name  			```.no-p-b-big@desktop-large```
					 * Remove the padding bottom "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-big\@desktop-large {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-big@desktop-large```
					 * Remove the padding top "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-big\@desktop-large {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-big@desktop-large```
					 * Remove the padding left "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-big\@desktop-large {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-big@desktop-large```
					 * Remove the padding top "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-big\@desktop-large {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-big@desktop-large```
					 * Remove the padding side "big" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-big@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-big\@desktop-large {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  /**
					 * @name  			```.m-b-bigger@desktop-large```
					 * Apply the margin bottom "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-b-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-b-bigger\@desktop-large {
    margin-bottom: 53.33333rem;
  }
  /**
					 * @name  			```.m-t-bigger@desktop-large```
					 * Apply the margin top "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-t-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-t-bigger\@desktop-large {
    margin-top: 53.33333rem;
  }
  /**
					 * @name  			```.m-l-bigger@desktop-large```
					 * Apply the margin left "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-l-bigger@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-l-bigger\@desktop-large {
    margin-left: 53.33333rem;
  }
  /**
					 * @name  			```.m-r-bigger@desktop-large```
					 * Apply the margin right "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-r-bigger@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-r-bigger\@desktop-large {
    margin-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-s-bigger@desktop-large```
					 * Apply the margin side "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-s-bigger@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-s-bigger\@desktop-large {
    margin-left: 53.33333rem;
    margin-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-bigger@desktop-large```
					 * Apply the margin "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="m-bigger@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-bigger\@desktop-large {
    margin: 53.33333rem;
  }
  /**
					 * @name  			```.no-m-b-bigger@desktop-large```
					 * Remove the margin bottom "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-b-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-b-bigger\@desktop-large {
    margin-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-m-t-bigger@desktop-large```
					 * Remove the margin top "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-t-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-t-bigger\@desktop-large {
    margin-top: 0 !important;
  }
  /**
					 * @name  			```.no-m-l-bigger@desktop-large```
					 * Remove the margin left "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-l-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-l-bigger\@desktop-large {
    margin-left: 0 !important;
  }
  /**
					 * @name  			```.no-m-r-bigger@desktop-large```
					 * Remove the margin top "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-r-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-r-bigger\@desktop-large {
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.no-m-s-bigger@desktop-large```
					 * Remove the margin side "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Margins
					 * @example 		html
					 * <div class="no-m-s-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-m-s-bigger\@desktop-large {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /**
					 * @name  			```.p-b-bigger@desktop-large```
					 * Apply the padding bottom "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-b-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-b-bigger\@desktop-large {
    padding-bottom: 53.33333rem;
  }
  /**
					 * @name  			```.p-t-bigger@desktop-large```
					 * Apply the padding top "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-t-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-t-bigger\@desktop-large {
    padding-top: 53.33333rem;
  }
  /**
					 * @name  			```.p-l-bigger@desktop-large```
					 * Apply the padding left "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-l-bigger@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-l-bigger\@desktop-large {
    padding-left: 53.33333rem;
  }
  /**
					 * @name  			```.p-r-bigger@desktop-large```
					 * Apply the padding right "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-r-bigger@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-r-bigger\@desktop-large {
    padding-right: 53.33333rem;
  }
  /**
					 * @name  			```.p-s-bigger@desktop-large```
					 * Apply the padding side "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="p-s-bigger@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .p-s-bigger\@desktop-large {
    padding-left: 53.33333rem;
    padding-right: 53.33333rem;
  }
  /**
					 * @name  			```.m-bigger@desktop-large```
					 * Apply the padding "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="m-bigger@desktop-large" style="display:inline-block; background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="display:inline-block; background:#2D8067; width:100px; height:5px"></div>
					 */
  .m-bigger\@desktop-large {
    padding: 53.33333rem;
  }
  /**
					 * @name  			```.no-p-b-bigger@desktop-large```
					 * Remove the padding bottom "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-b-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-b-bigger\@desktop-large {
    padding-bottom: 0 !important;
  }
  /**
					 * @name  			```.no-p-t-bigger@desktop-large```
					 * Remove the padding top "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-t-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-t-bigger\@desktop-large {
    padding-top: 0 !important;
  }
  /**
					 * @name  			```.no-p-l-bigger@desktop-large```
					 * Remove the padding left "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-l-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-l-bigger\@desktop-large {
    padding-left: 0 !important;
  }
  /**
					 * @name  			```.no-p-r-bigger@desktop-large```
					 * Remove the padding top "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-r-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-r-bigger\@desktop-large {
    padding-right: 0 !important;
  }
  /**
					 * @name  			```.no-p-s-bigger@desktop-large```
					 * Remove the padding side "bigger" on the "desktop-large" state
					 * @styleguide 		Layout / Responsive Paddings
					 * @example 		html
					 * <div class="no-p-s-bigger@desktop-large" style="background:#82a8bb; width:100px; height:5px"></div>
					 * <div style="background:#2D8067; width:100px; height:5px"></div>
					 */
  .no-p-s-bigger\@desktop-large {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/**
 * Text format styling
 */
.hr p {
  max-width: 100ex;
}

.t-center .hr p {
  margin-left: auto;
  margin-right: auto;
}

.t-right .hr p {
  margin-left: auto;
}

.tf .alignleft {
  float: left;
  margin-right: 1.33333rem;
  margin-bottom: 0.66667rem;
}

.tf .alignright {
  float: right;
  margin-left: 1.33333rem;
  margin-bottom: 0.66667rem;
}

.tf .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.tf .wp-caption {
  background-color: #f2f2f2;
}

.tf .wp-caption img {
  width: 100%;
}

.tf .wp-caption a:after {
  display: none;
}

.tf .wp-caption p {
  margin-bottom: 0;
  padding: 0.41667rem 0.83333rem;
  font-size: 1.08333rem;
  font-style: italic;
}

.tf strong, .tf b {
  font-family: bold;
}

.tf em {
  font-style: italic;
}

.tf p a {
  display: inline !important;
  text-decoration: underline;
}

.tf ol {
  counter-reset: s-list;
}

.tf ol li {
  padding-left: 3.33333rem;
  position: relative;
  margin-bottom: 1.33333rem;
  line-height: 1.6;
}

.tf ol li:before {
  content: counter(s-list, decimal);
  counter-increment: s-list;
}

.tf ol li:before {
  left: 1.33333rem;
  top: 0.16667rem;
  color: #2e2e2e !important;
  font-size: 1.16667rem !important;
}

.tf ol li:before {
  position: absolute;
  display: block;
}

.tf ol li > ul,
.tf ol li > ol,
.tf ol li > dl {
  margin-left: 0;
  margin-bottom: 0;
}

.tf ol li:hover:before {
  color: #82a8bb !important;
}

.tf ul {
  counter-reset: s-list;
}

.tf ul li {
  padding-left: 3.33333rem;
  position: relative;
  margin-bottom: 1.33333rem;
  line-height: 1.6;
}

.tf ul li:before {
  content: counter(s-list, disc);
  counter-increment: s-list;
}

.tf ul li:before {
  left: 1.33333rem;
  top: -0.83333rem;
  color: #2e2e2e !important;
  font-size: 2.08333rem !important;
}

.tf ul li:before {
  position: absolute;
  display: block;
}

.tf ul li > ul,
.tf ul li > ol,
.tf ul li > dl {
  margin-left: 0;
  margin-bottom: 0;
}

.tf ul li:hover:before {
  color: #82a8bb !important;
}

.tf blockquote {
  padding-left: 1.33333rem;
  border-left: 0.25rem solid #f2f2f2;
  font-size: 2.5rem;
  font-style: italic;
}

.cs-light .h1, [color-schema="light"] .h1, .cs-lighter .h1, [color-schema="lighter"] .h1, .cs-light .tf h1, [color-schema="light"] .tf h1, .cs-lighter .tf h1, [color-schema="lighter"] .tf h1, .cs-light
.h2, [color-schema="light"]
.h2, .cs-lighter
.h2, [color-schema="lighter"]
.h2, .cs-light .tf h2, [color-schema="light"] .tf h2, .cs-lighter .tf h2, [color-schema="lighter"] .tf h2, .cs-light
.h3, [color-schema="light"]
.h3, .cs-lighter
.h3, [color-schema="lighter"]
.h3, .cs-light .tf h3, [color-schema="light"] .tf h3, .cs-lighter .tf h3, [color-schema="lighter"] .tf h3, .cs-light
.h4, [color-schema="light"]
.h4, .cs-lighter
.h4, [color-schema="lighter"]
.h4, .cs-light .tf h4, [color-schema="light"] .tf h4, .cs-lighter .tf h4, [color-schema="lighter"] .tf h4, .cs-light
.h5, [color-schema="light"]
.h5, .cs-lighter
.h5, [color-schema="lighter"]
.h5, .cs-light .tf h5, [color-schema="light"] .tf h5, .cs-lighter .tf h5, [color-schema="lighter"] .tf h5, .cs-light
.h6, [color-schema="light"]
.h6, .cs-lighter
.h6, [color-schema="lighter"]
.h6, .cs-light .tf h6, [color-schema="light"] .tf h6, .cs-lighter .tf h6, [color-schema="lighter"] .tf h6 {
  color: white;
}

.cs-light .p, [color-schema="light"] .p, .cs-lighter .p, [color-schema="lighter"] .p, .cs-light .tf p, [color-schema="light"] .tf p, .cs-lighter .tf p, [color-schema="lighter"] .tf p {
  color: rgba(255, 255, 255, 0.6);
}

.h1,
.tf h1 {
  position: relative;
  font-family: thin;
  color: #2e2e2e;
  font-size: 3rem;
  line-height: 1.2;
}

@media screen and (min-width: 768px) {
  .h1,
  .tf h1 {
    font-size: 4rem;
  }
}

@media screen and (min-width: 992px) {
  .h1,
  .tf h1 {
    font-size: 5.16667rem;
  }
}

@media all {
  .ua-safari .h1, .ua-safari
  .tf h1 {
    font-family: extra-light;
  }
}

.h2,
.tf h2 {
  font-family: thin;
  color: #2e2e2e;
  font-size: 2.5rem;
}

@media screen and (min-width: 768px) {
  .h2,
  .tf h2 {
    font-size: 4.16667rem;
  }
}

@media all {
  .ua-safari .h2, .ua-safari
  .tf h2 {
    font-family: extra-light;
  }
}

.h3,
.tf h3 {
  font-family: thin;
  color: #2e2e2e;
  font-size: 2.16667rem;
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .h3,
  .tf h3 {
    font-size: 3rem;
  }
}

@media all {
  .ua-safari .h3, .ua-safari
  .tf h3 {
    font-family: extra-light;
  }
}

.h4,
.tf h4 {
  font-family: medium;
  color: #2e2e2e;
  font-size: 1.66667rem;
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .h4,
  .tf h4 {
    font-size: 2.33333rem;
  }
}

@media all {
  .ua-safari .h4, .ua-safari
  .tf h4 {
    font-family: bold;
  }
}

.h5,
.tf h5 {
  font-family: thin;
  color: rgba(46, 46, 46, 0.5);
  font-size: 2.16667rem;
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .h5,
  .tf h5 {
    font-size: 2.66667rem;
  }
}

@media all {
  .ua-safari .h5, .ua-safari
  .tf h5 {
    font-family: extra-light;
  }
}

.h6,
.tf h6 {
  font-family: bold;
  color: #2e2e2e;
  font-size: 1.16667rem;
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .h6,
  .tf h6 {
    font-size: 1.33333rem;
  }
}

.p,
.tf p {
  color: #8d9092;
  line-height: 1.6;
}

@media all {
  .ua-safari .p, .ua-safari
  .tf p {
    font-family: regular;
  }
}

.p--lead,
.tf p.lead {
  color: rgba(46, 46, 46, 0.6);
  font-size: 1.33333rem;
  line-height: 1.6;
}

@media screen and (min-width: 768px) {
  .p--lead,
  .tf p.lead {
    font-size: 1.66667rem;
  }
}

a {
  text-decoration: none;
}

.link, .a,
.tf a {
  display: inline-block;
  position: relative;
}

.link:after, .a:after,
.tf a:after {
  content: '';
  width: 100%;
  height: 0.08333rem;
  position: absolute;
  bottom: -.2em;
  left: 0;
  background-color: currentColor;
  opacity: .5;
}

.a,
.tf a {
  color: #82a8bb;
}

/**
 * Vertical rhythme styling
 */
.vr h1, .vr h2, .vr h3, .vr h4, .vr h5, .vr h6,
.vr p,
.vr ul, .vr ol, .vr dl,
.vr blockquote,
.vr [class*="component-"] {
  margin-bottom: 2rem;
}

.vr h1:not(:first-child), .vr h2:not(:first-child), .vr h3:not(:first-child), .vr h4:not(:first-child), .vr h5:not(:first-child), .vr h6:not(:first-child) {
  margin-top: 2rem;
}

.vr > *:last-child {
  margin-bottom: 0;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: '';
  content: none;
}

q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
		 * @styleguide 	Colors / Swatches
		 * @name 		default
		 * @color 		#2e2e2e
		 * @display 	color
		 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		title
		 * @color 		#2e2e2e
		 * @display 	color
		 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		text
		 * @color 		#2e2e2e
		 * @display 	color
		 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		link
		 * @color 		#82a8bb
		 * @display 	color
		 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		primary
		 * @color 		#82a8bb
		 * @display 	color
		 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		secondary
		 * @color 		#2D8067
		 * @display 	color
		 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		success
		 * @color 		#5cb85c
		 * @display 	color
		 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		warning
		 * @color 		#f0ad4e
		 * @display 	color
		 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		error
		 * @color 		#d9534f
		 * @display 	color
		 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		info
		 * @color 		#2199e8
		 * @display 	color
		 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		white
		 * @color 		#fff
		 * @display 	color
		 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		grey
		 * @color 		#f4f4f4
		 * @display 	color
		 */
/**
				 * @styleguide 	Colors / Swatches
				 * @name 		grey--dark
				 * @color 		#dbdbdb
				 * @display 	color
				 */
/**
				 * @styleguide 	Colors / Swatches
				 * @name 		grey--light
				 * @color 		#fbfbfb
				 * @display 	color
				 */
/**
		 * @styleguide 	Colors / Swatches
		 * @name 		border
		 * @color 		#f2f2f2
		 * @display 	color
		 */
.s-settings:after {
  content: '{"unit": "rem", "reset": true, "border-box": true, "sizes": {"smaller": 0.3, "small": 0.6, "default": 1, "medium": 1.4, "big": 2, "bigger": 3}, "typography": {"font-family": "regular", "font-size": "12px", "font-sizes": null, "line-letters-count": 55, "font-format": {"eot": "embedded-opentype", "woff2": "woff2", "woff": "woff", "ttf": "truetype", "otf": "opentype", "svg": "svg", "svgz": "svgz"}}, "look-and-feel": {"border-radius": "0em", "padding-vertical": "1.4em", "padding-horizontal": "0.8em", "disabled-opacity": 0.5, "line-height": 1.4}, "spaces": {"default": "16px", "smaller": "4px", "small": "8px", "medium-small": "32px", "medium": "64px", "big": "240px", "bigger": "640px"}, "colors": {"default": {"color": "#2e2e2e"}, "title": {"color": "default"}, "text": {"color": "#2e2e2e"}, "link": {"color": "primary"}, "primary": {"color": "#82a8bb"}, "secondary": {"color": "#2D8067"}, "success": {"color": "#5cb85c"}, "warning": {"color": "#f0ad4e"}, "error": {"color": "#d9534f"}, "info": {"color": "#2199e8"}, "white": {"color": "#fff"}, "grey": {"color": "#f4f4f4", "modifiers": {"dark": "#f4f4f4", "light": "#f4f4f4"}}, "border": {"color": "#f2f2f2"}}, "modular-scale": {"base": "1rem", "ratio": 1.33}, "text-format": {"scope-class": "tf"}, "vertical-rhythme": {"enabled": true, "scope-class": "vr"}, "BEM": {"standelone-modifier": false, "element-separator": "__", "modifier-separator": "--"}, "fonts": {"default": {"font-family": ["Helvetica Neue", "Helvetica", "Verdana", "Arial", "sans-serif"], "font-weight": "normal", "cap-height": 0.65}, "quote": {"font-family": ["Palatino", "Times", "Georgia", "serif"], "font-weight": "normal", "cap-height": 0.65}, "code": {"font-family": ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"], "font-weight": "normal", "cap-height": 0.65}, "thin": {"src": "../fonts/gt-walsheim-ultra-light/gt-walsheim-ultra-light.woff", "extensions": ["woff", "woff2"]}, "extra-light": {"src": "../fonts/gt-walsheim-ultra-light/gt-walsheim-ultra-light.woff", "extensions": ["woff", "woff2"]}, "light": {"src": "../fonts/gt-walsheim-light/gt-walsheim-light.woff", "extensions": ["woff", "woff2"]}, "regular": {"src": "../fonts/gt-walsheim-regular/gt-walsheim-regular.woff", "extensions": ["woff", "woff2"]}, "medium": {"src": "../fonts/gt-walsheim-medium/gt-walsheim-medium.woff", "extensions": ["woff", "woff2"]}, "bold": {"src": "../fonts/gt-walsheim-bold/gt-walsheim-bold.woff", "extensions": ["woff", "woff2"]}, "din-next-stencil-bold": {"src": "../fonts/din-next-stencil/din-next-stencil.ttf", "extensions": "ttf"}, "din-next-stencil-light": {"src": "../fonts/din-next-stencil/din-next-stencil-light.ttf", "extensions": "ttf"}, "din-next-stencil-medium": {"src": "../fonts/din-next-stencil-medium/din-next-stencil-medium.ttf", "extensions": "ttf"}, "din-next-stencil-ultra-light": {"src": "../fonts/din-next-stencil-ultra-light/din-next-stencil-ultra-light.ttf", "extensions": "ttf"}, "din-next-stencil-regular": {"src": "../fonts/din-next-stencil-regular/din-next-stencil-regular.ttf", "extensions": "ttf"}, "din-next-stencil-heavy": {"src": "../fonts/din-next-stencil-heavy/din-next-stencil-heavy.ttf", "extensions": "ttf"}, "din-next-stencil-black": {"src": "../fonts/din-next-stencil-black/din-next-stencil-black.ttf", "extensions": "ttf"}, "gt-walsheim-bold": {"src": "../fonts/gt-walsheim-bold/gt-walsheim-bold.woff", "extensions": ["woff", "woff2"]}, "gt-walsheim-light": {"src": "../fonts/gt-walsheim-light/gt-walsheim-light.woff", "extensions": ["woff", "woff2"]}, "gt-walsheim-medium": {"src": "../fonts/gt-walsheim-medium/gt-walsheim-medium.woff", "extensions": ["woff", "woff2"]}, "gt-walsheim-ultra-light": {"src": "../fonts/gt-walsheim-ultra-light/gt-walsheim-ultra-light.woff", "extensions": ["woff", "woff2"]}, "gt-walsheim-regular": {"src": "../fonts/gt-walsheim-regular/gt-walsheim-regular.woff", "extensions": ["woff", "woff2"]}}, "filters": [], "transitions": {"fast": ["all", "0.1s", "ease-in-out", "0s"], "default": ["all", "0.2s", "ease-in-out", "0s"], "slow": ["all", "0.5s", "ease-in-out", "0s"], "topic-card": ["all", "0.3s", "ease-out"], "slideshow": ["all", "0.5s", "cubic-bezier(0.38, 0.01, 0, 1)", "0s"]}}';
  display: none;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

a {
  color: inherit;
}

html {
  font-size: 12Px;
  color: #2e2e2e;
  font-family: regular;
}

body {
  color: #2e2e2e;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
				 * @name   			default
				 * @styleguide 		Fonts / Faces
				 * @display 		font
				 * @font-family 	Helvetica Neue, Helvetica, Verdana, Arial, sans-serif
				 * @font-style 		
				 * @font-weight 	normal
				 */
/**
				 * @name   			quote
				 * @styleguide 		Fonts / Faces
				 * @display 		font
				 * @font-family 	Palatino, Times, Georgia, serif
				 * @font-style 		
				 * @font-weight 	normal
				 */
/**
				 * @name   			code
				 * @styleguide 		Fonts / Faces
				 * @display 		font
				 * @font-family 	Menlo, Monaco, Consolas, Courier New, monospace
				 * @font-style 		
				 * @font-weight 	normal
				 */
/**
	 * @name   			thin
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	thin
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "thin";
  src: url("../fonts/gt-walsheim-ultra-light/gt-walsheim-ultra-light.woff") format("woff"), url("../fonts/gt-walsheim-ultra-light/gt-walsheim-ultra-light.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			extra-light
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	extra-light
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "extra-light";
  src: url("../fonts/gt-walsheim-ultra-light/gt-walsheim-ultra-light.woff") format("woff"), url("../fonts/gt-walsheim-ultra-light/gt-walsheim-ultra-light.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			light
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	light
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "light";
  src: url("../fonts/gt-walsheim-light/gt-walsheim-light.woff") format("woff"), url("../fonts/gt-walsheim-light/gt-walsheim-light.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			regular
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	regular
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "regular";
  src: url("../fonts/gt-walsheim-regular/gt-walsheim-regular.woff") format("woff"), url("../fonts/gt-walsheim-regular/gt-walsheim-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			medium
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	medium
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "medium";
  src: url("../fonts/gt-walsheim-medium/gt-walsheim-medium.woff") format("woff"), url("../fonts/gt-walsheim-medium/gt-walsheim-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			bold
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	bold
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "bold";
  src: url("../fonts/gt-walsheim-bold/gt-walsheim-bold.woff") format("woff"), url("../fonts/gt-walsheim-bold/gt-walsheim-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			din-next-stencil-bold
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	din-next-stencil-bold
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "din-next-stencil-bold";
  src: url("../fonts/din-next-stencil/din-next-stencil.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			din-next-stencil-light
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	din-next-stencil-light
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "din-next-stencil-light";
  src: url("../fonts/din-next-stencil/din-next-stencil-light.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			din-next-stencil-medium
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	din-next-stencil-medium
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "din-next-stencil-medium";
  src: url("../fonts/din-next-stencil-medium/din-next-stencil-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			din-next-stencil-ultra-light
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	din-next-stencil-ultra-light
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "din-next-stencil-ultra-light";
  src: url("../fonts/din-next-stencil-ultra-light/din-next-stencil-ultra-light.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			din-next-stencil-regular
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	din-next-stencil-regular
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "din-next-stencil-regular";
  src: url("../fonts/din-next-stencil-regular/din-next-stencil-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			din-next-stencil-heavy
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	din-next-stencil-heavy
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "din-next-stencil-heavy";
  src: url("../fonts/din-next-stencil-heavy/din-next-stencil-heavy.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			din-next-stencil-black
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	din-next-stencil-black
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "din-next-stencil-black";
  src: url("../fonts/din-next-stencil-black/din-next-stencil-black.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			gt-walsheim-bold
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	gt-walsheim-bold
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "gt-walsheim-bold";
  src: url("../fonts/gt-walsheim-bold/gt-walsheim-bold.woff") format("woff"), url("../fonts/gt-walsheim-bold/gt-walsheim-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			gt-walsheim-light
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	gt-walsheim-light
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "gt-walsheim-light";
  src: url("../fonts/gt-walsheim-light/gt-walsheim-light.woff") format("woff"), url("../fonts/gt-walsheim-light/gt-walsheim-light.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			gt-walsheim-medium
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	gt-walsheim-medium
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "gt-walsheim-medium";
  src: url("../fonts/gt-walsheim-medium/gt-walsheim-medium.woff") format("woff"), url("../fonts/gt-walsheim-medium/gt-walsheim-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			gt-walsheim-ultra-light
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	gt-walsheim-ultra-light
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "gt-walsheim-ultra-light";
  src: url("../fonts/gt-walsheim-ultra-light/gt-walsheim-ultra-light.woff") format("woff"), url("../fonts/gt-walsheim-ultra-light/gt-walsheim-ultra-light.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/**
	 * @name   			gt-walsheim-regular
	 * @styleguide 		Fonts / Faces
	 * @display 		font
	 * @font-family 	gt-walsheim-regular
	 * @font-style 		normal
	 * @font-weight 	normal
	 */
@font-face {
  font-family: "gt-walsheim-regular";
  src: url("../fonts/gt-walsheim-regular/gt-walsheim-regular.woff") format("woff"), url("../fonts/gt-walsheim-regular/gt-walsheim-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

/**
			 * @name 	```.tr-fast```
			 * @styleguide  	Helpers / Transitions
			 * @example 	html
			 * <div class="tr-fast">
			 * 	I'm transitionned with fast
			 * </div>
			 */
.tr-fast {
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

/**
			 * @name 	```.tr-default```
			 * @styleguide  	Helpers / Transitions
			 * @example 	html
			 * <div class="tr-default">
			 * 	I'm transitionned with default
			 * </div>
			 */
.tr-default {
  transition: all 0.2s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

/**
			 * @name 	```.tr-slow```
			 * @styleguide  	Helpers / Transitions
			 * @example 	html
			 * <div class="tr-slow">
			 * 	I'm transitionned with slow
			 * </div>
			 */
.tr-slow {
  transition: all 0.5s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

/**
			 * @name 	```.tr-topic-card```
			 * @styleguide  	Helpers / Transitions
			 * @example 	html
			 * <div class="tr-topic-card">
			 * 	I'm transitionned with topic-card
			 * </div>
			 */
.tr-topic-card {
  transition: all 0.3s ease-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

/**
			 * @name 	```.tr-slideshow```
			 * @styleguide  	Helpers / Transitions
			 * @example 	html
			 * <div class="tr-slideshow">
			 * 	I'm transitionned with slideshow
			 * </div>
			 */
.tr-slideshow {
  transition: all 0.5s cubic-bezier(0.38, 0.01, 0, 1) 0s, outline-color 0s linear 0s;
  outline-color: black;
}

/**
			 * @name 	```.f-default```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-default">
			 * 	I have the font "default" applied
			 * </div>
			 */
.f-default {
  font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
  font-weight: normal;
}

/**
			 * @name 	```.f-quote```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-quote">
			 * 	I have the font "quote" applied
			 * </div>
			 */
.f-quote {
  font-family: Palatino, Times, Georgia, serif;
  font-weight: normal;
}

/**
			 * @name 	```.f-code```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-code">
			 * 	I have the font "code" applied
			 * </div>
			 */
.f-code {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-weight: normal;
}

/**
			 * @name 	```.f-thin```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-thin">
			 * 	I have the font "thin" applied
			 * </div>
			 */
.f-thin {
  font-family: "thin";
}

/**
			 * @name 	```.f-extra-light```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-extra-light">
			 * 	I have the font "extra-light" applied
			 * </div>
			 */
.f-extra-light {
  font-family: extra-light;
}

/**
			 * @name 	```.f-light```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-light">
			 * 	I have the font "light" applied
			 * </div>
			 */
.f-light {
  font-family: light;
}

/**
			 * @name 	```.f-regular```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-regular">
			 * 	I have the font "regular" applied
			 * </div>
			 */
.f-regular {
  font-family: regular;
}

/**
			 * @name 	```.f-medium```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-medium">
			 * 	I have the font "medium" applied
			 * </div>
			 */
.f-medium {
  font-family: medium;
}

/**
			 * @name 	```.f-bold```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-bold">
			 * 	I have the font "bold" applied
			 * </div>
			 */
.f-bold {
  font-family: bold;
}

/**
			 * @name 	```.f-din-next-stencil-bold```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-din-next-stencil-bold">
			 * 	I have the font "din-next-stencil-bold" applied
			 * </div>
			 */
.f-din-next-stencil-bold {
  font-family: din-next-stencil-bold;
}

/**
			 * @name 	```.f-din-next-stencil-light```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-din-next-stencil-light">
			 * 	I have the font "din-next-stencil-light" applied
			 * </div>
			 */
.f-din-next-stencil-light {
  font-family: din-next-stencil-light;
}

/**
			 * @name 	```.f-din-next-stencil-medium```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-din-next-stencil-medium">
			 * 	I have the font "din-next-stencil-medium" applied
			 * </div>
			 */
.f-din-next-stencil-medium {
  font-family: din-next-stencil-medium;
}

/**
			 * @name 	```.f-din-next-stencil-ultra-light```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-din-next-stencil-ultra-light">
			 * 	I have the font "din-next-stencil-ultra-light" applied
			 * </div>
			 */
.f-din-next-stencil-ultra-light {
  font-family: din-next-stencil-ultra-light;
}

/**
			 * @name 	```.f-din-next-stencil-regular```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-din-next-stencil-regular">
			 * 	I have the font "din-next-stencil-regular" applied
			 * </div>
			 */
.f-din-next-stencil-regular {
  font-family: din-next-stencil-regular;
}

/**
			 * @name 	```.f-din-next-stencil-heavy```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-din-next-stencil-heavy">
			 * 	I have the font "din-next-stencil-heavy" applied
			 * </div>
			 */
.f-din-next-stencil-heavy {
  font-family: din-next-stencil-heavy;
}

/**
			 * @name 	```.f-din-next-stencil-black```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-din-next-stencil-black">
			 * 	I have the font "din-next-stencil-black" applied
			 * </div>
			 */
.f-din-next-stencil-black {
  font-family: din-next-stencil-black;
}

/**
			 * @name 	```.f-gt-walsheim-bold```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-gt-walsheim-bold">
			 * 	I have the font "gt-walsheim-bold" applied
			 * </div>
			 */
.f-gt-walsheim-bold {
  font-family: gt-walsheim-bold;
}

/**
			 * @name 	```.f-gt-walsheim-light```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-gt-walsheim-light">
			 * 	I have the font "gt-walsheim-light" applied
			 * </div>
			 */
.f-gt-walsheim-light {
  font-family: gt-walsheim-light;
}

/**
			 * @name 	```.f-gt-walsheim-medium```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-gt-walsheim-medium">
			 * 	I have the font "gt-walsheim-medium" applied
			 * </div>
			 */
.f-gt-walsheim-medium {
  font-family: gt-walsheim-medium;
}

/**
			 * @name 	```.f-gt-walsheim-ultra-light```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-gt-walsheim-ultra-light">
			 * 	I have the font "gt-walsheim-ultra-light" applied
			 * </div>
			 */
.f-gt-walsheim-ultra-light {
  font-family: gt-walsheim-ultra-light;
}

/**
			 * @name 	```.f-gt-walsheim-regular```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-gt-walsheim-regular">
			 * 	I have the font "gt-walsheim-regular" applied
			 * </div>
			 */
.f-gt-walsheim-regular {
  font-family: gt-walsheim-regular;
}

/**
			 * @name 	```.m-b-smaller```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-b-smaller" style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-b-smaller {
  margin-bottom: 0.33333rem;
}

/**
			 * @name 	```.m-t-smaller```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div class="m-t-smaller" style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-t-smaller {
  margin-top: 0.33333rem;
}

/**
			 * @name 	```.m-l-smaller```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div class="m-l-smaller" style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-l-smaller {
  margin-left: 0.33333rem;
}

/**
			 * @name 	```.m-r-smaller```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-r-smaller" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-r-smaller {
  margin-right: 0.33333rem;
}

/**
			 * @name 	```.m-s-smaller```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-s-smaller" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-s-smaller {
  margin-left: 0.33333rem;
  margin-right: 0.33333rem;
}

/**
			 * @name 	```.p-smaller```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-smaller" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-smaller {
  padding: 0.33333rem;
}

/**
			 * @name 	```.p-b-smaller```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-b-smaller" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-b-smaller {
  padding-bottom: 0.33333rem;
}

/**
			 * @name 	```.p-t-smaller```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-t-smaller" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-t-smaller {
  padding-top: 0.33333rem;
}

/**
			 * @name 	```.p-l-smaller```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-l-smaller" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-l-smaller {
  padding-left: 0.33333rem;
}

/**
			 * @name 	```.p-r-smaller```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-r-smaller" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-r-smaller {
  padding-right: 0.33333rem;
}

/**
			 * @name 	```.p-s-smaller```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-s-smaller" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-s-smaller {
  padding-left: 0.33333rem;
  padding-right: 0.33333rem;
}

/**
			 * @name 	```.m-b-small```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-b-small" style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-b-small {
  margin-bottom: 0.66667rem;
}

/**
			 * @name 	```.m-t-small```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div class="m-t-small" style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-t-small {
  margin-top: 0.66667rem;
}

/**
			 * @name 	```.m-l-small```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div class="m-l-small" style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-l-small {
  margin-left: 0.66667rem;
}

/**
			 * @name 	```.m-r-small```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-r-small" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-r-small {
  margin-right: 0.66667rem;
}

/**
			 * @name 	```.m-s-small```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-s-small" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-s-small {
  margin-left: 0.66667rem;
  margin-right: 0.66667rem;
}

/**
			 * @name 	```.p-small```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-small" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-small {
  padding: 0.66667rem;
}

/**
			 * @name 	```.p-b-small```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-b-small" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-b-small {
  padding-bottom: 0.66667rem;
}

/**
			 * @name 	```.p-t-small```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-t-small" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-t-small {
  padding-top: 0.66667rem;
}

/**
			 * @name 	```.p-l-small```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-l-small" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-l-small {
  padding-left: 0.66667rem;
}

/**
			 * @name 	```.p-r-small```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-r-small" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-r-small {
  padding-right: 0.66667rem;
}

/**
			 * @name 	```.p-s-small```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-s-small" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-s-small {
  padding-left: 0.66667rem;
  padding-right: 0.66667rem;
}

/**
			 * @name 	```.m-b```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-b" style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-b {
  margin-bottom: 1.33333rem;
}

/**
			 * @name 	```.m-t```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div class="m-t" style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-t {
  margin-top: 1.33333rem;
}

/**
			 * @name 	```.m-l```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div class="m-l" style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-l {
  margin-left: 1.33333rem;
}

/**
			 * @name 	```.m-r```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-r" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-r {
  margin-right: 1.33333rem;
}

/**
			 * @name 	```.m-s```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-s" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-s {
  margin-left: 1.33333rem;
  margin-right: 1.33333rem;
}

/**
			 * @name 	```.p```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p:not(p) {
  padding: 1.33333rem;
}

/**
			 * @name 	```.p-b```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-b" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-b {
  padding-bottom: 1.33333rem;
}

/**
			 * @name 	```.p-t```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-t" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-t {
  padding-top: 1.33333rem;
}

/**
			 * @name 	```.p-l```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-l" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-l {
  padding-left: 1.33333rem;
}

/**
			 * @name 	```.p-r```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-r" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-r {
  padding-right: 1.33333rem;
}

/**
			 * @name 	```.p-s```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-s" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-s {
  padding-left: 1.33333rem;
  padding-right: 1.33333rem;
}

/**
			 * @name 	```.m-b-medium```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-b-medium" style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-b-medium {
  margin-bottom: 5.33333rem;
}

/**
			 * @name 	```.m-t-medium```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div class="m-t-medium" style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-t-medium {
  margin-top: 5.33333rem;
}

/**
			 * @name 	```.m-l-medium```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div class="m-l-medium" style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-l-medium {
  margin-left: 5.33333rem;
}

/**
			 * @name 	```.m-r-medium```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-r-medium" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-r-medium {
  margin-right: 5.33333rem;
}

/**
			 * @name 	```.m-s-medium```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-s-medium" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-s-medium {
  margin-left: 5.33333rem;
  margin-right: 5.33333rem;
}

/**
			 * @name 	```.p-medium```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-medium" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-medium {
  padding: 5.33333rem;
}

/**
			 * @name 	```.p-b-medium```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-b-medium" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-b-medium {
  padding-bottom: 5.33333rem;
}

/**
			 * @name 	```.p-t-medium```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-t-medium" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-t-medium {
  padding-top: 5.33333rem;
}

/**
			 * @name 	```.p-l-medium```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-l-medium" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-l-medium {
  padding-left: 5.33333rem;
}

/**
			 * @name 	```.p-r-medium```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-r-medium" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-r-medium {
  padding-right: 5.33333rem;
}

/**
			 * @name 	```.p-s-medium```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-s-medium" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-s-medium {
  padding-left: 5.33333rem;
  padding-right: 5.33333rem;
}

/**
			 * @name 	```.m-b-big```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-b-big" style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-b-big {
  margin-bottom: 20rem;
}

/**
			 * @name 	```.m-t-big```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div class="m-t-big" style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-t-big {
  margin-top: 20rem;
}

/**
			 * @name 	```.m-l-big```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div class="m-l-big" style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-l-big {
  margin-left: 20rem;
}

/**
			 * @name 	```.m-r-big```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-r-big" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-r-big {
  margin-right: 20rem;
}

/**
			 * @name 	```.m-s-big```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-s-big" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-s-big {
  margin-left: 20rem;
  margin-right: 20rem;
}

/**
			 * @name 	```.p-big```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-big" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-big {
  padding: 20rem;
}

/**
			 * @name 	```.p-b-big```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-b-big" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-b-big {
  padding-bottom: 20rem;
}

/**
			 * @name 	```.p-t-big```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-t-big" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-t-big {
  padding-top: 20rem;
}

/**
			 * @name 	```.p-l-big```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-l-big" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-l-big {
  padding-left: 20rem;
}

/**
			 * @name 	```.p-r-big```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-r-big" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-r-big {
  padding-right: 20rem;
}

/**
			 * @name 	```.p-s-big```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-s-big" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-s-big {
  padding-left: 20rem;
  padding-right: 20rem;
}

/**
			 * @name 	```.m-b-bigger```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-b-bigger" style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-b-bigger {
  margin-bottom: 53.33333rem;
}

/**
			 * @name 	```.m-t-bigger```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="background:#82a8bb; width:100px; height:5px"></div>
			 * <div class="m-t-bigger" style="background:#2D8067; width:100px; height:5px"></div>
			 */
.m-t-bigger {
  margin-top: 53.33333rem;
}

/**
			 * @name 	```.m-l-bigger```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div class="m-l-bigger" style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-l-bigger {
  margin-left: 53.33333rem;
}

/**
			 * @name 	```.m-r-bigger```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-r-bigger" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-r-bigger {
  margin-right: 53.33333rem;
}

/**
			 * @name 	```.m-s-bigger```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="m-s-bigger" style="display:inline-block; background:#82a8bb; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#2D8067; width:50px; height:50px"></div>
			 */
.m-s-bigger {
  margin-left: 53.33333rem;
  margin-right: 53.33333rem;
}

/**
			 * @name 	```.p-bigger```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-bigger" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-bigger {
  padding: 53.33333rem;
}

/**
			 * @name 	```.p-b-bigger```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-b-bigger" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-b-bigger {
  padding-bottom: 53.33333rem;
}

/**
			 * @name 	```.p-t-bigger```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-t-bigger" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-t-bigger {
  padding-top: 53.33333rem;
}

/**
			 * @name 	```.p-l-bigger```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-l-bigger" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-l-bigger {
  padding-left: 53.33333rem;
}

/**
			 * @name 	```.p-r-bigger```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-r-bigger" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-r-bigger {
  padding-right: 53.33333rem;
}

/**
			 * @name 	```.p-s-bigger```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="p-s-bigger" style="border:1px solid #82a8bb; width:150px; height:150px;">
			 * 	<div style="background:#2D8067; width:100%; height:100%"></div>
			 * </div>
			 */
.p-s-bigger {
  padding-left: 53.33333rem;
  padding-right: 53.33333rem;
}

/**
			 * @name 	```.s-smaller```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-smaller">
			 * 	I have the size "smaller" defined
			 * </div>
			 */
.s-smaller {
  font-size: 0.3rem;
}

/**
			 * @name 	```.s-smaller-rel```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-smaller-rel">
			 * 	I have the size "smaller" defined relative to my parent
			 * </div>
			 */
.s-smaller-rel {
  font-size: 0.3em;
}

/**
			 * @name 	```.s-small```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-small">
			 * 	I have the size "small" defined
			 * </div>
			 */
.s-small {
  font-size: 0.6rem;
}

/**
			 * @name 	```.s-small-rel```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-small-rel">
			 * 	I have the size "small" defined relative to my parent
			 * </div>
			 */
.s-small-rel {
  font-size: 0.6em;
}

/**
			 * @name 	```.s-default```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-default">
			 * 	I have the size "default" defined
			 * </div>
			 */
.s-default {
  font-size: 1rem;
}

/**
			 * @name 	```.s-default-rel```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-default-rel">
			 * 	I have the size "default" defined relative to my parent
			 * </div>
			 */
.s-default-rel {
  font-size: 1em;
}

/**
			 * @name 	```.s-medium```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-medium">
			 * 	I have the size "medium" defined
			 * </div>
			 */
.s-medium {
  font-size: 1.4rem;
}

/**
			 * @name 	```.s-medium-rel```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-medium-rel">
			 * 	I have the size "medium" defined relative to my parent
			 * </div>
			 */
.s-medium-rel {
  font-size: 1.4em;
}

/**
			 * @name 	```.s-big```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-big">
			 * 	I have the size "big" defined
			 * </div>
			 */
.s-big {
  font-size: 2rem;
}

/**
			 * @name 	```.s-big-rel```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-big-rel">
			 * 	I have the size "big" defined relative to my parent
			 * </div>
			 */
.s-big-rel {
  font-size: 2em;
}

/**
			 * @name 	```.s-bigger```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-bigger">
			 * 	I have the size "bigger" defined
			 * </div>
			 */
.s-bigger {
  font-size: 3rem;
}

/**
			 * @name 	```.s-bigger-rel```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-bigger-rel">
			 * 	I have the size "bigger" defined relative to my parent
			 * </div>
			 */
.s-bigger-rel {
  font-size: 3em;
}

/**
		 * @name 	```.no-p-t```
		 * Reset **top** padding
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-p-t" style="display:inline-block; background:#82a8bb; width:50px; height:50px;"></div>
		 */
.no-p-t {
  padding-top: 0 !important;
}

/**
		 * @name 	```.no-p-r```
		 * Reset **right** padding
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-p-r" style="display:inline-block; background:#82a8bb; width:50px; height:50px;"></div>
		 */
.no-p-r {
  padding-right: 0 !important;
}

/**
		 * @name 	```.no-p-b```
		 * Reset **bottom** padding
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-p-b" style="display:inline-block; background:#82a8bb; width:50px; height:50px;"></div>
		 */
.no-p-b {
  padding-bottom: 0 !important;
}

/**
		 * @name 	```.no-p-l```
		 * Reset **left** padding
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-p-l" style="display:inline-block; background:#82a8bb; width:50px; height:50px;"></div>
		 */
.no-p-l {
  padding-left: 0 !important;
}

/**
		 * @name 	```.no-p-s```
		 * Reset **left** and **right** paddings
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-p-s" style="display:inline-block; background:#82a8bb; width:50px; height:50px;"></div>
		 */
.no-p-s {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/**
		 * @name 	```.no-m-t```
		 * Reset **top** padding
		 * @styleguide  	Layout / No margin
		 * @example 	html
		 * <div class="no-m-t" style="display:inline-block; background:#82a8bb; width:50px; height:50px;"></div>
		 */
.no-m-t {
  margin-top: 0 !important;
}

/**
		 * @name 	```.no-m-r```
		 * Reset **right** padding
		 * @styleguide  	Layout / No margin
		 * @example 	html
		 * <div class="no-m-r" style="display:inline-block; background:#82a8bb; width:50px; height:50px;"></div>
		 */
.no-m-r {
  margin-right: 0 !important;
}

/**
		 * @name 	```.no-m-b```
		 * Reset **bottom** padding
		 * @styleguide  	Layout / No margin
		 * @example 	html
		 * <div class="no-m-b" style="display:inline-block; background:#82a8bb; width:50px; height:50px;"></div>
		 */
.no-m-b {
  margin-bottom: 0 !important;
}

/**
		 * @name 	```.no-m-l```
		 * Reset **left** padding
		 * @styleguide  	Layout / No margin
		 * @example 	html
		 * <div class="no-m-l" style="display:inline-block; background:#82a8bb; width:50px; height:50px;"></div>
		 */
.no-m-l {
  margin-left: 0 !important;
}

/**
		 * @name 	```.no-m-s```
		 * Reset **left** and **right** margins
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-m-s" style="display:inline-block; background:#82a8bb; width:50px; height:50px;"></div>
		 */
.no-m-s {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/**
				 * @name 	```.c-default```
				 * Specify the color to **default**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-default">
				 * 	I'm in "default" color
				 * </div>
				 */
.c-default {
  color: #2e2e2e;
}

/**
				 * @name 	```.bkg-default```
				 * Specify the background color to **default**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-default p" style="color:white">
				 * 	My background color is "default"
				 * </div>
				 */
.bkg-default {
  background-color: #2e2e2e;
}

/**
				 * @name 	```.c-title```
				 * Specify the color to **title**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-title">
				 * 	I'm in "title" color
				 * </div>
				 */
.c-title {
  color: #2e2e2e;
}

/**
				 * @name 	```.bkg-title```
				 * Specify the background color to **title**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-title p" style="color:white">
				 * 	My background color is "title"
				 * </div>
				 */
.bkg-title {
  background-color: #2e2e2e;
}

/**
				 * @name 	```.c-text```
				 * Specify the color to **text**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-text">
				 * 	I'm in "text" color
				 * </div>
				 */
.c-text {
  color: #2e2e2e;
}

/**
				 * @name 	```.bkg-text```
				 * Specify the background color to **text**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-text p" style="color:white">
				 * 	My background color is "text"
				 * </div>
				 */
.bkg-text {
  background-color: #2e2e2e;
}

/**
				 * @name 	```.c-link```
				 * Specify the color to **link**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-link">
				 * 	I'm in "link" color
				 * </div>
				 */
.c-link {
  color: #82a8bb;
}

/**
				 * @name 	```.bkg-link```
				 * Specify the background color to **link**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-link p" style="color:white">
				 * 	My background color is "link"
				 * </div>
				 */
.bkg-link {
  background-color: #82a8bb;
}

/**
				 * @name 	```.c-primary```
				 * Specify the color to **primary**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-primary">
				 * 	I'm in "primary" color
				 * </div>
				 */
.c-primary {
  color: #82a8bb;
}

/**
				 * @name 	```.bkg-primary```
				 * Specify the background color to **primary**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-primary p" style="color:white">
				 * 	My background color is "primary"
				 * </div>
				 */
.bkg-primary {
  background-color: #82a8bb;
}

/**
				 * @name 	```.c-secondary```
				 * Specify the color to **secondary**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-secondary">
				 * 	I'm in "secondary" color
				 * </div>
				 */
.c-secondary {
  color: #2D8067;
}

/**
				 * @name 	```.bkg-secondary```
				 * Specify the background color to **secondary**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-secondary p" style="color:white">
				 * 	My background color is "secondary"
				 * </div>
				 */
.bkg-secondary {
  background-color: #2D8067;
}

/**
				 * @name 	```.c-success```
				 * Specify the color to **success**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-success">
				 * 	I'm in "success" color
				 * </div>
				 */
.c-success {
  color: #5cb85c;
}

/**
				 * @name 	```.bkg-success```
				 * Specify the background color to **success**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-success p" style="color:white">
				 * 	My background color is "success"
				 * </div>
				 */
.bkg-success {
  background-color: #5cb85c;
}

/**
				 * @name 	```.c-warning```
				 * Specify the color to **warning**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-warning">
				 * 	I'm in "warning" color
				 * </div>
				 */
.c-warning {
  color: #f0ad4e;
}

/**
				 * @name 	```.bkg-warning```
				 * Specify the background color to **warning**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-warning p" style="color:white">
				 * 	My background color is "warning"
				 * </div>
				 */
.bkg-warning {
  background-color: #f0ad4e;
}

/**
				 * @name 	```.c-error```
				 * Specify the color to **error**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-error">
				 * 	I'm in "error" color
				 * </div>
				 */
.c-error {
  color: #d9534f;
}

/**
				 * @name 	```.bkg-error```
				 * Specify the background color to **error**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-error p" style="color:white">
				 * 	My background color is "error"
				 * </div>
				 */
.bkg-error {
  background-color: #d9534f;
}

/**
				 * @name 	```.c-info```
				 * Specify the color to **info**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-info">
				 * 	I'm in "info" color
				 * </div>
				 */
.c-info {
  color: #2199e8;
}

/**
				 * @name 	```.bkg-info```
				 * Specify the background color to **info**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-info p" style="color:white">
				 * 	My background color is "info"
				 * </div>
				 */
.bkg-info {
  background-color: #2199e8;
}

/**
				 * @name 	```.c-white```
				 * Specify the color to **white**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-white">
				 * 	I'm in "white" color
				 * </div>
				 */
.c-white {
  color: #fff;
}

/**
				 * @name 	```.bkg-white```
				 * Specify the background color to **white**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-white p" style="color:white">
				 * 	My background color is "white"
				 * </div>
				 */
.bkg-white {
  background-color: #fff;
}

/**
				 * @name 	```.c-grey```
				 * Specify the color to **grey**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-grey">
				 * 	I'm in "grey" color
				 * </div>
				 */
.c-grey {
  color: #f4f4f4;
}

/**
				 * @name 	```.bkg-grey```
				 * Specify the background color to **grey**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-grey p" style="color:white">
				 * 	My background color is "grey"
				 * </div>
				 */
.bkg-grey {
  background-color: #f4f4f4;
}

/**
						 * @name 	```.c-grey--dark```
						 * Specify the color to **grey--dark**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="c-grey--dark">
						 * 	I'm in "grey--dark" color
						 * </div>
						 */
.c-grey--dark {
  color: #dbdbdb;
}

/**
						 * @name 	```.bkg-grey--dark```
						 * Specify the background color to **grey--dark**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="bkg-grey--dark p" style="color:white">
						 * 	My background color is "grey--dark"
						 * </div>
						 */
.bkg-grey--dark {
  background-color: #dbdbdb;
}

/**
						 * @name 	```.c-grey--light```
						 * Specify the color to **grey--light**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="c-grey--light">
						 * 	I'm in "grey--light" color
						 * </div>
						 */
.c-grey--light {
  color: #fbfbfb;
}

/**
						 * @name 	```.bkg-grey--light```
						 * Specify the background color to **grey--light**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="bkg-grey--light p" style="color:white">
						 * 	My background color is "grey--light"
						 * </div>
						 */
.bkg-grey--light {
  background-color: #fbfbfb;
}

/**
				 * @name 	```.c-border```
				 * Specify the color to **border**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="c-border">
				 * 	I'm in "border" color
				 * </div>
				 */
.c-border {
  color: #f2f2f2;
}

/**
				 * @name 	```.bkg-border```
				 * Specify the background color to **border**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="bkg-border p" style="color:white">
				 * 	My background color is "border"
				 * </div>
				 */
.bkg-border {
  background-color: #f2f2f2;
}

/**
 * Templates
 * All the templates level specific styling.
 * Templates specific classes have to start with `.t-`.
 */
/**
 * Templates
 * All the templates level specific styling.
 * Templates specific classes have to start with `.t-`.
 */
body {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  transition: padding-top 0.2s topbar 0s, outline-color 0s linear 0s;
  outline-color: black;
}

@media all {
  .ua-safari body {
    -webkit-font-smoothing: antialiased;
  }
}

.t-content {
  overflow: hidden;
  transition: none !important;
}

/**
 * Pages
 * All the pages level specific styling.
 * Pages specific classes have to start with `.p-`.
 */
/**
 * Pages
 * All the pages level specific styling.
 * Pages specific classes have to start with `.p-`.
 */
.p-home .o-onecol {
  background: url("../img/background.png") fixed;
  background-size: cover;
}

/**
 * Organisms
 * All the organisms styling.
 * An organism can contain other molecules or atoms and does not have to relay on his ancestors
 * to be properly displayed.
 * All organisms specific classes have to start with `.o-`.
 */
/**
 * Organisms
 * All the organisms styling.
 * An organism can contain other molecules or atoms and does not have to relay on his ancestors
 * to be properly displayed.
 * All organisms specific classes have to start with `.o-`.
 */
.o-contact_foot {
  letter-spacing: 0.01083rem;
  line-height: 2rem;
  text-align: left;
  font-family: regular;
  color: #fff;
  font-size: 1rem;
}

.o-contact_foot__title {
  text-transform: uppercase;
  height: 3.33333rem;
  letter-spacing: 0.16667rem;
  color: #a6a6a6;
}

.o-contact_foot__body a {
  color: white;
  line-height: 1rem;
}

.o-contact_foot__logo {
  margin-right: 3.33333rem;
  margin-top: 3.33333rem;
}

.o-contact_foot__link {
  float: left;
  display: block;
}

@media screen and (max-width: 768px) {
  .o-contact_foot__link {
    margin-bottom: 30px;
  }
}

.o-installation {
  position: relative;
  font-family: regular;
}

.o-installation__div {
  position: relative;
  top: 0px;
  z-index: 2;
}

@media screen and (min-width: 992px) {
  .o-installation__container--left {
    float: left;
  }
  .o-installation__container--right {
    float: right;
  }
  .o-installation__desc {
    position: absolute;
    top: 0px;
    z-index: 2;
  }
}

@media screen and (max-width: 992px) {
  .o-installation__image > img {
    margin-top: 2.66667rem !important;
  }
}

.o-installation__image > img {
  max-width: 100%;
  height: auto;
  z-index: 1;
}

.o-installation__container-title {
  text-transform: uppercase;
  letter-spacing: 0.16667rem;
  line-height: 2rem;
  color: #a6a6a6;
  font-size: 1rem;
  margin-bottom: 1.33333rem;
  z-index: 1;
}

.o-installation__container-paragraph {
  line-height: 2rem;
  font-family: regular;
  color: #a6a6a6;
  font-size: 1.33333rem;
}

.o-installation__container-paragraph br {
  line-height: 2.66667rem;
}

.o-installation__desc {
  margin-top: 2.66667rem;
  color: #7d7d7d;
  font-size: 1rem;
  line-height: 1.5rem;
}

.o-success {
  position: relative;
  font-family: regular;
}

.o-success__card {
  padding: 0;
  position: relative;
  z-index: 2;
}

.o-success__card-subcontainer {
  border-top: 1px solid white;
  padding-top: 2.66667rem;
  margin: 2.66667rem;
}

.o-success__card-headline {
  font-family: din-next-stencil-regular;
  color: #fff;
  font-size: 4rem;
  margin-bottom: 2.66667rem;
}

.o-success__card-subheadline {
  text-transform: uppercase;
  letter-spacing: 0.16667rem;
  line-height: 2rem;
  font-family: medium;
  color: #fff;
  font-size: 1rem;
}

.o-success__card-location, .o-success__card-year {
  font-family: medium;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.16667rem;
  text-align: right;
  text-transform: uppercase;
}

.o-success__container {
  margin-top: 1.33333rem;
  margin-bottom: 8rem;
  text-align: left;
  line-height: 2rem;
}

.o-success__container--left {
  float: left;
}

.o-success__gallery {
  position: relative;
}

.o-success__container--right {
  float: right;
}

.o-success__container-heading {
  text-transform: uppercase;
  letter-spacing: 0.16667rem;
  margin-top: 2.66667rem;
  margin-bottom: 1.33333rem;
  color: #dedede;
  font-size: 1rem;
}

.o-success__container-desc, .o-success__container-paragraph {
  color: #a6a6a6;
  font-size: 1.33333rem;
}

.o-success__embedder {
  margin-top: -1.33333rem;
}

.o-success__video {
  position: relative;
  padding-top: 1.33333rem;
  height: 0;
}

.o-success__video iframe {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.o-success__gallery {
  padding-top: calc(500 / 794 * 100%);
  overflow: hidden;
}

.o-success__gallery-slide {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.38, 0.01, 0, 1) 0s, outline-color 0s linear 0s;
  outline-color: black;
  opacity: 0.0001;
}

.o-success__gallery-slide > * {
  height: 100%;
}

.o-success__gallery-slide[active] {
  pointer-events: all;
  opacity: 1;
}

.o-success__gallery-slide img {
  max-width: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
}

.o-success_gallery__previous, .o-success_gallery__next {
  position: absolute;
  bottom: 1.33333rem;
  color: #fff;
}

.o-success_gallery__previous {
  left: 2.66667rem;
  transform: scale(-1, 1);
}

.o-success_gallery__next {
  right: 2.66667rem;
}

.o-success_gallery__arrow {
  color: #fff;
  font-size: 3rem;
  display: inline-block;
  cursor: pointer;
  transform-origin: 0.5em 0.5em;
  letter-spacing: 0.16667rem;
}

@media screen and (min-width: 768px) {
  .o-success__container-heading {
    margin-top: 5.33333rem;
  }
  .o-success__container {
    margin-top: 5.33333rem;
    padding: 0 2.66667rem;
  }
  .o-success__embedder {
    margin-top: -4rem;
  }
  .o-success__card-subcontainer {
    margin: 5.33333rem;
  }
}

.o-topic {
  font-family: regular;
  padding-bottom: 100%;
  padding-right: 0px;
  padding-left: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 0.3s ease-out 0s, outline-color 0s linear 0s;
  outline-color: black;
  position: relative;
  float: left;
  clear: right;
}

.o-topic:nth-of-type(even) {
  float: right;
  clear: left;
}

.o-topic:hover, .o-topic:active {
  background-color: #0022FF;
  z-index: 0;
}

.o-topic:hover img.o-topic__image[src][loaded],
.o-topic:active img.o-topic__image[src][loaded] {
  opacity: 1;
  z-index: 3;
}

.o-topic:not(:last-of-type) {
  margin-bottom: 5.33333rem;
}

@media screen and (min-width: 768px) {
  .o-topic {
    padding-bottom: 50%;
  }
  .o-topic:hover {
    transform: scale(1.02);
  }
  .o-topic:not(:last-of-type) {
    margin-bottom: 20rem;
  }
}

.o-topic__content {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: calc(100% - 34px - 33.6px);
  height: calc(100% - 33.6px - 34px);
  z-index: 2;
}

.o-topic__content:hover {
  z-index: 0;
}

.o-topic__container {
  border-top: 0.08333rem solid #a6a6a6;
  padding-top: 5.33333rem;
  margin: 2.66667rem;
  position: relative;
  z-index: 2;
}

.o-topic__container:hover {
  z-index: 0;
}

img.o-topic__image[src][loaded] {
  max-width: 100%;
  height: auto;
  opacity: 0;
  transition: all 0.3s ease-out 0s, outline-color 0s linear 0s;
  outline-color: black;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10.39917rem 0.17917rem 0.27083rem 0.18417rem;
  z-index: 1;
}

.o-topic__title {
  font-family: din-next-stencil-regular;
  color: #fff;
  font-size: 4rem;
  position: relative;
  z-index: 1;
}

.o-topic__subtitle {
  text-transform: uppercase;
  letter-spacing: 0.16667rem;
  line-height: 2rem;
  color: #a6a6a6;
  font-size: 1rem;
  position: relative;
  z-index: 1;
}

.o-topic__arrow {
  color: #fff;
  font-size: 2rem;
  position: absolute;
  bottom: 0px;
  left: 0px;
  margin: 0 2.66667rem;
  z-index: 4;
}

.o-topic__arrow > a {
  position: relative;
  z-index: 4;
}

.o-topic__number {
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.175rem;
  text-align: right;
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 1;
}

.o-topic__number > span > strong {
  font-family: medium;
}

.o-topic__number > span {
  font-family: light;
}

.o-cardvideo {
  margin-bottom: 20rem;
  position: relative;
  font-family: regular;
}

.o-cardvideo > video {
  width: 100%;
  height: auto;
}

.o-cardvideo img {
  width: 100%;
  height: auto;
}

.o-cardvideo__title {
  font-family: din-next-stencil-regular;
  color: #fff;
  font-size: 4rem;
}

.o-cardvideo__subtitle {
  text-transform: uppercase;
  letter-spacing: 0.16667rem;
  line-height: 2rem;
  color: #a6a6a6;
  font-size: 1rem;
  margin-bottom: 2.66667rem;
}

.o-cardvideo__container {
  position: relative;
  margin-bottom: -1.33333rem;
}

@media screen and (min-width: 768px) {
  .o-cardvideo__container {
    position: absolute;
    bottom: 14.66667rem;
    margin-bottom: 0;
  }
}

.o-cardvideo__subcontainer {
  position: relative;
  border-top: 1px solid #a6a6a6;
  padding-top: 2.66667rem;
  margin: 2.66667rem;
}

@media screen and (min-width: 768px) {
  .o-cardvideo__subcontainer {
    margin: 5.33333rem;
  }
}

.o-cardvideo__number {
  text-align: right;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.175rem;
}

.o-cardvideo__number > span > strong {
  font-family: medium;
}

.o-cardvideo__number > span {
  font-family: light;
}

.o-404 {
  margin-top: 20rem;
}

.o-404__div {
  width: 66.66667%;
}

.o-404__title {
  font-family: bold;
  color: #A6A6A6;
  font-size: 6.83333rem;
  margin: 5.33333rem 0;
}

.o-404__body {
  font-family: thin;
  color: #fff;
  font-size: 1.83333rem;
}

.o-404__body h6 {
  font-family: medium;
  color: #A6A6A6;
  font-size: 2.66667rem;
}

.o-404__body ul li:before {
  top: 0;
  display: initial;
  margin-right: 0.66667rem;
  color: white !important;
}

/**
 * Molecules
 * All the molecules styling.
 * A molecule response to the same rules has the organisms, unless they cannot contain any other molecules.
 * It normally contains only other atoms.
 * All molecules classes have to start with `.m-`.
 */
/**
 * Molecules
 * All the molecules styling.
 * A molecule response to the same rules has the organisms, unless they cannot contain any other molecules.
 * It normally contains only other atoms.
 * All molecules classes have to start with `.m-`.
 */
.m-aside_par__div {
  padding: 0;
}

.m-aside_par__title {
  text-transform: uppercase;
  letter-spacing: 0.16667rem;
  line-height: 2rem;
  font-family: regular;
  color: #a6a6a6;
  font-size: 1rem;
  margin-bottom: 1.33333rem;
}

.m-aside_par__body {
  line-height: 2.66667rem;
  font-family: light;
  color: #fff;
  font-size: 2rem;
}

.m-backto {
  margin: 0 8px;
}

.m-backto__div {
  font-family: regular;
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.16667rem;
  margin-bottom: 6.66667rem;
}

.m-backto__arrow {
  font-family: medium;
}

.m-backto__text {
  font-family: light;
}

.m-backto__text > strong {
  font-family: bold;
}

.m-backto__number {
  text-align: right;
}

.m-backto__number > span > strong {
  font-family: medium;
}

.m-backto__number > span {
  font-family: light;
}

.m-banner:first-of-type {
  overflow: hidden;
  height: calc(100vh - 5.33333rem - 24px);
  margin-bottom: 0;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.m-banner:first-of-type .m-banner__title {
  position: absolute;
  bottom: 8rem;
  left: 0;
  padding: 0px;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 83.33333%;
}

.m-banner__title {
  line-height: 32px;
  font-family: light;
  color: #fff;
  font-size: 2.16667rem;
}

.m-banner__title a {
  color: white;
  line-height: 32px;
}

@media screen and (min-width: 768px) {
  .m-banner__title {
    bottom: 10rem;
    line-height: 64px;
    font-family: light;
    color: #fff;
    font-size: 4.16667rem;
  }
}

.m-header_title {
  font-family: light;
  font-size: 2rem;
  color: white;
  letter-spacing: 0.005rem;
  line-height: 3rem;
}

.m-header_title__text strong {
  letter-spacing: 0.00833rem;
  font-family: medium;
}

/**
 * Atoms
 * All the atoms styling.
 * An atom is the most basic component. It cannot contain any other atoms or anything else and have to be context free, meaning that
 * it need to be usable everywhere we want without having to deal with pre-defined margins, etc...
 * All atoms specific classes have to start with `.a-`.
 */
/**
 * Atoms
 * All the atoms styling.
 * An atom is the most basic component. It cannot contain any other atoms or anything else and have to be context free, meaning that
 * it need to be usable everywhere we want without having to deal with pre-defined margins, etc...
 * All atoms specific classes have to start with `.a-`.
 */
.a-back-arrow {
  position: absolute;
  top: .5em;
  left: -1.33333rem;
  transform: translateX(-100%) translateY(-0.2em) translateZ(0);
  font-size: .6em;
  display: none;
  color: rgba(46, 46, 46, 0.6);
}

@media screen and (min-width: 1368px) {
  .a-back-arrow {
    display: inline-block;
  }
}

/**
		 * @name 	```.a-btn```
		 * Lead paragraph styling
		 * @styleguide 	Objects / Buttons
		 * @example 	html
		 * <a class="a-btn">
		 * 	Default button
		 * </a>
		 */
.a-btn {
  border-radius: 0em;
  padding: 1em 3em;
  height: 3em;
}

/**
		 * @name 	```.a-btn--block```
		 * Lead paragraph styling
		 * @styleguide 	Objects / Buttons
		 * @example 	html
		 * <a class="a-btn a-btn--block">
		 * 	Block button
		 * </a>
		 */
.a-btn--block {
  border-radius: 0em;
  padding: 1em 3em;
  height: 3em;
  display: block;
  width: 100%;
}

.a-btn {
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
}

.a-btn[active]:not(:disabled), .a-btn.active:not(:disabled), .a-btn:active:not(:disabled), .a-btn:hover:not(:disabled) {
  background-color: #55849c;
  border-color: #55849c;
}

.a-btn--link {
  background-color: transparent !important;
  color: #82a8bb !important;
  border-color: transparent !important;
  position: relative;
}

.a-btn--link:after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0.4em;
  left: 50%;
  height: .2em;
  width: 0;
  transform: translateX(-50%) translateY(0) translateZ(0);
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
  background: #82a8bb;
}

.a-btn--link[active]:not(:disabled):after, .a-btn--link.active:not(:disabled):after, .a-btn--link:active:not(:disabled):after, .a-btn--link:hover:not(:disabled):after {
  width: calc(100% - 6em);
}

/**
			 * @name 	<span class="c-default">Default</span> ```.a-btn```
			 * Default button
			 * @styleguide 	Objects / Buttons
			 * @example 	html
			 * <a class="a-btn a-btn--default">
			 * 	Default button
			 * </a>
			 */
.a-btn--default {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
  /**
				 * @name 	<span class="c-default">Default</span> ```.a-btn--outline```
				 * Outline default button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <a class="a-btn a-btn--outline a-btn--default">
				 * 	Default outlined button
				 * </a>
				 */
  /**
				 * @name 	<span class="c-default">Default</span> ```.a-btn--link```
				 * Link default button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <a class="a-btn a-btn--link a-btn--default">
				 * 	Default link button
				 * </a>
				 */
  /**
				 * @name 	<span class="c-default">Default</span> ```.a-btn:disabled```
				 * Disabled default button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <button disabled class="a-btn a-btn--default">
				 * 	Default disabled button
				 * </button>
				 */
}

.a-btn--default[active]:not(:disabled), .a-btn--default.active:not(:disabled), .a-btn--default:active:not(:disabled), .a-btn--default:hover:not(:disabled) {
  background-color: #55849c;
  border-color: #55849c;
}

.a-btn--default.a-btn--outline {
  color: #82a8bb;
  background-color: transparent;
  border-color: #82a8bb;
}

.a-btn--default.a-btn--outline:active:not(:disabled), .a-btn--default.a-btn--outline:hover:not(:disabled), .a-btn--default.a-btn--outline.active:not(:disabled),
:checked + .a-btn--default.a-btn--outline:not(:disabled) {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
}

.a-btn--default.a-btn--link {
  background-color: transparent !important;
  color: #82a8bb !important;
  border-color: transparent !important;
  position: relative;
}

.a-btn--default.a-btn--link:after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0.4em;
  left: 50%;
  height: .2em;
  width: 0;
  transform: translateX(-50%) translateY(0) translateZ(0);
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
  background: #82a8bb;
}

.a-btn--default.a-btn--link[active]:not(:disabled):after, .a-btn--default.a-btn--link.active:not(:disabled):after, .a-btn--default.a-btn--link:active:not(:disabled):after, .a-btn--default.a-btn--link:hover:not(:disabled):after {
  width: calc(100% - 6em);
}

.a-btn--default.a-btn:disabled {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}

.a-btn--default.a-btn:disabled[active]:not(:disabled), .a-btn--default.a-btn:disabled.active:not(:disabled), .a-btn--default.a-btn:disabled:active:not(:disabled), .a-btn--default.a-btn:disabled:hover:not(:disabled) {
  background-color: #55849c;
  border-color: #55849c;
}

.a-btn--hover-default:hover {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
}

.a-btn--hover-default:hover[active]:not(:disabled), .a-btn--hover-default:hover.active:not(:disabled), .a-btn--hover-default:hover:active:not(:disabled), .a-btn--hover-default:hover:hover:not(:disabled) {
  background-color: #55849c;
  border-color: #55849c;
}

/**
			 * @name 	<span class="c-primary">Primary</span> ```.a-btn```
			 * Primary button
			 * @styleguide 	Objects / Buttons
			 * @example 	html
			 * <a class="a-btn a-btn--primary">
			 * 	Primary button
			 * </a>
			 */
.a-btn--primary {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
  /**
				 * @name 	<span class="c-primary">Primary</span> ```.a-btn--outline```
				 * Outline primary button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <a class="a-btn a-btn--outline a-btn--primary">
				 * 	Primary outlined button
				 * </a>
				 */
  /**
				 * @name 	<span class="c-primary">Primary</span> ```.a-btn--link```
				 * Link primary button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <a class="a-btn a-btn--link a-btn--primary">
				 * 	Primary link button
				 * </a>
				 */
  /**
				 * @name 	<span class="c-primary">Primary</span> ```.a-btn:disabled```
				 * Disabled primary button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <button disabled class="a-btn a-btn--primary">
				 * 	Primary disabled button
				 * </button>
				 */
}

.a-btn--primary[active]:not(:disabled), .a-btn--primary.active:not(:disabled), .a-btn--primary:active:not(:disabled), .a-btn--primary:hover:not(:disabled) {
  background-color: #55849c;
  border-color: #55849c;
}

.a-btn--primary.a-btn--outline {
  color: #82a8bb;
  background-color: transparent;
  border-color: #82a8bb;
}

.a-btn--primary.a-btn--outline:active:not(:disabled), .a-btn--primary.a-btn--outline:hover:not(:disabled), .a-btn--primary.a-btn--outline.active:not(:disabled),
:checked + .a-btn--primary.a-btn--outline:not(:disabled) {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
}

.a-btn--primary.a-btn--link {
  background-color: transparent !important;
  color: #82a8bb !important;
  border-color: transparent !important;
  position: relative;
}

.a-btn--primary.a-btn--link:after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0.4em;
  left: 50%;
  height: .2em;
  width: 0;
  transform: translateX(-50%) translateY(0) translateZ(0);
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
  background: #82a8bb;
}

.a-btn--primary.a-btn--link[active]:not(:disabled):after, .a-btn--primary.a-btn--link.active:not(:disabled):after, .a-btn--primary.a-btn--link:active:not(:disabled):after, .a-btn--primary.a-btn--link:hover:not(:disabled):after {
  width: calc(100% - 6em);
}

.a-btn--primary.a-btn:disabled {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}

.a-btn--primary.a-btn:disabled[active]:not(:disabled), .a-btn--primary.a-btn:disabled.active:not(:disabled), .a-btn--primary.a-btn:disabled:active:not(:disabled), .a-btn--primary.a-btn:disabled:hover:not(:disabled) {
  background-color: #55849c;
  border-color: #55849c;
}

.a-btn--hover-primary:hover {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
}

.a-btn--hover-primary:hover[active]:not(:disabled), .a-btn--hover-primary:hover.active:not(:disabled), .a-btn--hover-primary:hover:active:not(:disabled), .a-btn--hover-primary:hover:hover:not(:disabled) {
  background-color: #55849c;
  border-color: #55849c;
}

/**
			 * @name 	<span class="c-secondary">Secondary</span> ```.a-btn```
			 * Secondary button
			 * @styleguide 	Objects / Buttons
			 * @example 	html
			 * <a class="a-btn a-btn--secondary">
			 * 	Secondary button
			 * </a>
			 */
.a-btn--secondary {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
  /**
				 * @name 	<span class="c-secondary">Secondary</span> ```.a-btn--outline```
				 * Outline secondary button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <a class="a-btn a-btn--outline a-btn--secondary">
				 * 	Secondary outlined button
				 * </a>
				 */
  /**
				 * @name 	<span class="c-secondary">Secondary</span> ```.a-btn--link```
				 * Link secondary button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <a class="a-btn a-btn--link a-btn--secondary">
				 * 	Secondary link button
				 * </a>
				 */
  /**
				 * @name 	<span class="c-secondary">Secondary</span> ```.a-btn:disabled```
				 * Disabled secondary button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <button disabled class="a-btn a-btn--secondary">
				 * 	Secondary disabled button
				 * </button>
				 */
}

.a-btn--secondary[active]:not(:disabled), .a-btn--secondary.active:not(:disabled), .a-btn--secondary:active:not(:disabled), .a-btn--secondary:hover:not(:disabled) {
  background-color: #55849c;
  border-color: #55849c;
}

.a-btn--secondary.a-btn--outline {
  color: #82a8bb;
  background-color: transparent;
  border-color: #82a8bb;
}

.a-btn--secondary.a-btn--outline:active:not(:disabled), .a-btn--secondary.a-btn--outline:hover:not(:disabled), .a-btn--secondary.a-btn--outline.active:not(:disabled),
:checked + .a-btn--secondary.a-btn--outline:not(:disabled) {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
}

.a-btn--secondary.a-btn--link {
  background-color: transparent !important;
  color: #82a8bb !important;
  border-color: transparent !important;
  position: relative;
}

.a-btn--secondary.a-btn--link:after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0.4em;
  left: 50%;
  height: .2em;
  width: 0;
  transform: translateX(-50%) translateY(0) translateZ(0);
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
  background: #82a8bb;
}

.a-btn--secondary.a-btn--link[active]:not(:disabled):after, .a-btn--secondary.a-btn--link.active:not(:disabled):after, .a-btn--secondary.a-btn--link:active:not(:disabled):after, .a-btn--secondary.a-btn--link:hover:not(:disabled):after {
  width: calc(100% - 6em);
}

.a-btn--secondary.a-btn:disabled {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}

.a-btn--secondary.a-btn:disabled[active]:not(:disabled), .a-btn--secondary.a-btn:disabled.active:not(:disabled), .a-btn--secondary.a-btn:disabled:active:not(:disabled), .a-btn--secondary.a-btn:disabled:hover:not(:disabled) {
  background-color: #55849c;
  border-color: #55849c;
}

.a-btn--hover-secondary:hover {
  background-color: #82a8bb;
  border-color: #82a8bb;
  color: white;
}

.a-btn--hover-secondary:hover[active]:not(:disabled), .a-btn--hover-secondary:hover.active:not(:disabled), .a-btn--hover-secondary:hover:active:not(:disabled), .a-btn--hover-secondary:hover:hover:not(:disabled) {
  background-color: #55849c;
  border-color: #55849c;
}

/**
			 * @name 	<span class="c-grey">Grey</span> ```.a-btn```
			 * Grey button
			 * @styleguide 	Objects / Buttons
			 * @example 	html
			 * <a class="a-btn a-btn--grey">
			 * 	Grey button
			 * </a>
			 */
.a-btn--grey {
  background-color: #8d8d8d;
  border-color: #8d8d8d;
  color: white;
  /**
				 * @name 	<span class="c-grey">Grey</span> ```.a-btn--outline```
				 * Outline grey button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <a class="a-btn a-btn--outline a-btn--grey">
				 * 	Grey outlined button
				 * </a>
				 */
  /**
				 * @name 	<span class="c-grey">Grey</span> ```.a-btn--link```
				 * Link grey button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <a class="a-btn a-btn--link a-btn--grey">
				 * 	Grey link button
				 * </a>
				 */
  /**
				 * @name 	<span class="c-grey">Grey</span> ```.a-btn:disabled```
				 * Disabled grey button
				 * @styleguide 	Objects / Buttons
				 * @example 	html
				 * <button disabled class="a-btn a-btn--grey">
				 * 	Grey disabled button
				 * </button>
				 */
}

.a-btn--grey[active]:not(:disabled), .a-btn--grey.active:not(:disabled), .a-btn--grey:active:not(:disabled), .a-btn--grey:hover:not(:disabled) {
  background-color: #676767;
  border-color: #676767;
}

.a-btn--grey.a-btn--outline {
  color: #8d8d8d;
  background-color: transparent;
  border-color: #8d8d8d;
}

.a-btn--grey.a-btn--outline:active:not(:disabled), .a-btn--grey.a-btn--outline:hover:not(:disabled), .a-btn--grey.a-btn--outline.active:not(:disabled),
:checked + .a-btn--grey.a-btn--outline:not(:disabled) {
  background-color: #8d8d8d;
  border-color: #8d8d8d;
  color: white;
}

.a-btn--grey.a-btn--link {
  background-color: transparent !important;
  color: #8d8d8d !important;
  border-color: transparent !important;
  position: relative;
}

.a-btn--grey.a-btn--link:after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0.4em;
  left: 50%;
  height: .2em;
  width: 0;
  transform: translateX(-50%) translateY(0) translateZ(0);
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
  background: #8d8d8d;
}

.a-btn--grey.a-btn--link[active]:not(:disabled):after, .a-btn--grey.a-btn--link.active:not(:disabled):after, .a-btn--grey.a-btn--link:active:not(:disabled):after, .a-btn--grey.a-btn--link:hover:not(:disabled):after {
  width: calc(100% - 6em);
}

.a-btn--grey.a-btn:disabled {
  background-color: #8d8d8d;
  border-color: #8d8d8d;
  color: white;
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}

.a-btn--grey.a-btn:disabled[active]:not(:disabled), .a-btn--grey.a-btn:disabled.active:not(:disabled), .a-btn--grey.a-btn:disabled:active:not(:disabled), .a-btn--grey.a-btn:disabled:hover:not(:disabled) {
  background-color: #676767;
  border-color: #676767;
}

.a-btn--hover-grey:hover {
  background-color: #8d8d8d;
  border-color: #8d8d8d;
  color: white;
}

.a-btn--hover-grey:hover[active]:not(:disabled), .a-btn--hover-grey:hover.active:not(:disabled), .a-btn--hover-grey:hover:active:not(:disabled), .a-btn--hover-grey:hover:hover:not(:disabled) {
  background-color: #676767;
  border-color: #676767;
}

.a-btn {
  font-family: extra-light;
  font-size: 1.16667rem;
  text-transform: uppercase;
}

@media all {
  .ua-safari .a-btn {
    font-family: regular;
  }
}

.a-btn i {
  font-size: 1.5em;
  position: relative;
  top: -.2em;
}

@media screen and (max-width: 768px) {
  .a-btn {
    padding-left: 1em;
    padding-right: 1em;
    display: block;
  }
}

@media screen and (max-width: 768px) {
  input.a-btn {
    width: 100%;
  }
}

.a-btn--narrow {
  padding-left: 1em !important;
  padding-right: 1em !important;
}

.a-btn--thin {
  padding-top: .7em !important;
  padding-bottom: .7em !important;
  height: 2.4em !important;
  line-height: 0.8 !important;
}

.a-btn--white {
  color: black;
}

.a-btn--rounded {
  border-radius: 2em;
}

.a-btn-play {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  cursor: pointer;
}

.cs-light .a-btn-play, [color-schema="light"] .a-btn-play, .cs-lighter .a-btn-play, [color-schema="lighter"] .a-btn-play {
  color: white;
}

.a-btn-play:after, .a-btn-play:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  top: 0;
  left: 0;
  border: 0.08333rem solid currentColor;
  border-radius: .5em;
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

.a-btn-play:after {
  opacity: 0;
  transform: scale(1, 1);
}

.a-btn-play:hover:before {
  transform: scale(0.8, 0.8);
  border-width: 0.25rem;
}

.a-btn-play:hover:after {
  opacity: 0.5;
  transform: scale(1.1, 1.1);
}

.a-btn-play i {
  font-size: .5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
  margin-top: -0.02em;
  margin-left: 0.03em;
}

.a-btn-arrow {
  display: inline-block;
  font-size: 3.75rem;
  width: 1em;
  height: 1em;
  border-radius: .5em;
  cursor: pointer;
  transform-origin: 0.5em 0.5em;
  color: currentColor;
  position: relative;
}

.a-btn-arrow, .a-btn-arrow:before {
  transition: all 0.1s ease-in-out 0.3s, outline-color 0s linear 0s;
  outline-color: black;
}

.a-btn-arrow:after,
.a-btn-arrow i {
  transition: all 0.1s ease-in-out 0.3s, outline-color 0s linear 0s;
  outline-color: black;
}

.a-btn-arrow:hover:after, .a-btn-arrow:hover:before,
.a-btn-arrow:hover i {
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

.a-btn-arrow:before, .a-btn-arrow:after {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 0;
  left: 0;
  border: 0.16667rem solid currentColor;
  border-radius: .5em;
}

.a-btn-arrow:before {
  opacity: 0;
}

a:hover > .a-btn-arrow:before, .a-btn-arrow:hover:before {
  opacity: .3;
  transform: scale(1.5, 1.5);
  border-width: 0.08333rem;
}

a:hover > .a-btn-arrow i, .a-btn-arrow:hover i {
  transform: scale(0.7, 0.7);
}

a:hover > .a-btn-arrow:after, .a-btn-arrow:hover:after {
  transform: scale(0.8, 0.8);
}

.a-btn-arrow i {
  font-size: 1.2em;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -.18em;
  margin-top: -.07em;
}

.a-btn-arrow--white {
  background-color: white;
  border-color: white;
  color: rgba(46, 46, 46, 0.4);
}

.a-btn-arrow--white:before, .a-btn-arrow--white:after {
  border-color: white;
}

.a-btn-arrow--up {
  transform: rotate(-90deg);
}

.a-btn-arrow--down {
  transform: rotate(90deg);
}

.a-btn-arrow--left {
  transform: scaleX(-1);
}

.a-corner-badge {
  font-size: 1em;
  width: 3.8em;
  height: 3.8em;
  padding: 0.56em;
}

.a-corner-badge:before {
  border-width: 1.9em;
}

/**
			 * @name 	```.a-corner-badge--tl```
			 * @styleguide 	Objects / A Corner Badge
			 * @example 	html
			 * <div class="a-corner-badge a-corner-badge--tl">
			 * 	<!-- content here -->
			 * </div>
			 */
.a-corner-badge--tl {
  font-size: 1em;
  width: 3.8em;
  height: 3.8em;
  padding: 0.56em;
  top: 0;
  left: 0;
}

.a-corner-badge--tl:before {
  border-width: 1.9em;
}

.a-corner-badge--tl:before {
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  top: 0;
  left: 0;
}

/**
			 * @name 	```.a-corner-badge--tr```
			 * @styleguide 	Objects / A Corner Badge
			 * @example 	html
			 * <div class="a-corner-badge a-corner-badge--tr">
			 * 	<!-- content here -->
			 * </div>
			 */
.a-corner-badge--tr {
  font-size: 1em;
  width: 3.8em;
  height: 3.8em;
  padding: 0.56em;
  top: 0;
  right: 0;
  text-align: right;
}

.a-corner-badge--tr:before {
  border-width: 1.9em;
}

.a-corner-badge--tr:before {
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  top: 0;
  right: 0;
}

/**
			 * @name 	```.a-corner-badge--bl```
			 * @styleguide 	Objects / A Corner Badge
			 * @example 	html
			 * <div class="a-corner-badge a-corner-badge--bl">
			 * 	<!-- content here -->
			 * </div>
			 */
.a-corner-badge--bl {
  font-size: 1em;
  width: 3.8em;
  height: 3.8em;
  padding: 0.56em;
  bottom: 0;
  left: 0;
}

.a-corner-badge--bl:before {
  border-width: 1.9em;
}

.a-corner-badge--bl:before {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  bottom: 0;
  left: 0;
}

/**
			 * @name 	```.a-corner-badge--br```
			 * @styleguide 	Objects / A Corner Badge
			 * @example 	html
			 * <div class="a-corner-badge a-corner-badge--br">
			 * 	<!-- content here -->
			 * </div>
			 */
.a-corner-badge--br {
  font-size: 1em;
  width: 3.8em;
  height: 3.8em;
  padding: 0.56em;
  bottom: 0;
  right: 0;
}

.a-corner-badge--br:before {
  border-width: 1.9em;
}

.a-corner-badge--br:before {
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  bottom: 0;
  right: 0;
}

/**
			 * @name 	<span class="c-default">Default</span> ```.a-corner-badge--default```
			 * @styleguide 	Objects / A Corner Badge
			 * @example 	html
			 * <div class="a-corner-badge a-corner-badge--tl a-corner-badge--default">
			 * 	<!-- content here -->
			 * </div>
			 */
.a-corner-badge {
  color: white;
}

.a-corner-badge:before {
  border-color: #2e2e2e;
}

/**
			 * @name 	<span class="c-primary">Primary</span> ```.a-corner-badge--primary```
			 * @styleguide 	Objects / A Corner Badge
			 * @example 	html
			 * <div class="a-corner-badge a-corner-badge--tl a-corner-badge--primary">
			 * 	<!-- content here -->
			 * </div>
			 */
.a-corner-badge--primary {
  color: white;
}

.a-corner-badge--primary:before {
  border-color: #82a8bb;
}

/**
			 * @name 	<span class="c-secondary">Secondary</span> ```.a-corner-badge--secondary```
			 * @styleguide 	Objects / A Corner Badge
			 * @example 	html
			 * <div class="a-corner-badge a-corner-badge--tl a-corner-badge--secondary">
			 * 	<!-- content here -->
			 * </div>
			 */
.a-corner-badge--secondary {
  color: white;
}

.a-corner-badge--secondary:before {
  border-color: #2D8067;
}

/**
		 * @name 	```.a-dropdown```
		 * Provide a nice dropdown component
		 * @styleguide 		Objects / A Dropdown
		 * @example 	html
		 * <div style="display:inline-block" class="a-dropdown">
		 * 	<a>Display dropdown</a>
		 * 	<ul class="a-dropdown__menu">
		 *  	<li class="a-dropdown__item">
		 *   		<a href="#" title="...">
		 *   			Item 1
		 *   		</a>
		 *  	</li>
		 *  	<li class="a-dropdown__item">
		 *   		<a href="#" title="...">
		 *   			Item 2
		 *   		</a>
		 *  	</li>
		 *  	<li class="a-dropdown__item">
		 *   		<a href="#" title="...">
		 *   			Item 3
		 *   		</a>
		 *  	</li>
		 *  </ul>
		 * </div>
		 */
.a-dropdown {
  position: relative;
  /**
			 * @name 	```.a-dropdown--right```
			 * Provide a nice dropdown component aligned to the right
			 * @styleguide 		Objects / A Dropdown
			 * @example 	html
			 * <div style="display:inline-block" class="a-dropdown a-dropdown--right">
			 * 	<a>Display right dropdown</a>
			 * 	<ul class="a-dropdown__menu">
			 *  	<li class="a-dropdown__item">
			 *   		<a href="#" title="...">
			 *   			Item 1
			 *   		</a>
			 *  	</li>
			 *  	<li class="a-dropdown__item">
			 *   		<a href="#" title="...">
			 *   			Item 2
			 *   		</a>
			 *  	</li>
			 *  	<li class="a-dropdown__item">
			 *   		<a href="#" title="...">
			 *   			Item 3
			 *   		</a>
			 *  	</li>
			 *  </ul>
			 * </div>
			 */
}

.a-dropdown:hover, .a-dropdown.active, .a-dropdown:active, .a-dropdown.a-dropdown--active {
  z-index: 1;
}

.a-dropdown:hover .a-dropdown__menu, .a-dropdown.active .a-dropdown__menu, .a-dropdown:active .a-dropdown__menu, .a-dropdown.a-dropdown--active .a-dropdown__menu {
  top: 100%;
}

.a-dropdown.a-dropdown--right .a-dropdown__menu {
  left: auto;
  right: 0;
}

.a-dropdown.a-dropdown--up .a-dropdown__menu {
  top: auto;
  bottom: 100%;
}

.a-dropdown.a-dropdown--up:hover .a-dropdown__menu, .a-dropdown.a-dropdown--up.active .a-dropdown__menu, .a-dropdown.a-dropdown--up:active .a-dropdown__menu, .a-dropdown.a-dropdown--up.a-dropdown--active .a-dropdown__menu {
  top: auto;
  bottom: 100%;
}

.a-dropdown__menu {
  transition: all 0.2s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

.a-dropdown__item {
  white-space: nowrap;
}

.a-dropdown__item > a {
  display: block;
}

.a-dropdown__menu {
  background: #82a8bb;
  box-shadow: rgba(0, 0, 0, 0.2) 0 4px 6px;
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
  overflow: hidden;
}

.a-dropdown__item {
  border-top: solid 1px rgba(130, 168, 187, 0.2);
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
  background-color: white;
  left: 0;
  position: relative;
  color: #2e2e2e;
  transition: left 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

.a-dropdown__item:hover, .a-dropdown__item.active, .a-dropdown__item:active, .a-dropdown__item.a-dropdown--active {
  left: 5px;
}

.a-dropdown__item > a {
  padding: 0.8em 1.4em;
  color: #2e2e2e;
  display: block;
  width: 100%;
}

/**
			 * @name 	<span class="c-default">Default</span> ```.a-dropdown--default```
			 * Provide a nice dropdown default component
			 * @styleguide 		Objects / A Dropdown
			 * @example 	html
			 * <div style="display:inline-block" class="a-dropdown a-dropdown--default">
			 * 	<a>Display default dropdown</a>
			 * 	<ul class="a-dropdown__menu">
			 *  	<li class="a-dropdown__item">
			 *   		<a href="#" title="...">
			 *   			Item 1
			 *   		</a>
			 *  	</li>
			 *  	<li class="a-dropdown__item">
			 *   		<a href="#" title="...">
			 *   			Item 2
			 *   		</a>
			 *  	</li>
			 *  	<li class="a-dropdown__item">
			 *   		<a href="#" title="...">
			 *   			Item 3
			 *   		</a>
			 *  	</li>
			 *  </ul>
			 * </div>
			 */
.a-dropdown--default .a-dropdown__menu {
  background-color: #82a8bb;
}

.a-dropdown {
  font-size: 1rem;
}

.a-dropdown__menu {
  top: -0.83333rem !important;
  left: -0.83333rem;
}

/**
 * @name 	SlabelPushComponent
 * All the mixins used to generate the default style classes of the component
 */
/**
 * Print out the bare and style component css
 * @param 	{List<Color>} 		[$color=default primary secondary] 		The colors to generate
 */
/**
 * Print out the bare component css
 */
/**
 * Print out the style component css
 * @param 	{List<Color>} 		[$color=default primary secondary] 		The colors to generate
 */
/**
 * @name 	s-radiobox
 * This file provide all the mixins to generate component classes
 */
/**
 * Print out the bare and style component css
 * @param 	{List<Color>} 		[$color=default primary secondary] 		The colors to generate
 */
/**
 * Print out the bare component css
 */
/**
 * Print out the style component css
 * @param 	{List<Color>} 		[$color=default primary secondary] 		The colors to generate
 */
/**
		 * @name 	```.a-form-input```
		 * @styleguide 		Forms / Input
		 * @example 	html
		 * <input class="a-form-input" placeholder="Hello world" />
		 */
.a-form-input {
  font-family: regular;
  border-radius: 0em;
  padding: 0 0;
  height: 3em;
}

.a-form-input:not(input):not(select) {
  padding: 1em 0;
}

.a-form-input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.a-form-input::-ms-clear {
  display: none;
}

/**
		 * @name 	```.a-form-select```
		 * @styleguide 		Forms / Select
		 * @example 	html
		 * <select class="form-select">
		 * 	<option>Value 1</option>
		 * 	<option>Value 2</option>
		 * 	<option>Value 3</option>
		 * </select>
		 */
.a-form-select {
  font-family: regular;
  background-size: 9px 6px;
  background-position: right center;
  background-origin: content-box;
  background-repeat: no-repeat;
  background-color: white;
  border-radius: 0em;
  padding: 0 0;
  height: 3em;
}

.a-form-select:not(input):not(select) {
  padding: 1em 0;
}

.a-form-select::-ms-expand {
  display: none;
}

/**
		 * @name 	```.a-form-textarea```
		 * @styleguide 		Forms / Textarea
		 * @example 	html
		 * <textarea class="a-form-textarea" placeholder="Hello world"></textarea>
		 */
.a-form-textarea {
  font-family: regular;
  padding: 1em 0;
  display: inline-block;
}

/**
		 * @name 	```.a-form-group```
		 * @styleguide 		Forms / Group
		 * @example 	html
		 * <div class="a-form-group">
		 * 	<input class="a-form-input" placeholder="Hello world" />
		 * 	<input class="btn" type="submit" value="Ok" />
		 * </div>
		 */
.a-form-group {
  display: flex !important;
  flex: 1 !important;
  align-items: center !important;
}

.a-form-group > * {
  flex: 1;
}

.a-form-group > input[type="submit"],
.a-form-group > input[type="checkbox"],
.a-form-group > input[type="radio"],
.a-form-group > button,
.a-form-group .a-form-addon {
  flex: 0;
}

/**
		 * @name 	```.a-form-addon```
		 * @styleguide 		Forms / Addon
		 * @example 	html
		 * <div class="a-form-group">
		 * 	<div class="a-form-addon">
		 *  	Email
		 *  </div>
		 * 	<input class="a-form-input" placeholder="john.doe@gmail.com" />
		 * 	<input class="btn" type="submit" value="Ok" />
		 * </div>
		 */
.a-form-addon {
  border-radius: 0em;
  padding: 0 0;
  height: 3em;
}

.a-form-addon:not(input):not(select) {
  padding: 1em 0;
}

.a-form-addon.vr,
.vr .a-form-addon {
  margin-bottom: 1em;
}

[is="s-label-push"] > input {
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

[is="s-label-push"] > span {
  padding: 1em 0;
  height: 3em;
  transition: left 0.2s ease-in-out 0s, transform 0.2s ease-in-out 0s, opacity 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

[is="s-label-push"][color="default"] > input[placeholder] ~ span,
[is="s-label-push"][color="default"] > input[value] ~ span,
[is="s-label-push"][color="default"] > input[has-value] ~ span,
[is="s-label-push"][color="default"] > input:focus ~ span {
  color: #2e2e2e;
}

[is="s-label-push"][color="primary"] > input[placeholder] ~ span,
[is="s-label-push"][color="primary"] > input[value] ~ span,
[is="s-label-push"][color="primary"] > input[has-value] ~ span,
[is="s-label-push"][color="primary"] > input:focus ~ span {
  color: #82a8bb;
}

[is="s-label-push"][color="secondary"] > input[placeholder] ~ span,
[is="s-label-push"][color="secondary"] > input[value] ~ span,
[is="s-label-push"][color="secondary"] > input[has-value] ~ span,
[is="s-label-push"][color="secondary"] > input:focus ~ span {
  color: #2D8067;
}

input[is="s-radiobox"][type="radio"] + .s-radiobox,
input[is="s-radiobox"][type="checkbox"] + .s-radiobox {
  display: inline-block;
  position: relative;
  cursor: pointer;
  vertical-align: bottom;
  width: 1em;
  height: 1em;
}

input[is="s-radiobox"][type="radio"] + .s-radiobox:before,
input[is="s-radiobox"][type="checkbox"] + .s-radiobox:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
  height: 1em;
  width: 1em;
  pointer-events: none;
}

input[is="s-radiobox"][type="radio"] + .s-radiobox:after,
input[is="s-radiobox"][type="checkbox"] + .s-radiobox:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
  z-index: 1;
}

label:hover > input[is="s-radiobox"][type="radio"] + .s-radiobox:after, input[is="s-radiobox"][type="radio"] + .s-radiobox:hover:after, input[is="s-radiobox"][type="radio"]:checked + .s-radiobox:after, label:hover >
input[is="s-radiobox"][type="checkbox"] + .s-radiobox:after,
input[is="s-radiobox"][type="checkbox"] + .s-radiobox:hover:after,
input[is="s-radiobox"][type="checkbox"]:checked + .s-radiobox:after {
  width: .4em;
  height: .4em;
}

input[is="s-radiobox"][type="radio"] {
  border-radius: 50% !important;
}

input[is="s-radiobox"][type="radio"] + .s-radiobox, input[is="s-radiobox"][type="radio"] + .s-radiobox:after, input[is="s-radiobox"][type="radio"] + .s-radiobox:before {
  border-radius: 50% !important;
}

.s-radiobox + span {
  margin-left: .5em;
}

.s-radiobox {
  font-size: 1.4em;
  border: .1em solid black;
}

.s-radiobox:after {
  background-color: black;
}

.s-radiobox + span {
  vertical-align: text-top;
}

.a-form-input {
  font-family: regular;
  font-size: 1.16667rem;
  background: none;
  border: 0.08333rem solid transparent;
  border-bottom-color: #999999;
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

.cs-light .a-form-input, [color-schema="light"] .a-form-input, .cs-lighter .a-form-input, [color-schema="lighter"] .a-form-input {
  color: white;
}

.a-form-input[invalid] {
  border-bottom-color: #d9534f;
}

.a-form-input::-webkit-input-placeholder {
  color: rgba(46, 46, 46, 0.3);
}

.a-form-input:-moz-placeholder {
  color: rgba(46, 46, 46, 0.3);
}

.a-form-input::-moz-placeholder {
  color: rgba(46, 46, 46, 0.3);
}

.a-form-input:-ms-input-placeholder {
  color: rgba(46, 46, 46, 0.3);
}

.input--placeholder {
  color: rgba(46, 46, 46, 0.3);
}

.cs-light .a-form-input::-webkit-input-placeholder, [color-schema="light"] .a-form-input::-webkit-input-placeholder, .cs-lighter .a-form-input::-webkit-input-placeholder, [color-schema="lighter"] .a-form-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.cs-light .a-form-input:-moz-placeholder, [color-schema="light"] .a-form-input:-moz-placeholder, .cs-lighter .a-form-input:-moz-placeholder, [color-schema="lighter"] .a-form-input:-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.cs-light .a-form-input::-moz-placeholder, [color-schema="light"] .a-form-input::-moz-placeholder, .cs-lighter .a-form-input::-moz-placeholder, [color-schema="lighter"] .a-form-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.cs-light .a-form-input:-ms-input-placeholder, [color-schema="light"] .a-form-input:-ms-input-placeholder, .cs-lighter .a-form-input:-ms-input-placeholder, [color-schema="lighter"] .a-form-input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.input--placeholder {
  color: rgba(255, 255, 255, 0.3);
}

select.a-form-input {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'%3E%3Cpolygon points='0,0 32,0 16,24' style='fill:%232e2e2e'%3E%3C/polygon%3E%3C/svg%3E");
  background-size: .6em .6em;
  background-position: calc(100% - 5px) 50%;
  background-repeat: no-repeat;
}

select.a-form-input::-ms-expand {
  display: none;
}

select.a-form-input[empty] {
  font-family: light;
  color: #2e2e2e;
  font-size: 1.16667rem;
}

select.a-form-input[invalid] {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'%3E%3Cpolygon points='0,0 32,0 16,24' style='fill:%23d9534f'%3E%3C/polygon%3E%3C/svg%3E");
  color: #d9534f;
}

.a-form-input--bordered {
  border-color: #f2f2f2;
  padding-left: 1em;
  padding-right: 1em;
}

.cs-light .a-form-input--bordered, [color-schema="light"] .a-form-input--bordered, .cs-lighter .a-form-input--bordered, [color-schema="lighter"] .a-form-input--bordered {
  border-color: rgba(242, 242, 242, 0.3);
}

.a-form-input--bordered[invalid] {
  border-color: #d9534f;
}

.a-form-input--search {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' width='1000' height='1000' viewBox='0 0 1000 1000'%3E%3Cpath x='0' y='0' style='fill:%232e2e2e' d='M764.7 382.4c0-105.8-37.4-196.2-112.3-271.2C578.2 37.1 488.2 0 382.3 0S186.1 37.1 111.2 111.2C37.1 186.2 0 276.6 0 382.4s37.1 195.8 111.2 270c75 74.9 165.4 112.4 271.2 112.3s195.8-37.5 270-112.3c74.9-74.2 112.3-164.2 112.3-270M610.6 153c63.5 63.4 95.3 139.9 95.3 229.4S674.2 548 610.6 610.7c-62.7 63.5-138.8 95.2-228.2 95.3-89.5 0-165.9-31.7-229.4-95.3C90.3 548 58.9 471.9 58.9 382.4S90.3 216.4 153 153c63.4-62.7 139.9-94.1 229.4-94.1S547.9 90.3 610.6 153M1000 970.7c.1-8-3.1-15.6-8.8-21.2L720 678.3c-5.4-5.5-12.9-8.4-20.6-8.2-15.6-.7-28.7 11.4-29.4 27v2.4c-.2 7.7 2.8 15.1 8.2 20.6l271.2 271.2c5.5 5.7 13.2 8.9 21.2 8.8 16.1-.5 29-13.4 29.4-29.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: auto 1.2em;
  background-position: 0 53%;
  padding-left: 2em;
  padding-right: 2em;
}

.a-form-input--search.a-form-input--bordered {
  background-position: 1em 53%;
  padding-left: 3em;
}

.a-form-input--search + button {
  position: absolute;
  top: 1.08333rem;
  right: 0;
  background: none;
  outline: none;
  border: none;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

.a-form-input--search[has-value] + button {
  opacity: 1;
  pointer-events: all;
}

textarea.a-form-input {
  height: 6em;
  padding-top: 3em !important;
  line-height: 1.6;
}

.a-form-label {
  position: relative;
  display: block;
}

.a-form-label > textarea + span {
  position: absolute;
  top: 0;
  left: 0;
}

[is="s-label-push"] {
  display: block;
}

.a-form-label > span {
  font-family: light;
  color: #2e2e2e;
  font-size: 1.16667rem;
  padding: 1em 0;
}

.a-form-label > [invalid] + span {
  color: #d9534f;
}

.a-form-label > [required] + span:after {
  content: ' *';
  color: #d9534f;
}

.a-shape {
  display: inline-block;
}

.a-shape--disc {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  border-radius: .5em;
  position: relative;
}

.a-shape--disc:after {
  content: '';
  display: block;
  border-radius: 1em;
  border: 0.08333rem currentColor solid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
  width: 2em;
  height: 2em;
  border-radius: 1em;
}

/**
		 * @name 		```.a-table```
		 * Display table contents
		 * @styleguide 		Objects / A Table
		 * @example 		html
		 * <table class="a-table">
		 * 	<thead>
		 * 		<tr>
		 *  		<th>#</th>
		 *  		<th>Table head 1</th>
		 *  		<th>Table head 2</th>
		 *  		<th>Table head 3</th>
		 * 		</tr>
		 * 	</thead>
		 * 	<tbody>
		 * 		<tr>
		 *  		<td>1</td>
		 *  		<td>Table cell 1</td>
		 *  		<td>Table cell 2</td>
		 *  		<td>Table cell 3</td>
		 * 		</tr>
		 * 	</tbody>
		 * </table>
		 */
.a-table {
  width: 100%;
}

.a-table.vr,
.vr .a-table {
  margin-bottom: 2em;
}

.a-table .th, .a-table th {
  text-align: left;
}

.a-table .th, .a-table th,
.a-table .td, .a-table td {
  padding: 0.8em 1.4em;
  position: relative;
}

.a-table .th:last-child, .a-table th:last-child,
.a-table .td:last-child, .a-table td:last-child {
  border-right: none;
}

.a-table .th:before, .a-table th:before,
.a-table .td:before, .a-table td:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(0) translateY(-50%) translateZ(0);
  width: 100%;
  height: 100%;
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
  border-width: 0;
  border-color: transparent;
  border-style: solid;
  border-top-width: 0.08333rem;
  border-bottom-width: 0.08333rem;
  pointer-events: none;
}

.a-table .th:last-child:before, .a-table th:last-child:before,
.a-table .td:last-child:before, .a-table td:last-child:before {
  border-right-width: 1px;
}

.a-table .th:first-child:before, .a-table th:first-child:before,
.a-table .td:first-child:before, .a-table td:first-child:before {
  border-left-width: 1px;
}

.a-table .th, .a-table th {
  font-weight: bold;
  position: relative;
}

.a-table .tr:last-child .td,
.a-table tr:last-child td,
.a-table .tr:last-child:not(:first-child) .th,
.a-table tr:last-child:not(:first-child) th {
  border-bottom: none !important;
}

.a-table .caption:before,
.a-table caption:before {
  content: "\2014 \00A0";
}

.a-table .td.adapt,
.a-table td.adapt,
.a-table .th.adapt,
.a-table th.adapt {
  width: 1px;
  white-space: nowrap;
}

.a-table .td.grow,
.a-table td.grow,
.a-table .th.grow,
.a-table th.grow {
  width: 9999999px;
}

/**
			 * @name 			```.a-table--responsive-overflow```
			 * Display responsive overflow table contents
			 * @styleguide 		Objects / A Table
			 * @example 		html
			 * <table class="a-table a-table--responsive-overflow">
			 * 	<thead>
			 * 		<tr>
			 *  		<th>#</th>
			 *  		<th>Table head 1</th>
			 *  		<th>Table head 2</th>
			 *  		<th>Table head 3</th>
			 * 		</tr>
			 * 	</thead>
			 * 	<tbody>
			 * 		<tr>
			 *  		<td>1</td>
			 *  		<td>Table cell 1</td>
			 *  		<td>Table cell 2</td>
			 *  		<td>Table cell 3</td>
			 * 		</tr>
			 * 	</tbody>
			 * </table>
			 */
.a-table--responsive-overflow {
  min-height: 0.01%;
  overflow-x: auto;
  width: 100%;
  overflow-y: hidden;
}

/**
			 * @name 			```.a-table--responsive```
			 * Display responsive table contents
			 * @styleguide 		Objects / A Table
			 * @example 		html
			 * <table class="a-table a-table--responsive">
			 * 	<thead>
			 * 		<tr>
			 *  		<th>#</th>
			 *  		<th>Table head 1</th>
			 *  		<th>Table head 2</th>
			 *  		<th>Table head 3</th>
			 * 		</tr>
			 * 	</thead>
			 * 	<tbody>
			 * 		<tr>
			 *  		<td label="id">1</td>
			 *  		<td label="Label #1">Table cell 1</td>
			 *  		<td label="Label #2">Table cell 2</td>
			 *  		<td label="Label #3">Table cell 3</td>
			 * 		</tr>
			 * 	</tbody>
			 * </table>
			 */
/**
			 * @name 		```.a-table--center```
			 * Display centered table contents
			 * @styleguide 		Objects / A Table
			 * @example 		html
			 * <table class="a-table a-table--center">
			 * 	<thead>
			 * 		<tr>
			 *  		<th>#</th>
			 *  		<th>Table head 1</th>
			 *  		<th>Table head 2</th>
			 *  		<th>Table head 3</th>
			 * 		</tr>
			 * 	</thead>
			 * 	<tbody>
			 * 		<tr>
			 *  		<td>1</td>
			 *  		<td>Table cell 1</td>
			 *  		<td>Table cell 2</td>
			 *  		<td>Table cell 3</td>
			 * 		</tr>
			 * 	</tbody>
			 * </table>
			 */
.a-table--center td, .a-table--center .td,
.a-table--center th, .a-table--center .th {
  text-align: center;
}

/**
			 * @name 		```.a-table--middle```
			 * Display middle aligned table contents
			 * @styleguide 		Objects / A Table
			 * @example 		html
			 * <table class="a-table a-table--middle">
			 * 	<thead>
			 * 		<tr>
			 *  		<th>#</th>
			 *  		<th>Table head 1</th>
			 *  		<th>Table head 2</th>
			 *  		<th>Table head 3</th>
			 * 		</tr>
			 * 	</thead>
			 * 	<tbody>
			 * 		<tr>
			 *  		<td>1</td>
			 *  		<td>Table cell 1</td>
			 *  		<td>
			 *  			<p class="p">
			 *  			Mauris sem nulla, maximus id dignissim vitae,<br>
			 *  			ullamcorper a turpis. Vestibulum vel eros non nisl<br>
			 *  			euismod tempus vitae non turpis.
			 *  			</p>
			 *  		</td>
			 *  		<td>Table cell 3</td>
			 * 		</tr>
			 * 	</tbody>
			 * </table>
			 */
.a-table--middle td, .a-table--middle .td,
.a-table--middle th, .a-table--middle .th {
  vertical-align: middle;
}

/**
			 * @name 		```.a-table--interactive```
			 * Display cursor on table rows contents
			 * @styleguide 		Objects / A Table
			 * @example 		html
			 * <table class="a-table a-table--interactive">
			 * 	<thead>
			 * 		<tr>
			 *  		<th>#</th>
			 *  		<th>Table head 1</th>
			 *  		<th>Table head 2</th>
			 *  		<th>Table head 3</th>
			 * 		</tr>
			 * 	</thead>
			 * 	<tbody>
			 * 		<tr>
			 *  		<td>1</td>
			 *  		<td>Table cell 1</td>
			 *  		<td>
			 *  			<p class="p">
			 *  			Mauris sem nulla, maximus id dignissim vitae,<br>
			 *  			ullamcorper a turpis. Vestibulum vel eros non nisl<br>
			 *  			euismod tempus vitae non turpis.
			 *  			</p>
			 *  		</td>
			 *  		<td>Table cell 3</td>
			 * 		</tr>
			 * 	</tbody>
			 * </table>
			 */
.a-table--interactive tbody tr,
.a-table--interactive tbody .tr,
.a-table--interactive .tbody tr,
.a-table--interactive .tbody .tr {
  cursor: pointer;
}

.a-table {
  /**
				 * @name 		<span class="c-default">Default</span> ```.a-table--default```
				 * Display default table contents
				 * @styleguide 		Objects / A Table
				 * @example 		html
				 * <table class="a-table a-table--default">
				 * 	<thead>
				 * 		<tr>
				 *  		<th>#</th>
				 *  		<th>Table head 1</th>
				 *  		<th>Table head 2</th>
				 *  		<th>Table head 3</th>
				 * 		</tr>
				 * 	</thead>
				 * 	<tbody>
				 * 		<tr>
				 *  		<td>1</td>
				 *  		<td>Table cell 1</td>
				 *  		<td>Table cell 2</td>
				 *  		<td>Table cell 3</td>
				 * 		</tr>
				 * 	</tbody>
				 * </table>
				 */
}

.a-table tr {
  border-bottom: 1px solid rgba(46, 46, 46, 0.1);
}

.a-table tbody tr:last-of-type {
  border-bottom: none;
}

.a-table.a-table {
  /**
						 * @name 		<span class="c-default">Default</span> ```.a-table--striped.a-table--default```
						 * Display default striped table contents
						 * @styleguide 		Objects / A Table
						 * @example 		html
						 * <table class="a-table a-table--default a-table--striped">
						 * 	<thead>
						 * 		<tr>
						 *  		<th>#</th>
						 *  		<th>Table head 1</th>
						 *  		<th>Table head 2</th>
						 *  		<th>Table head 3</th>
						 * 		</tr>
						 * 	</thead>
						 * 	<tbody>
						 * 		<tr>
						 *  		<td>1</td>
						 *  		<td>Table cell 1</td>
						 *  		<td>Table cell 2</td>
						 *  		<td>Table cell 3</td>
						 * 		</tr>
						 * 	</tbody>
						 * </table>
						 */
  /**
						 * @name 		<span class="c-default">Default</span> ```.a-table--bordered.a-table--default```
						 * Display default bordered table contents
						 * @styleguide 		Objects / A Table
						 * @example 		html
						 * <table class="a-table a-table--default a-table--bordered">
						 * 	<thead>
						 * 		<tr>
						 *  		<th>#</th>
						 *  		<th>Table head 1</th>
						 *  		<th>Table head 2</th>
						 *  		<th>Table head 3</th>
						 * 		</tr>
						 * 	</thead>
						 * 	<tbody>
						 * 		<tr>
						 *  		<td>1</td>
						 *  		<td>Table cell 1</td>
						 *  		<td>Table cell 2</td>
						 *  		<td>Table cell 3</td>
						 * 		</tr>
						 * 	</tbody>
						 * </table>
						 */
  /**
						 * @name 		<span class="c-default">Default</span> ```.a-table--hover.a-table--default```
						 * Display default hoverable table contents
						 * @styleguide 		Objects / A Table
						 * @example 		html
						 * <table class="a-table a-table--default a-table--hover">
						 * 	<thead>
						 * 		<tr>
						 *  		<th>#</th>
						 *  		<th>Table head 1</th>
						 *  		<th>Table head 2</th>
						 *  		<th>Table head 3</th>
						 * 		</tr>
						 * 	</thead>
						 * 	<tbody>
						 * 		<tr>
						 *  		<td>1</td>
						 *  		<td>Table cell 1</td>
						 *  		<td>Table cell 2</td>
						 *  		<td>Table cell 3</td>
						 * 		</tr>
						 * 	</tbody>
						 * </table>
						 */
}

.a-table.a-table th {
  color: #2e2e2e;
}

.a-table.a-table.a-table--striped > thead > .tr:nth-of-type(odd) > td,
.a-table.a-table.a-table--striped > thead > .tr:nth-of-type(odd) > th,
.a-table.a-table.a-table--striped > thead > tr:nth-of-type(odd) > td,
.a-table.a-table.a-table--striped > thead > tr:nth-of-type(odd) > th {
  background-color: rgba(46, 46, 46, 0.2);
}

.a-table.a-table.a-table--striped > tbody > .tr:nth-of-type(even) > td,
.a-table.a-table.a-table--striped > tbody > .tr:nth-of-type(even) > th,
.a-table.a-table.a-table--striped > tbody > tr:nth-of-type(even) > td,
.a-table.a-table.a-table--striped > tbody > tr:nth-of-type(even) > th {
  background-color: rgba(46, 46, 46, 0.05);
}

.a-table.a-table.a-table--bordered {
  border: 1px solid rgba(46, 46, 46, 0.1);
}

.a-table.a-table.a-table--bordered tr {
  border-bottom: 1px solid rgba(46, 46, 46, 0.1);
}

.a-table.a-table.a-table--bordered tr:last-of-type {
  border-bottom: none;
}

.a-table.a-table.a-table--bordered td,
.a-table.a-table.a-table--bordered th {
  border-right: 1px solid rgba(46, 46, 46, 0.1);
}

.a-table.a-table.a-table--hover > tbody > .tr:hover td, .a-table.a-table.a-table--hover > tbody > .tr:hover .td,
.a-table.a-table.a-table--hover > tbody > .tr:hover th, .a-table.a-table.a-table--hover > tbody > .tr:hover .th,
.a-table.a-table.a-table--hover > tbody > tr:hover td,
.a-table.a-table.a-table--hover > tbody > tr:hover .td,
.a-table.a-table.a-table--hover > tbody > tr:hover th,
.a-table.a-table.a-table--hover > tbody > tr:hover .th {
  background-color: rgba(46, 46, 46, 0.1);
}

.a-tooltip {
  border-radius: 0em;
  padding: 0.8em 1.4em;
  line-height: 1.4;
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

.a-tooltip {
  box-shadow: rgba(0, 0, 0, 0.2) 0 10px 15px;
}

@keyframes s-tooltip-component {
  0% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes s-tooltip-component--c {
  0% {
    transform: scale(0.9, 0.9) translateX(-50%) translateY(-50%);
  }
  100% {
    transform: scale(1, 1) translateX(-50%) translateY(-50%);
  }
}

@keyframes s-tooltip-component--b {
  0% {
    transform: scale(0.9, 0.9) translateX(-50%);
  }
  100% {
    transform: scale(1, 1) translateX(-50%);
  }
}

@keyframes s-tooltip-component--t {
  0% {
    transform: scale(0.9, 0.9) translateX(-50%);
  }
  100% {
    transform: scale(1, 1) translateX(-50%);
  }
}

@keyframes s-tooltip-component--l {
  0% {
    transform: scale(0.9, 0.9) translateY(-50%);
  }
  100% {
    transform: scale(1, 1) translateY(-50%);
  }
}

@keyframes s-tooltip-component--r {
  0% {
    transform: scale(0.9, 0.9) translateY(-50%);
  }
  100% {
    transform: scale(1, 1) translateY(-50%);
  }
}

.a-tooltip {
  background-color: #2e2e2e;
  color: white;
  /**
					 * @name 		<span class="c-default">Default</span> ```.a-tooltip--c.a-tooltip--default```
					 * Display a default centered a-tooltip
					 * @styleguide 		Objects / A Tooltip
					 * @example 	html
					 * <div class="active bkg-primary" style="display: block; width: 10px; height: 10px; position: relative; margin: 50px auto;">
					 * 	<div class="a-tooltip a-tooltip--default a-tooltip--c">
					 * 		I'm a cool tooltip
					 * 	</div>
					 * </div>
					 */
  /**
					 * @name 		<span class="c-default">Default</span> ```.a-tooltip--t.a-tooltip--default```
					 * Display a default top centered a-tooltip
					 * @styleguide 		Objects / A Tooltip
					 * @example 	html
					 * <div class="active bkg-primary" style="display: block; width: 10px; height: 10px; position: relative; margin: 50px auto;">
					 * 	<div class="a-tooltip a-tooltip--default a-tooltip--t">
					 * 		I'm a cool tooltip
					 * 	</div>
					 * </div>
					 */
  /**
					 * @name 		<span class="c-default">Default</span> ```.a-tooltip--tl.a-tooltip--default```
					 * Display a default top left a-tooltip
					 * @styleguide 		Objects / A Tooltip
					 * @example 	html
					 * <div class="active bkg-primary" style="display: block; width: 10px; height: 10px; position: relative; margin: 50px auto;">
					 * 	<div class="a-tooltip a-tooltip--default a-tooltip--tl">
					 * 		I'm a cool tooltip
					 * 	</div>
					 * </div>
					 */
  /**
					 * @name 		<span class="c-default">Default</span> ```.a-tooltip--tr.a-tooltip--default```
					 * Display a default top right a-tooltip
					 * @styleguide 		Objects / A Tooltip
					 * @example 	html
					 * <div class="active bkg-primary" style="display: block; width: 10px; height: 10px; position: relative; margin: 50px auto;">
					 * 	<div class="a-tooltip a-tooltip--default a-tooltip--tr">
					 * 		I'm a cool tooltip
					 * 	</div>
					 * </div>
					 */
  /**
					 * @name 		<span class="c-default">Default</span> ```.a-tooltip--l.a-tooltip--default```
					 * Display a default left a-tooltip
					 * @styleguide 		Objects / A Tooltip
					 * @example 	html
					 * <div class="active bkg-primary" style="display: block; width: 10px; height: 10px; position: relative; margin: 50px auto;">
					 * 	<div class="a-tooltip a-tooltip--default a-tooltip--l">
					 * 		I'm a cool tooltip
					 * 	</div>
					 * </div>
					 */
  /**
					 * @name 		<span class="c-default">Default</span> ```.a-tooltip--r.a-tooltip--default```
					 * Display a default right a-tooltip
					 * @styleguide 		Objects / A Tooltip
					 * @example 	html
					 * <div class="active bkg-primary" style="display: block; width: 10px; height: 10px; position: relative; margin: 50px auto;">
					 * 	<div class="a-tooltip a-tooltip--default a-tooltip--r">
					 * 		I'm a cool tooltip
					 * 	</div>
					 * </div>
					 */
  /**
					 * @name 		<span class="c-default">Default</span> ```.a-tooltip--bl.a-tooltip--default```
					 * Display a default bottom left a-tooltip
					 * @styleguide 		Objects / A Tooltip
					 * @example 	html
					 * <div class="active bkg-primary" style="display: block; width: 10px; height: 10px; position: relative; margin: 50px auto;">
					 * 	<div class="a-tooltip a-tooltip--default a-tooltip--bl">
					 * 		I'm a cool tooltip
					 * 	</div>
					 * </div>
					 */
  /**
					 * @name 		<span class="c-default">Default</span> ```.a-tooltip--b.a-tooltip--default```
					 * Display a default bottom a-tooltip
					 * @styleguide 		Objects / A Tooltip
					 * @example 	html
					 * <div class="active bkg-primary" style="display: block; width: 10px; height: 10px; position: relative; margin: 50px auto;">
					 * 	<div class="a-tooltip a-tooltip--default a-tooltip--b">
					 * 		I'm a cool tooltip
					 * 	</div>
					 * </div>
					 */
  /**
					 * @name 		<span class="c-default">Default</span> ```.a-tooltip--br.a-tooltip--default```
					 * Display a default bottom right a-tooltip
					 * @styleguide 		Objects / A Tooltip
					 * @example 	html
					 * <div class="active bkg-primary" style="display: block; width: 10px; height: 10px; position: relative; margin: 50px auto;">
					 * 	<div class="a-tooltip a-tooltip--default a-tooltip--br">
					 * 		I'm a cool tooltip
					 * 	</div>
					 * </div>
					 */
}

.a-tooltip.a-tooltip--c {
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
}

.a-tooltip--active > .a-tooltip.a-tooltip--c, .a-tooltip.a-tooltip--c.active,
.active > .a-tooltip.a-tooltip--c,
:hover > .a-tooltip.a-tooltip--c {
  animation: s-tooltip-component--c 0.1s 0s ease-in-out 1 normal forwards;
}

.a-tooltip.a-tooltip--t {
  transform-origin: 0 calc(100% + 0.5em);
  left: 50%;
  bottom: calc(100% + 1em);
  transform: translateX(-50%) translateY(0) translateZ(0);
  position: relative;
  background: #2e2e2e;
  border-style: solid;
  border-width: 0;
}

.a-tooltip.a-tooltip--t:after, .a-tooltip.a-tooltip--t:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  visibility: visible;
}

.a-tooltip.a-tooltip--t:after {
  border-width: 0.5em;
  border-top-color: #2e2e2e;
  bottom: -1em;
  right: 50%;
  margin-right: -0.5em;
}

.a-tooltip.a-tooltip--t:before {
  border-width: 0.5em;
  bottom: -1em;
  right: 50%;
  margin-right: -0.5em;
}

.a-tooltip--active > .a-tooltip.a-tooltip--t, .a-tooltip.a-tooltip--t.active,
.active > .a-tooltip.a-tooltip--t,
:hover > .a-tooltip.a-tooltip--t {
  animation: s-tooltip-component--t 0.1s 0s ease-in-out 1 normal forwards;
}

.a-tooltip.a-tooltip--tl {
  transform-origin: 0 calc(100% + 0.5em);
  left: 0;
  bottom: calc(100% + 1em);
  position: relative;
  background: #2e2e2e;
  border-style: solid;
  border-width: 0;
}

.a-tooltip.a-tooltip--tl:after, .a-tooltip.a-tooltip--tl:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  visibility: visible;
}

.a-tooltip.a-tooltip--tl:after {
  border-width: 0.5em;
  border-top-color: #2e2e2e;
  bottom: -1em;
  left: 0.5em;
}

.a-tooltip.a-tooltip--tl:before {
  border-width: 0.5em;
  bottom: -1em;
  left: 0.5em;
}

.a-tooltip--active > .a-tooltip.a-tooltip--tl, .a-tooltip.a-tooltip--tl.active,
.active > .a-tooltip.a-tooltip--tl,
:hover > .a-tooltip.a-tooltip--tl {
  animation: s-tooltip-component 0.1s 0s ease-in-out 1 normal forwards;
}

.a-tooltip.a-tooltip--tr {
  transform-origin: 100% 100%;
  right: 0;
  bottom: calc(100% + 1em);
  position: relative;
  background: #2e2e2e;
  border-style: solid;
  border-width: 0;
}

.a-tooltip.a-tooltip--tr:after, .a-tooltip.a-tooltip--tr:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  visibility: visible;
}

.a-tooltip.a-tooltip--tr:after {
  border-width: 0.5em;
  border-top-color: #2e2e2e;
  bottom: -1em;
  right: 0.5em;
}

.a-tooltip.a-tooltip--tr:before {
  border-width: 0.5em;
  bottom: -1em;
  right: 0.5em;
}

.a-tooltip--active > .a-tooltip.a-tooltip--tr, .a-tooltip.a-tooltip--tr.active,
.active > .a-tooltip.a-tooltip--tr,
:hover > .a-tooltip.a-tooltip--tr {
  animation: s-tooltip-component 0.1s 0s ease-in-out 1 normal forwards;
}

.a-tooltip.a-tooltip--l {
  transform-origin: calc(100% + 0.5em) 50%;
  right: calc(100% + 0.5em);
  top: 50%;
  transform: translateX(0) translateY(-50%) translateZ(0);
  position: relative;
  background: #2e2e2e;
  border-style: solid;
  border-width: 0;
}

.a-tooltip.a-tooltip--l:after, .a-tooltip.a-tooltip--l:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  visibility: visible;
}

.a-tooltip.a-tooltip--l:after {
  border-width: 0.5em;
  border-left-color: #2e2e2e;
  right: -1em;
}

.a-tooltip.a-tooltip--l:before {
  border-width: 0.5em;
  right: -1em;
}

.a-tooltip--active > .a-tooltip.a-tooltip--l, .a-tooltip.a-tooltip--l.active,
.active > .a-tooltip.a-tooltip--l,
:hover > .a-tooltip.a-tooltip--l {
  animation: s-tooltip-component--l 0.1s 0s ease-in-out 1 normal forwards;
}

.a-tooltip.a-tooltip--r {
  transform-origin: -.5em 50%;
  left: calc(100% + 1em);
  top: 50%;
  transform: translateX(0) translateY(-50%) translateZ(0);
  position: relative;
  background: #2e2e2e;
  border-style: solid;
  border-width: 0;
}

.a-tooltip.a-tooltip--r:after, .a-tooltip.a-tooltip--r:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  visibility: visible;
}

.a-tooltip.a-tooltip--r:after {
  border-width: 0.5em;
  border-right-color: #2e2e2e;
  left: -1em;
}

.a-tooltip.a-tooltip--r:before {
  border-width: 0.5em;
  left: -1em;
}

.a-tooltip--active > .a-tooltip.a-tooltip--r, .a-tooltip.a-tooltip--r.active,
.active > .a-tooltip.a-tooltip--r,
:hover > .a-tooltip.a-tooltip--r {
  animation: s-tooltip-component--r 0.1s 0s ease-in-out 1 normal forwards;
}

.a-tooltip.a-tooltip--bl {
  transform-origin: 1em -1em;
  left: 0;
  top: calc(100% + 1em);
  position: relative;
  background: #2e2e2e;
  border-style: solid;
  border-width: 0;
}

.a-tooltip.a-tooltip--bl:after, .a-tooltip.a-tooltip--bl:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  visibility: visible;
}

.a-tooltip.a-tooltip--bl:after {
  border-width: 0.5em;
  border-bottom-color: #2e2e2e;
  top: -1em;
  left: 0.5em;
}

.a-tooltip.a-tooltip--bl:before {
  border-width: 0.5em;
  top: -1em;
  left: 0.5em;
}

.a-tooltip--active > .a-tooltip.a-tooltip--bl, .a-tooltip.a-tooltip--bl.active,
.active > .a-tooltip.a-tooltip--bl,
:hover > .a-tooltip.a-tooltip--bl {
  animation: s-tooltip-component 0.1s 0s ease-in-out 1 normal forwards;
}

.a-tooltip.a-tooltip--b {
  transform-origin: 0 -1em;
  left: 50%;
  top: calc(100% + 1em);
  transform: translateX(-50%) translateY(0) translateZ(0);
  position: relative;
  background: #2e2e2e;
  border-style: solid;
  border-width: 0;
}

.a-tooltip.a-tooltip--b:after, .a-tooltip.a-tooltip--b:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  visibility: visible;
}

.a-tooltip.a-tooltip--b:after {
  border-width: 0.5em;
  border-bottom-color: #2e2e2e;
  top: -1em;
  right: 50%;
  margin-right: -0.5em;
}

.a-tooltip.a-tooltip--b:before {
  border-width: 0.5em;
  top: -1em;
  right: 50%;
  margin-right: -0.5em;
}

.a-tooltip--active > .a-tooltip.a-tooltip--b, .a-tooltip.a-tooltip--b.active,
.active > .a-tooltip.a-tooltip--b,
:hover > .a-tooltip.a-tooltip--b {
  animation: s-tooltip-component--b 0.1s 0s ease-in-out 1 normal forwards;
}

.a-tooltip.a-tooltip--br {
  transform-origin: calc(100% - 1em) -1em;
  right: 0;
  top: calc(100% + 1em);
  position: relative;
  background: #2e2e2e;
  border-style: solid;
  border-width: 0;
}

.a-tooltip.a-tooltip--br:after, .a-tooltip.a-tooltip--br:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  visibility: visible;
}

.a-tooltip.a-tooltip--br:after {
  border-width: 0.5em;
  border-bottom-color: #2e2e2e;
  top: -1em;
  right: 0.5em;
}

.a-tooltip.a-tooltip--br:before {
  border-width: 0.5em;
  top: -1em;
  right: 0.5em;
}

.a-tooltip--active > .a-tooltip.a-tooltip--br, .a-tooltip.a-tooltip--br.active,
.active > .a-tooltip.a-tooltip--br,
:hover > .a-tooltip.a-tooltip--br {
  animation: s-tooltip-component 0.1s 0s ease-in-out 1 normal forwards;
}

s-recaptcha {
  border: solid 0.08333rem transparent;
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

input[type="checkbox"][invalid] + s-recaptcha {
  border: solid 0.08333rem #d9534f;
}

s-validator {
  color: #d9534f;
  font-size: 1rem;
  text-align: left;
  display: block;
  padding: 0 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.1s ease-in-out 0s, outline-color 0s linear 0s;
  outline-color: black;
}

s-validator[active] {
  max-height: 2em;
  padding: 0.66667rem 0;
}

/**
 * Trumps
 * All the things that does not fit in any others directory. Try to keep this folder has small as possible.
 * If you have to many things in here, that mean that you probably need to refactor your codebase...
 */
/**
 * Trumps
 * All the things that does not fit in any others directory. Try to keep this folder has small as possible.
 * If you have to many things in here, that mean that you probably need to refactor your codebase...
 */