/** * @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 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 * - ```.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 16 * @gridle-gutter-width 40px * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 20px * @gridle-gutter-bottom 0 * @gridle-gutter-left 20px * @gridle-direction ltr * @gridle-dir-attribute false * @gridle-name-multiplicator 1 * @gridle-states-classes false * @gridle-classes-prefix */ /** * @name landscape State * Here's the settings for the **landscape** state. * @styleguide Gridle / States * @display gridle-settings * @gridle-name landscape * @gridle-min-width 576px * @gridle-max-width * @gridle-query * @gridle-classes true * @gridle-context 16 * @gridle-gutter-width 40px * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 20px * @gridle-gutter-bottom 0 * @gridle-gutter-left 20px * @gridle-direction ltr * @gridle-dir-attribute false * @gridle-name-multiplicator 1 * @gridle-states-classes false * @gridle-classes-prefix */ /** * @name tablet State * Here's the settings for the **tablet** state. * @styleguide Gridle / States * @display gridle-settings * @gridle-name tablet * @gridle-min-width 768px * @gridle-max-width * @gridle-query * @gridle-classes true * @gridle-context 16 * @gridle-gutter-width 40px * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 20px * @gridle-gutter-bottom 0 * @gridle-gutter-left 20px * @gridle-direction ltr * @gridle-dir-attribute false * @gridle-name-multiplicator 1 * @gridle-states-classes false * @gridle-classes-prefix */ /** * @name desktop State * Here's the settings for the **desktop** state. * @styleguide Gridle / States * @display gridle-settings * @gridle-name desktop * @gridle-min-width 992px * @gridle-max-width * @gridle-query * @gridle-classes true * @gridle-context 16 * @gridle-gutter-width 40px * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 20px * @gridle-gutter-bottom 0 * @gridle-gutter-left 20px * @gridle-direction ltr * @gridle-dir-attribute false * @gridle-name-multiplicator 1 * @gridle-states-classes false * @gridle-classes-prefix */ /** * @name large State * Here's the settings for the **large** state. * @styleguide Gridle / States * @display gridle-settings * @gridle-name large * @gridle-min-width 1200px * @gridle-max-width * @gridle-query * @gridle-classes true * @gridle-context 16 * @gridle-gutter-width 40px * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 20px * @gridle-gutter-bottom 0 * @gridle-gutter-left 20px * @gridle-direction ltr * @gridle-dir-attribute false * @gridle-name-multiplicator 1 * @gridle-states-classes false * @gridle-classes-prefix */ .container:after { content: ""; display: table; clear: both; } .row, .row-reverse { display: -moz-flex; display: flex; flex-wrap: wrap; -moz-flex: 0 1 auto; flex: 0 1 auto; } .gr-0, .gr-1, .gr-2, .gr-3, .gr-4, .gr-5, .gr-6, .gr-7, .gr-8, .gr-9, .gr-10, .gr-11, .gr-12, .gr-13, .gr-14, .gr-15, .gr-16 { -moz-flex: 0 0 auto; flex: 0 0 auto; -moz-flex-direction: column; flex-direction: column; display: block; min-height: 1px; line-height: 1; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } .gr-adapt { max-width: 100%; line-height: 1; display: -moz-flex; display: flex; -moz-flex: 0 1 auto; flex: 0 1 auto; -moz-flex-direction: column; flex-direction: column; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } .gr-grow { max-width: 100%; line-height: 1; display: -moz-flex; display: flex; -moz-flex: 1 1 auto; flex: 1 1 auto; -moz-flex-direction: column; flex-direction: column; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } .push-0, .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16 { position: relative; } .pull-0, .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16 { position: relative; } .nowrap { flex-wrap: nowrap; white-space: nowrap; } .nowrap > * { white-space: normal; } .wrap { flex-wrap: wrap; white-space: normal; } .gr-centered { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } @media screen and (min-width: 576px) { .container\@landscape:after { content: ""; display: table; clear: both; } } @media screen and (min-width: 576px) { .row\@landscape, .row-reverse\@landscape { display: -moz-flex; display: flex; flex-wrap: wrap; -moz-flex: 0 1 auto; flex: 0 1 auto; } } @media screen and (min-width: 576px) { .gr-0\@landscape, .gr-1\@landscape, .gr-2\@landscape, .gr-3\@landscape, .gr-4\@landscape, .gr-5\@landscape, .gr-6\@landscape, .gr-7\@landscape, .gr-8\@landscape, .gr-9\@landscape, .gr-10\@landscape, .gr-11\@landscape, .gr-12\@landscape, .gr-13\@landscape, .gr-14\@landscape, .gr-15\@landscape, .gr-16\@landscape { -moz-flex: 0 0 auto; flex: 0 0 auto; -moz-flex-direction: column; flex-direction: column; display: block; min-height: 1px; line-height: 1; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 576px) { .gr-adapt\@landscape { max-width: 100%; line-height: 1; display: -moz-flex; display: flex; -moz-flex: 0 1 auto; flex: 0 1 auto; -moz-flex-direction: column; flex-direction: column; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 576px) { .gr-grow\@landscape { max-width: 100%; line-height: 1; display: -moz-flex; display: flex; -moz-flex: 1 1 auto; flex: 1 1 auto; -moz-flex-direction: column; flex-direction: column; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 576px) { .push-0\@landscape, .push-1\@landscape, .push-2\@landscape, .push-3\@landscape, .push-4\@landscape, .push-5\@landscape, .push-6\@landscape, .push-7\@landscape, .push-8\@landscape, .push-9\@landscape, .push-10\@landscape, .push-11\@landscape, .push-12\@landscape, .push-13\@landscape, .push-14\@landscape, .push-15\@landscape, .push-16\@landscape { position: relative; } } @media screen and (min-width: 576px) { .pull-0\@landscape, .pull-1\@landscape, .pull-2\@landscape, .pull-3\@landscape, .pull-4\@landscape, .pull-5\@landscape, .pull-6\@landscape, .pull-7\@landscape, .pull-8\@landscape, .pull-9\@landscape, .pull-10\@landscape, .pull-11\@landscape, .pull-12\@landscape, .pull-13\@landscape, .pull-14\@landscape, .pull-15\@landscape, .pull-16\@landscape { position: relative; } } @media screen and (min-width: 576px) { .nowrap\@landscape { flex-wrap: nowrap; white-space: nowrap; } .nowrap\@landscape > * { white-space: normal; } } @media screen and (min-width: 576px) { .wrap\@landscape { flex-wrap: wrap; white-space: normal; } } @media screen and (min-width: 576px) { .gr-centered\@landscape { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } } @media screen and (min-width: 768px) { .container\@tablet:after { content: ""; display: table; clear: both; } } @media screen and (min-width: 768px) { .row\@tablet, .row-reverse\@tablet { display: -moz-flex; display: flex; flex-wrap: wrap; -moz-flex: 0 1 auto; flex: 0 1 auto; } } @media screen and (min-width: 768px) { .gr-0\@tablet, .gr-1\@tablet, .gr-2\@tablet, .gr-3\@tablet, .gr-4\@tablet, .gr-5\@tablet, .gr-6\@tablet, .gr-7\@tablet, .gr-8\@tablet, .gr-9\@tablet, .gr-10\@tablet, .gr-11\@tablet, .gr-12\@tablet, .gr-13\@tablet, .gr-14\@tablet, .gr-15\@tablet, .gr-16\@tablet { -moz-flex: 0 0 auto; flex: 0 0 auto; -moz-flex-direction: column; flex-direction: column; display: block; min-height: 1px; line-height: 1; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 768px) { .gr-adapt\@tablet { max-width: 100%; line-height: 1; display: -moz-flex; display: flex; -moz-flex: 0 1 auto; flex: 0 1 auto; -moz-flex-direction: column; flex-direction: column; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 768px) { .gr-grow\@tablet { max-width: 100%; line-height: 1; display: -moz-flex; display: flex; -moz-flex: 1 1 auto; flex: 1 1 auto; -moz-flex-direction: column; flex-direction: column; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 768px) { .push-0\@tablet, .push-1\@tablet, .push-2\@tablet, .push-3\@tablet, .push-4\@tablet, .push-5\@tablet, .push-6\@tablet, .push-7\@tablet, .push-8\@tablet, .push-9\@tablet, .push-10\@tablet, .push-11\@tablet, .push-12\@tablet, .push-13\@tablet, .push-14\@tablet, .push-15\@tablet, .push-16\@tablet { position: relative; } } @media screen and (min-width: 768px) { .pull-0\@tablet, .pull-1\@tablet, .pull-2\@tablet, .pull-3\@tablet, .pull-4\@tablet, .pull-5\@tablet, .pull-6\@tablet, .pull-7\@tablet, .pull-8\@tablet, .pull-9\@tablet, .pull-10\@tablet, .pull-11\@tablet, .pull-12\@tablet, .pull-13\@tablet, .pull-14\@tablet, .pull-15\@tablet, .pull-16\@tablet { position: relative; } } @media screen and (min-width: 768px) { .nowrap\@tablet { flex-wrap: nowrap; white-space: nowrap; } .nowrap\@tablet > * { white-space: normal; } } @media screen and (min-width: 768px) { .wrap\@tablet { flex-wrap: wrap; white-space: normal; } } @media screen and (min-width: 768px) { .gr-centered\@tablet { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } } @media screen and (min-width: 992px) { .container\@desktop:after { content: ""; display: table; clear: both; } } @media screen and (min-width: 992px) { .row\@desktop, .row-reverse\@desktop { display: -moz-flex; display: flex; flex-wrap: wrap; -moz-flex: 0 1 auto; flex: 0 1 auto; } } @media screen and (min-width: 992px) { .gr-0\@desktop, .gr-1\@desktop, .gr-2\@desktop, .gr-3\@desktop, .gr-4\@desktop, .gr-5\@desktop, .gr-6\@desktop, .gr-7\@desktop, .gr-8\@desktop, .gr-9\@desktop, .gr-10\@desktop, .gr-11\@desktop, .gr-12\@desktop, .gr-13\@desktop, .gr-14\@desktop, .gr-15\@desktop, .gr-16\@desktop { -moz-flex: 0 0 auto; flex: 0 0 auto; -moz-flex-direction: column; flex-direction: column; display: block; min-height: 1px; line-height: 1; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 992px) { .gr-adapt\@desktop { max-width: 100%; line-height: 1; display: -moz-flex; display: flex; -moz-flex: 0 1 auto; flex: 0 1 auto; -moz-flex-direction: column; flex-direction: column; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 992px) { .gr-grow\@desktop { max-width: 100%; line-height: 1; display: -moz-flex; display: flex; -moz-flex: 1 1 auto; flex: 1 1 auto; -moz-flex-direction: column; flex-direction: column; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 992px) { .push-0\@desktop, .push-1\@desktop, .push-2\@desktop, .push-3\@desktop, .push-4\@desktop, .push-5\@desktop, .push-6\@desktop, .push-7\@desktop, .push-8\@desktop, .push-9\@desktop, .push-10\@desktop, .push-11\@desktop, .push-12\@desktop, .push-13\@desktop, .push-14\@desktop, .push-15\@desktop, .push-16\@desktop { position: relative; } } @media screen and (min-width: 992px) { .pull-0\@desktop, .pull-1\@desktop, .pull-2\@desktop, .pull-3\@desktop, .pull-4\@desktop, .pull-5\@desktop, .pull-6\@desktop, .pull-7\@desktop, .pull-8\@desktop, .pull-9\@desktop, .pull-10\@desktop, .pull-11\@desktop, .pull-12\@desktop, .pull-13\@desktop, .pull-14\@desktop, .pull-15\@desktop, .pull-16\@desktop { position: relative; } } @media screen and (min-width: 992px) { .nowrap\@desktop { flex-wrap: nowrap; white-space: nowrap; } .nowrap\@desktop > * { white-space: normal; } } @media screen and (min-width: 992px) { .wrap\@desktop { flex-wrap: wrap; white-space: normal; } } @media screen and (min-width: 992px) { .gr-centered\@desktop { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } } @media screen and (min-width: 1200px) { .container\@large:after { content: ""; display: table; clear: both; } } @media screen and (min-width: 1200px) { .row\@large, .row-reverse\@large { display: -moz-flex; display: flex; flex-wrap: wrap; -moz-flex: 0 1 auto; flex: 0 1 auto; } } @media screen and (min-width: 1200px) { .gr-0\@large, .gr-1\@large, .gr-2\@large, .gr-3\@large, .gr-4\@large, .gr-5\@large, .gr-6\@large, .gr-7\@large, .gr-8\@large, .gr-9\@large, .gr-10\@large, .gr-11\@large, .gr-12\@large, .gr-13\@large, .gr-14\@large, .gr-15\@large, .gr-16\@large { -moz-flex: 0 0 auto; flex: 0 0 auto; -moz-flex-direction: column; flex-direction: column; display: block; min-height: 1px; line-height: 1; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 1200px) { .gr-adapt\@large { max-width: 100%; line-height: 1; display: -moz-flex; display: flex; -moz-flex: 0 1 auto; flex: 0 1 auto; -moz-flex-direction: column; flex-direction: column; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 1200px) { .gr-grow\@large { max-width: 100%; line-height: 1; display: -moz-flex; display: flex; -moz-flex: 1 1 auto; flex: 1 1 auto; -moz-flex-direction: column; flex-direction: column; box-sizing: border-box; padding-right: 20px; padding-left: 20px; } } @media screen and (min-width: 1200px) { .push-0\@large, .push-1\@large, .push-2\@large, .push-3\@large, .push-4\@large, .push-5\@large, .push-6\@large, .push-7\@large, .push-8\@large, .push-9\@large, .push-10\@large, .push-11\@large, .push-12\@large, .push-13\@large, .push-14\@large, .push-15\@large, .push-16\@large { position: relative; } } @media screen and (min-width: 1200px) { .pull-0\@large, .pull-1\@large, .pull-2\@large, .pull-3\@large, .pull-4\@large, .pull-5\@large, .pull-6\@large, .pull-7\@large, .pull-8\@large, .pull-9\@large, .pull-10\@large, .pull-11\@large, .pull-12\@large, .pull-13\@large, .pull-14\@large, .pull-15\@large, .pull-16\@large { position: relative; } } @media screen and (min-width: 1200px) { .nowrap\@large { flex-wrap: nowrap; white-space: nowrap; } .nowrap\@large > * { white-space: normal; } } @media screen and (min-width: 1200px) { .wrap\@large { flex-wrap: wrap; white-space: normal; } } @media screen and (min-width: 1200px) { .gr-centered\@large { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } } @media screen and (max-width: 400px) { @-ms-viewport { width: device-width; } } #gridle-settings { content: '{ "version" : "3.0.0", "states" : { "default":{ "name" : "default", "min-width" : null, "max-width" : null, "query" : null, "classes" : true, "context" : "16", "column-width" : null, "gutter-width" : "40px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "20px", "gutter-bottom" : "0", "gutter-left" : "20px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "landscape":{ "name" : "landscape", "min-width" : "576px", "max-width" : null, "query" : "screen and (min-width: 576px)", "classes" : true, "context" : "16", "column-width" : null, "gutter-width" : "40px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "20px", "gutter-bottom" : "0", "gutter-left" : "20px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "tablet":{ "name" : "tablet", "min-width" : "768px", "max-width" : null, "query" : "screen and (min-width: 768px)", "classes" : true, "context" : "16", "column-width" : null, "gutter-width" : "40px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "20px", "gutter-bottom" : "0", "gutter-left" : "20px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "desktop":{ "name" : "desktop", "min-width" : "992px", "max-width" : null, "query" : "screen and (min-width: 992px)", "classes" : true, "context" : "16", "column-width" : null, "gutter-width" : "40px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "20px", "gutter-bottom" : "0", "gutter-left" : "20px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "large":{ "name" : "large", "min-width" : "1200px", "max-width" : null, "query" : "screen and (min-width: 1200px)", "classes" : true, "context" : "16", "column-width" : null, "gutter-width" : "40px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "20px", "gutter-bottom" : "0", "gutter-left" : "20px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }} }'; } /** * @name Columns * Grid columns available * @styleguide Gridle / Columns * @example html * *
*
.gr-1
.gr-2
.gr-3
.gr-4
.gr-5
.gr-6
.gr-7
.gr-8
.gr-9
.gr-10
.gr-11
.gr-12
.gr-13
.gr-14
.gr-15
.gr-16
*
*/ .gr-0 { flex-basis: 0%; max-width: 0%; } .push-0 { left: 0%; right: auto; } .pull-0 { right: 0%; left: auto; } .prefix-0 { margin-left: 0%; } .suffix-0 { margin-right: 0%; } .order-first { -moz-order: -1; order: -1; } .order-0 { -moz-order: 0; order: 0; } .order-last { -moz-order: 9999; order: 9999; } .gr-1 { flex-basis: 6.25%; max-width: 6.25%; } .push-1 { left: 6.25%; right: auto; } .pull-1 { right: 6.25%; left: auto; } .prefix-1 { margin-left: 6.25%; } .suffix-1 { margin-right: 6.25%; } .order-first { -moz-order: -1; order: -1; } .order-1 { -moz-order: 1; order: 1; } .order-last { -moz-order: 9999; order: 9999; } .gr-2 { flex-basis: 12.5%; max-width: 12.5%; } .push-2 { left: 12.5%; right: auto; } .pull-2 { right: 12.5%; left: auto; } .prefix-2 { margin-left: 12.5%; } .suffix-2 { margin-right: 12.5%; } .order-first { -moz-order: -1; order: -1; } .order-2 { -moz-order: 2; order: 2; } .order-last { -moz-order: 9999; order: 9999; } .gr-3 { flex-basis: 18.75%; max-width: 18.75%; } .push-3 { left: 18.75%; right: auto; } .pull-3 { right: 18.75%; left: auto; } .prefix-3 { margin-left: 18.75%; } .suffix-3 { margin-right: 18.75%; } .order-first { -moz-order: -1; order: -1; } .order-3 { -moz-order: 3; order: 3; } .order-last { -moz-order: 9999; order: 9999; } .gr-4 { flex-basis: 25%; max-width: 25%; } .push-4 { left: 25%; right: auto; } .pull-4 { right: 25%; left: auto; } .prefix-4 { margin-left: 25%; } .suffix-4 { margin-right: 25%; } .order-first { -moz-order: -1; order: -1; } .order-4 { -moz-order: 4; order: 4; } .order-last { -moz-order: 9999; order: 9999; } .gr-5 { flex-basis: 31.25%; max-width: 31.25%; } .push-5 { left: 31.25%; right: auto; } .pull-5 { right: 31.25%; left: auto; } .prefix-5 { margin-left: 31.25%; } .suffix-5 { margin-right: 31.25%; } .order-first { -moz-order: -1; order: -1; } .order-5 { -moz-order: 5; order: 5; } .order-last { -moz-order: 9999; order: 9999; } .gr-6 { flex-basis: 37.5%; max-width: 37.5%; } .push-6 { left: 37.5%; right: auto; } .pull-6 { right: 37.5%; left: auto; } .prefix-6 { margin-left: 37.5%; } .suffix-6 { margin-right: 37.5%; } .order-first { -moz-order: -1; order: -1; } .order-6 { -moz-order: 6; order: 6; } .order-last { -moz-order: 9999; order: 9999; } .gr-7 { flex-basis: 43.75%; max-width: 43.75%; } .push-7 { left: 43.75%; right: auto; } .pull-7 { right: 43.75%; left: auto; } .prefix-7 { margin-left: 43.75%; } .suffix-7 { margin-right: 43.75%; } .order-first { -moz-order: -1; order: -1; } .order-7 { -moz-order: 7; order: 7; } .order-last { -moz-order: 9999; order: 9999; } .gr-8 { flex-basis: 50%; max-width: 50%; } .push-8 { left: 50%; right: auto; } .pull-8 { right: 50%; left: auto; } .prefix-8 { margin-left: 50%; } .suffix-8 { margin-right: 50%; } .order-first { -moz-order: -1; order: -1; } .order-8 { -moz-order: 8; order: 8; } .order-last { -moz-order: 9999; order: 9999; } .gr-9 { flex-basis: 56.25%; max-width: 56.25%; } .push-9 { left: 56.25%; right: auto; } .pull-9 { right: 56.25%; left: auto; } .prefix-9 { margin-left: 56.25%; } .suffix-9 { margin-right: 56.25%; } .order-first { -moz-order: -1; order: -1; } .order-9 { -moz-order: 9; order: 9; } .order-last { -moz-order: 9999; order: 9999; } .gr-10 { flex-basis: 62.5%; max-width: 62.5%; } .push-10 { left: 62.5%; right: auto; } .pull-10 { right: 62.5%; left: auto; } .prefix-10 { margin-left: 62.5%; } .suffix-10 { margin-right: 62.5%; } .order-first { -moz-order: -1; order: -1; } .order-10 { -moz-order: 10; order: 10; } .order-last { -moz-order: 9999; order: 9999; } .gr-11 { flex-basis: 68.75%; max-width: 68.75%; } .push-11 { left: 68.75%; right: auto; } .pull-11 { right: 68.75%; left: auto; } .prefix-11 { margin-left: 68.75%; } .suffix-11 { margin-right: 68.75%; } .order-first { -moz-order: -1; order: -1; } .order-11 { -moz-order: 11; order: 11; } .order-last { -moz-order: 9999; order: 9999; } .gr-12 { flex-basis: 75%; max-width: 75%; } .push-12 { left: 75%; right: auto; } .pull-12 { right: 75%; left: auto; } .prefix-12 { margin-left: 75%; } .suffix-12 { margin-right: 75%; } .order-first { -moz-order: -1; order: -1; } .order-12 { -moz-order: 12; order: 12; } .order-last { -moz-order: 9999; order: 9999; } .gr-13 { flex-basis: 81.25%; max-width: 81.25%; } .push-13 { left: 81.25%; right: auto; } .pull-13 { right: 81.25%; left: auto; } .prefix-13 { margin-left: 81.25%; } .suffix-13 { margin-right: 81.25%; } .order-first { -moz-order: -1; order: -1; } .order-13 { -moz-order: 13; order: 13; } .order-last { -moz-order: 9999; order: 9999; } .gr-14 { flex-basis: 87.5%; max-width: 87.5%; } .push-14 { left: 87.5%; right: auto; } .pull-14 { right: 87.5%; left: auto; } .prefix-14 { margin-left: 87.5%; } .suffix-14 { margin-right: 87.5%; } .order-first { -moz-order: -1; order: -1; } .order-14 { -moz-order: 14; order: 14; } .order-last { -moz-order: 9999; order: 9999; } .gr-15 { flex-basis: 93.75%; max-width: 93.75%; } .push-15 { left: 93.75%; right: auto; } .pull-15 { right: 93.75%; left: auto; } .prefix-15 { margin-left: 93.75%; } .suffix-15 { margin-right: 93.75%; } .order-first { -moz-order: -1; order: -1; } .order-15 { -moz-order: 15; order: 15; } .order-last { -moz-order: 9999; order: 9999; } .gr-16 { flex-basis: 100%; max-width: 100%; } .push-16 { left: 100%; right: auto; } .pull-16 { right: 100%; left: auto; } .prefix-16 { margin-left: 100%; } .suffix-16 { margin-right: 100%; } .order-first { -moz-order: -1; order: -1; } .order-16 { -moz-order: 16; order: 16; } .order-last { -moz-order: 9999; order: 9999; } body { direction: ltr; } @media screen and (min-width: 576px) { .gr-0\@landscape { flex-basis: 0%; max-width: 0%; } .push-0\@landscape { left: 0%; right: auto; } .pull-0\@landscape { right: 0%; left: auto; } .prefix-0\@landscape { margin-left: 0%; } .suffix-0\@landscape { margin-right: 0%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-0\@landscape { -moz-order: 0; order: 0; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-1\@landscape { flex-basis: 6.25%; max-width: 6.25%; } .push-1\@landscape { left: 6.25%; right: auto; } .pull-1\@landscape { right: 6.25%; left: auto; } .prefix-1\@landscape { margin-left: 6.25%; } .suffix-1\@landscape { margin-right: 6.25%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-1\@landscape { -moz-order: 1; order: 1; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-2\@landscape { flex-basis: 12.5%; max-width: 12.5%; } .push-2\@landscape { left: 12.5%; right: auto; } .pull-2\@landscape { right: 12.5%; left: auto; } .prefix-2\@landscape { margin-left: 12.5%; } .suffix-2\@landscape { margin-right: 12.5%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-2\@landscape { -moz-order: 2; order: 2; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-3\@landscape { flex-basis: 18.75%; max-width: 18.75%; } .push-3\@landscape { left: 18.75%; right: auto; } .pull-3\@landscape { right: 18.75%; left: auto; } .prefix-3\@landscape { margin-left: 18.75%; } .suffix-3\@landscape { margin-right: 18.75%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-3\@landscape { -moz-order: 3; order: 3; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-4\@landscape { flex-basis: 25%; max-width: 25%; } .push-4\@landscape { left: 25%; right: auto; } .pull-4\@landscape { right: 25%; left: auto; } .prefix-4\@landscape { margin-left: 25%; } .suffix-4\@landscape { margin-right: 25%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-4\@landscape { -moz-order: 4; order: 4; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-5\@landscape { flex-basis: 31.25%; max-width: 31.25%; } .push-5\@landscape { left: 31.25%; right: auto; } .pull-5\@landscape { right: 31.25%; left: auto; } .prefix-5\@landscape { margin-left: 31.25%; } .suffix-5\@landscape { margin-right: 31.25%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-5\@landscape { -moz-order: 5; order: 5; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-6\@landscape { flex-basis: 37.5%; max-width: 37.5%; } .push-6\@landscape { left: 37.5%; right: auto; } .pull-6\@landscape { right: 37.5%; left: auto; } .prefix-6\@landscape { margin-left: 37.5%; } .suffix-6\@landscape { margin-right: 37.5%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-6\@landscape { -moz-order: 6; order: 6; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-7\@landscape { flex-basis: 43.75%; max-width: 43.75%; } .push-7\@landscape { left: 43.75%; right: auto; } .pull-7\@landscape { right: 43.75%; left: auto; } .prefix-7\@landscape { margin-left: 43.75%; } .suffix-7\@landscape { margin-right: 43.75%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-7\@landscape { -moz-order: 7; order: 7; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-8\@landscape { flex-basis: 50%; max-width: 50%; } .push-8\@landscape { left: 50%; right: auto; } .pull-8\@landscape { right: 50%; left: auto; } .prefix-8\@landscape { margin-left: 50%; } .suffix-8\@landscape { margin-right: 50%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-8\@landscape { -moz-order: 8; order: 8; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-9\@landscape { flex-basis: 56.25%; max-width: 56.25%; } .push-9\@landscape { left: 56.25%; right: auto; } .pull-9\@landscape { right: 56.25%; left: auto; } .prefix-9\@landscape { margin-left: 56.25%; } .suffix-9\@landscape { margin-right: 56.25%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-9\@landscape { -moz-order: 9; order: 9; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-10\@landscape { flex-basis: 62.5%; max-width: 62.5%; } .push-10\@landscape { left: 62.5%; right: auto; } .pull-10\@landscape { right: 62.5%; left: auto; } .prefix-10\@landscape { margin-left: 62.5%; } .suffix-10\@landscape { margin-right: 62.5%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-10\@landscape { -moz-order: 10; order: 10; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-11\@landscape { flex-basis: 68.75%; max-width: 68.75%; } .push-11\@landscape { left: 68.75%; right: auto; } .pull-11\@landscape { right: 68.75%; left: auto; } .prefix-11\@landscape { margin-left: 68.75%; } .suffix-11\@landscape { margin-right: 68.75%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-11\@landscape { -moz-order: 11; order: 11; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-12\@landscape { flex-basis: 75%; max-width: 75%; } .push-12\@landscape { left: 75%; right: auto; } .pull-12\@landscape { right: 75%; left: auto; } .prefix-12\@landscape { margin-left: 75%; } .suffix-12\@landscape { margin-right: 75%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-12\@landscape { -moz-order: 12; order: 12; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-13\@landscape { flex-basis: 81.25%; max-width: 81.25%; } .push-13\@landscape { left: 81.25%; right: auto; } .pull-13\@landscape { right: 81.25%; left: auto; } .prefix-13\@landscape { margin-left: 81.25%; } .suffix-13\@landscape { margin-right: 81.25%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-13\@landscape { -moz-order: 13; order: 13; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-14\@landscape { flex-basis: 87.5%; max-width: 87.5%; } .push-14\@landscape { left: 87.5%; right: auto; } .pull-14\@landscape { right: 87.5%; left: auto; } .prefix-14\@landscape { margin-left: 87.5%; } .suffix-14\@landscape { margin-right: 87.5%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-14\@landscape { -moz-order: 14; order: 14; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-15\@landscape { flex-basis: 93.75%; max-width: 93.75%; } .push-15\@landscape { left: 93.75%; right: auto; } .pull-15\@landscape { right: 93.75%; left: auto; } .prefix-15\@landscape { margin-left: 93.75%; } .suffix-15\@landscape { margin-right: 93.75%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-15\@landscape { -moz-order: 15; order: 15; } .order-last\@landscape { -moz-order: 9999; order: 9999; } .gr-16\@landscape { flex-basis: 100%; max-width: 100%; } .push-16\@landscape { left: 100%; right: auto; } .pull-16\@landscape { right: 100%; left: auto; } .prefix-16\@landscape { margin-left: 100%; } .suffix-16\@landscape { margin-right: 100%; } .order-first\@landscape { -moz-order: -1; order: -1; } .order-16\@landscape { -moz-order: 16; order: 16; } .order-last\@landscape { -moz-order: 9999; order: 9999; } body { direction: ltr; } } @media screen and (min-width: 768px) { .gr-0\@tablet { flex-basis: 0%; max-width: 0%; } .push-0\@tablet { left: 0%; right: auto; } .pull-0\@tablet { right: 0%; left: auto; } .prefix-0\@tablet { margin-left: 0%; } .suffix-0\@tablet { margin-right: 0%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-0\@tablet { -moz-order: 0; order: 0; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-1\@tablet { flex-basis: 6.25%; max-width: 6.25%; } .push-1\@tablet { left: 6.25%; right: auto; } .pull-1\@tablet { right: 6.25%; left: auto; } .prefix-1\@tablet { margin-left: 6.25%; } .suffix-1\@tablet { margin-right: 6.25%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-1\@tablet { -moz-order: 1; order: 1; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-2\@tablet { flex-basis: 12.5%; max-width: 12.5%; } .push-2\@tablet { left: 12.5%; right: auto; } .pull-2\@tablet { right: 12.5%; left: auto; } .prefix-2\@tablet { margin-left: 12.5%; } .suffix-2\@tablet { margin-right: 12.5%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-2\@tablet { -moz-order: 2; order: 2; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-3\@tablet { flex-basis: 18.75%; max-width: 18.75%; } .push-3\@tablet { left: 18.75%; right: auto; } .pull-3\@tablet { right: 18.75%; left: auto; } .prefix-3\@tablet { margin-left: 18.75%; } .suffix-3\@tablet { margin-right: 18.75%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-3\@tablet { -moz-order: 3; order: 3; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-4\@tablet { flex-basis: 25%; max-width: 25%; } .push-4\@tablet { left: 25%; right: auto; } .pull-4\@tablet { right: 25%; left: auto; } .prefix-4\@tablet { margin-left: 25%; } .suffix-4\@tablet { margin-right: 25%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-4\@tablet { -moz-order: 4; order: 4; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-5\@tablet { flex-basis: 31.25%; max-width: 31.25%; } .push-5\@tablet { left: 31.25%; right: auto; } .pull-5\@tablet { right: 31.25%; left: auto; } .prefix-5\@tablet { margin-left: 31.25%; } .suffix-5\@tablet { margin-right: 31.25%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-5\@tablet { -moz-order: 5; order: 5; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-6\@tablet { flex-basis: 37.5%; max-width: 37.5%; } .push-6\@tablet { left: 37.5%; right: auto; } .pull-6\@tablet { right: 37.5%; left: auto; } .prefix-6\@tablet { margin-left: 37.5%; } .suffix-6\@tablet { margin-right: 37.5%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-6\@tablet { -moz-order: 6; order: 6; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-7\@tablet { flex-basis: 43.75%; max-width: 43.75%; } .push-7\@tablet { left: 43.75%; right: auto; } .pull-7\@tablet { right: 43.75%; left: auto; } .prefix-7\@tablet { margin-left: 43.75%; } .suffix-7\@tablet { margin-right: 43.75%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-7\@tablet { -moz-order: 7; order: 7; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-8\@tablet { flex-basis: 50%; max-width: 50%; } .push-8\@tablet { left: 50%; right: auto; } .pull-8\@tablet { right: 50%; left: auto; } .prefix-8\@tablet { margin-left: 50%; } .suffix-8\@tablet { margin-right: 50%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-8\@tablet { -moz-order: 8; order: 8; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-9\@tablet { flex-basis: 56.25%; max-width: 56.25%; } .push-9\@tablet { left: 56.25%; right: auto; } .pull-9\@tablet { right: 56.25%; left: auto; } .prefix-9\@tablet { margin-left: 56.25%; } .suffix-9\@tablet { margin-right: 56.25%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-9\@tablet { -moz-order: 9; order: 9; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-10\@tablet { flex-basis: 62.5%; max-width: 62.5%; } .push-10\@tablet { left: 62.5%; right: auto; } .pull-10\@tablet { right: 62.5%; left: auto; } .prefix-10\@tablet { margin-left: 62.5%; } .suffix-10\@tablet { margin-right: 62.5%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-10\@tablet { -moz-order: 10; order: 10; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-11\@tablet { flex-basis: 68.75%; max-width: 68.75%; } .push-11\@tablet { left: 68.75%; right: auto; } .pull-11\@tablet { right: 68.75%; left: auto; } .prefix-11\@tablet { margin-left: 68.75%; } .suffix-11\@tablet { margin-right: 68.75%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-11\@tablet { -moz-order: 11; order: 11; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-12\@tablet { flex-basis: 75%; max-width: 75%; } .push-12\@tablet { left: 75%; right: auto; } .pull-12\@tablet { right: 75%; left: auto; } .prefix-12\@tablet { margin-left: 75%; } .suffix-12\@tablet { margin-right: 75%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-12\@tablet { -moz-order: 12; order: 12; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-13\@tablet { flex-basis: 81.25%; max-width: 81.25%; } .push-13\@tablet { left: 81.25%; right: auto; } .pull-13\@tablet { right: 81.25%; left: auto; } .prefix-13\@tablet { margin-left: 81.25%; } .suffix-13\@tablet { margin-right: 81.25%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-13\@tablet { -moz-order: 13; order: 13; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-14\@tablet { flex-basis: 87.5%; max-width: 87.5%; } .push-14\@tablet { left: 87.5%; right: auto; } .pull-14\@tablet { right: 87.5%; left: auto; } .prefix-14\@tablet { margin-left: 87.5%; } .suffix-14\@tablet { margin-right: 87.5%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-14\@tablet { -moz-order: 14; order: 14; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-15\@tablet { flex-basis: 93.75%; max-width: 93.75%; } .push-15\@tablet { left: 93.75%; right: auto; } .pull-15\@tablet { right: 93.75%; left: auto; } .prefix-15\@tablet { margin-left: 93.75%; } .suffix-15\@tablet { margin-right: 93.75%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-15\@tablet { -moz-order: 15; order: 15; } .order-last\@tablet { -moz-order: 9999; order: 9999; } .gr-16\@tablet { flex-basis: 100%; max-width: 100%; } .push-16\@tablet { left: 100%; right: auto; } .pull-16\@tablet { right: 100%; left: auto; } .prefix-16\@tablet { margin-left: 100%; } .suffix-16\@tablet { margin-right: 100%; } .order-first\@tablet { -moz-order: -1; order: -1; } .order-16\@tablet { -moz-order: 16; order: 16; } .order-last\@tablet { -moz-order: 9999; order: 9999; } body { direction: ltr; } } @media screen and (min-width: 992px) { .gr-0\@desktop { flex-basis: 0%; max-width: 0%; } .push-0\@desktop { left: 0%; right: auto; } .pull-0\@desktop { right: 0%; left: auto; } .prefix-0\@desktop { margin-left: 0%; } .suffix-0\@desktop { margin-right: 0%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-0\@desktop { -moz-order: 0; order: 0; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-1\@desktop { flex-basis: 6.25%; max-width: 6.25%; } .push-1\@desktop { left: 6.25%; right: auto; } .pull-1\@desktop { right: 6.25%; left: auto; } .prefix-1\@desktop { margin-left: 6.25%; } .suffix-1\@desktop { margin-right: 6.25%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-1\@desktop { -moz-order: 1; order: 1; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-2\@desktop { flex-basis: 12.5%; max-width: 12.5%; } .push-2\@desktop { left: 12.5%; right: auto; } .pull-2\@desktop { right: 12.5%; left: auto; } .prefix-2\@desktop { margin-left: 12.5%; } .suffix-2\@desktop { margin-right: 12.5%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-2\@desktop { -moz-order: 2; order: 2; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-3\@desktop { flex-basis: 18.75%; max-width: 18.75%; } .push-3\@desktop { left: 18.75%; right: auto; } .pull-3\@desktop { right: 18.75%; left: auto; } .prefix-3\@desktop { margin-left: 18.75%; } .suffix-3\@desktop { margin-right: 18.75%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-3\@desktop { -moz-order: 3; order: 3; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-4\@desktop { flex-basis: 25%; max-width: 25%; } .push-4\@desktop { left: 25%; right: auto; } .pull-4\@desktop { right: 25%; left: auto; } .prefix-4\@desktop { margin-left: 25%; } .suffix-4\@desktop { margin-right: 25%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-4\@desktop { -moz-order: 4; order: 4; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-5\@desktop { flex-basis: 31.25%; max-width: 31.25%; } .push-5\@desktop { left: 31.25%; right: auto; } .pull-5\@desktop { right: 31.25%; left: auto; } .prefix-5\@desktop { margin-left: 31.25%; } .suffix-5\@desktop { margin-right: 31.25%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-5\@desktop { -moz-order: 5; order: 5; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-6\@desktop { flex-basis: 37.5%; max-width: 37.5%; } .push-6\@desktop { left: 37.5%; right: auto; } .pull-6\@desktop { right: 37.5%; left: auto; } .prefix-6\@desktop { margin-left: 37.5%; } .suffix-6\@desktop { margin-right: 37.5%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-6\@desktop { -moz-order: 6; order: 6; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-7\@desktop { flex-basis: 43.75%; max-width: 43.75%; } .push-7\@desktop { left: 43.75%; right: auto; } .pull-7\@desktop { right: 43.75%; left: auto; } .prefix-7\@desktop { margin-left: 43.75%; } .suffix-7\@desktop { margin-right: 43.75%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-7\@desktop { -moz-order: 7; order: 7; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-8\@desktop { flex-basis: 50%; max-width: 50%; } .push-8\@desktop { left: 50%; right: auto; } .pull-8\@desktop { right: 50%; left: auto; } .prefix-8\@desktop { margin-left: 50%; } .suffix-8\@desktop { margin-right: 50%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-8\@desktop { -moz-order: 8; order: 8; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-9\@desktop { flex-basis: 56.25%; max-width: 56.25%; } .push-9\@desktop { left: 56.25%; right: auto; } .pull-9\@desktop { right: 56.25%; left: auto; } .prefix-9\@desktop { margin-left: 56.25%; } .suffix-9\@desktop { margin-right: 56.25%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-9\@desktop { -moz-order: 9; order: 9; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-10\@desktop { flex-basis: 62.5%; max-width: 62.5%; } .push-10\@desktop { left: 62.5%; right: auto; } .pull-10\@desktop { right: 62.5%; left: auto; } .prefix-10\@desktop { margin-left: 62.5%; } .suffix-10\@desktop { margin-right: 62.5%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-10\@desktop { -moz-order: 10; order: 10; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-11\@desktop { flex-basis: 68.75%; max-width: 68.75%; } .push-11\@desktop { left: 68.75%; right: auto; } .pull-11\@desktop { right: 68.75%; left: auto; } .prefix-11\@desktop { margin-left: 68.75%; } .suffix-11\@desktop { margin-right: 68.75%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-11\@desktop { -moz-order: 11; order: 11; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-12\@desktop { flex-basis: 75%; max-width: 75%; } .push-12\@desktop { left: 75%; right: auto; } .pull-12\@desktop { right: 75%; left: auto; } .prefix-12\@desktop { margin-left: 75%; } .suffix-12\@desktop { margin-right: 75%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-12\@desktop { -moz-order: 12; order: 12; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-13\@desktop { flex-basis: 81.25%; max-width: 81.25%; } .push-13\@desktop { left: 81.25%; right: auto; } .pull-13\@desktop { right: 81.25%; left: auto; } .prefix-13\@desktop { margin-left: 81.25%; } .suffix-13\@desktop { margin-right: 81.25%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-13\@desktop { -moz-order: 13; order: 13; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-14\@desktop { flex-basis: 87.5%; max-width: 87.5%; } .push-14\@desktop { left: 87.5%; right: auto; } .pull-14\@desktop { right: 87.5%; left: auto; } .prefix-14\@desktop { margin-left: 87.5%; } .suffix-14\@desktop { margin-right: 87.5%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-14\@desktop { -moz-order: 14; order: 14; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-15\@desktop { flex-basis: 93.75%; max-width: 93.75%; } .push-15\@desktop { left: 93.75%; right: auto; } .pull-15\@desktop { right: 93.75%; left: auto; } .prefix-15\@desktop { margin-left: 93.75%; } .suffix-15\@desktop { margin-right: 93.75%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-15\@desktop { -moz-order: 15; order: 15; } .order-last\@desktop { -moz-order: 9999; order: 9999; } .gr-16\@desktop { flex-basis: 100%; max-width: 100%; } .push-16\@desktop { left: 100%; right: auto; } .pull-16\@desktop { right: 100%; left: auto; } .prefix-16\@desktop { margin-left: 100%; } .suffix-16\@desktop { margin-right: 100%; } .order-first\@desktop { -moz-order: -1; order: -1; } .order-16\@desktop { -moz-order: 16; order: 16; } .order-last\@desktop { -moz-order: 9999; order: 9999; } body { direction: ltr; } } @media screen and (min-width: 1200px) { .gr-0\@large { flex-basis: 0%; max-width: 0%; } .push-0\@large { left: 0%; right: auto; } .pull-0\@large { right: 0%; left: auto; } .prefix-0\@large { margin-left: 0%; } .suffix-0\@large { margin-right: 0%; } .order-first\@large { -moz-order: -1; order: -1; } .order-0\@large { -moz-order: 0; order: 0; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-1\@large { flex-basis: 6.25%; max-width: 6.25%; } .push-1\@large { left: 6.25%; right: auto; } .pull-1\@large { right: 6.25%; left: auto; } .prefix-1\@large { margin-left: 6.25%; } .suffix-1\@large { margin-right: 6.25%; } .order-first\@large { -moz-order: -1; order: -1; } .order-1\@large { -moz-order: 1; order: 1; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-2\@large { flex-basis: 12.5%; max-width: 12.5%; } .push-2\@large { left: 12.5%; right: auto; } .pull-2\@large { right: 12.5%; left: auto; } .prefix-2\@large { margin-left: 12.5%; } .suffix-2\@large { margin-right: 12.5%; } .order-first\@large { -moz-order: -1; order: -1; } .order-2\@large { -moz-order: 2; order: 2; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-3\@large { flex-basis: 18.75%; max-width: 18.75%; } .push-3\@large { left: 18.75%; right: auto; } .pull-3\@large { right: 18.75%; left: auto; } .prefix-3\@large { margin-left: 18.75%; } .suffix-3\@large { margin-right: 18.75%; } .order-first\@large { -moz-order: -1; order: -1; } .order-3\@large { -moz-order: 3; order: 3; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-4\@large { flex-basis: 25%; max-width: 25%; } .push-4\@large { left: 25%; right: auto; } .pull-4\@large { right: 25%; left: auto; } .prefix-4\@large { margin-left: 25%; } .suffix-4\@large { margin-right: 25%; } .order-first\@large { -moz-order: -1; order: -1; } .order-4\@large { -moz-order: 4; order: 4; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-5\@large { flex-basis: 31.25%; max-width: 31.25%; } .push-5\@large { left: 31.25%; right: auto; } .pull-5\@large { right: 31.25%; left: auto; } .prefix-5\@large { margin-left: 31.25%; } .suffix-5\@large { margin-right: 31.25%; } .order-first\@large { -moz-order: -1; order: -1; } .order-5\@large { -moz-order: 5; order: 5; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-6\@large { flex-basis: 37.5%; max-width: 37.5%; } .push-6\@large { left: 37.5%; right: auto; } .pull-6\@large { right: 37.5%; left: auto; } .prefix-6\@large { margin-left: 37.5%; } .suffix-6\@large { margin-right: 37.5%; } .order-first\@large { -moz-order: -1; order: -1; } .order-6\@large { -moz-order: 6; order: 6; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-7\@large { flex-basis: 43.75%; max-width: 43.75%; } .push-7\@large { left: 43.75%; right: auto; } .pull-7\@large { right: 43.75%; left: auto; } .prefix-7\@large { margin-left: 43.75%; } .suffix-7\@large { margin-right: 43.75%; } .order-first\@large { -moz-order: -1; order: -1; } .order-7\@large { -moz-order: 7; order: 7; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-8\@large { flex-basis: 50%; max-width: 50%; } .push-8\@large { left: 50%; right: auto; } .pull-8\@large { right: 50%; left: auto; } .prefix-8\@large { margin-left: 50%; } .suffix-8\@large { margin-right: 50%; } .order-first\@large { -moz-order: -1; order: -1; } .order-8\@large { -moz-order: 8; order: 8; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-9\@large { flex-basis: 56.25%; max-width: 56.25%; } .push-9\@large { left: 56.25%; right: auto; } .pull-9\@large { right: 56.25%; left: auto; } .prefix-9\@large { margin-left: 56.25%; } .suffix-9\@large { margin-right: 56.25%; } .order-first\@large { -moz-order: -1; order: -1; } .order-9\@large { -moz-order: 9; order: 9; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-10\@large { flex-basis: 62.5%; max-width: 62.5%; } .push-10\@large { left: 62.5%; right: auto; } .pull-10\@large { right: 62.5%; left: auto; } .prefix-10\@large { margin-left: 62.5%; } .suffix-10\@large { margin-right: 62.5%; } .order-first\@large { -moz-order: -1; order: -1; } .order-10\@large { -moz-order: 10; order: 10; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-11\@large { flex-basis: 68.75%; max-width: 68.75%; } .push-11\@large { left: 68.75%; right: auto; } .pull-11\@large { right: 68.75%; left: auto; } .prefix-11\@large { margin-left: 68.75%; } .suffix-11\@large { margin-right: 68.75%; } .order-first\@large { -moz-order: -1; order: -1; } .order-11\@large { -moz-order: 11; order: 11; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-12\@large { flex-basis: 75%; max-width: 75%; } .push-12\@large { left: 75%; right: auto; } .pull-12\@large { right: 75%; left: auto; } .prefix-12\@large { margin-left: 75%; } .suffix-12\@large { margin-right: 75%; } .order-first\@large { -moz-order: -1; order: -1; } .order-12\@large { -moz-order: 12; order: 12; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-13\@large { flex-basis: 81.25%; max-width: 81.25%; } .push-13\@large { left: 81.25%; right: auto; } .pull-13\@large { right: 81.25%; left: auto; } .prefix-13\@large { margin-left: 81.25%; } .suffix-13\@large { margin-right: 81.25%; } .order-first\@large { -moz-order: -1; order: -1; } .order-13\@large { -moz-order: 13; order: 13; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-14\@large { flex-basis: 87.5%; max-width: 87.5%; } .push-14\@large { left: 87.5%; right: auto; } .pull-14\@large { right: 87.5%; left: auto; } .prefix-14\@large { margin-left: 87.5%; } .suffix-14\@large { margin-right: 87.5%; } .order-first\@large { -moz-order: -1; order: -1; } .order-14\@large { -moz-order: 14; order: 14; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-15\@large { flex-basis: 93.75%; max-width: 93.75%; } .push-15\@large { left: 93.75%; right: auto; } .pull-15\@large { right: 93.75%; left: auto; } .prefix-15\@large { margin-left: 93.75%; } .suffix-15\@large { margin-right: 93.75%; } .order-first\@large { -moz-order: -1; order: -1; } .order-15\@large { -moz-order: 15; order: 15; } .order-last\@large { -moz-order: 9999; order: 9999; } .gr-16\@large { flex-basis: 100%; max-width: 100%; } .push-16\@large { left: 100%; right: auto; } .pull-16\@large { right: 100%; left: auto; } .prefix-16\@large { margin-left: 100%; } .suffix-16\@large { margin-right: 100%; } .order-first\@large { -moz-order: -1; order: -1; } .order-16\@large { -moz-order: 16; order: 16; } .order-last\@large { -moz-order: 9999; order: 9999; } body { direction: ltr; } } .float-left { float: left; } .float-right { float: right; } .clear { clear: both; } .clear-left { clear: left; } .clear-right { clear: right; } .auto-height { height: inherit; min-height: inherit; max-height: inherit; } .row { -moz-flex-direction: row; flex-direction: row; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } [class*="no-gutter"] > .row { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse { -moz-flex-direction: row-reverse; flex-direction: row-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } [class*="no-gutter"] > .row-reverse { margin-left: 0 !important; margin-right: 0 !important; } .row-full { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); transform: translateX(-50%); } .col { -moz-flex-direction: column; flex-direction: column; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } .col-reverse { -moz-flex-direction: column-reverse; flex-direction: column-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } .row-no-gutter { margin-left: 0; margin-right: 0; } .row-no-gutter > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top { margin-left: 0; margin-right: 0; } .row-no-gutter-top > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right { margin-left: 0; margin-right: 0; } .row-no-gutter-right > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left { margin-left: 0; margin-right: 0; } .row-no-gutter-left > [class*="gr-"] { padding-left: 0; } .row-align-left { -moz-justify-content: flex-start; justify-content: flex-start; } .row-align-center { -moz-justify-content: center; justify-content: center; } .row-align-right { -moz-justify-content: flex-end; justify-content: flex-end; } .row-align-middle { -moz-align-items: center; align-items: center; } .row-align-top { -moz-align-items: flex-start; align-items: flex-start; } .row-align-bottom { -moz-align-items: flex-end; align-items: flex-end; } .row-align-around { -moz-justify-content: space-around; justify-content: space-around; } .row-align-between { -moz-justify-content: space-between; justify-content: space-between; } .no-gutter { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left { padding-left: 0; } .no-gutter-right { padding-right: 0; } .no-gutter-top { padding-top: 0; } .no-gutter-bottom { padding-bottom: 0; } .gutter { padding-right: 20px; padding-left: 20px; } .gutter-left { padding-left: 20px; } .gutter-right { padding-right: 20px; } .hide { display: none !important; } .not-visible { visibility: hidden; } .show { display: block !important; } .show-inline { display: inline-block !important; } .visible { visibility: visible; } .row-debug { position: relative; z-index: 99999; overflow: hidden; } .row-debug:before { pointer-events: none; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 99999px; background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 12.5% 100%; z-index: 99999; } @media screen and (min-width: 576px) { .float-left\@landscape { float: left; } .float-right\@landscape { float: right; } .clear\@landscape { clear: both; } .clear-left\@landscape { clear: left; } .clear-right\@landscape { clear: right; } .auto-height\@landscape { height: inherit; min-height: inherit; max-height: inherit; } .row\@landscape { -moz-flex-direction: row; flex-direction: row; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } [class*="no-gutter"] > .row\@landscape { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@landscape { -moz-flex-direction: row-reverse; flex-direction: row-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } [class*="no-gutter"] > .row-reverse\@landscape { margin-left: 0 !important; margin-right: 0 !important; } .row-full\@landscape { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); transform: translateX(-50%); } .col\@landscape { -moz-flex-direction: column; flex-direction: column; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } .col-reverse\@landscape { -moz-flex-direction: column-reverse; flex-direction: column-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } .row-no-gutter\@landscape { margin-left: 0; margin-right: 0; } .row-no-gutter\@landscape > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top\@landscape { margin-left: 0; margin-right: 0; } .row-no-gutter-top\@landscape > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right\@landscape { margin-left: 0; margin-right: 0; } .row-no-gutter-right\@landscape > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom\@landscape { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom\@landscape > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left\@landscape { margin-left: 0; margin-right: 0; } .row-no-gutter-left\@landscape > [class*="gr-"] { padding-left: 0; } .row-align-left\@landscape { -moz-justify-content: flex-start; justify-content: flex-start; } .row-align-center\@landscape { -moz-justify-content: center; justify-content: center; } .row-align-right\@landscape { -moz-justify-content: flex-end; justify-content: flex-end; } .row-align-middle\@landscape { -moz-align-items: center; align-items: center; } .row-align-top\@landscape { -moz-align-items: flex-start; align-items: flex-start; } .row-align-bottom\@landscape { -moz-align-items: flex-end; align-items: flex-end; } .row-align-around\@landscape { -moz-justify-content: space-around; justify-content: space-around; } .row-align-between\@landscape { -moz-justify-content: space-between; justify-content: space-between; } .no-gutter\@landscape { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@landscape { padding-left: 0; } .no-gutter-right\@landscape { padding-right: 0; } .no-gutter-top\@landscape { padding-top: 0; } .no-gutter-bottom\@landscape { padding-bottom: 0; } .gutter\@landscape { padding-right: 20px; padding-left: 20px; } .gutter-left\@landscape { padding-left: 20px; } .gutter-right\@landscape { padding-right: 20px; } .hide\@landscape { display: none !important; } .not-visible\@landscape { visibility: hidden; } .show\@landscape { display: block !important; } .show-inline\@landscape { display: inline-block !important; } .visible\@landscape { visibility: visible; } .row-debug\@landscape { position: relative; z-index: 99999; overflow: hidden; } .row-debug\@landscape:before { pointer-events: none; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 99999px; background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 12.5% 100%; z-index: 99999; } } @media screen and (min-width: 768px) { .float-left\@tablet { float: left; } .float-right\@tablet { float: right; } .clear\@tablet { clear: both; } .clear-left\@tablet { clear: left; } .clear-right\@tablet { clear: right; } .auto-height\@tablet { height: inherit; min-height: inherit; max-height: inherit; } .row\@tablet { -moz-flex-direction: row; flex-direction: row; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } [class*="no-gutter"] > .row\@tablet { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@tablet { -moz-flex-direction: row-reverse; flex-direction: row-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } [class*="no-gutter"] > .row-reverse\@tablet { margin-left: 0 !important; margin-right: 0 !important; } .row-full\@tablet { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); transform: translateX(-50%); } .col\@tablet { -moz-flex-direction: column; flex-direction: column; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } .col-reverse\@tablet { -moz-flex-direction: column-reverse; flex-direction: column-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } .row-no-gutter\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter\@tablet > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-top\@tablet > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-right\@tablet > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom\@tablet > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-left\@tablet > [class*="gr-"] { padding-left: 0; } .row-align-left\@tablet { -moz-justify-content: flex-start; justify-content: flex-start; } .row-align-center\@tablet { -moz-justify-content: center; justify-content: center; } .row-align-right\@tablet { -moz-justify-content: flex-end; justify-content: flex-end; } .row-align-middle\@tablet { -moz-align-items: center; align-items: center; } .row-align-top\@tablet { -moz-align-items: flex-start; align-items: flex-start; } .row-align-bottom\@tablet { -moz-align-items: flex-end; align-items: flex-end; } .row-align-around\@tablet { -moz-justify-content: space-around; justify-content: space-around; } .row-align-between\@tablet { -moz-justify-content: space-between; justify-content: space-between; } .no-gutter\@tablet { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@tablet { padding-left: 0; } .no-gutter-right\@tablet { padding-right: 0; } .no-gutter-top\@tablet { padding-top: 0; } .no-gutter-bottom\@tablet { padding-bottom: 0; } .gutter\@tablet { padding-right: 20px; padding-left: 20px; } .gutter-left\@tablet { padding-left: 20px; } .gutter-right\@tablet { padding-right: 20px; } .hide\@tablet { display: none !important; } .not-visible\@tablet { visibility: hidden; } .show\@tablet { display: block !important; } .show-inline\@tablet { display: inline-block !important; } .visible\@tablet { visibility: visible; } .row-debug\@tablet { position: relative; z-index: 99999; overflow: hidden; } .row-debug\@tablet:before { pointer-events: none; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 99999px; background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 12.5% 100%; z-index: 99999; } } @media screen and (min-width: 992px) { .float-left\@desktop { float: left; } .float-right\@desktop { float: right; } .clear\@desktop { clear: both; } .clear-left\@desktop { clear: left; } .clear-right\@desktop { clear: right; } .auto-height\@desktop { height: inherit; min-height: inherit; max-height: inherit; } .row\@desktop { -moz-flex-direction: row; flex-direction: row; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } [class*="no-gutter"] > .row\@desktop { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@desktop { -moz-flex-direction: row-reverse; flex-direction: row-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } [class*="no-gutter"] > .row-reverse\@desktop { margin-left: 0 !important; margin-right: 0 !important; } .row-full\@desktop { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); transform: translateX(-50%); } .col\@desktop { -moz-flex-direction: column; flex-direction: column; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } .col-reverse\@desktop { -moz-flex-direction: column-reverse; flex-direction: column-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } .row-no-gutter\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter\@desktop > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-top\@desktop > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-right\@desktop > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom\@desktop > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-left\@desktop > [class*="gr-"] { padding-left: 0; } .row-align-left\@desktop { -moz-justify-content: flex-start; justify-content: flex-start; } .row-align-center\@desktop { -moz-justify-content: center; justify-content: center; } .row-align-right\@desktop { -moz-justify-content: flex-end; justify-content: flex-end; } .row-align-middle\@desktop { -moz-align-items: center; align-items: center; } .row-align-top\@desktop { -moz-align-items: flex-start; align-items: flex-start; } .row-align-bottom\@desktop { -moz-align-items: flex-end; align-items: flex-end; } .row-align-around\@desktop { -moz-justify-content: space-around; justify-content: space-around; } .row-align-between\@desktop { -moz-justify-content: space-between; justify-content: space-between; } .no-gutter\@desktop { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@desktop { padding-left: 0; } .no-gutter-right\@desktop { padding-right: 0; } .no-gutter-top\@desktop { padding-top: 0; } .no-gutter-bottom\@desktop { padding-bottom: 0; } .gutter\@desktop { padding-right: 20px; padding-left: 20px; } .gutter-left\@desktop { padding-left: 20px; } .gutter-right\@desktop { padding-right: 20px; } .hide\@desktop { display: none !important; } .not-visible\@desktop { visibility: hidden; } .show\@desktop { display: block !important; } .show-inline\@desktop { display: inline-block !important; } .visible\@desktop { visibility: visible; } .row-debug\@desktop { position: relative; z-index: 99999; overflow: hidden; } .row-debug\@desktop:before { pointer-events: none; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 99999px; background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 12.5% 100%; z-index: 99999; } } @media screen and (min-width: 1200px) { .float-left\@large { float: left; } .float-right\@large { float: right; } .clear\@large { clear: both; } .clear-left\@large { clear: left; } .clear-right\@large { clear: right; } .auto-height\@large { height: inherit; min-height: inherit; max-height: inherit; } .row\@large { -moz-flex-direction: row; flex-direction: row; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } [class*="no-gutter"] > .row\@large { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@large { -moz-flex-direction: row-reverse; flex-direction: row-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } [class*="no-gutter"] > .row-reverse\@large { margin-left: 0 !important; margin-right: 0 !important; } .row-full\@large { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); transform: translateX(-50%); } .col\@large { -moz-flex-direction: column; flex-direction: column; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } .col-reverse\@large { -moz-flex-direction: column-reverse; flex-direction: column-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -20px; margin-right: -20px; } .row-no-gutter\@large { margin-left: 0; margin-right: 0; } .row-no-gutter\@large > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top\@large { margin-left: 0; margin-right: 0; } .row-no-gutter-top\@large > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right\@large { margin-left: 0; margin-right: 0; } .row-no-gutter-right\@large > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom\@large { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom\@large > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left\@large { margin-left: 0; margin-right: 0; } .row-no-gutter-left\@large > [class*="gr-"] { padding-left: 0; } .row-align-left\@large { -moz-justify-content: flex-start; justify-content: flex-start; } .row-align-center\@large { -moz-justify-content: center; justify-content: center; } .row-align-right\@large { -moz-justify-content: flex-end; justify-content: flex-end; } .row-align-middle\@large { -moz-align-items: center; align-items: center; } .row-align-top\@large { -moz-align-items: flex-start; align-items: flex-start; } .row-align-bottom\@large { -moz-align-items: flex-end; align-items: flex-end; } .row-align-around\@large { -moz-justify-content: space-around; justify-content: space-around; } .row-align-between\@large { -moz-justify-content: space-between; justify-content: space-between; } .no-gutter\@large { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@large { padding-left: 0; } .no-gutter-right\@large { padding-right: 0; } .no-gutter-top\@large { padding-top: 0; } .no-gutter-bottom\@large { padding-bottom: 0; } .gutter\@large { padding-right: 20px; padding-left: 20px; } .gutter-left\@large { padding-left: 20px; } .gutter-right\@large { padding-right: 20px; } .hide\@large { display: none !important; } .not-visible\@large { visibility: hidden; } .show\@large { display: block !important; } .show-inline\@large { display: inline-block !important; } .visible\@large { visibility: visible; } .row-debug\@large { position: relative; z-index: 99999; overflow: hidden; } .row-debug\@large:before { pointer-events: none; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 99999px; background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 12.5% 100%; z-index: 99999; } } [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -20px; margin-right: -20px; } @media screen and (min-width: 576px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -20px; margin-right: -20px; } } @media screen and (min-width: 768px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -20px; margin-right: -20px; } } @media screen and (min-width: 992px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -20px; margin-right: -20px; } } @media screen and (min-width: 1200px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -20px; margin-right: -20px; } } .container { max-width: 1260px; margin: 0 auto; padding: 0 20px; } .darkGreen { color: #5daf50; } .green { color: #a4c835; } .red { color: #e2576b; } .blue { color: #324260; } .yellow { color: #dcab2d; } .orange { color: #dc672d; } .grey { color: #595959; } .grey { color: #565656; } .lightGrey { color: #f0f0f0; } .white { color: #fff; } .center { text-align: center; } @media screen and (min-width: 576px) { .center-landscape { text-align: center; } } @media screen and (min-width: 768px) { .center-tablet { text-align: center; } } @media screen and (min-width: 992px) { .center-desktop { text-align: center; } } @media screen and (min-width: 1200px) { .center-large { text-align: center; } } .hidden { display: none !important; } @media screen and (min-width: 576px) { .hidden-landscape { display: none !important; } } @media screen and (min-width: 768px) { .hidden-tablet { display: none !important; } } @media screen and (min-width: 992px) { .hidden-desktop { display: none !important; } } @media screen and (min-width: 1200px) { .hidden-large { display: none !important; } } .d-flex { display: flex; } @media screen and (min-width: 576px) { .d-flex-landscape { display: flex; } } @media screen and (min-width: 768px) { .d-flex-tablet { display: flex; } } @media screen and (min-width: 992px) { .d-flex-desktop { display: flex; } } @media screen and (min-width: 1200px) { .d-flex-large { display: flex; } } .d-block { display: block; } @media screen and (min-width: 576px) { .d-block-landscape { display: block; } } @media screen and (min-width: 768px) { .d-block-tablet { display: block; } } @media screen and (min-width: 992px) { .d-block-desktop { display: block; } } @media screen and (min-width: 1200px) { .d-block-large { display: block; } } /** * Buttons **/ .btn-blue { text-transform: uppercase; color: #5c9fc3; border: 1px solid #5c9fc3; font-weight: 600; font-size: 13px; line-height: 22px; transition-duration: .5s; } .btn-blue:before { content: '>'; } .btn-blue:hover, .btn-blue:active { background-color: #5c9fc3; color: #fff; } .country-select { position: relative; display: inline-block; } .country-select * { box-sizing: border-box; } .country-select .hide { display: none; } .country-select .v-hide { visibility: hidden; } .country-select input, .country-select input[type=text] { position: relative; z-index: 0; margin-top: 0 !important; margin-bottom: 0 !important; padding-right: 36px; margin-right: 0; } .country-select .flag-dropdown { position: absolute; top: 0; bottom: 0; right: 0; padding: 1px; } .country-select .selected-flag { z-index: 1; position: relative; width: 36px; height: 100%; padding: 0 0 0 8px; } .country-select .selected-flag .flag { position: absolute; top: 0; bottom: 0; margin: auto; } .country-select .selected-flag .arrow { position: absolute; top: 50%; margin-top: -2px; right: 6px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #555; } .country-select .selected-flag .arrow.up { border-top: none; border-bottom: 4px solid #555; } .country-select .country-list { position: absolute; z-index: 2; list-style: none; text-align: left; padding: 0; margin: 0 0 0 -1px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); background-color: white; border: 1px solid #ccc; white-space: nowrap; max-height: 200px; overflow-y: scroll; } .country-select .country-list .flag { display: inline-block; width: 20px; } @media (max-width: 500px) { .country-select .country-list { white-space: normal; } } .country-select .country-list .divider { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #ccc; } .country-select .country-list .country { padding: 5px 10px; } .country-select .country-list .country.highlight { background-color: rgba(0, 0, 0, 0.05); } .country-select .country-list .flag, .country-select .country-list .country-name { vertical-align: middle; } .country-select .country-list .flag { margin-right: 6px; } .country-select.inside input, .country-select.inside input[type=text] { padding-right: 6px; padding-left: 52px; margin-left: 0; } .country-select.inside .flag-dropdown { right: auto; left: 0; } .country-select.inside .selected-flag { width: 46px; } .country-select.inside .flag-dropdown:hover { cursor: pointer; } .country-select.inside .flag-dropdown:hover .selected-flag { background-color: rgba(0, 0, 0, 0.05); } .country-select.inside input[disabled] + .flag-dropdown:hover, .country-select.inside input[readonly] + .flag-dropdown:hover { cursor: default; } .country-select.inside input[disabled] + .flag-dropdown:hover .selected-flag, .country-select.inside input[readonly] + .flag-dropdown:hover .selected-flag { background-color: transparent; } .country-select .flag { width: 20px; height: 15px; box-shadow: 0px 0px 1px 0px #888; background-image: url("../../build/img/flags.png"); background-repeat: no-repeat; background-color: #dbdbdb; background-position: 20px 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .country-select .flag { background-image: url("../../build/img/flags@2x.png"); } } .country-select .flag { width: 20px; } .country-select .flag.be { width: 18px; } .country-select .flag.ch { width: 15px; } .country-select .flag.mc { width: 19px; } .country-select .flag.ne { width: 18px; } .country-select .flag.np { width: 13px; } .country-select .flag.va { width: 15px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .country-select .flag { background-size: 5630px 15px; } } .country-select .flag.ac { height: 10px; background-position: 0px 0px; } .country-select .flag.ad { height: 14px; background-position: -22px 0px; } .country-select .flag.ae { height: 10px; background-position: -44px 0px; } .country-select .flag.af { height: 14px; background-position: -66px 0px; } .country-select .flag.ag { height: 14px; background-position: -88px 0px; } .country-select .flag.ai { height: 10px; background-position: -110px 0px; } .country-select .flag.al { height: 15px; background-position: -132px 0px; } .country-select .flag.am { height: 10px; background-position: -154px 0px; } .country-select .flag.ao { height: 14px; background-position: -176px 0px; } .country-select .flag.aq { height: 14px; background-position: -198px 0px; } .country-select .flag.ar { height: 13px; background-position: -220px 0px; } .country-select .flag.as { height: 10px; background-position: -242px 0px; } .country-select .flag.at { height: 14px; background-position: -264px 0px; } .country-select .flag.au { height: 10px; background-position: -286px 0px; } .country-select .flag.aw { height: 14px; background-position: -308px 0px; } .country-select .flag.ax { height: 13px; background-position: -330px 0px; } .country-select .flag.az { height: 10px; background-position: -352px 0px; } .country-select .flag.ba { height: 10px; background-position: -374px 0px; } .country-select .flag.bb { height: 14px; background-position: -396px 0px; } .country-select .flag.bd { height: 12px; background-position: -418px 0px; } .country-select .flag.be { height: 15px; background-position: -440px 0px; } .country-select .flag.bf { height: 14px; background-position: -460px 0px; } .country-select .flag.bg { height: 12px; background-position: -482px 0px; } .country-select .flag.bh { height: 12px; background-position: -504px 0px; } .country-select .flag.bi { height: 12px; background-position: -526px 0px; } .country-select .flag.bj { height: 14px; background-position: -548px 0px; } .country-select .flag.bl { height: 14px; background-position: -570px 0px; } .country-select .flag.bm { height: 10px; background-position: -592px 0px; } .country-select .flag.bn { height: 10px; background-position: -614px 0px; } .country-select .flag.bo { height: 14px; background-position: -636px 0px; } .country-select .flag.bq { height: 14px; background-position: -658px 0px; } .country-select .flag.br { height: 14px; background-position: -680px 0px; } .country-select .flag.bs { height: 10px; background-position: -702px 0px; } .country-select .flag.bt { height: 14px; background-position: -724px 0px; } .country-select .flag.bv { height: 15px; background-position: -746px 0px; } .country-select .flag.bw { height: 14px; background-position: -768px 0px; } .country-select .flag.by { height: 10px; background-position: -790px 0px; } .country-select .flag.bz { height: 14px; background-position: -812px 0px; } .country-select .flag.ca { height: 10px; background-position: -834px 0px; } .country-select .flag.cc { height: 10px; background-position: -856px 0px; } .country-select .flag.cd { height: 15px; background-position: -878px 0px; } .country-select .flag.cf { height: 14px; background-position: -900px 0px; } .country-select .flag.cg { height: 14px; background-position: -922px 0px; } .country-select .flag.ch { height: 15px; background-position: -944px 0px; } .country-select .flag.ci { height: 14px; background-position: -961px 0px; } .country-select .flag.ck { height: 10px; background-position: -983px 0px; } .country-select .flag.cl { height: 14px; background-position: -1005px 0px; } .country-select .flag.cm { height: 14px; background-position: -1027px 0px; } .country-select .flag.cn { height: 14px; background-position: -1049px 0px; } .country-select .flag.co { height: 14px; background-position: -1071px 0px; } .country-select .flag.cp { height: 14px; background-position: -1093px 0px; } .country-select .flag.cr { height: 12px; background-position: -1115px 0px; } .country-select .flag.cu { height: 10px; background-position: -1137px 0px; } .country-select .flag.cv { height: 12px; background-position: -1159px 0px; } .country-select .flag.cw { height: 14px; background-position: -1181px 0px; } .country-select .flag.cx { height: 10px; background-position: -1203px 0px; } .country-select .flag.cy { height: 13px; background-position: -1225px 0px; } .country-select .flag.cz { height: 14px; background-position: -1247px 0px; } .country-select .flag.de { height: 12px; background-position: -1269px 0px; } .country-select .flag.dg { height: 10px; background-position: -1291px 0px; } .country-select .flag.dj { height: 14px; background-position: -1313px 0px; } .country-select .flag.dk { height: 15px; background-position: -1335px 0px; } .country-select .flag.dm { height: 10px; background-position: -1357px 0px; } .country-select .flag.do { height: 13px; background-position: -1379px 0px; } .country-select .flag.dz { height: 14px; background-position: -1401px 0px; } .country-select .flag.ea { height: 14px; background-position: -1423px 0px; } .country-select .flag.ec { height: 14px; background-position: -1445px 0px; } .country-select .flag.ee { height: 13px; background-position: -1467px 0px; } .country-select .flag.eg { height: 14px; background-position: -1489px 0px; } .country-select .flag.eh { height: 10px; background-position: -1511px 0px; } .country-select .flag.er { height: 10px; background-position: -1533px 0px; } .country-select .flag.es { height: 14px; background-position: -1555px 0px; } .country-select .flag.et { height: 10px; background-position: -1577px 0px; } .country-select .flag.eu { height: 14px; background-position: -1599px 0px; } .country-select .flag.fi { height: 12px; background-position: -1621px 0px; } .country-select .flag.fj { height: 10px; background-position: -1643px 0px; } .country-select .flag.fk { height: 10px; background-position: -1665px 0px; } .country-select .flag.fm { height: 11px; background-position: -1687px 0px; } .country-select .flag.fo { height: 15px; background-position: -1709px 0px; } .country-select .flag.fr { height: 14px; background-position: -1731px 0px; } .country-select .flag.ga { height: 15px; background-position: -1753px 0px; } .country-select .flag.gb { height: 10px; background-position: -1775px 0px; } .country-select .flag.gd { height: 12px; background-position: -1797px 0px; } .country-select .flag.ge { height: 14px; background-position: -1819px 0px; } .country-select .flag.gf { height: 14px; background-position: -1841px 0px; } .country-select .flag.gg { height: 14px; background-position: -1863px 0px; } .country-select .flag.gh { height: 14px; background-position: -1885px 0px; } .country-select .flag.gi { height: 10px; background-position: -1907px 0px; } .country-select .flag.gl { height: 14px; background-position: -1929px 0px; } .country-select .flag.gm { height: 14px; background-position: -1951px 0px; } .country-select .flag.gn { height: 14px; background-position: -1973px 0px; } .country-select .flag.gp { height: 14px; background-position: -1995px 0px; } .country-select .flag.gq { height: 14px; background-position: -2017px 0px; } .country-select .flag.gr { height: 14px; background-position: -2039px 0px; } .country-select .flag.gs { height: 10px; background-position: -2061px 0px; } .country-select .flag.gt { height: 13px; background-position: -2083px 0px; } .country-select .flag.gu { height: 11px; background-position: -2105px 0px; } .country-select .flag.gw { height: 10px; background-position: -2127px 0px; } .country-select .flag.gy { height: 12px; background-position: -2149px 0px; } .country-select .flag.hk { height: 14px; background-position: -2171px 0px; } .country-select .flag.hm { height: 10px; background-position: -2193px 0px; } .country-select .flag.hn { height: 10px; background-position: -2215px 0px; } .country-select .flag.hr { height: 10px; background-position: -2237px 0px; } .country-select .flag.ht { height: 12px; background-position: -2259px 0px; } .country-select .flag.hu { height: 10px; background-position: -2281px 0px; } .country-select .flag.ic { height: 14px; background-position: -2303px 0px; } .country-select .flag.id { height: 14px; background-position: -2325px 0px; } .country-select .flag.ie { height: 10px; background-position: -2347px 0px; } .country-select .flag.il { height: 15px; background-position: -2369px 0px; } .country-select .flag.im { height: 10px; background-position: -2391px 0px; } .country-select .flag.in { height: 14px; background-position: -2413px 0px; } .country-select .flag.io { height: 10px; background-position: -2435px 0px; } .country-select .flag.iq { height: 14px; background-position: -2457px 0px; } .country-select .flag.ir { height: 12px; background-position: -2479px 0px; } .country-select .flag.is { height: 15px; background-position: -2501px 0px; } .country-select .flag.it { height: 14px; background-position: -2523px 0px; } .country-select .flag.je { height: 12px; background-position: -2545px 0px; } .country-select .flag.jm { height: 10px; background-position: -2567px 0px; } .country-select .flag.jo { height: 10px; background-position: -2589px 0px; } .country-select .flag.jp { height: 14px; background-position: -2611px 0px; } .country-select .flag.ke { height: 14px; background-position: -2633px 0px; } .country-select .flag.kg { height: 12px; background-position: -2655px 0px; } .country-select .flag.kh { height: 13px; background-position: -2677px 0px; } .country-select .flag.ki { height: 10px; background-position: -2699px 0px; } .country-select .flag.km { height: 12px; background-position: -2721px 0px; } .country-select .flag.kn { height: 14px; background-position: -2743px 0px; } .country-select .flag.kp { height: 10px; background-position: -2765px 0px; } .country-select .flag.kr { height: 14px; background-position: -2787px 0px; } .country-select .flag.kw { height: 10px; background-position: -2809px 0px; } .country-select .flag.ky { height: 10px; background-position: -2831px 0px; } .country-select .flag.kz { height: 10px; background-position: -2853px 0px; } .country-select .flag.la { height: 14px; background-position: -2875px 0px; } .country-select .flag.lb { height: 14px; background-position: -2897px 0px; } .country-select .flag.lc { height: 10px; background-position: -2919px 0px; } .country-select .flag.li { height: 12px; background-position: -2941px 0px; } .country-select .flag.lk { height: 10px; background-position: -2963px 0px; } .country-select .flag.lr { height: 11px; background-position: -2985px 0px; } .country-select .flag.ls { height: 14px; background-position: -3007px 0px; } .country-select .flag.lt { height: 12px; background-position: -3029px 0px; } .country-select .flag.lu { height: 12px; background-position: -3051px 0px; } .country-select .flag.lv { height: 10px; background-position: -3073px 0px; } .country-select .flag.ly { height: 10px; background-position: -3095px 0px; } .country-select .flag.ma { height: 14px; background-position: -3117px 0px; } .country-select .flag.mc { height: 15px; background-position: -3139px 0px; } .country-select .flag.md { height: 10px; background-position: -3160px 0px; } .country-select .flag.me { height: 10px; background-position: -3182px 0px; } .country-select .flag.mf { height: 14px; background-position: -3204px 0px; } .country-select .flag.mg { height: 14px; background-position: -3226px 0px; } .country-select .flag.mh { height: 11px; background-position: -3248px 0px; } .country-select .flag.mk { height: 10px; background-position: -3270px 0px; } .country-select .flag.ml { height: 14px; background-position: -3292px 0px; } .country-select .flag.mm { height: 14px; background-position: -3314px 0px; } .country-select .flag.mn { height: 10px; background-position: -3336px 0px; } .country-select .flag.mo { height: 14px; background-position: -3358px 0px; } .country-select .flag.mp { height: 10px; background-position: -3380px 0px; } .country-select .flag.mq { height: 14px; background-position: -3402px 0px; } .country-select .flag.mr { height: 14px; background-position: -3424px 0px; } .country-select .flag.ms { height: 10px; background-position: -3446px 0px; } .country-select .flag.mt { height: 14px; background-position: -3468px 0px; } .country-select .flag.mu { height: 14px; background-position: -3490px 0px; } .country-select .flag.mv { height: 14px; background-position: -3512px 0px; } .country-select .flag.mw { height: 14px; background-position: -3534px 0px; } .country-select .flag.mx { height: 12px; background-position: -3556px 0px; } .country-select .flag.my { height: 10px; background-position: -3578px 0px; } .country-select .flag.mz { height: 14px; background-position: -3600px 0px; } .country-select .flag.na { height: 14px; background-position: -3622px 0px; } .country-select .flag.nc { height: 10px; background-position: -3644px 0px; } .country-select .flag.ne { height: 15px; background-position: -3666px 0px; } .country-select .flag.nf { height: 10px; background-position: -3686px 0px; } .country-select .flag.ng { height: 10px; background-position: -3708px 0px; } .country-select .flag.ni { height: 12px; background-position: -3730px 0px; } .country-select .flag.nl { height: 14px; background-position: -3752px 0px; } .country-select .flag.no { height: 15px; background-position: -3774px 0px; } .country-select .flag.np { height: 15px; background-position: -3796px 0px; background-color: transparent; } .country-select .flag.nr { height: 10px; background-position: -3811px 0px; } .country-select .flag.nu { height: 10px; background-position: -3833px 0px; } .country-select .flag.nz { height: 10px; background-position: -3855px 0px; } .country-select .flag.om { height: 10px; background-position: -3877px 0px; } .country-select .flag.pa { height: 14px; background-position: -3899px 0px; } .country-select .flag.pe { height: 14px; background-position: -3921px 0px; } .country-select .flag.pf { height: 14px; background-position: -3943px 0px; } .country-select .flag.pg { height: 15px; background-position: -3965px 0px; } .country-select .flag.ph { height: 10px; background-position: -3987px 0px; } .country-select .flag.pk { height: 14px; background-position: -4009px 0px; } .country-select .flag.pl { height: 13px; background-position: -4031px 0px; } .country-select .flag.pm { height: 14px; background-position: -4053px 0px; } .country-select .flag.pn { height: 10px; background-position: -4075px 0px; } .country-select .flag.pr { height: 14px; background-position: -4097px 0px; } .country-select .flag.ps { height: 10px; background-position: -4119px 0px; } .country-select .flag.pt { height: 14px; background-position: -4141px 0px; } .country-select .flag.pw { height: 13px; background-position: -4163px 0px; } .country-select .flag.py { height: 11px; background-position: -4185px 0px; } .country-select .flag.qa { height: 8px; background-position: -4207px 0px; } .country-select .flag.re { height: 14px; background-position: -4229px 0px; } .country-select .flag.ro { height: 14px; background-position: -4251px 0px; } .country-select .flag.rs { height: 14px; background-position: -4273px 0px; } .country-select .flag.ru { height: 14px; background-position: -4295px 0px; } .country-select .flag.rw { height: 14px; background-position: -4317px 0px; } .country-select .flag.sa { height: 14px; background-position: -4339px 0px; } .country-select .flag.sb { height: 10px; background-position: -4361px 0px; } .country-select .flag.sc { height: 10px; background-position: -4383px 0px; } .country-select .flag.sd { height: 10px; background-position: -4405px 0px; } .country-select .flag.se { height: 13px; background-position: -4427px 0px; } .country-select .flag.sg { height: 14px; background-position: -4449px 0px; } .country-select .flag.sh { height: 10px; background-position: -4471px 0px; } .country-select .flag.si { height: 10px; background-position: -4493px 0px; } .country-select .flag.sj { height: 15px; background-position: -4515px 0px; } .country-select .flag.sk { height: 14px; background-position: -4537px 0px; } .country-select .flag.sl { height: 14px; background-position: -4559px 0px; } .country-select .flag.sm { height: 15px; background-position: -4581px 0px; } .country-select .flag.sn { height: 14px; background-position: -4603px 0px; } .country-select .flag.so { height: 14px; background-position: -4625px 0px; } .country-select .flag.sr { height: 14px; background-position: -4647px 0px; } .country-select .flag.ss { height: 10px; background-position: -4669px 0px; } .country-select .flag.st { height: 10px; background-position: -4691px 0px; } .country-select .flag.sv { height: 12px; background-position: -4713px 0px; } .country-select .flag.sx { height: 14px; background-position: -4735px 0px; } .country-select .flag.sy { height: 14px; background-position: -4757px 0px; } .country-select .flag.sz { height: 14px; background-position: -4779px 0px; } .country-select .flag.ta { height: 10px; background-position: -4801px 0px; } .country-select .flag.tc { height: 10px; background-position: -4823px 0px; } .country-select .flag.td { height: 14px; background-position: -4845px 0px; } .country-select .flag.tf { height: 14px; background-position: -4867px 0px; } .country-select .flag.tg { height: 13px; background-position: -4889px 0px; } .country-select .flag.th { height: 14px; background-position: -4911px 0px; } .country-select .flag.tj { height: 10px; background-position: -4933px 0px; } .country-select .flag.tk { height: 10px; background-position: -4955px 0px; } .country-select .flag.tl { height: 10px; background-position: -4977px 0px; } .country-select .flag.tm { height: 14px; background-position: -4999px 0px; } .country-select .flag.tn { height: 14px; background-position: -5021px 0px; } .country-select .flag.to { height: 10px; background-position: -5043px 0px; } .country-select .flag.tr { height: 14px; background-position: -5065px 0px; } .country-select .flag.tt { height: 12px; background-position: -5087px 0px; } .country-select .flag.tv { height: 10px; background-position: -5109px 0px; } .country-select .flag.tw { height: 14px; background-position: -5131px 0px; } .country-select .flag.tz { height: 14px; background-position: -5153px 0px; } .country-select .flag.ua { height: 14px; background-position: -5175px 0px; } .country-select .flag.ug { height: 14px; background-position: -5197px 0px; } .country-select .flag.um { height: 11px; background-position: -5219px 0px; } .country-select .flag.us { height: 11px; background-position: -5241px 0px; } .country-select .flag.uy { height: 14px; background-position: -5263px 0px; } .country-select .flag.uz { height: 10px; background-position: -5285px 0px; } .country-select .flag.va { height: 15px; background-position: -5307px 0px; } .country-select .flag.vc { height: 14px; background-position: -5324px 0px; } .country-select .flag.ve { height: 14px; background-position: -5346px 0px; } .country-select .flag.vg { height: 10px; background-position: -5368px 0px; } .country-select .flag.vi { height: 14px; background-position: -5390px 0px; } .country-select .flag.vn { height: 14px; background-position: -5412px 0px; } .country-select .flag.vu { height: 12px; background-position: -5434px 0px; } .country-select .flag.wf { height: 14px; background-position: -5456px 0px; } .country-select .flag.ws { height: 10px; background-position: -5478px 0px; } .country-select .flag.xk { height: 15px; background-position: -5500px 0px; } .country-select .flag.ye { height: 14px; background-position: -5522px 0px; } .country-select .flag.yt { height: 14px; background-position: -5544px 0px; } .country-select .flag.za { height: 14px; background-position: -5566px 0px; } .country-select .flag.zm { height: 14px; background-position: -5588px 0px; } .country-select .flag.zw { height: 10px; background-position: -5610px 0px; } /** * Sekcje: * 1. Header * 2. Top banner * 3. Charges table * 4. Apps block * 5. Information block * 6. FAQ Section * 7. Footer * */ body { font-family: 'Titillium Web', sans-serif; margin: 0; padding: 0; width: 100%; color: #595959; background-color: #fff; overflow-x: hidden; font-size: 13px; /** * 1. Header */ /** * 2. Top banner */ /** * 3. Charges table */ /** * 4. Apps block */ /** * 5. Information block */ /** * 6. FAQ Section */ /** * 7. Footer */ } body .btn-blue { text-transform: uppercase; color: #fff; background: #324260; font-weight: 600; font-size: 13px; line-height: 22px; transition-duration: .5s; position: relative; padding: 9px 80px 9px 35px; text-decoration: none; display: inline-block; border: none; border-radius: 18px; } body .btn-blue:before { position: absolute; right: 15px; content: '>'; font-size: 1.2rem; line-height: 1rem; } body .btn-blue:hover, body .btn-blue:active { background-color: #5c9fc3; color: #fff; } body header .menu-button { width: 33px; height: 33px; padding: 10px; display: block; cursor: pointer; position: absolute; right: 10px; top: 8px; z-index: 1; } body header .menu-button span { cursor: pointer; height: 2px; width: 33px; margin-bottom: 8px; background: #000; position: relative; right: 0; display: block; -webkit-transform: rotate(0deg); transform: rotate(0deg); transition: .7s ease; } body header .menu-button.open span:nth-child(1) { top: 10px; -webkit-transform: rotate(135deg); transform: rotate(135deg); transition: .7s ease; } body header .menu-button.open span:nth-child(2) { opacity: 0; right: 100px; } body header .menu-button.open span:nth-child(3) { top: -10px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); transition: .7s ease; } body header .logo { text-decoration: none; color: #595959; font-weight: 400; line-height: 16px; font-size: 14px; align-items: flex-end; margin-top: 40px; width: 100%; } body header .logo img, body header .logo svg { margin-left: auto; margin-right: auto; max-width: 60%; height: auto; } @media screen and (max-width: 575px) { body header a.logo img.svg, body header a.logo svg.svg, body header .logo img, body header .logo svg { max-width: 35% !important; } } @media screen and (max-width: 400px) { body header a.logo img.svg, body header a.logo svg.svg, body header .logo img, body header .logo svg { max-width: 28% !important; } } body header .logo span { margin-left: 30px; max-width: 130px; margin-right: auto; } body header .logo span b { display: block; font-size: 17px; font-weight: 600; } @media screen and (min-width: 576px) { body header .logo { max-width: 170px; } body header .logo img, body header .logo svg { margin-left: 0; } } @media screen and (min-width: 992px) { body header .logo { max-width: 180px; margin-top: 22px; } } body header .country-select { align-self: center; margin: auto 0; overflow-y: none; left: 46%; top: 140px; z-index: 10; } @media screen and (max-width: 991px) { body header .country-select { left: 100%; top: 104px; -webkit-transform: translate(-108%); transform: translate(-108%); display: inline-block; width: 100px; } } @media screen and (max-width: 575px) { body header .country-select { top: 95px; left: 100%; position: absolute; display: inline-block; width: 60px; } } @media screen and (min-width: 576px) and (max-width: 610px) { body header .country-select { position: absolute; right: 75px; top: 108px; width: 50px; } } body header .country-select #country { display: none; } body header .country-select .flag-dropdown { height: 28px; border: 1px solid #ccc; margin-left: 1vw; margin-top: -20px; } body header .country-select .flag-dropdown .selected-flag { padding: 0 13px; } body header .country-select .flag-dropdown .country-list { margin: 0 0 0 -2px; width: -webkit-max-content; width: -moz-max-content; width: max-content; overflow-y: hidden; } @media screen and (max-width: 610px) { body header .country-select .flag-dropdown .country-list { right: -1px; } } @media screen and (min-width: 611px) { body header .country-select .flag-dropdown .country-list { left: 1px; } } @media screen and (min-width: 850px) { body header .country-select .flag-dropdown { margin-left: 58px; } } body header .border { display: block; width: 100%; height: 2px; float: right; margin-top: 20px; position: relative; top: 0; border: 0; background-color: #5c9fc3; } body header .border:after { content: ''; width: calc(100% / 3); left: auto; right: 0; height: 2px; position: absolute; background-color: #f5930b; } body header .border:before { content: ''; width: calc(100% / 3); left: 0; height: 2px; position: absolute; background-color: #f03d54; } @media screen and (min-width: 576px) { body header .border { width: calc(100% - 274px); top: -7px; margin-top: 0; border-left: 12px solid #3489ca; background-color: #e9e9e9; } body header .border:after { width: 12px; left: 0; } body header .border:before { width: 12px; left: -24px; } } body header .flags { width: 100%; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #e8e8e8; color: #595959; } body header .flags .info-block-left { width: auto; padding-top: 6px; } @media screen and (min-width: 992px) { body header .header-row-main { align-items: flex-end; flex-wrap: nowrap; } body header .nav-col { min-width: 0; overflow: visible; } } body header .info-block .inner-block { margin-left: 0; margin-right: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } body header .info-block { align-items: center; } body header .info-block .inner-block:nth-child(2) { display: block; } body header .info-block .inner-block:nth-child(1) { margin-right: 40px; margin-bottom: 4px; display: flex; align-items: center; } @media screen and (min-width: 768px) { body header .info-block .inner-block:nth-child(2) { display: flex; align-items: center; } body header .info-block .inner-block:nth-child(1) { margin-bottom: 0; } body header .info-block .inner-block:nth-child(2) p { margin-left: 20px; margin-top: 0; } } body header .info-block .inner-block h2 { color: #e2576b; font-weight: 400; font-size: 21px; line-height: 24px; text-align: left; margin: 0; margin-bottom: 15px; } body header .info-block .inner-block h2 img { -o-object-fit: scale-down; object-fit: scale-down; -o-object-position: center; object-position: center; width: 22px; height: 22px; margin-left: 0; margin-right: 8px; } @media screen and (min-width: 768px) { body header .info-block .inner-block h2 img { width: 32px; height: 32px; margin-right: 14px; } } body header .info-block .inner-block h2 a { color: #e2576b; text-decoration: none; font-weight: 600; } body header .info-block .inner-block h2 a:hover, body header .info-block .inner-block h2 a:active { text-decoration: underline; } body header .info-block .inner-block p { text-align: left; font-size: 14px; line-height: 18px; margin-left: 0; margin-top: 2px; } @media screen and (min-width: 576px) { body header .info-block { right: 20px; top: 0; margin-top: 0; } body header .info-block .inner-block p { display: none; } } @media screen and (min-width: 768px) { body header .info-block { display: flex; } body header .info-block .inner-block p { display: block; } body header .flags { padding: 25px 0 15px; } } @media screen and (min-width: 992px) { body header .flags { padding: 30px 0 15px; } body header .info-block { right: 0; top: 0; margin-top: 0; } body header .info-block .inner-block { margin-right: 0; } body header .info-block .inner-block h2 { margin-top: 0; } } body header nav { position: relative; left: 0; width: 100%; margin-top: 18px; text-align: center; background: #fff; } body header nav ul { margin: 0; padding: 0; list-style: none; height: auto; overflow-y: hidden; max-height: 0; transition-duration: .5s; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } body header nav ul.open { display: block; max-height: 100%; -webkit-transform: rotateY(0); transform: rotateY(0); padding-bottom: 2px; } body header nav ul li { margin: 0; padding: 0; list-style: none; display: block; } body header nav ul li a { display: block; position: relative; text-transform: uppercase; color: #595959; text-decoration: none; padding: 10px 14px; font-size: 16px; line-height: 16px; transition-duration: .5s; } body header nav ul li a:before { content: ''; display: none; position: absolute; height: 7px; width: 2px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -2px; background-color: #5c9fc3; } body header nav ul li a:hover, body header nav ul li a:active { box-shadow: 0 2px 0 0 #595959; } body header nav ul li:first-child a:before { display: none; height: 25px; padding: 0; } @media screen and (min-width: 576px) { body header nav { background: transparent; position: static; } body header nav ul { display: block; max-height: 100%; -webkit-transform: rotateY(0); transform: rotateY(0); } body header nav ul li { display: inline-block; } body header nav ul li a:before { display: block; } } @media screen and (min-width: 992px) { body header nav { margin-top: 40px; width: 100%; } body header nav ul { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; width: 100%; } body header nav ul li { height: 25px; } body header nav ul li a { padding: 2px 10px; font-size: 17px; white-space: nowrap; } } @media screen and (min-width: 1200px) { body header nav ul { margin-right: 30px; margin-top: -60px; } } /* ===== POPRAWKA: menu na waskich desktopach/iPadach (992px - 1199px) ===== W tym zakresie absolutne pozycjonowanie menu (myslane dla szerszych ekranow) powodowalo, ze menu chowalo sie pod tresciscia ponizej headera (np. na iPad Pro 1024px). Ponizej menu wraca do prostego, statycznego ukladu - widoczne, w normalnym przeplywie, pod logo. Nie dotyczy to ani tabletow (<992px), ani szerszych desktopow (>=1200px). */ @media screen and (min-width: 992px) and (max-width: 1199px) { body header .header-row-main { align-items: center; flex-wrap: wrap; } body header .logo-col, body header .nav-col { width: 100%; } body header nav { position: static; left: 0; width: 100%; margin-top: 15px; } body header nav ul { position: static; min-width: 0; top: auto; right: auto; -webkit-transform: none; transform: none; margin-right: 0; display: flex; flex-wrap: nowrap; justify-content: flex-end; } } /* ===== POPRAWKI TYLKO DLA TABLETÓW (768px - 991px) ===== */ @media screen and (min-width: 768px) and (max-width: 991px) { /* 1. Odstep miedzy ikonka logowania a lewa krawedzia strony */ body header .flags { padding-left: 25px; } /* 2. Numer infolinii w jednej linii, bez zawijania */ body header .info-block .inner-block:nth-child(2) h2 { white-space: nowrap; font-size: 18px; } /* 3. Logo przesuniete wyzej */ body header .logo { margin-top: 8px; } /* 4. Dekoracyjna linia pod logo - lekko nizej niz poprzednio */ body header .border { top: -40px; } /* 6. Rowna wysokosc blokow "Jak to dziala" - patrz osobny blok nizej w pliku */ /* 5. Tekst w przycisku "Zobacz cennik" w jednej linii */ body .top-banner .btn-blue { white-space: nowrap; } } body .top-banner { position: relative; text-align: center; } @media screen and (min-width: 768px) { body .top-banner { overflow: hidden; } } body .top-banner > .row { align-items: center; } body .top-banner h1 { font-size: 32px; line-height: 34px; color: #324260; text-transform: uppercase; font-weight: 600; } body .top-banner p { line-height: 26px; font-size: 16px; } body .top-banner .btn-blue { margin-top: 15px; margin-bottom: 50px; } body .top-banner .top-banner-image { position: relative; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; opacity: 1; -o-object-fit: contain; object-fit: contain; -o-object-position: bottom center; object-position: bottom center; max-width: 450px; margin: 0 auto; } @media screen and (min-width: 768px) { body .top-banner { text-align: left; } body .top-banner .top-banner-image { position: static; z-index: 1; opacity: 1; width: auto; max-width: unset; margin: 0; } } /* body .charges-table .center { padding: 0 10px; } */ body .charges-table .header-block { border-radius: 20px; border: 1px solid #595959; text-align: center; margin-top: 0; margin-bottom: 10px; padding: 0 15px; } body .charges-table .header-block h3 { color: #595959; font-size: 21px; line-height: 24px; font-weight: 400; } body .charges-table .header-block h3 b { font-weight: 700; } body .charges-table img { width: auto; } body .charges-table .charges-icon { margin-top: 15px; display: inline-block; } body .charges-table h2 { font-size: 32px; line-height: 34px; color: #324260; text-transform: uppercase; font-weight: 600; width: 50%; text-align: center; margin-right: auto; margin-left: auto; display: inline-block; } body .charges-table h2 small { color: #595959; text-transform: none; font-size: 12px; font-weight: 400; line-height: 14px; display: block; } @media screen and (min-width: 992px) { body .charges-table h2 { text-align: right; } } body .charges-table .box { border-radius: 20px; padding: 22px; margin-bottom: 10px; box-sizing: border-box; } body .charges-table .box.red { background-color: #f03d54; } body .charges-table .box.blue { background-color: #3489ca; } body .charges-table .box.dark-blue { background-color: #324260; } body .charges-table .box.orange { background-color: #f5930b; } body .charges-table .box .price { color: #fff; font-size: 96px; line-height: 32px; margin: 30px auto 30px auto; /*display: flex;*/ } body .charges-table .box .price b { font-weight: 700; margin-left: auto; } body .charges-table .box .price span { font-weight: 300; font-size: 30px; margin-right: auto; } body .charges-table .box hr { border: 0; margin: 0 0 15px 0; padding: 0; background-color: #fff; width: 100%; height: 2px; } body .charges-table .box .content { font-size: 21px; line-height: 24px; color: #fff; font-weight: 400; margin: 14px auto 0; } body .charges-table .box .content b { font-weight: 700; } /* ===== DODANE: naprawa układu 4 boksów tabeli opłat (flexbox zamiast inline-block/calc) ===== Poprzedni układ (inline-block + calc + wyjątek dla :last-child) rozsypywał się na tabletach i przy zmniejszonym oknie przeglądarki. Selektor działa niezależnie od tego, czy w HTML jest dodana klasa "charges-boxes" (drugi selektor to zabezpieczenie strukturalne na wypadek gdyby zmiana w struktura.txt nie została jeszcze wgrana). Aby przywrócić starą wersję, wystarczy usunąć ten blok oraz regułę box-sizing dodaną w .charges-table .box powyżej. */ body .charges-table .charges-boxes, body .charges-table .row > div:has(> .box) { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; } body .charges-table .charges-boxes .box, body .charges-table .row > div:has(> .box) > .box { width: 100%; margin: 0; } @media screen and (min-width: 768px) and (max-width: 991px) { body .charges-table .charges-boxes .box, body .charges-table .row > div:has(> .box) > .box { width: calc(50% - 10px); } } @media screen and (min-width: 992px) { body .charges-table .charges-boxes .box, body .charges-table .row > div:has(> .box) > .box { width: calc(25% - 15px); } } /* ===== KONIEC: naprawa układu tabeli opłat ===== */ @media screen and (min-width: 992px) { body .charges-table > .row > .center:first-child { margin-top: 10%; } body .charges-table .header-block { margin-top: 38px; } } body .apps-block { position: relative; text-align: center; margin-top: 30px; } body .apps-block > .row { overflow-y: hidden; } body .apps-block h2 { font-size: 32px; line-height: 34px; color: #324260; text-transform: uppercase; font-weight: 600; } @media screen and (min-width: 768px) { body .apps-block h2 { margin-top: 60px; } } body .apps-block p { line-height: 30px; font-size: 16px; } body .apps-block p:last-child { margin-bottom: 60px; } @media screen and (min-width: 992px) { body .apps-block p:last-child { margin-bottom: 80px; } } body .apps-block a { display: inline-block; width: calc(49% - 30px); padding: 15px; max-width: 160px; } body .apps-block a img { width: 100%; } body .apps-block .apps-image-mobile { width: 100%; max-height: 300px; -o-object-fit: contain; object-fit: contain; } body .apps-block .apps-image { display: none; position: absolute; top: 0; right: 0; left: 0; height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: right; object-position: right; opacity: .5; z-index: -1; } @media screen and (min-width: 768px) { body .apps-block .apps-image { position: static; opacity: 1; z-index: 1; right: unset; left: unset; display: block; } } @media screen and (min-width: 576px) { body .apps-block a { display: inline-block; width: calc(49% - 15px); padding: 15px 15px 15px 0; max-width: 160px; } body .apps-block a img { width: 100%; } } @media screen and (min-width: 992px) { body .apps-block { padding-left: 60px; text-align: left; } } body .info-block { position: relative; } body .info-block .row > div { padding: 0 20px; } @media screen and (min-width: 992px) { body .info-block .row > div { flex: 0 0 33.3333%; max-width: 33.3333%; } } body .info-block .title { margin-bottom: 19px; position: relative; text-align: center; } body .info-block .title h2 { font-size: 32px; line-height: 34px; text-transform: uppercase; color: #324260; font-weight: 600; display: inline-block; } body .info-block .title img { display: inline-block; margin-left: 40px; margin-bottom: -7px; } @media screen and (min-width: 992px) { body .info-block .title { margin-top: -60px; margin-left: 60px; text-align: left; } } body .info-block .box { border: 1px solid #e6e6e6; padding: 20px; font-size: 16px; line-height: 26px; margin-bottom: 25px; text-align: center; border-radius: 28px } body .info-block .box.d-flex { display: block !important; } body .info-block .box > .quick-start-icon { margin-left: 20px; width: 100%; max-width: 110px; height: auto; display: inline-block; } @media screen and (min-width: 992px) { body .info-block .box > .quick-start-icon { max-width: 130px; } } body .info-block .box .image-block { display: block; width: 100%; text-align: center; align-self: center; } body .info-block .box .image-block .quick-start-icon { margin: 0 auto; width: 100%; max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; } body .info-block .box > img[src*="quick-start"] { max-width: 70px !important; } @media screen and (min-width: 992px) { body .info-block .box > img[src*="quick-start"] { max-width: 85px !important; } } body .info-block .box h3 { line-height: 24px; font-size: 32px; font-weight: 600px; } body .info-block .box ol { padding-left: 15px; } body .info-block .box ol li, body .info-block .box p { margin-bottom: 25px; margin-top: 0; } body .info-block .box .content { display: block; width: 100%; } @media screen and (min-width: 992px) { body .info-block .box { margin-bottom: 70px; } } @media screen and (min-width: 768px) { body .info-block .box { min-height: 460px; margin-bottom: 50px; } } @media screen and (min-width: 576px) { body .info-block .box { text-align: left; } body .info-block .box.d-flex { display: flex !important; } body .info-block .box .image-block { width: 30%; align-self: self-start; margin-top: 20%; } body .info-block .box .content { width: 69%; } } /* ===== DODANE: stylizacja linków wewnątrz kolumn "Jak to działa" ===== */ body .info-block .box a { color: #3489ca; font-weight: 600; text-decoration: underline; } body .info-block .box a:hover, body .info-block .box a:active { color: #21618f; } /* ===== KONIEC: stylizacja linków ===== */ /* ===== POPRAWKA TYLKO DLA TABLETÓW: rowne wysokosci blokow "Jak to dziala" ===== */ @media screen and (min-width: 768px) and (max-width: 991px) { body .info-block .row { align-items: stretch; } body .info-block .row > div { display: flex; } body .info-block .box { display: flex; flex-direction: column; width: 100%; min-height: 0; height: auto; flex: 1 1 auto; margin-bottom: 40px; box-sizing: border-box; } } /* ===== KONIEC POPRAWKI ===== */ /* ===== DODANE: przezroczyste tło kolumn dopasowane do koloru tytułu ===== Aby usunąć, skasuj poniższe 3 reguły (kolumna 1 / 2 / 3). */ body .info-block .row > div:nth-child(1) .box { background-color: rgba(50, 66, 96, 0.05); /* wariant koloru "blue" (#324260) z tytułu "Szybki start" */ } body .info-block .row > div:nth-child(2) .box { background-color: rgba(93, 175, 80, 0.07); /* wariant koloru "darkGreen" (#5daf50) z tytułu "Wypożyczenie roweru" */ } body .info-block .row > div:nth-child(3) .box { background-color: rgba(226, 87, 107, 0.07); /* wariant koloru "red" (#e2576b) z tytułu "Zwrot roweru" */ } /* ===== KONIEC: przezroczyste tło kolumn ===== */ body .faq-section { padding-bottom: 40px; border-bottom: 1px solid #595959; margin-bottom: 60px; } body .faq-section h2 { color: #324260; font-size: 32px; line-height: 32px; text-transform: uppercase; font-weight: 600; text-align: center; } body .faq-section h2 img { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 10px auto; } @media screen and (min-width: 576px) { body .faq-section h2 { line-height: 24px; } body .faq-section h2 img { display: inline-block; margin: 0 15px -7px 0; } } body .faq-section h3 { text-align: left; color: #5daf50; text-transform: uppercase; font-size: 18px; line-height: 30px; font-weight: 700; padding-right: 60px; position: relative; margin: 0 0 0 0; } body .faq-section h3:before { content: ''; display: none; position: absolute; top: 0; right: 0; width: 60px; height: 100%; background: transparent url("../img/line.png") no-repeat center center; background-size: 100% 100%; } @media screen and (min-width: 768px) { body .faq-section h3 { text-align: right; margin-right: -60px; } body .faq-section h3:before { display: block; } } body .faq-section .block:last-child { border-bottom: 3px solid #a4c835; } @media screen and (min-width: 768px) { body .faq-section .block:last-child { border-bottom: 0; } } body .faq-section ul { margin: 0; padding: 0; text-align: left; list-style: none; transition: height .5s; height: 0; overflow-y: hidden; overflow-x: hidden; padding-right: 0; margin-right: 0; margin-top: -1px; } body .faq-section ul li { margin: 0; padding: 0; width: 100%; padding-right: 0; position: relative; } body .faq-section ul li:before { content: ''; display: none; position: absolute; top: 0; right: 0; width: 60px; height: 100%; background: transparent url("../img/line.png") no-repeat center center; background-size: 100% 100%; } body .faq-section ul li a { text-decoration: none; color: #595959; font-size: 16px; line-height: 30px; display: block; } body .faq-section ul li a:hover, body .faq-section ul li a:active { color: #a4c835; font-weight: 600; } body .faq-section ul li.active:before { background-image: url(../img/line.png), url(../img/separator.png), url(../img/line.png); background-size: 60px calc(50% - 13px), 60px 30px, 60px calc(50% - 13px); background-position: top, center, bottom; } body .faq-section ul li.active a { color: #5daf50; font-weight: 600; } @media screen and (min-width: 768px) { body .faq-section ul { text-align: right; padding-right: 60px; margin-right: -60px; } body .faq-section ul li { padding-right: 60px; } body .faq-section ul li:before { display: block; } } body .faq-section #faqContent { font-size: 16px; line-height: 26px; color: #595959; } body .faq-section #faqContent b { font-weight: 700; } body .faq-section #faqContent ul { height: auto; text-align: left; margin: 1rem 0; padding: 0 0 0 12px; width: 100%; list-style-type: none; } body .faq-section #faqContent ul li { width: 100%; padding: 0; } body .faq-section #faqContent ul li:before { content: '-'; right: auto; left: -12px; width: auto; max-width: 100%; background: none; display: block !important; } @media screen and (min-width: 768px) { body .faq-section #faqContent { padding-left: 40px; padding-right: 20px; } } @media screen and (min-width: 992px) { body .faq-section { margin-right: -20px; } } @media screen and (min-width: 768px) { body .faq-section { border: 1px solid #e6e6e6; border-radius: 28px; margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1200px) { body .faq-section { margin-left: 0px; margin-right: -20px; } } body main { position: relative; } body main .main-bg { position: absolute; bottom: 0; left: 0; width: 100%; z-index: -1; } body footer { margin-bottom: 115px; } body footer #map { height: 300px; width: 100%; border: 0; } @media screen and (min-width: 768px) { body footer #map { height: 500px; } } body footer .line { width: 100%; display: block; height: 1px; background: #ebebeb; border: 0; margin-top: 35px; margin-bottom: 35px; } @media screen and (min-width: 576px) { body footer .line { margin-bottom: 65px; } } body footer .footer-block .lomza { align-items: center; text-align: center; margin-bottom: 20px; display: block; } body footer .footer-block .lomza .footer-logo { margin-left: auto; margin-bottom: 50px; display: block; } body footer .footer-block .lomza .footer-logo img { margin-top: 10px; } body footer .footer-block .lomza address { margin-left: 0; margin-right: auto; font-size: 14px; line-height: 24px; font-style: normal; } body footer .footer-block .lomza address a { color: #595959; text-decoration: none; } body footer .footer-block .lomza address a:hover, body footer .footer-block .lomza address a:active { text-decoration: underline; } @media screen and (min-width: 576px) { body footer .footer-block .lomza { display: flex; } body footer .footer-block .lomza .footer-logo { margin-left: 0; margin-bottom: 0; } } @media screen and (min-width: 768px) { body footer .footer-block .lomza { text-align: left; align-items: center; margin: auto; } body footer .footer-block .lomza address { margin-left: 30px; } } body footer .footer-block .vertical-line { width: 2px; height: 100%; margin: 0 0 0 auto; background-color: #ebebeb; display: none; } @media screen and (min-width: 992px) { body footer .footer-block .vertical-line { display: inline-block; } } body footer .footer-block .vertical-line:last-child { margin: 0 auto 0 0; } body footer .footer-block .inner-block { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; display: inline-block; } body footer .footer-block .powered-by { margin: 0 19%; } body footer .footer-block .fb-block { width: 100%; height: 100%; display: flex; align-items: center; margin-top: 50px; } body footer .footer-block .fb-block a { color: #595959; text-decoration: none; display: flex; align-items: center; margin-right: auto; margin-left: auto; } body footer .footer-block .fb-block p { display: inline-block; max-width: 100px; text-align: right; margin-right: 20px; } @media screen and (min-width: 992px) { body footer .footer-block .fb-block { margin-top: 0; } body footer .footer-block .fb-block a { margin-right: auto; } } #scrollTopButton { position: fixed; bottom: 20px; right: 20px; border-radius: 50px; border: 0; background-color: #5c9fc3; color: #fff; font-size: 16px; line-height: 16px; padding: 13px 15px 15px; transition-duration: .5s; outline: 0 !important; display: none; } #scrollTopButton.show { display: block; } #scrollTopButton:hover, #scrollTopButton:active { box-shadow: inset 0 0 40px 10px rgba(0, 0, 0, 0.5); } /** * Single */ .single-block { position: relative; text-align: center; margin-top: 90px; } .single-block > .row { overflow-y: hidden; } .single-block li { font-size: 16px; margin-bottom: 10px; } .single-block li a { color: #5daf50; text-decoration: none; } .single-block li a:hover{ text-decoration: underline; } .single-block h2 { font-size: 32px; line-height: 34px; color: #e2576b; text-transform: uppercase; font-weight: 600; } @media screen and (min-width: 768px) { .single-block h2 { margin-top: 60px; } } .single-block p { line-height: 30px; font-size: 16px; margin-top: 45px; } .single-block p:last-child { margin-bottom: 60px; } @media screen and (min-width: 992px) { .single-block p:last-child { margin-bottom: 80px; } } @media screen and (min-width: 992px) { .single-block { text-align: left; } } /** * Section news */ .news { margin-top: 30px; } .news .outer-block { margin-bottom: 50px; } .news .outer-block .date { text-align: center; } .news .outer-block .date p { margin: 0; font-size: 20px; line-height: 24px; color: #324260; } .news .outer-block .content { text-align: center; } .news .outer-block .content h3 { margin-top: 0; text-transform: uppercase; } .news .outer-block .content h3 a { color: #324260; font-weight: 600; font-size: 24px; line-height: 32px; text-decoration: none; } .news .outer-block .content .inner-content p { color: #565656; font-size: 14px; line-height: 24px; } .news .outer-block .btn-transparent { margin-top: 30px; } @media screen and (min-width: 768px) { .news { margin-top: 70px; } .news .outer-block { display: flex; } .news .outer-block .date { text-align: right; width: 25%; } .news .outer-block .date p { padding-right: 30px; position: relative; } .news .outer-block .date p small { display: block; font-size: 16px; } .news .outer-block .content { text-align: left; width: 75%; } .news .outer-block .content h3 a { text-decoration: none; } } .btn-transparent { font-weight: 500; font-size: 14px; line-height: 32px; color: #324260; border-bottom: 1px solid #324260; transition-duration: .5s; text-decoration: none; padding: 0 15px; display: inline-block; } .btn-transparent .svg { padding-left: 15px; margin-bottom: -2px; } .btn-transparent .svg, .btn-transparent .svg * { transition-duration: .5s; } .btn-transparent .svg path { fill: #324260; } .btn-transparent:hover, .btn-transparent:active { background-color: #324260; color: #fff; } .btn-transparent:hover .svg path, .btn-transparent:active .svg path { fill: #fff; } @media screen and (min-width: 768px) { .btn-transparent { padding: 0 20px 0 30px; } .btn-transparent .svg { padding-left: 60px; } } .btn-transparent.archive { color: #595959; border-bottom: 0; } .btn-transparent.archive .svg path { fill: #595959; } .btn-transparent.archive:hover, .btn-transparent.archive:active { background-color: #595959; color: #fff; } .btn-transparent.archive:hover .svg path, .btn-transparent.archive:active .svg path { fill: #fff; } .arrow { display: none; } .ue-logos { margin: 60px auto 0; border-top: 1px solid #ebebeb; padding: 25px 0px; } @media (max-width: 768px) { .ue-logos { padding: 20px 0; } } .ue-logos img { display: block; margin: 0 auto; zoom: .8; width: 60%; } @media (max-width: 768px) { .ue-logos img { width: 100%; } } @media (min-width: 1921px) { .ue-logos img { width: 40%; } } .ue-logos p { text-align: center; color: #545454 !important; font-size: 12px; width: 60%; margin: 15px auto; } @media (max-width: 768px) { .ue-logos p { font-size: 10px; width: 100%; } } @media (min-width: 1921px) { .ue-logos p { width: 40%; } } /** * Cookies info box style **/ #cookies { z-index: 5; right: 0; bottom: 0; width: auto; position: fixed; padding: 40px; display: none; border: 1px solid #5ca62a; margin: 0 auto; background-color: #fff; color: #5ca62a; } #cookies.show { display: block; } #cookies .closee { top: 10px; right: 15px; width: 26px; height: 26px; position: absolute; cursor: pointer; } #cookies .closee:before, #cookies .closee:after { top: -1px; right: 12px; width: 0; content: " "; height: 30px; display: block; position: absolute; border-right: 1px solid #5ca62a; } #cookies .closee:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } #cookies .closee:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #cookies img { top: 20px; right: 20px; position: absolute; } #cookies a { color: #0055a5; } #cookies h5 { margin: 0; } #cookies p { margin-bottom: 0; color: #595959; font-size: 14px; } @media (min-width: 550px) { #cookies { right: 40px; bottom: 40px; max-width: 420px; } } .text-uppercase { text-transform: uppercase; } /* Ukrywa obrazek na ekranach o szerokości do 992px (telefony i tablety) */ @media (max-width: 992px) { .main-bg { display: none !important; } } #faqContent a { color: #3489ca; } #faqContent a:hover { color: #216599; /* Nieco ciemniejszy odcień po najechaniu myszką */ text-decoration: underline; } .doc-buttons-wrapper { display: flex; flex-direction: column; gap: 12px; /* Równe odstępy między przyciskami */ max-width: 1000px; /* Trzyma szerokość w ryzach */ margin: 30px 0; padding: 0 20px; /* Odstep od lewej/prawej krawedzi ekranu */ box-sizing: border-box; } .doc-btn { display: flex; justify-content: space-between; /* Tytuł do lewej, akcja do prawej */ align-items: center; background-color: #F3F3F3; /* Ciemnoszare tło zgodne z cennikiem */ /* border-radius: 6px; Delikatne zaokrąglenie rogów */ border-left: 6px solid #e2576b; /* Charakterystyczny zielony pasek LRM */ padding: 16px 24px; color: #595959 !important; /* Nadpisuje domyślny niebieski kolor linków */ text-decoration: none !important; /* Usuwa podkreślenie tekstu */ transition: all 0.3s ease; /* Płynna animacja */ white-space: nowrap; /* Tekst zawsze w jednej linii */ overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; width: 100%; } /* Mniejsza czcionka na waskich ekranach, zeby tekst zmiescil sie w jednej linii */ @media screen and (max-width: 767px) { .doc-btn { font-size: 15px !important; padding: 14px 16px; } } @media screen and (max-width: 400px) { .doc-btn { font-size: 13px !important; padding: 12px 14px; } } /* Szersze przyciski regulaminu tylko na tabletach */ @media screen and (min-width: 768px) and (max-width: 991px) { .doc-buttons-wrapper { max-width: 700px; width: 100%; } } /* Efekt najechania myszką (Hover) */ .doc-btn:hover { background-color: #949494; color: #fff !important; border-left-color: #e4334d; /* Rozjaśnienie zielonego paska */ } .doc-btn-title { font-weight: 400; line-height: 1.4; }