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: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
/**
* @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
*/
/**
* Get the current state map
* @return {Map} The current state map
* @author Olivier Bossel
*/
/**
* Get the current state name
* @return {String} The current state name
* @author Olivier Bossel
*/
/**
* 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
*/
/*
* 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
*/
/**
* Check if a state exist :
* @param {String} $name The name of the state to check
* @return {Boolean} true if exist
* @author Olivier Bossel
*/
/**
* 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
*/
/**
* get the registered gridle states
* @return {Map} All the registered states
* @author Olivier Bossel
*/
/**
* get the registered gridle states names
* @return {List} All the registered states names
* @author Olivier Bossel
*/
/**
* Get the register columns map
* @param {String|List} [$state=current] The state name or map
* @return {Map} The map of registered columns for the specified state
* @author Olivier Bossel
*/
/**
* 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
*/
/**
* Return the current used driver
* @return {String} The used driver like default or driver
* @author Olivier Bossel
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* Register some basics states:
*
* - mobile : 0 to 480px
* - tablet : 481px to 1024px
*
* @example scss
* \@include g-register-default-states();
*
* @author Olivier Bossel
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* @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
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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} : Remove the specified gutters
* - ```gutter``` {Boolean|String|List} : 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* Display a debug grid on top of the row
* @example scss
* .my-row {
* \@include g-row-debug();
* }
*
* @author Olivier Bossel
*/
/**
* Make the element a grid container
* @example scss
* .my-cool-container {
* \@include g-container();
* }
*
* @author Olivier Bossel
*/
/**
* Remove the gutters on each columns inside the row
* @param {String|List} [$sides=top right bottom left] The sides to clear
* @example scss
* .my-cool-row {
* \@include g-row-no-gutter(left right);
* }
*
* @author Olivier Bossel
*/
/**
* Make a column centered
* @example scss
* .my-cool-column {
* \@include g-grid-centered();
* }
*
* @author Olivier Bossel
*/
/**
* Hide an element
* @example scss
* .my-cool-element {
* \@include g-hide();
* }
*
* @author Olivier Bossel
*/
/**
* Set the visibility of an element to hidden
* @example scss
* .my-cool-element {
* \@include g-not-visible();
* }
*
* @author Olivier Bossel
*/
/**
* Set the visibility of an element to hidden
* @example scss
* .my-cool-element {
* \@include g-invisible();
* }
*
* @author Olivier Bossel
*/
/**
* Set the display of an element to block
* @example scss
* .my-cool-element {
* \@include g-show();
* }
*
* @author Olivier Bossel
*/
/**
* Set the display of an element to inline-block
* @example scss
* .my-cool-element {
* \@include g-show();
* }
*
* @author Olivier Bossel
*/
/**
* Set the display of an element to flex
* @example scss
* .my-cool-element {
* \@include g-show-flex();
* }
*
* @author Olivier Bossel
*/
/**
* Set the display of an element to inline-flex
* @example scss
* .my-cool-element {
* \@include g-show-inline-flex();
* }
*
* @author Olivier Bossel
*/
/**
* Set the visibility of an element to visible
* @example scss
* .my-cool-element {
* \@include g-show();
* }
*
* @author Olivier Bossel
*/
/**
* 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
*/
/**
* 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
*/
/**
* Remove the gutters on the column
* @param {String|List} [$sides=top right bottom left] The sides to clear
* @example scss
* .my-cool-column {
* \@include g-no-gutter(left right);
* }
*
* @author Olivier Bossel
*/
/**
* Set the gutters on the column
* @param {String|List} [$sides=top right bottom left] The sides to apply gutters on
* @example scss
* .my-cool-column {
* \@include g-gutter(left right);
* }
*
* @author Olivier Bossel
*/
/**
* @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
*/
/**
* 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
* - ```.show-flex@{state}``` : helpers show-flex
* - ```.show-inline-flex@{state}``` : helpers show-inline-flex
* - ```.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} [$states=all] The states to generate the classes for
* @param {String|List} [$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
*/
/**
* @name Default driver API
* This are all the API mixins that are exposed by gridle for the flex 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
*/
/**
* 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
*/
/**
* Apply a nowrap on the element
* @example scss
* .my-cool-element {
* \@include g-nowrap();
* }
*
* @author Olivier Bossel
*/
/**
* Reset the nowrap on the element
* @example scss
* .my-cool-element {
* \@include g-wrap();
* }
*
* @author Olivier Bossel
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* 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
*/
/**
* Set the position that the column has to take inside the row to rearange the order
* @example scss
* .my-cool-column {
* \@include g-grid(2);
* \@include g-order(1);
* }
*
* @author Olivier Bossel
*/
/**
* 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
*/
/**
* @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 24px
* @gridle-gutter-height 0
* @gridle-gutter-top 0
* @gridle-gutter-right 12px
* @gridle-gutter-bottom 0
* @gridle-gutter-left 12px
* @gridle-direction ltr
* @gridle-dir-attribute false
* @gridle-name-multiplicator 1
* @gridle-states-classes true
* @gridle-classes-prefix
*/
/**
* @name desktopLarge State
* Here's the settings for the **desktopLarge** state.
* @styleguide Gridle / States
* @display gridle-settings
* @gridle-name desktopLarge
* @gridle-min-width 1260px
* @gridle-max-width
* @gridle-query
* @gridle-classes true
* @gridle-context 12
* @gridle-gutter-width 24px
* @gridle-gutter-height 0
* @gridle-gutter-top 0
* @gridle-gutter-right 12px
* @gridle-gutter-bottom 0
* @gridle-gutter-left 12px
* @gridle-direction ltr
* @gridle-dir-attribute false
* @gridle-name-multiplicator 1
* @gridle-states-classes true
* @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 1000px
* @gridle-max-width 1259px
* @gridle-query
* @gridle-classes true
* @gridle-context 12
* @gridle-gutter-width 20px
* @gridle-gutter-height 0
* @gridle-gutter-top 0
* @gridle-gutter-right 10px
* @gridle-gutter-bottom 0
* @gridle-gutter-left 10px
* @gridle-direction ltr
* @gridle-dir-attribute false
* @gridle-name-multiplicator 1
* @gridle-states-classes true
* @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 999px
* @gridle-query
* @gridle-classes true
* @gridle-context 12
* @gridle-gutter-width 18px
* @gridle-gutter-height 0
* @gridle-gutter-top 0
* @gridle-gutter-right 9px
* @gridle-gutter-bottom 0
* @gridle-gutter-left 9px
* @gridle-direction ltr
* @gridle-dir-attribute false
* @gridle-name-multiplicator 1
* @gridle-states-classes true
* @gridle-classes-prefix
*/
/**
* @name mobile State
* Here's the settings for the **mobile** state.
* @styleguide Gridle / States
* @display gridle-settings
* @gridle-name mobile
* @gridle-min-width
* @gridle-max-width 767px
* @gridle-query
* @gridle-classes true
* @gridle-context 12
* @gridle-gutter-width 16px
* @gridle-gutter-height 0
* @gridle-gutter-top 0
* @gridle-gutter-right 8px
* @gridle-gutter-bottom 0
* @gridle-gutter-left 8px
* @gridle-direction ltr
* @gridle-dir-attribute false
* @gridle-name-multiplicator 1
* @gridle-states-classes true
* @gridle-classes-prefix
*/
/**
* @name mobileSmall State
* Here's the settings for the **mobileSmall** state.
* @styleguide Gridle / States
* @display gridle-settings
* @gridle-name mobileSmall
* @gridle-min-width
* @gridle-max-width 400px
* @gridle-query
* @gridle-classes true
* @gridle-context 12
* @gridle-gutter-width 16px
* @gridle-gutter-height 0
* @gridle-gutter-top 0
* @gridle-gutter-right 8px
* @gridle-gutter-bottom 0
* @gridle-gutter-left 8px
* @gridle-direction ltr
* @gridle-dir-attribute false
* @gridle-name-multiplicator 1
* @gridle-states-classes true
* @gridle-classes-prefix
*/
/**
* @name mobileTiny State
* Here's the settings for the **mobileTiny** state.
* @styleguide Gridle / States
* @display gridle-settings
* @gridle-name mobileTiny
* @gridle-min-width
* @gridle-max-width 340px
* @gridle-query
* @gridle-classes true
* @gridle-context 12
* @gridle-gutter-width 16px
* @gridle-gutter-height 0
* @gridle-gutter-top 0
* @gridle-gutter-right 8px
* @gridle-gutter-bottom 0
* @gridle-gutter-left 8px
* @gridle-direction ltr
* @gridle-dir-attribute false
* @gridle-name-multiplicator 1
* @gridle-states-classes true
* @gridle-classes-prefix
*/
/* Variables */
/* Font weights */
/* Colors */
/* MIXINS */
p {
font-size: 1em;
line-height: 1.65em;
margin-bottom: 1.5em;
}
h1,
h2,
h3,
h4,
h5 {
margin-bottom: 0.5em;
line-height: 1.5em;
font-weight: 800;
color: #838383;
letter-spacing: 0.06em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.143em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.25em;
}
h5 {
font-size: 1.15em;
}
sub, sup {
font-size: .83em;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}
strong, b {
font-weight: 700;
}
em, i {
font-style: italic;
}
small {
font-size: 0.75em;
}
a {
color: #838383;
text-decoration: underline;
transition-property: background-color, color, border-color;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
a:hover {
color: #535353;
text-decoration: underline;
}
table {
margin-bottom: 1em;
}
table td, table th {
text-align: left;
vertical-align: top;
padding: 0.3em 0.5em;
border: 1px solid #cccccc;
}
table th {
background-color: #cccccc;
font-weight: bold;
}
ul,
ol {
margin-bottom: 1em;
}
ul li,
ol li {
margin-left: 1.5em;
font-size: 1em;
line-height: 1.65em;
}
ul ul, ul ol,
ol ul,
ol ol {
margin-bottom: 0;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
ul.reset {
list-style: none;
margin: 0;
padding: 0;
}
ul.reset li {
margin: 0;
padding: 0;
}
hr {
border: none;
height: 1px;
background-color: #E8E8E8;
margin-top: 1em;
margin-bottom: 1em;
}
p + h2,
p + h3,
p + h4,
p + h5,
table + h2,
table + h3,
table + h4,
table + h5,
ul + h2,
ul + h3,
ul + h4,
ul + h5,
ol + h2,
ol + h3,
ol + h4,
ol + h5 {
padding-top: 0.3em;
}
.last-child-no-margin > :last-child {
margin-bottom: 0;
}
.mb-0 {
margin-bottom: 0em;
}
.state-desktop .mb-0\@desktop {
margin-bottom: 0em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mb-0\@desktop {
margin-bottom: 0em !important;
}
}
.state-tablet .mb-0\@tablet {
margin-bottom: 0em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mb-0\@tablet {
margin-bottom: 0em !important;
}
}
.state-mobile .mb-0\@mobile {
margin-bottom: 0em !important;
}
@media screen and (max-width: 767px) {
.mb-0\@mobile {
margin-bottom: 0em !important;
}
}
.mt-0 {
margin-top: 0em;
}
.state-desktop .mt-0\@desktop {
margin-top: 0em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mt-0\@desktop {
margin-top: 0em !important;
}
}
.state-tablet .mt-0\@tablet {
margin-top: 0em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mt-0\@tablet {
margin-top: 0em !important;
}
}
.state-mobile .mt-0\@mobile {
margin-top: 0em !important;
}
@media screen and (max-width: 767px) {
.mt-0\@mobile {
margin-top: 0em !important;
}
}
.ml-0 {
margin-left: 0em;
}
.state-desktop .ml-0\@desktop {
margin-left: 0em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.ml-0\@desktop {
margin-left: 0em !important;
}
}
.state-tablet .ml-0\@tablet {
margin-left: 0em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.ml-0\@tablet {
margin-left: 0em !important;
}
}
.state-mobile .ml-0\@mobile {
margin-left: 0em !important;
}
@media screen and (max-width: 767px) {
.ml-0\@mobile {
margin-left: 0em !important;
}
}
.mr-0 {
margin-right: 0em;
}
.state-desktop .mr-0\@desktop {
margin-right: 0em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mr-0\@desktop {
margin-right: 0em !important;
}
}
.state-tablet .mr-0\@tablet {
margin-right: 0em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mr-0\@tablet {
margin-right: 0em !important;
}
}
.state-mobile .mr-0\@mobile {
margin-right: 0em !important;
}
@media screen and (max-width: 767px) {
.mr-0\@mobile {
margin-right: 0em !important;
}
}
.pb-0 {
padding-bottom: 0em;
}
.state-desktop .pb-0\@desktop {
padding-bottom: 0em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pb-0\@desktop {
padding-bottom: 0em !important;
}
}
.state-tablet .pb-0\@tablet {
padding-bottom: 0em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pb-0\@tablet {
padding-bottom: 0em !important;
}
}
.state-mobile .pb-0\@mobile {
padding-bottom: 0em !important;
}
@media screen and (max-width: 767px) {
.pb-0\@mobile {
padding-bottom: 0em !important;
}
}
.pt-0 {
padding-top: 0em;
}
.state-desktop .pt-0\@desktop {
padding-top: 0em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pt-0\@desktop {
padding-top: 0em !important;
}
}
.state-tablet .pt-0\@tablet {
padding-top: 0em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pt-0\@tablet {
padding-top: 0em !important;
}
}
.state-mobile .pt-0\@mobile {
padding-top: 0em !important;
}
@media screen and (max-width: 767px) {
.pt-0\@mobile {
padding-top: 0em !important;
}
}
.pl-0 {
padding-left: 0em;
}
.state-desktop .pl-0\@desktop {
padding-left: 0em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pl-0\@desktop {
padding-left: 0em !important;
}
}
.state-tablet .pl-0\@tablet {
padding-left: 0em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pl-0\@tablet {
padding-left: 0em !important;
}
}
.state-mobile .pl-0\@mobile {
padding-left: 0em !important;
}
@media screen and (max-width: 767px) {
.pl-0\@mobile {
padding-left: 0em !important;
}
}
.pr-0 {
padding-right: 0em;
}
.state-desktop .pr-0\@desktop {
padding-right: 0em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pr-0\@desktop {
padding-right: 0em !important;
}
}
.state-tablet .pr-0\@tablet {
padding-right: 0em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pr-0\@tablet {
padding-right: 0em !important;
}
}
.state-mobile .pr-0\@mobile {
padding-right: 0em !important;
}
@media screen and (max-width: 767px) {
.pr-0\@mobile {
padding-right: 0em !important;
}
}
.mb-1 {
margin-bottom: 1em;
}
.state-desktop .mb-1\@desktop {
margin-bottom: 1em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mb-1\@desktop {
margin-bottom: 1em !important;
}
}
.state-tablet .mb-1\@tablet {
margin-bottom: 1em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mb-1\@tablet {
margin-bottom: 1em !important;
}
}
.state-mobile .mb-1\@mobile {
margin-bottom: 1em !important;
}
@media screen and (max-width: 767px) {
.mb-1\@mobile {
margin-bottom: 1em !important;
}
}
.mt-1 {
margin-top: 1em;
}
.state-desktop .mt-1\@desktop {
margin-top: 1em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mt-1\@desktop {
margin-top: 1em !important;
}
}
.state-tablet .mt-1\@tablet {
margin-top: 1em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mt-1\@tablet {
margin-top: 1em !important;
}
}
.state-mobile .mt-1\@mobile {
margin-top: 1em !important;
}
@media screen and (max-width: 767px) {
.mt-1\@mobile {
margin-top: 1em !important;
}
}
.ml-1 {
margin-left: 1em;
}
.state-desktop .ml-1\@desktop {
margin-left: 1em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.ml-1\@desktop {
margin-left: 1em !important;
}
}
.state-tablet .ml-1\@tablet {
margin-left: 1em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.ml-1\@tablet {
margin-left: 1em !important;
}
}
.state-mobile .ml-1\@mobile {
margin-left: 1em !important;
}
@media screen and (max-width: 767px) {
.ml-1\@mobile {
margin-left: 1em !important;
}
}
.mr-1 {
margin-right: 1em;
}
.state-desktop .mr-1\@desktop {
margin-right: 1em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mr-1\@desktop {
margin-right: 1em !important;
}
}
.state-tablet .mr-1\@tablet {
margin-right: 1em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mr-1\@tablet {
margin-right: 1em !important;
}
}
.state-mobile .mr-1\@mobile {
margin-right: 1em !important;
}
@media screen and (max-width: 767px) {
.mr-1\@mobile {
margin-right: 1em !important;
}
}
.pb-1 {
padding-bottom: 1em;
}
.state-desktop .pb-1\@desktop {
padding-bottom: 1em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pb-1\@desktop {
padding-bottom: 1em !important;
}
}
.state-tablet .pb-1\@tablet {
padding-bottom: 1em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pb-1\@tablet {
padding-bottom: 1em !important;
}
}
.state-mobile .pb-1\@mobile {
padding-bottom: 1em !important;
}
@media screen and (max-width: 767px) {
.pb-1\@mobile {
padding-bottom: 1em !important;
}
}
.pt-1 {
padding-top: 1em;
}
.state-desktop .pt-1\@desktop {
padding-top: 1em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pt-1\@desktop {
padding-top: 1em !important;
}
}
.state-tablet .pt-1\@tablet {
padding-top: 1em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pt-1\@tablet {
padding-top: 1em !important;
}
}
.state-mobile .pt-1\@mobile {
padding-top: 1em !important;
}
@media screen and (max-width: 767px) {
.pt-1\@mobile {
padding-top: 1em !important;
}
}
.pl-1 {
padding-left: 1em;
}
.state-desktop .pl-1\@desktop {
padding-left: 1em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pl-1\@desktop {
padding-left: 1em !important;
}
}
.state-tablet .pl-1\@tablet {
padding-left: 1em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pl-1\@tablet {
padding-left: 1em !important;
}
}
.state-mobile .pl-1\@mobile {
padding-left: 1em !important;
}
@media screen and (max-width: 767px) {
.pl-1\@mobile {
padding-left: 1em !important;
}
}
.pr-1 {
padding-right: 1em;
}
.state-desktop .pr-1\@desktop {
padding-right: 1em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pr-1\@desktop {
padding-right: 1em !important;
}
}
.state-tablet .pr-1\@tablet {
padding-right: 1em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pr-1\@tablet {
padding-right: 1em !important;
}
}
.state-mobile .pr-1\@mobile {
padding-right: 1em !important;
}
@media screen and (max-width: 767px) {
.pr-1\@mobile {
padding-right: 1em !important;
}
}
.mb-2 {
margin-bottom: 2em;
}
.state-desktop .mb-2\@desktop {
margin-bottom: 2em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mb-2\@desktop {
margin-bottom: 2em !important;
}
}
.state-tablet .mb-2\@tablet {
margin-bottom: 2em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mb-2\@tablet {
margin-bottom: 2em !important;
}
}
.state-mobile .mb-2\@mobile {
margin-bottom: 2em !important;
}
@media screen and (max-width: 767px) {
.mb-2\@mobile {
margin-bottom: 2em !important;
}
}
.mt-2 {
margin-top: 2em;
}
.state-desktop .mt-2\@desktop {
margin-top: 2em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mt-2\@desktop {
margin-top: 2em !important;
}
}
.state-tablet .mt-2\@tablet {
margin-top: 2em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mt-2\@tablet {
margin-top: 2em !important;
}
}
.state-mobile .mt-2\@mobile {
margin-top: 2em !important;
}
@media screen and (max-width: 767px) {
.mt-2\@mobile {
margin-top: 2em !important;
}
}
.ml-2 {
margin-left: 2em;
}
.state-desktop .ml-2\@desktop {
margin-left: 2em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.ml-2\@desktop {
margin-left: 2em !important;
}
}
.state-tablet .ml-2\@tablet {
margin-left: 2em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.ml-2\@tablet {
margin-left: 2em !important;
}
}
.state-mobile .ml-2\@mobile {
margin-left: 2em !important;
}
@media screen and (max-width: 767px) {
.ml-2\@mobile {
margin-left: 2em !important;
}
}
.mr-2 {
margin-right: 2em;
}
.state-desktop .mr-2\@desktop {
margin-right: 2em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mr-2\@desktop {
margin-right: 2em !important;
}
}
.state-tablet .mr-2\@tablet {
margin-right: 2em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mr-2\@tablet {
margin-right: 2em !important;
}
}
.state-mobile .mr-2\@mobile {
margin-right: 2em !important;
}
@media screen and (max-width: 767px) {
.mr-2\@mobile {
margin-right: 2em !important;
}
}
.pb-2 {
padding-bottom: 2em;
}
.state-desktop .pb-2\@desktop {
padding-bottom: 2em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pb-2\@desktop {
padding-bottom: 2em !important;
}
}
.state-tablet .pb-2\@tablet {
padding-bottom: 2em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pb-2\@tablet {
padding-bottom: 2em !important;
}
}
.state-mobile .pb-2\@mobile {
padding-bottom: 2em !important;
}
@media screen and (max-width: 767px) {
.pb-2\@mobile {
padding-bottom: 2em !important;
}
}
.pt-2 {
padding-top: 2em;
}
.state-desktop .pt-2\@desktop {
padding-top: 2em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pt-2\@desktop {
padding-top: 2em !important;
}
}
.state-tablet .pt-2\@tablet {
padding-top: 2em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pt-2\@tablet {
padding-top: 2em !important;
}
}
.state-mobile .pt-2\@mobile {
padding-top: 2em !important;
}
@media screen and (max-width: 767px) {
.pt-2\@mobile {
padding-top: 2em !important;
}
}
.pl-2 {
padding-left: 2em;
}
.state-desktop .pl-2\@desktop {
padding-left: 2em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pl-2\@desktop {
padding-left: 2em !important;
}
}
.state-tablet .pl-2\@tablet {
padding-left: 2em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pl-2\@tablet {
padding-left: 2em !important;
}
}
.state-mobile .pl-2\@mobile {
padding-left: 2em !important;
}
@media screen and (max-width: 767px) {
.pl-2\@mobile {
padding-left: 2em !important;
}
}
.pr-2 {
padding-right: 2em;
}
.state-desktop .pr-2\@desktop {
padding-right: 2em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pr-2\@desktop {
padding-right: 2em !important;
}
}
.state-tablet .pr-2\@tablet {
padding-right: 2em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pr-2\@tablet {
padding-right: 2em !important;
}
}
.state-mobile .pr-2\@mobile {
padding-right: 2em !important;
}
@media screen and (max-width: 767px) {
.pr-2\@mobile {
padding-right: 2em !important;
}
}
.mb-3 {
margin-bottom: 3em;
}
.state-desktop .mb-3\@desktop {
margin-bottom: 3em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mb-3\@desktop {
margin-bottom: 3em !important;
}
}
.state-tablet .mb-3\@tablet {
margin-bottom: 3em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mb-3\@tablet {
margin-bottom: 3em !important;
}
}
.state-mobile .mb-3\@mobile {
margin-bottom: 3em !important;
}
@media screen and (max-width: 767px) {
.mb-3\@mobile {
margin-bottom: 3em !important;
}
}
.mt-3 {
margin-top: 3em;
}
.state-desktop .mt-3\@desktop {
margin-top: 3em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mt-3\@desktop {
margin-top: 3em !important;
}
}
.state-tablet .mt-3\@tablet {
margin-top: 3em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mt-3\@tablet {
margin-top: 3em !important;
}
}
.state-mobile .mt-3\@mobile {
margin-top: 3em !important;
}
@media screen and (max-width: 767px) {
.mt-3\@mobile {
margin-top: 3em !important;
}
}
.ml-3 {
margin-left: 3em;
}
.state-desktop .ml-3\@desktop {
margin-left: 3em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.ml-3\@desktop {
margin-left: 3em !important;
}
}
.state-tablet .ml-3\@tablet {
margin-left: 3em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.ml-3\@tablet {
margin-left: 3em !important;
}
}
.state-mobile .ml-3\@mobile {
margin-left: 3em !important;
}
@media screen and (max-width: 767px) {
.ml-3\@mobile {
margin-left: 3em !important;
}
}
.mr-3 {
margin-right: 3em;
}
.state-desktop .mr-3\@desktop {
margin-right: 3em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mr-3\@desktop {
margin-right: 3em !important;
}
}
.state-tablet .mr-3\@tablet {
margin-right: 3em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mr-3\@tablet {
margin-right: 3em !important;
}
}
.state-mobile .mr-3\@mobile {
margin-right: 3em !important;
}
@media screen and (max-width: 767px) {
.mr-3\@mobile {
margin-right: 3em !important;
}
}
.pb-3 {
padding-bottom: 3em;
}
.state-desktop .pb-3\@desktop {
padding-bottom: 3em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pb-3\@desktop {
padding-bottom: 3em !important;
}
}
.state-tablet .pb-3\@tablet {
padding-bottom: 3em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pb-3\@tablet {
padding-bottom: 3em !important;
}
}
.state-mobile .pb-3\@mobile {
padding-bottom: 3em !important;
}
@media screen and (max-width: 767px) {
.pb-3\@mobile {
padding-bottom: 3em !important;
}
}
.pt-3 {
padding-top: 3em;
}
.state-desktop .pt-3\@desktop {
padding-top: 3em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pt-3\@desktop {
padding-top: 3em !important;
}
}
.state-tablet .pt-3\@tablet {
padding-top: 3em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pt-3\@tablet {
padding-top: 3em !important;
}
}
.state-mobile .pt-3\@mobile {
padding-top: 3em !important;
}
@media screen and (max-width: 767px) {
.pt-3\@mobile {
padding-top: 3em !important;
}
}
.pl-3 {
padding-left: 3em;
}
.state-desktop .pl-3\@desktop {
padding-left: 3em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pl-3\@desktop {
padding-left: 3em !important;
}
}
.state-tablet .pl-3\@tablet {
padding-left: 3em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pl-3\@tablet {
padding-left: 3em !important;
}
}
.state-mobile .pl-3\@mobile {
padding-left: 3em !important;
}
@media screen and (max-width: 767px) {
.pl-3\@mobile {
padding-left: 3em !important;
}
}
.pr-3 {
padding-right: 3em;
}
.state-desktop .pr-3\@desktop {
padding-right: 3em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pr-3\@desktop {
padding-right: 3em !important;
}
}
.state-tablet .pr-3\@tablet {
padding-right: 3em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pr-3\@tablet {
padding-right: 3em !important;
}
}
.state-mobile .pr-3\@mobile {
padding-right: 3em !important;
}
@media screen and (max-width: 767px) {
.pr-3\@mobile {
padding-right: 3em !important;
}
}
.mb-4 {
margin-bottom: 4em;
}
.state-desktop .mb-4\@desktop {
margin-bottom: 4em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mb-4\@desktop {
margin-bottom: 4em !important;
}
}
.state-tablet .mb-4\@tablet {
margin-bottom: 4em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mb-4\@tablet {
margin-bottom: 4em !important;
}
}
.state-mobile .mb-4\@mobile {
margin-bottom: 4em !important;
}
@media screen and (max-width: 767px) {
.mb-4\@mobile {
margin-bottom: 4em !important;
}
}
.mt-4 {
margin-top: 4em;
}
.state-desktop .mt-4\@desktop {
margin-top: 4em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mt-4\@desktop {
margin-top: 4em !important;
}
}
.state-tablet .mt-4\@tablet {
margin-top: 4em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mt-4\@tablet {
margin-top: 4em !important;
}
}
.state-mobile .mt-4\@mobile {
margin-top: 4em !important;
}
@media screen and (max-width: 767px) {
.mt-4\@mobile {
margin-top: 4em !important;
}
}
.ml-4 {
margin-left: 4em;
}
.state-desktop .ml-4\@desktop {
margin-left: 4em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.ml-4\@desktop {
margin-left: 4em !important;
}
}
.state-tablet .ml-4\@tablet {
margin-left: 4em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.ml-4\@tablet {
margin-left: 4em !important;
}
}
.state-mobile .ml-4\@mobile {
margin-left: 4em !important;
}
@media screen and (max-width: 767px) {
.ml-4\@mobile {
margin-left: 4em !important;
}
}
.mr-4 {
margin-right: 4em;
}
.state-desktop .mr-4\@desktop {
margin-right: 4em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mr-4\@desktop {
margin-right: 4em !important;
}
}
.state-tablet .mr-4\@tablet {
margin-right: 4em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mr-4\@tablet {
margin-right: 4em !important;
}
}
.state-mobile .mr-4\@mobile {
margin-right: 4em !important;
}
@media screen and (max-width: 767px) {
.mr-4\@mobile {
margin-right: 4em !important;
}
}
.pb-4 {
padding-bottom: 4em;
}
.state-desktop .pb-4\@desktop {
padding-bottom: 4em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pb-4\@desktop {
padding-bottom: 4em !important;
}
}
.state-tablet .pb-4\@tablet {
padding-bottom: 4em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pb-4\@tablet {
padding-bottom: 4em !important;
}
}
.state-mobile .pb-4\@mobile {
padding-bottom: 4em !important;
}
@media screen and (max-width: 767px) {
.pb-4\@mobile {
padding-bottom: 4em !important;
}
}
.pt-4 {
padding-top: 4em;
}
.state-desktop .pt-4\@desktop {
padding-top: 4em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pt-4\@desktop {
padding-top: 4em !important;
}
}
.state-tablet .pt-4\@tablet {
padding-top: 4em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pt-4\@tablet {
padding-top: 4em !important;
}
}
.state-mobile .pt-4\@mobile {
padding-top: 4em !important;
}
@media screen and (max-width: 767px) {
.pt-4\@mobile {
padding-top: 4em !important;
}
}
.pl-4 {
padding-left: 4em;
}
.state-desktop .pl-4\@desktop {
padding-left: 4em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pl-4\@desktop {
padding-left: 4em !important;
}
}
.state-tablet .pl-4\@tablet {
padding-left: 4em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pl-4\@tablet {
padding-left: 4em !important;
}
}
.state-mobile .pl-4\@mobile {
padding-left: 4em !important;
}
@media screen and (max-width: 767px) {
.pl-4\@mobile {
padding-left: 4em !important;
}
}
.pr-4 {
padding-right: 4em;
}
.state-desktop .pr-4\@desktop {
padding-right: 4em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pr-4\@desktop {
padding-right: 4em !important;
}
}
.state-tablet .pr-4\@tablet {
padding-right: 4em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pr-4\@tablet {
padding-right: 4em !important;
}
}
.state-mobile .pr-4\@mobile {
padding-right: 4em !important;
}
@media screen and (max-width: 767px) {
.pr-4\@mobile {
padding-right: 4em !important;
}
}
.mb-5 {
margin-bottom: 5em;
}
.state-desktop .mb-5\@desktop {
margin-bottom: 5em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mb-5\@desktop {
margin-bottom: 5em !important;
}
}
.state-tablet .mb-5\@tablet {
margin-bottom: 5em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mb-5\@tablet {
margin-bottom: 5em !important;
}
}
.state-mobile .mb-5\@mobile {
margin-bottom: 5em !important;
}
@media screen and (max-width: 767px) {
.mb-5\@mobile {
margin-bottom: 5em !important;
}
}
.mt-5 {
margin-top: 5em;
}
.state-desktop .mt-5\@desktop {
margin-top: 5em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mt-5\@desktop {
margin-top: 5em !important;
}
}
.state-tablet .mt-5\@tablet {
margin-top: 5em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mt-5\@tablet {
margin-top: 5em !important;
}
}
.state-mobile .mt-5\@mobile {
margin-top: 5em !important;
}
@media screen and (max-width: 767px) {
.mt-5\@mobile {
margin-top: 5em !important;
}
}
.ml-5 {
margin-left: 5em;
}
.state-desktop .ml-5\@desktop {
margin-left: 5em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.ml-5\@desktop {
margin-left: 5em !important;
}
}
.state-tablet .ml-5\@tablet {
margin-left: 5em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.ml-5\@tablet {
margin-left: 5em !important;
}
}
.state-mobile .ml-5\@mobile {
margin-left: 5em !important;
}
@media screen and (max-width: 767px) {
.ml-5\@mobile {
margin-left: 5em !important;
}
}
.mr-5 {
margin-right: 5em;
}
.state-desktop .mr-5\@desktop {
margin-right: 5em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mr-5\@desktop {
margin-right: 5em !important;
}
}
.state-tablet .mr-5\@tablet {
margin-right: 5em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mr-5\@tablet {
margin-right: 5em !important;
}
}
.state-mobile .mr-5\@mobile {
margin-right: 5em !important;
}
@media screen and (max-width: 767px) {
.mr-5\@mobile {
margin-right: 5em !important;
}
}
.pb-5 {
padding-bottom: 5em;
}
.state-desktop .pb-5\@desktop {
padding-bottom: 5em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pb-5\@desktop {
padding-bottom: 5em !important;
}
}
.state-tablet .pb-5\@tablet {
padding-bottom: 5em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pb-5\@tablet {
padding-bottom: 5em !important;
}
}
.state-mobile .pb-5\@mobile {
padding-bottom: 5em !important;
}
@media screen and (max-width: 767px) {
.pb-5\@mobile {
padding-bottom: 5em !important;
}
}
.pt-5 {
padding-top: 5em;
}
.state-desktop .pt-5\@desktop {
padding-top: 5em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pt-5\@desktop {
padding-top: 5em !important;
}
}
.state-tablet .pt-5\@tablet {
padding-top: 5em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pt-5\@tablet {
padding-top: 5em !important;
}
}
.state-mobile .pt-5\@mobile {
padding-top: 5em !important;
}
@media screen and (max-width: 767px) {
.pt-5\@mobile {
padding-top: 5em !important;
}
}
.pl-5 {
padding-left: 5em;
}
.state-desktop .pl-5\@desktop {
padding-left: 5em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pl-5\@desktop {
padding-left: 5em !important;
}
}
.state-tablet .pl-5\@tablet {
padding-left: 5em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pl-5\@tablet {
padding-left: 5em !important;
}
}
.state-mobile .pl-5\@mobile {
padding-left: 5em !important;
}
@media screen and (max-width: 767px) {
.pl-5\@mobile {
padding-left: 5em !important;
}
}
.pr-5 {
padding-right: 5em;
}
.state-desktop .pr-5\@desktop {
padding-right: 5em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pr-5\@desktop {
padding-right: 5em !important;
}
}
.state-tablet .pr-5\@tablet {
padding-right: 5em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pr-5\@tablet {
padding-right: 5em !important;
}
}
.state-mobile .pr-5\@mobile {
padding-right: 5em !important;
}
@media screen and (max-width: 767px) {
.pr-5\@mobile {
padding-right: 5em !important;
}
}
.mb-6 {
margin-bottom: 6em;
}
.state-desktop .mb-6\@desktop {
margin-bottom: 6em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mb-6\@desktop {
margin-bottom: 6em !important;
}
}
.state-tablet .mb-6\@tablet {
margin-bottom: 6em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mb-6\@tablet {
margin-bottom: 6em !important;
}
}
.state-mobile .mb-6\@mobile {
margin-bottom: 6em !important;
}
@media screen and (max-width: 767px) {
.mb-6\@mobile {
margin-bottom: 6em !important;
}
}
.mt-6 {
margin-top: 6em;
}
.state-desktop .mt-6\@desktop {
margin-top: 6em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mt-6\@desktop {
margin-top: 6em !important;
}
}
.state-tablet .mt-6\@tablet {
margin-top: 6em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mt-6\@tablet {
margin-top: 6em !important;
}
}
.state-mobile .mt-6\@mobile {
margin-top: 6em !important;
}
@media screen and (max-width: 767px) {
.mt-6\@mobile {
margin-top: 6em !important;
}
}
.ml-6 {
margin-left: 6em;
}
.state-desktop .ml-6\@desktop {
margin-left: 6em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.ml-6\@desktop {
margin-left: 6em !important;
}
}
.state-tablet .ml-6\@tablet {
margin-left: 6em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.ml-6\@tablet {
margin-left: 6em !important;
}
}
.state-mobile .ml-6\@mobile {
margin-left: 6em !important;
}
@media screen and (max-width: 767px) {
.ml-6\@mobile {
margin-left: 6em !important;
}
}
.mr-6 {
margin-right: 6em;
}
.state-desktop .mr-6\@desktop {
margin-right: 6em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mr-6\@desktop {
margin-right: 6em !important;
}
}
.state-tablet .mr-6\@tablet {
margin-right: 6em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mr-6\@tablet {
margin-right: 6em !important;
}
}
.state-mobile .mr-6\@mobile {
margin-right: 6em !important;
}
@media screen and (max-width: 767px) {
.mr-6\@mobile {
margin-right: 6em !important;
}
}
.pb-6 {
padding-bottom: 6em;
}
.state-desktop .pb-6\@desktop {
padding-bottom: 6em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pb-6\@desktop {
padding-bottom: 6em !important;
}
}
.state-tablet .pb-6\@tablet {
padding-bottom: 6em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pb-6\@tablet {
padding-bottom: 6em !important;
}
}
.state-mobile .pb-6\@mobile {
padding-bottom: 6em !important;
}
@media screen and (max-width: 767px) {
.pb-6\@mobile {
padding-bottom: 6em !important;
}
}
.pt-6 {
padding-top: 6em;
}
.state-desktop .pt-6\@desktop {
padding-top: 6em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pt-6\@desktop {
padding-top: 6em !important;
}
}
.state-tablet .pt-6\@tablet {
padding-top: 6em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pt-6\@tablet {
padding-top: 6em !important;
}
}
.state-mobile .pt-6\@mobile {
padding-top: 6em !important;
}
@media screen and (max-width: 767px) {
.pt-6\@mobile {
padding-top: 6em !important;
}
}
.pl-6 {
padding-left: 6em;
}
.state-desktop .pl-6\@desktop {
padding-left: 6em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pl-6\@desktop {
padding-left: 6em !important;
}
}
.state-tablet .pl-6\@tablet {
padding-left: 6em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pl-6\@tablet {
padding-left: 6em !important;
}
}
.state-mobile .pl-6\@mobile {
padding-left: 6em !important;
}
@media screen and (max-width: 767px) {
.pl-6\@mobile {
padding-left: 6em !important;
}
}
.pr-6 {
padding-right: 6em;
}
.state-desktop .pr-6\@desktop {
padding-right: 6em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pr-6\@desktop {
padding-right: 6em !important;
}
}
.state-tablet .pr-6\@tablet {
padding-right: 6em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pr-6\@tablet {
padding-right: 6em !important;
}
}
.state-mobile .pr-6\@mobile {
padding-right: 6em !important;
}
@media screen and (max-width: 767px) {
.pr-6\@mobile {
padding-right: 6em !important;
}
}
.mb-7 {
margin-bottom: 7em;
}
.state-desktop .mb-7\@desktop {
margin-bottom: 7em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mb-7\@desktop {
margin-bottom: 7em !important;
}
}
.state-tablet .mb-7\@tablet {
margin-bottom: 7em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mb-7\@tablet {
margin-bottom: 7em !important;
}
}
.state-mobile .mb-7\@mobile {
margin-bottom: 7em !important;
}
@media screen and (max-width: 767px) {
.mb-7\@mobile {
margin-bottom: 7em !important;
}
}
.mt-7 {
margin-top: 7em;
}
.state-desktop .mt-7\@desktop {
margin-top: 7em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mt-7\@desktop {
margin-top: 7em !important;
}
}
.state-tablet .mt-7\@tablet {
margin-top: 7em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mt-7\@tablet {
margin-top: 7em !important;
}
}
.state-mobile .mt-7\@mobile {
margin-top: 7em !important;
}
@media screen and (max-width: 767px) {
.mt-7\@mobile {
margin-top: 7em !important;
}
}
.ml-7 {
margin-left: 7em;
}
.state-desktop .ml-7\@desktop {
margin-left: 7em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.ml-7\@desktop {
margin-left: 7em !important;
}
}
.state-tablet .ml-7\@tablet {
margin-left: 7em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.ml-7\@tablet {
margin-left: 7em !important;
}
}
.state-mobile .ml-7\@mobile {
margin-left: 7em !important;
}
@media screen and (max-width: 767px) {
.ml-7\@mobile {
margin-left: 7em !important;
}
}
.mr-7 {
margin-right: 7em;
}
.state-desktop .mr-7\@desktop {
margin-right: 7em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mr-7\@desktop {
margin-right: 7em !important;
}
}
.state-tablet .mr-7\@tablet {
margin-right: 7em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mr-7\@tablet {
margin-right: 7em !important;
}
}
.state-mobile .mr-7\@mobile {
margin-right: 7em !important;
}
@media screen and (max-width: 767px) {
.mr-7\@mobile {
margin-right: 7em !important;
}
}
.pb-7 {
padding-bottom: 7em;
}
.state-desktop .pb-7\@desktop {
padding-bottom: 7em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pb-7\@desktop {
padding-bottom: 7em !important;
}
}
.state-tablet .pb-7\@tablet {
padding-bottom: 7em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pb-7\@tablet {
padding-bottom: 7em !important;
}
}
.state-mobile .pb-7\@mobile {
padding-bottom: 7em !important;
}
@media screen and (max-width: 767px) {
.pb-7\@mobile {
padding-bottom: 7em !important;
}
}
.pt-7 {
padding-top: 7em;
}
.state-desktop .pt-7\@desktop {
padding-top: 7em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pt-7\@desktop {
padding-top: 7em !important;
}
}
.state-tablet .pt-7\@tablet {
padding-top: 7em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pt-7\@tablet {
padding-top: 7em !important;
}
}
.state-mobile .pt-7\@mobile {
padding-top: 7em !important;
}
@media screen and (max-width: 767px) {
.pt-7\@mobile {
padding-top: 7em !important;
}
}
.pl-7 {
padding-left: 7em;
}
.state-desktop .pl-7\@desktop {
padding-left: 7em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pl-7\@desktop {
padding-left: 7em !important;
}
}
.state-tablet .pl-7\@tablet {
padding-left: 7em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pl-7\@tablet {
padding-left: 7em !important;
}
}
.state-mobile .pl-7\@mobile {
padding-left: 7em !important;
}
@media screen and (max-width: 767px) {
.pl-7\@mobile {
padding-left: 7em !important;
}
}
.pr-7 {
padding-right: 7em;
}
.state-desktop .pr-7\@desktop {
padding-right: 7em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pr-7\@desktop {
padding-right: 7em !important;
}
}
.state-tablet .pr-7\@tablet {
padding-right: 7em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pr-7\@tablet {
padding-right: 7em !important;
}
}
.state-mobile .pr-7\@mobile {
padding-right: 7em !important;
}
@media screen and (max-width: 767px) {
.pr-7\@mobile {
padding-right: 7em !important;
}
}
.mb-8 {
margin-bottom: 8em;
}
.state-desktop .mb-8\@desktop {
margin-bottom: 8em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mb-8\@desktop {
margin-bottom: 8em !important;
}
}
.state-tablet .mb-8\@tablet {
margin-bottom: 8em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mb-8\@tablet {
margin-bottom: 8em !important;
}
}
.state-mobile .mb-8\@mobile {
margin-bottom: 8em !important;
}
@media screen and (max-width: 767px) {
.mb-8\@mobile {
margin-bottom: 8em !important;
}
}
.mt-8 {
margin-top: 8em;
}
.state-desktop .mt-8\@desktop {
margin-top: 8em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mt-8\@desktop {
margin-top: 8em !important;
}
}
.state-tablet .mt-8\@tablet {
margin-top: 8em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mt-8\@tablet {
margin-top: 8em !important;
}
}
.state-mobile .mt-8\@mobile {
margin-top: 8em !important;
}
@media screen and (max-width: 767px) {
.mt-8\@mobile {
margin-top: 8em !important;
}
}
.ml-8 {
margin-left: 8em;
}
.state-desktop .ml-8\@desktop {
margin-left: 8em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.ml-8\@desktop {
margin-left: 8em !important;
}
}
.state-tablet .ml-8\@tablet {
margin-left: 8em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.ml-8\@tablet {
margin-left: 8em !important;
}
}
.state-mobile .ml-8\@mobile {
margin-left: 8em !important;
}
@media screen and (max-width: 767px) {
.ml-8\@mobile {
margin-left: 8em !important;
}
}
.mr-8 {
margin-right: 8em;
}
.state-desktop .mr-8\@desktop {
margin-right: 8em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mr-8\@desktop {
margin-right: 8em !important;
}
}
.state-tablet .mr-8\@tablet {
margin-right: 8em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mr-8\@tablet {
margin-right: 8em !important;
}
}
.state-mobile .mr-8\@mobile {
margin-right: 8em !important;
}
@media screen and (max-width: 767px) {
.mr-8\@mobile {
margin-right: 8em !important;
}
}
.pb-8 {
padding-bottom: 8em;
}
.state-desktop .pb-8\@desktop {
padding-bottom: 8em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pb-8\@desktop {
padding-bottom: 8em !important;
}
}
.state-tablet .pb-8\@tablet {
padding-bottom: 8em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pb-8\@tablet {
padding-bottom: 8em !important;
}
}
.state-mobile .pb-8\@mobile {
padding-bottom: 8em !important;
}
@media screen and (max-width: 767px) {
.pb-8\@mobile {
padding-bottom: 8em !important;
}
}
.pt-8 {
padding-top: 8em;
}
.state-desktop .pt-8\@desktop {
padding-top: 8em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pt-8\@desktop {
padding-top: 8em !important;
}
}
.state-tablet .pt-8\@tablet {
padding-top: 8em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pt-8\@tablet {
padding-top: 8em !important;
}
}
.state-mobile .pt-8\@mobile {
padding-top: 8em !important;
}
@media screen and (max-width: 767px) {
.pt-8\@mobile {
padding-top: 8em !important;
}
}
.pl-8 {
padding-left: 8em;
}
.state-desktop .pl-8\@desktop {
padding-left: 8em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pl-8\@desktop {
padding-left: 8em !important;
}
}
.state-tablet .pl-8\@tablet {
padding-left: 8em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pl-8\@tablet {
padding-left: 8em !important;
}
}
.state-mobile .pl-8\@mobile {
padding-left: 8em !important;
}
@media screen and (max-width: 767px) {
.pl-8\@mobile {
padding-left: 8em !important;
}
}
.pr-8 {
padding-right: 8em;
}
.state-desktop .pr-8\@desktop {
padding-right: 8em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pr-8\@desktop {
padding-right: 8em !important;
}
}
.state-tablet .pr-8\@tablet {
padding-right: 8em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pr-8\@tablet {
padding-right: 8em !important;
}
}
.state-mobile .pr-8\@mobile {
padding-right: 8em !important;
}
@media screen and (max-width: 767px) {
.pr-8\@mobile {
padding-right: 8em !important;
}
}
.mb-9 {
margin-bottom: 9em;
}
.state-desktop .mb-9\@desktop {
margin-bottom: 9em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mb-9\@desktop {
margin-bottom: 9em !important;
}
}
.state-tablet .mb-9\@tablet {
margin-bottom: 9em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mb-9\@tablet {
margin-bottom: 9em !important;
}
}
.state-mobile .mb-9\@mobile {
margin-bottom: 9em !important;
}
@media screen and (max-width: 767px) {
.mb-9\@mobile {
margin-bottom: 9em !important;
}
}
.mt-9 {
margin-top: 9em;
}
.state-desktop .mt-9\@desktop {
margin-top: 9em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mt-9\@desktop {
margin-top: 9em !important;
}
}
.state-tablet .mt-9\@tablet {
margin-top: 9em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mt-9\@tablet {
margin-top: 9em !important;
}
}
.state-mobile .mt-9\@mobile {
margin-top: 9em !important;
}
@media screen and (max-width: 767px) {
.mt-9\@mobile {
margin-top: 9em !important;
}
}
.ml-9 {
margin-left: 9em;
}
.state-desktop .ml-9\@desktop {
margin-left: 9em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.ml-9\@desktop {
margin-left: 9em !important;
}
}
.state-tablet .ml-9\@tablet {
margin-left: 9em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.ml-9\@tablet {
margin-left: 9em !important;
}
}
.state-mobile .ml-9\@mobile {
margin-left: 9em !important;
}
@media screen and (max-width: 767px) {
.ml-9\@mobile {
margin-left: 9em !important;
}
}
.mr-9 {
margin-right: 9em;
}
.state-desktop .mr-9\@desktop {
margin-right: 9em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mr-9\@desktop {
margin-right: 9em !important;
}
}
.state-tablet .mr-9\@tablet {
margin-right: 9em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mr-9\@tablet {
margin-right: 9em !important;
}
}
.state-mobile .mr-9\@mobile {
margin-right: 9em !important;
}
@media screen and (max-width: 767px) {
.mr-9\@mobile {
margin-right: 9em !important;
}
}
.pb-9 {
padding-bottom: 9em;
}
.state-desktop .pb-9\@desktop {
padding-bottom: 9em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pb-9\@desktop {
padding-bottom: 9em !important;
}
}
.state-tablet .pb-9\@tablet {
padding-bottom: 9em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pb-9\@tablet {
padding-bottom: 9em !important;
}
}
.state-mobile .pb-9\@mobile {
padding-bottom: 9em !important;
}
@media screen and (max-width: 767px) {
.pb-9\@mobile {
padding-bottom: 9em !important;
}
}
.pt-9 {
padding-top: 9em;
}
.state-desktop .pt-9\@desktop {
padding-top: 9em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pt-9\@desktop {
padding-top: 9em !important;
}
}
.state-tablet .pt-9\@tablet {
padding-top: 9em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pt-9\@tablet {
padding-top: 9em !important;
}
}
.state-mobile .pt-9\@mobile {
padding-top: 9em !important;
}
@media screen and (max-width: 767px) {
.pt-9\@mobile {
padding-top: 9em !important;
}
}
.pl-9 {
padding-left: 9em;
}
.state-desktop .pl-9\@desktop {
padding-left: 9em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pl-9\@desktop {
padding-left: 9em !important;
}
}
.state-tablet .pl-9\@tablet {
padding-left: 9em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pl-9\@tablet {
padding-left: 9em !important;
}
}
.state-mobile .pl-9\@mobile {
padding-left: 9em !important;
}
@media screen and (max-width: 767px) {
.pl-9\@mobile {
padding-left: 9em !important;
}
}
.pr-9 {
padding-right: 9em;
}
.state-desktop .pr-9\@desktop {
padding-right: 9em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pr-9\@desktop {
padding-right: 9em !important;
}
}
.state-tablet .pr-9\@tablet {
padding-right: 9em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pr-9\@tablet {
padding-right: 9em !important;
}
}
.state-mobile .pr-9\@mobile {
padding-right: 9em !important;
}
@media screen and (max-width: 767px) {
.pr-9\@mobile {
padding-right: 9em !important;
}
}
.mb-10 {
margin-bottom: 10em;
}
.state-desktop .mb-10\@desktop {
margin-bottom: 10em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mb-10\@desktop {
margin-bottom: 10em !important;
}
}
.state-tablet .mb-10\@tablet {
margin-bottom: 10em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mb-10\@tablet {
margin-bottom: 10em !important;
}
}
.state-mobile .mb-10\@mobile {
margin-bottom: 10em !important;
}
@media screen and (max-width: 767px) {
.mb-10\@mobile {
margin-bottom: 10em !important;
}
}
.mt-10 {
margin-top: 10em;
}
.state-desktop .mt-10\@desktop {
margin-top: 10em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mt-10\@desktop {
margin-top: 10em !important;
}
}
.state-tablet .mt-10\@tablet {
margin-top: 10em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mt-10\@tablet {
margin-top: 10em !important;
}
}
.state-mobile .mt-10\@mobile {
margin-top: 10em !important;
}
@media screen and (max-width: 767px) {
.mt-10\@mobile {
margin-top: 10em !important;
}
}
.ml-10 {
margin-left: 10em;
}
.state-desktop .ml-10\@desktop {
margin-left: 10em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.ml-10\@desktop {
margin-left: 10em !important;
}
}
.state-tablet .ml-10\@tablet {
margin-left: 10em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.ml-10\@tablet {
margin-left: 10em !important;
}
}
.state-mobile .ml-10\@mobile {
margin-left: 10em !important;
}
@media screen and (max-width: 767px) {
.ml-10\@mobile {
margin-left: 10em !important;
}
}
.mr-10 {
margin-right: 10em;
}
.state-desktop .mr-10\@desktop {
margin-right: 10em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.mr-10\@desktop {
margin-right: 10em !important;
}
}
.state-tablet .mr-10\@tablet {
margin-right: 10em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.mr-10\@tablet {
margin-right: 10em !important;
}
}
.state-mobile .mr-10\@mobile {
margin-right: 10em !important;
}
@media screen and (max-width: 767px) {
.mr-10\@mobile {
margin-right: 10em !important;
}
}
.pb-10 {
padding-bottom: 10em;
}
.state-desktop .pb-10\@desktop {
padding-bottom: 10em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pb-10\@desktop {
padding-bottom: 10em !important;
}
}
.state-tablet .pb-10\@tablet {
padding-bottom: 10em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pb-10\@tablet {
padding-bottom: 10em !important;
}
}
.state-mobile .pb-10\@mobile {
padding-bottom: 10em !important;
}
@media screen and (max-width: 767px) {
.pb-10\@mobile {
padding-bottom: 10em !important;
}
}
.pt-10 {
padding-top: 10em;
}
.state-desktop .pt-10\@desktop {
padding-top: 10em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pt-10\@desktop {
padding-top: 10em !important;
}
}
.state-tablet .pt-10\@tablet {
padding-top: 10em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pt-10\@tablet {
padding-top: 10em !important;
}
}
.state-mobile .pt-10\@mobile {
padding-top: 10em !important;
}
@media screen and (max-width: 767px) {
.pt-10\@mobile {
padding-top: 10em !important;
}
}
.pl-10 {
padding-left: 10em;
}
.state-desktop .pl-10\@desktop {
padding-left: 10em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pl-10\@desktop {
padding-left: 10em !important;
}
}
.state-tablet .pl-10\@tablet {
padding-left: 10em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pl-10\@tablet {
padding-left: 10em !important;
}
}
.state-mobile .pl-10\@mobile {
padding-left: 10em !important;
}
@media screen and (max-width: 767px) {
.pl-10\@mobile {
padding-left: 10em !important;
}
}
.pr-10 {
padding-right: 10em;
}
.state-desktop .pr-10\@desktop {
padding-right: 10em !important;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
.pr-10\@desktop {
padding-right: 10em !important;
}
}
.state-tablet .pr-10\@tablet {
padding-right: 10em !important;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.pr-10\@tablet {
padding-right: 10em !important;
}
}
.state-mobile .pr-10\@mobile {
padding-right: 10em !important;
}
@media screen and (max-width: 767px) {
.pr-10\@mobile {
padding-right: 10em !important;
}
}
/* End of spacing classes */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left,
.text-center,
.text-right {
/* Tablet */
/* Mobile */
/* MobileSmall */
}
.state-tablet .text-left\@tablet-right, .state-tablet
.text-center\@tablet-right, .state-tablet
.text-right\@tablet-right {
text-align: right;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.text-left\@tablet-right,
.text-center\@tablet-right,
.text-right\@tablet-right {
text-align: right;
}
}
.state-tablet .text-left\@tablet-left, .state-tablet
.text-center\@tablet-left, .state-tablet
.text-right\@tablet-left {
text-align: left;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.text-left\@tablet-left,
.text-center\@tablet-left,
.text-right\@tablet-left {
text-align: left;
}
}
.state-tablet .text-left\@tablet-center, .state-tablet
.text-center\@tablet-center, .state-tablet
.text-right\@tablet-center {
text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
.text-left\@tablet-center,
.text-center\@tablet-center,
.text-right\@tablet-center {
text-align: center;
}
}
.state-mobile .text-left\@mobile-center, .state-mobile
.text-center\@mobile-center, .state-mobile
.text-right\@mobile-center {
text-align: center;
}
@media screen and (max-width: 767px) {
.text-left\@mobile-center,
.text-center\@mobile-center,
.text-right\@mobile-center {
text-align: center;
}
}
.state-mobile .text-left\@mobile-left, .state-mobile
.text-center\@mobile-left, .state-mobile
.text-right\@mobile-left {
text-align: left;
}
@media screen and (max-width: 767px) {
.text-left\@mobile-left,
.text-center\@mobile-left,
.text-right\@mobile-left {
text-align: left;
}
}
.state-mobile .text-left\@mobile-right, .state-mobile
.text-center\@mobile-right, .state-mobile
.text-right\@mobile-right {
text-align: right;
}
@media screen and (max-width: 767px) {
.text-left\@mobile-right,
.text-center\@mobile-right,
.text-right\@mobile-right {
text-align: right;
}
}
.state-mobileSmall .text-left\@mobileSmall-right, .state-mobileSmall
.text-center\@mobileSmall-right, .state-mobileSmall
.text-right\@mobileSmall-right {
text-align: right;
}
@media screen and (max-width: 400px) {
.text-left\@mobileSmall-right,
.text-center\@mobileSmall-right,
.text-right\@mobileSmall-right {
text-align: right;
}
}
.state-mobileSmall .text-left\@mobileSmall-center, .state-mobileSmall
.text-center\@mobileSmall-center, .state-mobileSmall
.text-right\@mobileSmall-center {
text-align: center;
}
@media screen and (max-width: 400px) {
.text-left\@mobileSmall-center,
.text-center\@mobileSmall-center,
.text-right\@mobileSmall-center {
text-align: center;
}
}
.state-mobileSmall .text-left\@mobileSmall-left, .state-mobileSmall
.text-center\@mobileSmall-left, .state-mobileSmall
.text-right\@mobileSmall-left {
text-align: left;
}
@media screen and (max-width: 400px) {
.text-left\@mobileSmall-left,
.text-center\@mobileSmall-left,
.text-right\@mobileSmall-left {
text-align: left;
}
}
html[data-layout="pre-login"] {
height: 100%;
background-color: white;
}
html[data-layout="pre-login"]:after {
content: " ";
position: fixed;
height: 100%;
width: 100%;
background-image: url(/img/layout/bg/pre-login.jpg);
background-size: cover;
z-index: -1;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square {
position: fixed;
top: 50%;
width: 90%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 1000px;
/*#inner {
background-color: $colorWhite;
border-radius: 5px;
margin: 0 auto;
padding: 2em 0;
#logo {
img {
font-size: 0;
margin: 0 auto;
}
}
#description {
color: $colorBodyText;
font-size: 0.8em;
margin-top: 2em;
margin-bottom: 1em;
}
form {
.wrapper-form-input {
margin-bottom: 0.7em;
}
input {
&[type="submit"] {
float: right;
}
}
}
}*/
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper {
background-color: #ffffff;
border-radius: 3px;
overflow: hidden;
height: 600px;
}
.state-mobile html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper {
height: auto;
border: 1px solid #e1e1e1;
}
@media screen and (max-width: 767px) {
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper {
height: auto;
border: 1px solid #e1e1e1;
}
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper > .row {
height: 100%;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .image-wrapper {
background-image: url(/img/content/pages/sign-in/preview.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
height: 100%;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper {
padding: 0em 3em;
text-align: left;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper .logo {
margin-bottom: 2em;
display: block;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper p {
text-align: left;
color: #535353;
font-size: 0.9em;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper .button-links-sign-form-wrapper {
text-align: center;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper .button-links-sign-form-wrapper a:not(.logo) {
font-size: 0.85em;
text-decoration: none;
display: inline-block;
margin-top: 1em;
cursor: pointer;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper .formSuccessSent p {
font-size: 0.9em;
font-weight: 300;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper form .error-text, html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper form .form-errors {
text-align: left;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper form .form-errors li {
font-size: 0.85em;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper form input[type="text"], html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper form input[type="email"], html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper form input[type="password"] {
margin-bottom: 0.7em;
text-align: left;
}
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper form input[type="submit"] {
display: block;
width: 100%;
}
.state-mobile html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper {
padding: 2em;
}
@media screen and (max-width: 767px) {
html[data-layout="pre-login"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper {
padding: 2em;
}
}
html[data-layout="pre-login"] .rules {
background-color: #475465;
color: white;
border-radius: 8px;
padding: 1em;
text-align: left;
margin-bottom: 1em;
font-size: 0.9em;
}
html[data-layout="pre-login"] .rules p {
margin-bottom: 0.2em;
color: white !important;
font-weight: bold;
}
html[data-layout="pre-login"] .rules ul {
font-weight: 300;
margin-bottom: 0;
}
html[data-layout="pre-login"] .rules ul li {
line-height: 1;
}
html[data-layout="post-login"] {
height: 100%;
background-color: white;
}
html[data-layout="post-login"] .spacing-from-header {
margin-top: 2em;
}
html[data-layout="post-login"] a {
color: #446ea2;
}
html[data-layout="post-login"] .webui-popover {
max-width: 300px !important;
border-radius: 0;
}
html[data-layout="post-login"] .webui-popover .webui-popover-title {
display: none;
}
html[data-layout="post-login"] .webui-popover .webui-popover-content {
padding: 9px 14px;
overflow: auto;
display: block;
font-weight: 100;
line-height: 1.3;
font-size: 0.8em;
color: #404040;
}
* {
box-sizing: border-box;
}
html {
font-family: "PT Sans";
}
.button {
-webkit-appearance: none;
border-radius: 3px;
outline: 0;
padding: 1em 1em;
border: 1px solid #475465;
cursor: pointer;
font-weight: bold;
width: 100%;
background-color: #475465;
color: white;
}
.button:hover {
background-color: white;
color: #475465;
}
.spinner-loading.disable {
pointer-events: none;
}
a.button {
text-decoration: none;
color: white;
}
a.button:hover {
text-decoration: none;
color: #475465 !important;
}
.logo-wrapper {
text-align: center;
}
.logo-wrapper .logo img {
width: 100px;
}
footer {
padding: 0.5em;
background-color: #475465;
color: white;
font-size: 0.85em;
font-weight: 300;
margin-top: 2em;
text-align: left;
}
footer.fixed {
position: fixed;
bottom: 0;
width: 100%;
}
footer .dynamic-footer-button {
float: right;
}
footer .dynamic-footer-button a {
text-decoration: none;
font-weight: bold;
color: white;
margin-right: 1em;
}
footer .dynamic-footer-button a:last-of-type {
margin-right: 0;
}
.state-mobile footer .copyright {
line-height: 1.3;
}
.state-mobile footer .dynamic-footer-button {
float: unset;
padding: 1em 0em;
}
@media screen and (max-width: 767px) {
footer .copyright {
line-height: 1.3;
}
footer .dynamic-footer-button {
float: unset;
padding: 1em 0em;
}
}
h1 {
font-size: 1.5em;
text-align: left;
position: relative;
margin-bottom: 2em;
color: #535353;
display: inline-block;
clear: both;
}
h1:after {
position: absolute;
content: "";
display: inline-block;
width: 50%;
height: 3px;
background-color: #475465;
bottom: -0.3em;
left: 0;
}
h2 {
font-size: 1.3em;
text-align: left;
position: relative;
margin-bottom: 2em;
color: #535353;
display: inline-block;
clear: both;
}
h2:after {
position: absolute;
content: "";
display: inline-block;
width: 50%;
height: 3px;
background-color: #475465;
bottom: -0.3em;
left: 0;
}
#flash {
position: fixed;
z-index: 5;
width: 400px;
transform: translateX(-50%);
left: 50%;
background-color: #ffffff;
text-align: center;
font-size: 1em;
top: 1%;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 0 5px #a1a1a1;
}
#flash .marker {
width: 100px;
float: left;
position: relative;
background-color: white;
height: 100%;
}
#flash .marker img {
width: 100%;
}
#flash .message {
width: 300px;
float: left;
padding: 1em;
position: relative;
transform: translateY(-50%);
text-align: left;
top: 50%;
}
#flash .close {
position: absolute;
top: 0.2em;
width: 1em;
opacity: 0.5;
right: 0.2em;
cursor: pointer;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
#flash .close:hover {
opacity: 1;
}
#flash.error {
background-color: #b03838;
color: white;
}
#flash.success, #flash.info {
color: white;
background-color: #5C8459;
}
header nav {
height: 100%;
float: right;
margin-left: 3em;
opacity: 1;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
header nav > ul {
padding: 0;
margin: 0;
list-style-type: none;
height: 100%;
}
header nav > ul > li {
float: left;
height: 100%;
text-align: center;
vertical-align: middle;
border-bottom: 2px solid transparent;
font-size: 0.9em;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
margin-left: 0;
}
header nav > ul > li > a {
text-transform: uppercase;
letter-spacing: 0.04em;
color: #475465 !important;
font-weight: 800;
text-decoration: none;
padding: 0 1.6em;
height: 100%;
display: -webkit-box;
text-decoration: none;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
header nav > ul > li > a .menu-item-user .projectName {
opacity: 0.5;
margin-top: 4px;
display: inline-block;
font-size: 0.85em;
}
header nav > ul > li:hover, header nav > ul > li.active {
opacity: 1;
border-color: #446ea2;
}
header nav > ul > li:hover a, header nav > ul > li.active a {
text-decoration: none;
}
header nav > ul > li.dropdown-menu:hover .dropdown-content {
display: block;
}
header nav > ul > li.dropdown-menu .dropdown-content {
padding: 5px 0;
background-color: rgba(46, 125, 191, 0.99);
display: none;
position: absolute;
min-width: 170px;
z-index: 10;
}
header nav > ul > li.dropdown-menu .dropdown-content .dropdown-section {
margin-top: 10px;
font-weight: 700;
padding: 10px;
text-align: left;
border-top: 1px solid rgba(255, 255, 255, 0.6);
}
header nav > ul > li.dropdown-menu .dropdown-content .dropdown-section:first-of-type {
border-top: none;
margin-top: 0;
}
header nav > ul > li.dropdown-menu .dropdown-content ul li a {
text-align: left;
padding: 5px 10px;
display: block;
color: #ffffff;
text-decoration: none;
opacity: 0.6;
}
header nav > ul > li.dropdown-menu .dropdown-content ul li a:hover {
opacity: 1;
}
header nav > ul > li.dropdown-menu .dropdown-content ul li a.active {
opacity: 1 !important;
}
#sub-menu {
overflow: auto;
}
#sub-menu nav {
color: #ffffff;
font-weight: 700;
}
#sub-menu nav ul {
list-style-type: none;
margin-bottom: 0;
margin-left: 0;
}
#sub-menu nav ul li {
float: left;
margin-left: 0;
}
#sub-menu nav ul li a {
text-decoration: none;
color: #ffffff !important;
padding: 1em 2em;
display: inline-block;
border-left: 1px solid rgba(255, 255, 255, 0.3);
}
#sub-menu nav ul li a.active {
background-color: #0087A5;
}
#sub-menu nav ul li a:hover {
background-color: #0087A5;
}
#sub-menu nav ul li:first-of-type a {
border-left: 0;
}
header.scroll {
position: fixed;
}
.state-tablet header #search {
display: none;
}
.state-tablet header nav {
display: none;
}
.state-tablet header #openMobileMenuButton {
display: block;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
header #search {
display: none;
}
header nav {
display: none;
}
header #openMobileMenuButton {
display: block;
}
}
.state-mobile header #openMobileMenuButton {
display: block;
}
.state-mobile header #search {
display: none;
}
.state-mobile header nav {
display: none;
}
@media screen and (max-width: 767px) {
header #openMobileMenuButton {
display: block;
}
header #search {
display: none;
}
header nav {
display: none;
}
}
header {
background-color: white;
border-bottom: 1px solid #e5e5e5;
box-shadow: 0 4px 4px -2px #f2f2f2;
opacity: 1;
font-size: .8em;
position: static;
top: 0;
width: 100%;
left: 0;
z-index: 199;
}
header.stuck {
position: fixed;
top: 0;
}
.state-desktopLarge header {
font-size: .8em;
}
@media screen and (min-width: 1260px) {
header {
font-size: .8em;
}
}
header .container {
position: relative;
}
header .container .inner {
height: 75px;
}
header a.logo {
display: block;
position: relative;
height: 100%;
width: 120px;
float: left;
z-index: 1;
}
.state-tablet header a.logo {
width: 95px;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
header a.logo {
width: 95px;
}
}
.state-mobile header a.logo {
width: 95px;
}
@media screen and (max-width: 767px) {
header a.logo {
width: 95px;
}
}
header #logo {
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
top: 49%;
height: 35px;
}
.state-tablet header #logo {
height: 28px;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
header #logo {
height: 28px;
}
}
.state-mobile header #logo {
height: 28px;
}
@media screen and (max-width: 767px) {
header #logo {
height: 28px;
}
}
.state-mobileSmall header #logo {
height: 28px;
}
@media screen and (max-width: 400px) {
header #logo {
height: 28px;
}
}
.state-mobileTiny header #logo {
height: 28px;
}
@media screen and (max-width: 340px) {
header #logo {
height: 28px;
}
}
header #portal-headline {
position: relative;
height: 100%;
float: left;
color: #dff1ff75;
}
header #portal-headline > div {
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
top: 50%;
font-size: 1.75em;
text-transform: uppercase;
font-weight: 800;
}
.state-desktop header #portal-headline > div {
font-size: 2em;
}
@media screen and (min-width: 1000px) and (max-width: 1259px) {
header #portal-headline > div {
font-size: 2em;
}
}
.state-tablet header #portal-headline > div {
font-size: 1.5em;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
header #portal-headline > div {
font-size: 1.5em;
}
}
.state-mobile header #portal-headline > div {
font-size: 1.6em;
}
@media screen and (max-width: 767px) {
header #portal-headline > div {
font-size: 1.6em;
}
}
header .search-wrapper {
position: absolute;
height: 100%;
right: 0;
width: 0;
-moz-transition: width 1s;
-o-transition: width 1s;
-webkit-transition: width 1s;
transition: width 1s;
}
header .search-wrapper .search-wrapper-inner {
height: 42px;
position: relative;
top: 50%;
margin-top: -21px;
}
header .search-wrapper .search-wrapper-inner #search {
-moz-transition: width 1s, background-color 1s, margin-top 1s;
-o-transition: width 1s, background-color 1s, margin-top 1s;
-webkit-transition: width 1s, background-color 1s, margin-top 1s;
transition: width 1s, background-color 1s, margin-top 1s;
position: absolute;
top: 0;
width: 0;
height: 40px;
right: 0;
border-radius: 3px;
}
header .search-wrapper .search-wrapper-inner #search #searchIcon {
height: 27px;
opacity: 0.6;
cursor: pointer;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
transition: opacity 1s;
position: absolute;
top: 6px;
z-index: 2;
left: -40px;
}
header .search-wrapper .search-wrapper-inner #search #searchIcon:hover {
opacity: 1;
}
header .search-wrapper .search-wrapper-inner #search #closeIcon {
position: absolute;
right: 15px;
width: 15px;
height: 15px;
top: 13px;
cursor: pointer;
z-index: 2;
opacity: 0;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
header .search-wrapper .search-wrapper-inner #search #searchBar {
-webkit-appearance: none;
-moz-appearance: none;
vertical-align: top;
color: #fff;
height: 100%;
font-size: 15px;
background-color: transparent;
padding: 0;
width: 0;
pointer-events: none;
opacity: 0;
border: none;
outline: none;
-moz-transition: opacity 1s, width 1s, padding-left 1s, padding-right 1s;
-o-transition: opacity 1s, width 1s, padding-left 1s, padding-right 1s;
-webkit-transition: opacity 1s, width 1s, padding-left 1s, padding-right 1s;
transition: opacity 1s, width 1s, padding-left 1s, padding-right 1s;
}
header .search-wrapper .search-wrapper-inner #search #searchBar::placeholder {
color: #ffffff;
opacity: 1;
font-size: 15px;
}
header .search-wrapper .search-wrapper-inner #search #searchBar:-ms-input-placeholder {
color: #ffffff;
font-size: 15px;
}
header .search-wrapper .search-wrapper-inner #search #searchBar::-ms-input-placeholder {
color: #ffffff;
font-size: 15px;
}
header.activeSearch nav {
opacity: 0;
pointer-events: none;
cursor: none;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
header.scroll .container #logo {
margin-top: 4px;
}
header.scroll .container #search {
margin-top: 8px;
}
header #contact-information {
float: right;
transform: translateY(-50%);
position: relative;
top: 50%;
}
.state-mobile header #contact-information {
margin-right: 2em;
}
@media screen and (max-width: 767px) {
header #contact-information {
margin-right: 2em;
}
}
.state-tablet header #contact-information {
margin-right: 2em;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
header #contact-information {
margin-right: 2em;
}
}
header #contact-information ul {
margin-left: 0;
margin-bottom: 0;
display: inline-block;
list-style-type: none;
}
header #contact-information ul li {
float: left;
}
.state-mobile header #contact-information ul li {
margin-left: 0.5em;
}
@media screen and (max-width: 767px) {
header #contact-information ul li {
margin-left: 0.5em;
}
}
.state-tablet header #contact-information ul li {
margin-left: 0.5em;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
header #contact-information ul li {
margin-left: 0.5em;
}
}
header #contact-information ul li img {
float: left;
margin-right: 0.5em;
}
header #contact-information ul li span, header #contact-information ul li a {
float: right;
font-size: 0.9rem;
font-weight: bold;
color: #494949;
margin-top: 0.15em;
text-decoration: none;
}
.state-mobile header #contact-information ul li span, .state-mobile header #contact-information ul li a {
margin-top: 0;
}
@media screen and (max-width: 767px) {
header #contact-information ul li span, header #contact-information ul li a {
margin-top: 0;
}
}
.state-tablet header #contact-information ul li span, .state-tablet header #contact-information ul li a {
margin-top: 0;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
header #contact-information ul li span, header #contact-information ul li a {
margin-top: 0;
}
}
#sub-menu {
background-color: #446ea2;
}
#menuIcon {
position: relative;
height: 100%;
width: 45px;
float: right;
opacity: 0.5;
}
#menuIcon img {
transform: translateY(-50%);
position: absolute;
top: 50%;
height: 28px;
}
#menuIcon img.menuCloseIcon {
opacity: 0;
}
#menuIcon img.menuOpenIcon {
opacity: 1;
}
#menuIcon img.menuCloseIcon, #menuIcon img.menuCloseIcon {
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
#menuIcon[data-active="true"] img.menuOpenIcon {
opacity: 0;
}
#menuIcon[data-active="true"] img.menuCloseIcon {
opacity: 1;
}
#menuIcon[data-active="true"] img.menuCloseIcon, #menuIcon[data-active="true"] img.menuCloseIcon {
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
#mobileMenu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
display: none;
z-index: 199;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#mobileMenu > ul {
margin: 0;
padding-left: 0;
list-style-type: none;
width: 100%;
padding-bottom: 200px;
}
#mobileMenu > ul > li {
text-align: left;
position: relative;
margin-left: 0;
}
#mobileMenu > ul > li > a {
color: white;
text-decoration: none;
display: block;
text-align: center;
padding: 1.5em;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background-color: #446ea2;
}
#mobileMenu > ul > li > a.active {
background-color: #475465;
}
#mobileMenu > ul > li > a:hover {
background-color: #475465;
}
#mobileMenu > ul > li .openDropDown {
position: absolute;
top: 0;
right: 0;
width: 70px;
text-align: center;
height: 100%;
}
#mobileMenu > ul > li .openDropDown img {
width: 12px;
margin-top: 7px;
transform: rotate(90deg);
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}
#mobileMenu > ul > li .openDropDown.active img {
transform: rotate(270deg);
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}
#mobileMenu > ul > li.dropdown-menu {
display: none;
}
#mobileMenu > ul > li.dropdown-menu .dropdown-section {
color: white;
text-decoration: none;
display: block;
padding: 9px;
padding-left: 25px;
background-color: #5089C2;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#mobileMenu > ul > li.dropdown-menu ul li a {
color: white;
text-decoration: none;
display: block;
padding: 9px;
padding-left: 50px;
background-color: #326CA4;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#mobileMenu #contact-information {
text-align: center;
}
#mobileMenu #contact-information ul {
list-style-type: none;
color: white;
margin-bottom: 0;
margin-left: 0;
}
#mobileMenu #contact-information ul li {
padding: 0.5em;
font-weight: bold;
margin-left: 0;
}
button.sending, input[type="submit"].sending, .button.sending {
background-image: url(../../img/layout/icon/loader_v3.svg);
background-size: auto 80%;
background-repeat: no-repeat;
background-position: center center;
color: transparent !important;
pointer-events: none;
}
button.sending.gray, input[type="submit"].sending.gray, .button.sending.gray {
background-image: url(../../img/layout/icon/loader_gray.svg);
}
form textarea {
-webkit-appearance: none;
padding: 1em 1em;
width: 100%;
border-radius: 3px;
outline: 0;
font-family: "PT Sans";
border: 1px solid #DEDEDE;
}
form textarea::placeholder {
color: #b2b2b2;
}
form input[type="text"], form input[type="email"], form input[type="password"] {
-webkit-appearance: none;
padding: 1em 1em;
width: 100%;
border-radius: 3px;
outline: 0;
border: 1px solid #DEDEDE;
}
form input[type="text"]::placeholder, form input[type="email"]::placeholder, form input[type="password"]::placeholder {
color: #b2b2b2;
}
form .checkbox-wrapper label:not(.service-option) {
font-weight: normal !important;
margin-bottom: 0.4em !important;
display: block !important;
}
form .checkbox-wrapper input {
position: relative;
-webkit-appearance: none;
outline: none;
width: 42px;
margin: 0;
height: 24px;
background-color: #fff;
border: 1px solid #D9DADC;
vertical-align: middle;
border-radius: 50px;
box-shadow: inset -20px 0 0 0 #fff;
}
form .checkbox-wrapper input:after {
content: "";
position: absolute;
top: 1px;
left: 1px;
background: transparent;
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
}
form .checkbox-wrapper input:checked {
box-shadow: inset 20px 0 0 0 #4ed164;
border-color: #4ed164;
}
form .checkbox-wrapper input:checked:after {
left: 20px;
box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05);
}
form .select-container {
position: relative;
display: block;
}
form .select-container .open-arrow {
position: absolute;
top: 0;
right: 0;
width: 2em;
height: 100%;
pointer-events: none;
}
form .select-container .open-arrow:after {
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #475465;
position: absolute;
pointer-events: none;
}
form .select-container select {
-webkit-appearance: none;
padding: 1em 1em;
width: 100%;
border-radius: 3px;
outline: 0;
background-color: white;
color: black;
border: 1px solid #DEDEDE;
}
form .select-container select:focus {
outline: none;
/*&::-ms-value {
background-color: $colorLightBlue4;
color: $colorBlue;
}*/
}
form .select-container select:-moz-focusring {
color: transparent !important;
}
form input[type="submit"] {
-webkit-appearance: none;
border-radius: 3px;
outline: 0;
padding: 1em 1em;
border: 1px solid #475465;
cursor: pointer;
font-weight: bold;
width: 100%;
background-color: #475465;
color: white;
transition-property: background-color, color, border-color;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
form input[type="submit"]:hover {
background-color: white;
color: #475465;
}
form .form-errors {
color: #a43232;
text-align: left;
padding-left: 0;
list-style-type: none;
}
form .form-errors li {
margin-left: 0;
}
form .error .error-text {
color: #a43232;
font-size: 0.75em;
padding-left: 0.5em;
text-align: left;
margin-bottom: 0.2em;
}
form .error input, form .error textarea, form .error select {
border: 1px solid #a43232 !important;
}
form .errors {
text-align: center;
color: #a43232;
list-style-type: none;
}
body[data-template="events-default"] .default-template-prelogin-center-square .block-split-wrapper {
height: auto;
}
body[data-template="events-default"] .default-template-prelogin-center-square .block-split-wrapper .event-preview-image {
width: 100%;
}
body[data-template="events-default"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper {
padding: 3em;
position: relative;
}
body[data-template="events-default"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper #lang-event-choose {
position: absolute;
top: 0.5em;
right: 0.5em;
}
body[data-template="events-default"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper #lang-event-choose .flag {
opacity: 0.3;
font-size: 0.9em;
}
body[data-template="events-default"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper #lang-event-choose .flag img {
height: 17px;
}
body[data-template="events-default"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper #lang-event-choose .flag.active-lang, body[data-template="events-default"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper #lang-event-choose .flag:hover {
opacity: 1;
}
body[data-template="events-default"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper p {
text-align: left;
}
body[data-template="events-default"] .default-template-prelogin-center-square .block-split-wrapper .content-wrapper .button {
display: block;
text-align: center;
font-size: 0.85em;
}
html[data-template="events-page"]:after {
content: unset;
}
body[data-template="events-page"] .content-wrapper {
padding: 3em;
position: relative;
}
body[data-template="events-page"] .content-wrapper p {
text-align: left;
}
body[data-template="reservation-overview"] .new-suggested-date-text {
color: #d9b46a;
font-weight: bold;
}
body[data-template="reservation-overview"] .table-overview {
background-color: white;
border-radius: 3px;
font-size: 0.9em;
overflow: hidden;
}
body[data-template="reservation-overview"] .table-overview table {
width: 100%;
border: 0;
color: gray;
table-layout: fixed;
margin-bottom: 0;
}
body[data-template="reservation-overview"] .table-overview table thead th {
background-color: #475465;
color: white;
}
body[data-template="reservation-overview"] .table-overview table .edit {
width: 103px;
}
body[data-template="reservation-overview"] .table-overview table .edit a {
margin-left: 6px;
}
body[data-template="reservation-overview"] .table-overview table .edit .more-info {
cursor: pointer;
}
body[data-template="reservation-overview"] .table-overview table .edit .more-info:hover {
opacity: 1;
}
body[data-template="reservation-overview"] .table-overview table .edit .cancel-reservation {
cursor: pointer;
}
body[data-template="reservation-overview"] .table-overview table .edit .cancel-reservation:hover {
opacity: 1;
}
body[data-template="reservation-overview"] .table-overview table .edit.small {
width: 49px;
}
body[data-template="reservation-overview"] .table-overview table td {
border: 1px solid #dedede;
}
body[data-template="reservation-overview"] .table-overview table th {
border: 1px solid #475465;
}
body[data-template="reservation-overview"] .table-overview table th, body[data-template="reservation-overview"] .table-overview table td {
background-color: white;
padding: 1em 0.5em;
}
body[data-template="reservation-overview"] .table-overview table td {
font-weight: 300;
vertical-align: middle;
line-height: 1.2;
}
body[data-template="reservation-overview"] .table-overview table td .add-icon {
height: 1em;
}
body[data-template="reservation-overview"] .table-overview table td.edit {
padding: 0 1em;
text-align: center;
}
body[data-template="reservation-overview"] .table-overview table td.edit img {
height: 20px;
opacity: 0.5;
float: left;
}
body[data-template="reservation-overview"] .table-overview table td.edit a {
float: right;
}
body[data-template="reservation-overview"] .table-overview table td.edit a:hover img {
opacity: 0.9;
}
body[data-template="reservation-overview"] .table-overview table th {
font-weight: 700;
}
body[data-template="reservation-overview"] .table-overview table thead tr {
border-bottom: 1px solid #c2c2c2;
}
body[data-template="reservation-overview"] .table-overview table tbody tr {
border-bottom: 1px solid #eaeaea;
}
body[data-template="reservation-overview"] .table-overview table tbody tr:last-of-type {
border-bottom: 0;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row {
background-color: #ffffff;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row td {
padding: 0;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container {
display: none;
padding: 10px;
font-weight: 400;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 25px;
color: #404040;
overflow: auto;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container .buttons {
padding: 0;
display: block;
overflow: auto;
margin-top: 0.2em;
width: 40%;
clear: both;
float: right;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container .buttons .button {
float: left;
width: 48%;
margin-right: 1%;
text-align: center;
padding: 0.3em;
color: white;
background-color: #446EA2;
border-color: #446EA2;
/*&.confirmed {
background-color: #78a375;
border: 1px solid #78a375;
&:hover {
background-color: white;
color: #78a375 !important;
}
}
&.declined {
background-color: #b03838;
border: 1px solid #b03838;
&:hover {
background-color: white;
color: #b03838 !important;
}
}*/
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container .buttons .button:hover {
background-color: white;
color: #446EA2 !important;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container .buttons .button.declined {
float: left;
background-color: #dfdfdf;
color: gray;
border-color: #dfdfdf;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container .buttons .button.declined:hover {
background-color: white;
color: gray !important;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container .suggested-date-dialog {
position: relative;
width: 100%;
background-color: #d9b46a;
color: white;
margin-bottom: 2em;
padding: 0;
border-radius: 3px;
overflow: hidden;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container .suggested-date-dialog .warning {
position: absolute;
width: 9%;
left: 0;
top: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container .suggested-date-dialog .warning img {
max-width: 50%;
position: absolute;
top: 50%;
left: 50%;
opacity: 0.8;
transform: translate(-50%, -50%);
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container .suggested-date-dialog .text-transparent {
width: 100%;
padding: 1em;
text-align: left;
padding-left: 10%;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container .suggested-date-dialog .text-transparent p {
display: block;
}
.state-mobile body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container {
border-right: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
border-top: 1px solid #e8e8e8;
padding: 0.6em 0.5em;
}
@media screen and (max-width: 767px) {
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container {
border-right: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
border-top: 1px solid #e8e8e8;
padding: 0.6em 0.5em;
}
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container div {
padding: 5px;
float: left;
width: 50%;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container div * {
display: inline-block;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container div.status_message {
width: 100%;
}
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container .label {
font-weight: bold;
color: #535353;
}
.state-mobile body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container div {
width: 100%;
}
@media screen and (max-width: 767px) {
body[data-template="reservation-overview"] .table-overview table tr.info-row .info-row-container div {
width: 100%;
}
}
body[data-template="reservation-overview"] .status-text {
padding: 0.2em;
color: white;
border-radius: 3px;
display: inline-block;
text-wrap: avoid;
width: 100%;
text-align: center;
font-weight: bold;
}
body[data-template="reservation-overview"] .status-text.requested, body[data-template="reservation-overview"] .status-text.pending {
background-color: #7588a3;
}
body[data-template="reservation-overview"] .status-text.cancelled {
background-color: #8a8a8a;
}
body[data-template="reservation-overview"] .status-text.suggested-new-date {
background-color: #dbae56;
}
body[data-template="reservation-overview"] .status-text.confirmed {
background-color: #78a375;
}
body[data-template="reservation-overview"] .status-text.declined {
background-color: #b03838;
}
body[data-template="reservation-overview"] .table-overview-mobile {
background-color: white;
border: 1px solid #e1e1e1;
border-radius: 5px;
padding: 1em;
padding-top: 0;
padding-bottom: 0;
color: gray;
font-weight: 300;
font-size: 0.9em;
}
body[data-template="reservation-overview"] .table-overview-mobile .suggested-date-dialog {
position: relative;
width: 100%;
background-color: #d9b46a;
color: white;
margin-bottom: 2em;
padding: 0;
border-radius: 3px;
overflow: hidden;
}
body[data-template="reservation-overview"] .table-overview-mobile .suggested-date-dialog .warning {
position: absolute;
width: 9%;
left: 0;
top: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
}
body[data-template="reservation-overview"] .table-overview-mobile .suggested-date-dialog .warning img {
max-width: 50%;
position: absolute;
top: 50%;
left: 50%;
opacity: 0.8;
transform: translate(-50%, -50%);
}
body[data-template="reservation-overview"] .table-overview-mobile .suggested-date-dialog .text-transparent {
width: 100%;
padding: 1em;
text-align: left;
}
body[data-template="reservation-overview"] .table-overview-mobile .suggested-date-dialog .text-transparent p {
display: block;
}
body[data-template="reservation-overview"] .table-overview-mobile .status-text {
max-width: 125px;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper {
border-bottom: 1px solid #c2c2c2;
padding: 1em 0;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .name, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .arrival, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .departure, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .reservation, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .tailnumber {
margin-bottom: 0.5em;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status .label, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .name .label, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .arrival .label, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .departure .label, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .reservation .label, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .tailnumber .label {
font-weight: bold;
color: #535353;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status .value, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .name .value, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .arrival .value, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .departure .value, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .reservation .value, body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .tailnumber .value {
float: right;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .buttons {
padding: 0;
display: block;
overflow: auto;
margin-top: 1em;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .buttons .button {
float: left;
width: 49.5%;
margin-right: 1%;
text-align: center;
padding: 0.5em;
color: white;
background-color: #446EA2;
border-color: #446EA2;
/*&.confirmed {
background-color: #78a375;
border: 1px solid #78a375;
&:hover {
background-color: white;
color: #78a375 !important;
}
}
&.declined {
background-color: #b03838;
border: 1px solid #b03838;
&:hover {
background-color: white;
color: #b03838 !important;
}
}*/
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .buttons .button:last-of-type {
margin-right: 0;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .buttons .button:hover {
background-color: white;
color: #446EA2 !important;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .buttons .button.declined {
float: left;
background-color: #dfdfdf;
color: gray;
border-color: #dfdfdf;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .buttons .button.declined:hover {
background-color: white;
color: gray !important;
}
.state-mobile body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status {
overflow: auto;
margin-bottom: 1em;
}
.state-mobile body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status .value {
float: left;
}
@media screen and (max-width: 767px) {
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status {
overflow: auto;
margin-bottom: 1em;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status .value {
float: left;
}
}
.state-tablet body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status {
overflow: auto;
margin-bottom: 1em;
}
.state-tablet body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status .value {
float: left;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status {
overflow: auto;
margin-bottom: 1em;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status .value {
float: left;
}
}
.state-mobile body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .departure {
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .departure {
margin-bottom: 0;
}
}
.state-tablet body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .departure {
margin-bottom: 0;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .departure {
margin-bottom: 0;
}
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .status-text {
max-width: 150px;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper .button {
text-align: center;
display: block;
font-size: 0.9em;
padding: 0.5em;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper a.button {
color: white;
}
body[data-template="reservation-overview"] .table-overview-mobile .row-wrapper:last-of-type {
border-bottom: 0;
}
body[data-template="reservation-overview"] .no-records {
text-align: center;
padding: 2em 0;
}
.state-mobile body[data-template="reservation-overview"] .no-records {
padding: 1em;
}
@media screen and (max-width: 767px) {
body[data-template="reservation-overview"] .no-records {
padding: 1em;
}
}
body[data-template="reservation-overview"] .button {
min-width: 100px;
}
body[data-template="reservation-overview"] .button.success {
background-color: #DEDEDE;
color: gray !important;
cursor: auto;
text-decoration: none;
}
body[data-template="reservation-overview"] .button.error {
cursor: auto;
text-decoration: none;
background-color: #ffcccc;
color: white !important;
}
body[data-template="reservation-create"] .tail-number-loader, body[data-template="reservation-edit"] .tail-number-loader {
position: absolute;
top: 0;
right: 0;
height: 100%;
opacity: 0.5;
display: none;
}
body[data-template="reservation-create"] .tab-opener-wrapper, body[data-template="reservation-edit"] .tab-opener-wrapper {
overflow: hidden;
}
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener {
position: relative;
}
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-description, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-description {
padding: 1em;
background-color: #446ea2;
color: white;
padding-left: 3em;
}
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-description .of-step, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-description .of-step {
display: none;
}
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-description .headline, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-description .headline {
font-weight: bold;
margin-bottom: 0.5em;
}
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-description .tab-minor-description, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-description .tab-minor-description {
font-weight: lighter;
}
.state-mobile body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-description, .state-mobile body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-description {
padding-left: 1em;
}
@media screen and (max-width: 767px) {
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-description, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-description {
padding-left: 1em;
}
}
.state-tablet body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-description, .state-tablet body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-description {
font-size: 0.9em;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-description, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-description {
font-size: 0.9em;
}
}
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-arrow, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-arrow {
border: solid #fbfbfb;
border-width: 0 30px 30px 0;
display: inline-block;
padding: 42px;
position: absolute;
z-index: 1;
right: -15px;
top: 50%;
transform: translateY(-50%);
}
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-arrow.right, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-arrow.right {
transform: translateY(-50%) rotate(-45deg);
-webkit-transform: translateY(-50%) rotate(-45deg);
}
.state-tablet body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-arrow, .state-tablet body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-arrow {
right: -11px;
border-width: 0 22px 22px 0;
}
@media screen and (min-width: 768px) and (max-width: 999px) {
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-arrow, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-arrow {
right: -11px;
border-width: 0 22px 22px 0;
}
}
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener.active .tab-description, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener.active .tab-description {
background-color: #475465;
}
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener:first-of-type .tab-description, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener:first-of-type .tab-description {
padding-left: 1em;
}
.state-mobile body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener:not(.active), .state-mobile body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener:not(.active) {
display: none;
}
.state-mobile body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-description .of-step, .state-mobile body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-description .of-step {
display: inline;
}
@media screen and (max-width: 767px) {
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener:not(.active), body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener:not(.active) {
display: none;
}
body[data-template="reservation-create"] .tab-opener-wrapper .tab-opener .tab-description .of-step, body[data-template="reservation-edit"] .tab-opener-wrapper .tab-opener .tab-description .of-step {
display: inline;
}
}
body[data-template="reservation-create"] form .tab, body[data-template="reservation-edit"] form .tab {
display: none;
padding: 2em;
background: whitesmoke;
overflow: auto;
border: 1px solid #e3e3e3;
border-top: 0;
}
.state-mobile body[data-template="reservation-create"] form .tab:last-of-type, .state-mobile body[data-template="reservation-edit"] form .tab:last-of-type {
border-top: 1px solid #e3e3e3;
}
@media screen and (max-width: 767px) {
body[data-template="reservation-create"] form .tab:last-of-type, body[data-template="reservation-edit"] form .tab:last-of-type {
border-top: 1px solid #e3e3e3;
}
}
.state-mobile body[data-template="reservation-create"] form .tab, .state-mobile body[data-template="reservation-edit"] form .tab {
padding: 1em;
}
@media screen and (max-width: 767px) {
body[data-template="reservation-create"] form .tab, body[data-template="reservation-edit"] form .tab {
padding: 1em;
}
}
body[data-template="reservation-create"] form .tab .guide-icon, body[data-template="reservation-edit"] form .tab .guide-icon {
width: 16px;
cursor: pointer;
}
body[data-template="reservation-create"] form .tab p, body[data-template="reservation-edit"] form .tab p {
font-size: 0.9em;
color: #475465;
}
body[data-template="reservation-create"] form .tab.overview-of-reservation div[data-form-name], body[data-template="reservation-edit"] form .tab.overview-of-reservation div[data-form-name] {
margin-bottom: 1em;
}
body[data-template="reservation-create"] form .tab.overview-of-reservation .cell, body[data-template="reservation-edit"] form .tab.overview-of-reservation .cell {
font-weight: bold;
margin-bottom: 0.2em;
font-size: 0.9em;
color: #475465;
}
body[data-template="reservation-create"] form .tab.overview-of-reservation .cell.value, body[data-template="reservation-edit"] form .tab.overview-of-reservation .cell.value {
font-weight: normal;
margin-bottom: 0;
}
body[data-template="reservation-create"] form .tab label, body[data-template="reservation-edit"] form .tab label {
font-weight: bold;
margin-bottom: 0.2em;
font-size: 0.9em;
display: inline-block;
color: #475465;
}
body[data-template="reservation-create"] form .tab label.service-option, body[data-template="reservation-edit"] form .tab label.service-option {
display: block;
font-weight: 300;
}
body[data-template="reservation-create"] form .tab .go-to-next-tab, body[data-template="reservation-create"] form .tab .go-to-prev-tab, body[data-template="reservation-edit"] form .tab .go-to-next-tab, body[data-template="reservation-edit"] form .tab .go-to-prev-tab {
font-size: 0.85em;
text-decoration: none;
display: inline-block;
margin-top: 1em;
cursor: pointer;
width: 200px;
text-align: center;
}
.state-mobile body[data-template="reservation-create"] form .tab .go-to-next-tab, .state-mobile body[data-template="reservation-create"] form .tab .go-to-prev-tab, .state-mobile body[data-template="reservation-edit"] form .tab .go-to-next-tab, .state-mobile body[data-template="reservation-edit"] form .tab .go-to-prev-tab {
width: 48%;
}
@media screen and (max-width: 767px) {
body[data-template="reservation-create"] form .tab .go-to-next-tab, body[data-template="reservation-create"] form .tab .go-to-prev-tab, body[data-template="reservation-edit"] form .tab .go-to-next-tab, body[data-template="reservation-edit"] form .tab .go-to-prev-tab {
width: 48%;
}
}
body[data-template="reservation-create"] form .tab .go-to-next-tab.disable, body[data-template="reservation-create"] form .tab .go-to-prev-tab.disable, body[data-template="reservation-edit"] form .tab .go-to-next-tab.disable, body[data-template="reservation-edit"] form .tab .go-to-prev-tab.disable {
pointer-events: none;
}
body[data-template="reservation-create"] form .tab .go-to-next-tab, body[data-template="reservation-edit"] form .tab .go-to-next-tab {
float: right;
}
body[data-template="reservation-create"] form .tab .go-to-prev-tab, body[data-template="reservation-edit"] form .tab .go-to-prev-tab {
float: left;
background-color: #dfdfdf;
color: gray;
border-color: #dfdfdf;
}
body[data-template="reservation-create"] form .tab .go-to-prev-tab:hover, body[data-template="reservation-edit"] form .tab .go-to-prev-tab:hover {
background-color: white;
}
body[data-template="reservation-create"] form .tab .description-find-model, body[data-template="reservation-edit"] form .tab .description-find-model {
font-size: 0.8em;
color: gray;
}
body[data-template="reservation-create"] form .tab .description-find-model img, body[data-template="reservation-edit"] form .tab .description-find-model img {
height: 2em;
opacity: 0.5;
}
body[data-template="reservation-create"] form .tab .model-correct-incorrect, body[data-template="reservation-edit"] form .tab .model-correct-incorrect {
font-size: 0.8em;
text-align: center;
}
body[data-template="reservation-create"] form .tab .model-correct-incorrect#model-is-incorrect, body[data-template="reservation-edit"] form .tab .model-correct-incorrect#model-is-incorrect {
border-color: #a97361;
background-color: #a97361;
}
body[data-template="reservation-create"] form .tab .model-correct-incorrect#model-is-incorrect:hover, body[data-template="reservation-edit"] form .tab .model-correct-incorrect#model-is-incorrect:hover {
background-color: white;
color: #a97361;
}
body[data-template="reservation-create"] form .tab .model-correct-incorrect#model-is-correct, body[data-template="reservation-edit"] form .tab .model-correct-incorrect#model-is-correct {
border-color: #61a973;
background-color: #61a973;
}
body[data-template="reservation-create"] form .tab .model-correct-incorrect#model-is-correct:hover, body[data-template="reservation-edit"] form .tab .model-correct-incorrect#model-is-correct:hover {
background-color: white;
color: #61a973;
}
body[data-template="reservation-create"] form .model-find-by-tail-number, body[data-template="reservation-create"] form .no-model-find, body[data-template="reservation-create"] form .model-number, body[data-template="reservation-edit"] form .model-find-by-tail-number, body[data-template="reservation-edit"] form .no-model-find, body[data-template="reservation-edit"] form .model-number {
display: none;
}
body[data-template="reservation-create"] form input[type="submit"], body[data-template="reservation-edit"] form input[type="submit"] {
float: right;
font-size: 0.85em;
text-decoration: none;
display: inline-block;
margin-top: 1em;
cursor: pointer;
width: 200px;
text-align: center;
}
html[data-template="sign-up"]:after {
content: unset;
}
body[data-template="sign-up"] .content-wrapper {
padding: 3em;
text-align: left;
}
body[data-template="sign-up"] .content-wrapper input[type="text"], body[data-template="sign-up"] .content-wrapper input[type="email"], body[data-template="sign-up"] .content-wrapper input[type="password"] {
margin-bottom: 0.7em;
text-align: left;
}
body[data-template="sign-up"] .content-wrapper input[type="submit"] {
display: block;
width: 100%;
}
/*# sourceMappingURL=main.css.map */