@charset "UTF-8"; /** * @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 1025px * * @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 default driver. */ /** * Set the element as a row * @param {Boolean} [$reverse=false] Revert the columns order if true * @example scss * .my-cool-row { * \@include g-row(); * } * * @author Olivier Bossel */ /** * 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 grid element as a table display type * @example scss * .my-cool-column { * \@include g-grid(2); * \@include g-grid-table(); * } * * @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 */ /** * Clear each n childs * @example scss * .my-cool-row { * \@include g-clear-each(2); * } * * @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 0 * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 0 * @gridle-gutter-bottom 0 * @gridle-gutter-left 0 * @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 * @gridle-max-width * @gridle-query (orientation : landscape) * @gridle-classes true * @gridle-context 16 * @gridle-gutter-width 0 * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 0 * @gridle-gutter-bottom 0 * @gridle-gutter-left 0 * @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 600px * @gridle-max-width 992px * @gridle-query * @gridle-classes true * @gridle-context 16 * @gridle-gutter-width 0 * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 0 * @gridle-gutter-bottom 0 * @gridle-gutter-left 0 * @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 * @gridle-max-width 599px * @gridle-query * @gridle-classes true * @gridle-context 16 * @gridle-gutter-width 0 * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 0 * @gridle-gutter-bottom 0 * @gridle-gutter-left 0 * @gridle-direction ltr * @gridle-dir-attribute false * @gridle-name-multiplicator 1 * @gridle-states-classes false * @gridle-classes-prefix */ .container { margin: 0 auto; } .container:after { content: ""; display: table; clear: both; } .row:before, .row-reverse:before, .row:after, .row-reverse:after { content: ""; display: table; } .row:after, .row-reverse:after { clear: both; } .row, .row-reverse { zoom: 1; } .gr-0, .gr-1, .gr-2, .gr-3, .gr-4, .gr-5, .gr-6, .gr-7, .gr-8, .gr-9, .gr-10, .gr-11, .gr-12, .gr-13, .gr-14, .gr-15, .gr-16 { display: inline-block; min-height: 1px; line-height: 1; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; } .gr-adapt { display: table-cell; width: 1px; white-space: nowrap !important; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .gr-grow { display: table-cell; width: 99999px; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .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 { white-space: nowrap; } .nowrap > * { white-space: normal; } .wrap { white-space: normal; } .gr-centered { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } @media (orientation: landscape) { .container\@desktop:after { content: ""; display: table; clear: both; } } @media (orientation: landscape) { .row\@desktop:before, .row-reverse\@desktop:before, .row\@desktop:after, .row-reverse\@desktop:after { content: ""; display: table; } .row\@desktop:after, .row-reverse\@desktop:after { clear: both; } .row\@desktop, .row-reverse\@desktop { zoom: 1; } } @media (orientation: landscape) { .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 { display: inline-block; min-height: 1px; line-height: 1; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; } } @media (orientation: landscape) { .gr-adapt\@desktop { display: table-cell; width: 1px; white-space: nowrap !important; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media (orientation: landscape) { .gr-grow\@desktop { display: table-cell; width: 99999px; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media (orientation: landscape) { .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 (orientation: landscape) { .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 (orientation: landscape) { .nowrap\@desktop { white-space: nowrap; } .nowrap\@desktop > * { white-space: normal; } } @media (orientation: landscape) { .wrap\@desktop { white-space: normal; } } @media (orientation: landscape) { .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: 600px) and (max-width: 992px) { .container\@tablet:after { content: ""; display: table; clear: both; } } @media screen and (min-width: 600px) and (max-width: 992px) { .row\@tablet:before, .row-reverse\@tablet:before, .row\@tablet:after, .row-reverse\@tablet:after { content: ""; display: table; } .row\@tablet:after, .row-reverse\@tablet:after { clear: both; } .row\@tablet, .row-reverse\@tablet { zoom: 1; } } @media screen and (min-width: 600px) and (max-width: 992px) { .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 { display: inline-block; min-height: 1px; line-height: 1; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; } } @media screen and (min-width: 600px) and (max-width: 992px) { .gr-adapt\@tablet { display: table-cell; width: 1px; white-space: nowrap !important; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media screen and (min-width: 600px) and (max-width: 992px) { .gr-grow\@tablet { display: table-cell; width: 99999px; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media screen and (min-width: 600px) and (max-width: 992px) { .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: 600px) and (max-width: 992px) { .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: 600px) and (max-width: 992px) { .nowrap\@tablet { white-space: nowrap; } .nowrap\@tablet > * { white-space: normal; } } @media screen and (min-width: 600px) and (max-width: 992px) { .wrap\@tablet { white-space: normal; } } @media screen and (min-width: 600px) and (max-width: 992px) { .gr-centered\@tablet { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } } @media screen and (max-width: 599px) { .container\@landscape:after { content: ""; display: table; clear: both; } } @media screen and (max-width: 599px) { .row\@landscape:before, .row-reverse\@landscape:before, .row\@landscape:after, .row-reverse\@landscape:after { content: ""; display: table; } .row\@landscape:after, .row-reverse\@landscape:after { clear: both; } .row\@landscape, .row-reverse\@landscape { zoom: 1; } } @media screen and (max-width: 599px) { .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 { display: inline-block; min-height: 1px; line-height: 1; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; } } @media screen and (max-width: 599px) { .gr-adapt\@landscape { display: table-cell; width: 1px; white-space: nowrap !important; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media screen and (max-width: 599px) { .gr-grow\@landscape { display: table-cell; width: 99999px; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media screen and (max-width: 599px) { .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 (max-width: 599px) { .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 (max-width: 599px) { .nowrap\@landscape { white-space: nowrap; } .nowrap\@landscape > * { white-space: normal; } } @media screen and (max-width: 599px) { .wrap\@landscape { white-space: normal; } } @media screen and (max-width: 599px) { .gr-centered\@landscape { 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" : "0", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "0", "gutter-bottom" : "0", "gutter-left" : "0", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : "", "_" : true }, "desktop":{ "name" : "desktop", "min-width" : null, "max-width" : null, "query" : "(orientation : landscape)", "classes" : true, "context" : "16", "column-width" : null, "gutter-width" : "0", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "0", "gutter-bottom" : "0", "gutter-left" : "0", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : "", "_" : true }, "tablet":{ "name" : "tablet", "min-width" : "600px", "max-width" : "992px", "query" : "screen and (min-width: 600px) and (max-width: 992px)", "classes" : true, "context" : "16", "column-width" : null, "gutter-width" : "0", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "0", "gutter-bottom" : "0", "gutter-left" : "0", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : "", "_" : true }, "landscape":{ "name" : "landscape", "min-width" : null, "max-width" : "599px", "query" : "screen and (max-width: 599px)", "classes" : true, "context" : "16", "column-width" : null, "gutter-width" : "0", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "0", "gutter-bottom" : "0", "gutter-left" : "0", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : "", "_" : 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 { width: 0; } .push-0 { left: 0; right: auto; } .pull-0 { right: 0; left: auto; } .prefix-0 { margin-left: 0; } .suffix-0 { margin-right: 0; } .gr-1 { width: 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%; } .gr-2 { 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%; } .gr-3 { 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%; } .gr-4 { width: 25%; } .push-4 { left: 25%; right: auto; } .pull-4 { right: 25%; left: auto; } .prefix-4 { margin-left: 25%; } .suffix-4 { margin-right: 25%; } .gr-5 { 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%; } .gr-6 { 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%; } .gr-7 { 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%; } .gr-8 { width: 50%; } .push-8 { left: 50%; right: auto; } .pull-8 { right: 50%; left: auto; } .prefix-8 { margin-left: 50%; } .suffix-8 { margin-right: 50%; } .gr-9 { 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%; } .gr-10 { 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%; } .gr-11 { 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%; } .gr-12 { width: 75%; } .push-12 { left: 75%; right: auto; } .pull-12 { right: 75%; left: auto; } .prefix-12 { margin-left: 75%; } .suffix-12 { margin-right: 75%; } .gr-13 { 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%; } .gr-14 { 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%; } .gr-15 { 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%; } .gr-16 { width: 100%; } .push-16 { left: 100%; right: auto; } .pull-16 { right: 100%; left: auto; } .prefix-16 { margin-left: 100%; } .suffix-16 { margin-right: 100%; } body { direction: ltr; } @media (orientation: landscape) { .gr-0\@desktop { width: 0; } .push-0\@desktop { left: 0; right: auto; } .pull-0\@desktop { right: 0; left: auto; } .prefix-0\@desktop { margin-left: 0; } .suffix-0\@desktop { margin-right: 0; } .gr-1\@desktop { width: 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%; } .gr-2\@desktop { 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%; } .gr-3\@desktop { 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%; } .gr-4\@desktop { 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%; } .gr-5\@desktop { 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%; } .gr-6\@desktop { 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%; } .gr-7\@desktop { 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%; } .gr-8\@desktop { 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%; } .gr-9\@desktop { 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%; } .gr-10\@desktop { 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%; } .gr-11\@desktop { 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%; } .gr-12\@desktop { 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%; } .gr-13\@desktop { 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%; } .gr-14\@desktop { 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%; } .gr-15\@desktop { 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%; } .gr-16\@desktop { 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%; } body { direction: ltr; } } @media screen and (min-width: 600px) and (max-width: 992px) { .gr-0\@tablet { width: 0; } .push-0\@tablet { left: 0; right: auto; } .pull-0\@tablet { right: 0; left: auto; } .prefix-0\@tablet { margin-left: 0; } .suffix-0\@tablet { margin-right: 0; } .gr-1\@tablet { width: 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%; } .gr-2\@tablet { 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%; } .gr-3\@tablet { 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%; } .gr-4\@tablet { 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%; } .gr-5\@tablet { 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%; } .gr-6\@tablet { 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%; } .gr-7\@tablet { 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%; } .gr-8\@tablet { 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%; } .gr-9\@tablet { 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%; } .gr-10\@tablet { 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%; } .gr-11\@tablet { 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%; } .gr-12\@tablet { 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%; } .gr-13\@tablet { 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%; } .gr-14\@tablet { 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%; } .gr-15\@tablet { 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%; } .gr-16\@tablet { 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%; } body { direction: ltr; } } @media screen and (max-width: 599px) { .gr-0\@landscape { 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; } .gr-1\@landscape { 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%; } .gr-2\@landscape { 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%; } .gr-3\@landscape { 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%; } .gr-4\@landscape { 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%; } .gr-5\@landscape { 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%; } .gr-6\@landscape { 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%; } .gr-7\@landscape { 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%; } .gr-8\@landscape { 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%; } .gr-9\@landscape { 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%; } .gr-10\@landscape { 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%; } .gr-11\@landscape { 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%; } .gr-12\@landscape { 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%; } .gr-13\@landscape { 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%; } .gr-14\@landscape { 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%; } .gr-15\@landscape { 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%; } .gr-16\@landscape { 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%; } body { direction: ltr; } } .float-left { float: left; } .float-right { float: right; } .clear { clear: both; } .clear-left { clear: left; } .clear-right { clear: right; } .auto-height { height: inherit; min-height: inherit; max-height: inherit; } .row { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; } [class*="no-gutter"] > .row { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; transform: rotateY(180deg); } .row-reverse > [class*="gr-"] { transform: rotateY(-180deg); } [class*="no-gutter"] > .row-reverse { margin-left: 0 !important; margin-right: 0 !important; } .row-full { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .col { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; } .col-reverse { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; transform: rotateX(180deg); } .col-reverse > [class*="gr-"] { transform: rotateX(-180deg); } .gr-table { display: table-cell; float: none; vertical-align: top; } .row-no-gutter { margin-left: 0; margin-right: 0; } .row-no-gutter > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top { margin-left: 0; margin-right: 0; } .row-no-gutter-top > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right { margin-left: 0; margin-right: 0; } .row-no-gutter-right > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left { margin-left: 0; margin-right: 0; } .row-no-gutter-left > [class*="gr-"] { padding-left: 0; } .row-align-left { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: left; } .row-align-left > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: center; } .row-align-center > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center > * { text-align: left; } .row-align-right { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: right; } .row-align-right > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-right > * { text-align: left; } .row-align-middle { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: middle; } .row-align-middle > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: middle; font-size: 1rem; } .row-align-top { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: top; } .row-align-top > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-bottom { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: bottom; } .row-align-bottom > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: bottom; font-size: 1rem; } .no-gutter { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left { padding-left: 0; } .no-gutter-right { padding-right: 0; } .no-gutter-top { padding-top: 0; } .no-gutter-bottom { padding-bottom: 0; } .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, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 12.5% 100%; z-index: 99999; } @media (orientation: landscape) { .float-left\@desktop { float: left; } .float-right\@desktop { float: right; } .clear\@desktop { clear: both; } .clear-left\@desktop { clear: left; } .clear-right\@desktop { clear: right; } .auto-height\@desktop { height: inherit; min-height: inherit; max-height: inherit; } .row\@desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; } [class*="no-gutter"] > .row\@desktop { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; transform: rotateY(180deg); } .row-reverse\@desktop > [class*="gr-"] { transform: rotateY(-180deg); } [class*="no-gutter"] > .row-reverse\@desktop { margin-left: 0 !important; margin-right: 0 !important; } .row-full\@desktop { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .col\@desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; } .col-reverse\@desktop { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; transform: rotateX(180deg); } .col-reverse\@desktop > [class*="gr-"] { transform: rotateX(-180deg); } .gr-table\@desktop { display: table-cell; float: none; vertical-align: top; } .row-no-gutter\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter\@desktop > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-top\@desktop > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-right\@desktop > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom\@desktop > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left\@desktop { margin-left: 0; margin-right: 0; } .row-no-gutter-left\@desktop > [class*="gr-"] { padding-left: 0; } .row-align-left\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: left; } .row-align-left\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: center; } .row-align-center\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@desktop > * { text-align: left; } .row-align-right\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: right; } .row-align-right\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-right\@desktop > * { text-align: left; } .row-align-middle\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: middle; } .row-align-middle\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: middle; font-size: 1rem; } .row-align-top\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: top; } .row-align-top\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-bottom\@desktop { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: bottom; } .row-align-bottom\@desktop > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: bottom; font-size: 1rem; } .no-gutter\@desktop { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@desktop { padding-left: 0; } .no-gutter-right\@desktop { padding-right: 0; } .no-gutter-top\@desktop { padding-top: 0; } .no-gutter-bottom\@desktop { padding-bottom: 0; } .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, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 12.5% 100%; z-index: 99999; } } @media screen and (min-width: 600px) and (max-width: 992px) { .float-left\@tablet { float: left; } .float-right\@tablet { float: right; } .clear\@tablet { clear: both; } .clear-left\@tablet { clear: left; } .clear-right\@tablet { clear: right; } .auto-height\@tablet { height: inherit; min-height: inherit; max-height: inherit; } .row\@tablet { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; } [class*="no-gutter"] > .row\@tablet { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@tablet { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; transform: rotateY(180deg); } .row-reverse\@tablet > [class*="gr-"] { transform: rotateY(-180deg); } [class*="no-gutter"] > .row-reverse\@tablet { margin-left: 0 !important; margin-right: 0 !important; } .row-full\@tablet { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .col\@tablet { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; } .col-reverse\@tablet { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; transform: rotateX(180deg); } .col-reverse\@tablet > [class*="gr-"] { transform: rotateX(-180deg); } .gr-table\@tablet { display: table-cell; float: none; vertical-align: top; } .row-no-gutter\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter\@tablet > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-top\@tablet > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-right\@tablet > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom\@tablet > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left\@tablet { margin-left: 0; margin-right: 0; } .row-no-gutter-left\@tablet > [class*="gr-"] { padding-left: 0; } .row-align-left\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: left; } .row-align-left\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: center; } .row-align-center\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@tablet > * { text-align: left; } .row-align-right\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: right; } .row-align-right\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-right\@tablet > * { text-align: left; } .row-align-middle\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: middle; } .row-align-middle\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: middle; font-size: 1rem; } .row-align-top\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: top; } .row-align-top\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-bottom\@tablet { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: bottom; } .row-align-bottom\@tablet > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: bottom; font-size: 1rem; } .no-gutter\@tablet { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@tablet { padding-left: 0; } .no-gutter-right\@tablet { padding-right: 0; } .no-gutter-top\@tablet { padding-top: 0; } .no-gutter-bottom\@tablet { padding-bottom: 0; } .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, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 12.5% 100%; z-index: 99999; } } @media screen and (max-width: 599px) { .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 { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; } [class*="no-gutter"] > .row\@landscape { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@landscape { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; transform: rotateY(180deg); } .row-reverse\@landscape > [class*="gr-"] { transform: rotateY(-180deg); } [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%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .col\@landscape { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; } .col-reverse\@landscape { padding-left: 0 !important; padding-right: 0 !important; margin-left: -0; margin-right: -0; transform: rotateX(180deg); } .col-reverse\@landscape > [class*="gr-"] { transform: rotateX(-180deg); } .gr-table\@landscape { display: table-cell; float: none; vertical-align: top; } .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 { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: left; } .row-align-left\@landscape > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@landscape { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: center; } .row-align-center\@landscape > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-center\@landscape > * { text-align: left; } .row-align-right\@landscape { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; text-align: right; } .row-align-right\@landscape > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-right\@landscape > * { text-align: left; } .row-align-middle\@landscape { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: middle; } .row-align-middle\@landscape > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: middle; font-size: 1rem; } .row-align-top\@landscape { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: top; } .row-align-top\@landscape > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: top; font-size: 1rem; } .row-align-bottom\@landscape { font-size: 0; word-spacing: 0; letter-spacing: 0; clear: both; vertical-align: bottom; } .row-align-bottom\@landscape > * { word-spacing: normal; letter-spacing: normal; float: none !important; vertical-align: bottom; font-size: 1rem; } .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; } .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, rgba(0, 0, 0, 0) 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: -0; margin-right: -0; } @media (orientation: landscape) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -0; margin-right: -0; } } @media screen and (min-width: 600px) and (max-width: 992px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -0; margin-right: -0; } } @media screen and (max-width: 599px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -0; margin-right: -0; } } a { display: inline-block; } html { scroll-behavior: smooth; } body { font-family: "Titillium Web"; } #menu-btn { width: 25px; position: absolute; right: 15px; top: 52px; z-index: 2; } @media (min-width: 992px) { #menu-btn { display: none; } } #menu-btn.on { top: 57px; z-index: 15; } #menu-btn .bar1, #menu-btn .bar2, #menu-btn .bar3 { width: 26px; height: 2px; background-color: #fff; margin: 4px 0; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } #menu-btn .bar1.change, #menu-btn .bar2.change, #menu-btn .bar3.change { background-color: #000000; } #menu-btn .bar1.change { -webkit-transform: rotate(-225deg) translate(1px, 0px); -ms-transform: rotate(-225deg) translate(1px, 0px); transform: rotate(-225deg) translate(1px, 0px); -webkit-animation-name: menuBtn; animation-name: menuBtn; -webkit-animation-duration: .4s; animation-duration: .4s; } #menu-btn .bar2.change { opacity: 0; } #menu-btn .bar3.change { -webkit-transform: rotate(45deg) translate(-8px, -8px); -ms-transform: rotate(225deg) translate(8px, 8px); transform: rotate(225deg) translate(8px, 8px); -webkit-animation-name: menuBtn; animation-name: menuBtn; -webkit-animation-duration: .4s; animation-duration: .4s; } #header__dropdown { height: 0; overflow: hidden; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; position: absolute; width: 100%; z-index: 9; } #header__dropdown.on { height: 100vh; background-color: #0000005c; } @media (min-width: 992px) { #header__dropdown { width: 85%; left: 7.5%; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: visible; height: 125px; margin: 50px auto 0; max-width: 1617px; border-bottom: 5px solid #223b87; } } @media (min-width: 1900px) { #header__dropdown { left: calc(50% - 808.5px); } } #header__dropdown .header__dropdown--logo { background: white; position: relative; } @media (min-width: 992px) { #header__dropdown .header__dropdown--logo { width: 25%; } } #header__dropdown .header__dropdown--logo img { width: 50%; padding: 35px 0 15px; display: block; margin: 0 auto; max-width: 285px; } @media (min-width: 992px) { #header__dropdown .header__dropdown--logo img { width: 85%; margin-left: 15px; max-width: 220px; min-width: 183px; } } #header__dropdown .header__dropdown--list { text-align: center; font-family: "Titillium Web"; color: #404040; font-size: 16px; background-color: #fff; } @media (min-width: 992px) { #header__dropdown .header__dropdown--list { width: 90%; } } @media (min-width: 1400px) { #header__dropdown .header__dropdown--list { width: 75%; } } #header__dropdown .header__dropdown--list ul { list-style: none; padding: 15px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0; } @media (min-width: 992px) { #header__dropdown .header__dropdown--list ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 46px 0 0; margin-right: 0; margin-left: auto; font-weight: 600; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } @media (min-width: 1400px) { #header__dropdown .header__dropdown--list ul { margin-right: 170px; } } #header__dropdown .header__dropdown--list ul li { position: relative; padding: 15px 0; border: 1px solid #fff; text-transform: uppercase; transition-duration: .5s } @media (min-width: 992px) { #header__dropdown .header__dropdown--list ul li { padding: 5px; margin: 25px 20px 0 0; white-space: pre; } } #header__dropdown .header__dropdown--list ul li:hover { border: 1px solid #233b86; } #header__dropdown .header__dropdown--list ul a { text-decoration: none; color: #404040; } #header__dropdown .header__dropdown--list ul #offer { list-style: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 15px 0; background: white; transition-duration: .5s; position: relative; text-transform: uppercase; } #header__dropdown .header__dropdown--list ul #offer:hover { border: 1px solid #233b86; } @media (min-width: 992px) { #header__dropdown .header__dropdown--list ul #offer { text-align: left; padding: 5px; margin: 25px 20px 0 0; border: 1px solid #fff; } } #header__dropdown .header__dropdown--list ul #offer div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 992px) { #header__dropdown .header__dropdown--list ul #offer div { position: absolute; z-index: 15; left: -172px; top: 40px; text-align: right; } } @media (min-width: 992px) { #header__dropdown .header__dropdown--list ul #offer li { z-index: 16; background: #233b86; padding: 5px 20px; width: 200px; margin: 0; border: 0; } } #header__dropdown .header__dropdown--list ul #offer li:before { content: ''; width: 100%; height: 1px; display: block; position: absolute; background: #304c9e; top: 45px; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; left: 0; } @media (max-width: 991px) { #header__dropdown .header__dropdown--list ul #offer li:before { top: 45px; } } #header__dropdown .header__dropdown--list ul #offer li:after { content: ''; width: 0; height: 2px; display: block; position: absolute; background: #304c9e; top: 44px; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; left: 0; } @media (min-width: 992px) { #header__dropdown .header__dropdown--list ul #offer li:after { top: 24px; } } #header__dropdown .header__dropdown--list ul #offer li:hover:after { content: ''; width: 100%; background: #fff; } #header__dropdown .header__dropdown--list ul #offer.on { background: #233b86; color: #fff; } @media (max-width: 991px) { #header__dropdown .header__dropdown--list ul #offer.on { padding-bottom: 0; } } @media (min-width: 992px) { #header__dropdown .header__dropdown--list ul #offer.on { color: #233b86; background: #fff; } } #header__dropdown .header__dropdown--list ul #offer.on a:first-child { padding-top: 15px; } @media (min-width: 992px) { #header__dropdown .header__dropdown--list ul #offer.on a:first-child { margin-top: 15px; padding-top: 30px; background: #233b86; } } @media (min-width: 992px) { #header__dropdown .header__dropdown--list ul #offer.on a:last-child { padding-bottom: 30px; background: #233b86; } } #header__dropdown .header__dropdown--list ul #offer.on a { height: 46px; color: #fff; } @media (min-width: 992px) { #header__dropdown .header__dropdown--list ul #offer.on a { height: 26px; } } #header__dropdown .header__dropdown--list ul #offer.on li { position: relative; border: 0; } #header__dropdown .header__dropdown--list ul #offer.on li:before { content: ''; height: 1px; display: block; position: absolute; background: #304c9e; top: 45px; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; } @media (min-width: 992px) { #header__dropdown .header__dropdown--list ul #offer.on li:before { top: 25px; } } #header__dropdown .header__dropdown--list ul #offer.on li:hover:before { content: ''; width: 100%; height: 1px; display: block; position: absolute; } #header__dropdown .header__dropdown--list ul #offer a { height: 0; overflow: hidden; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; } .button-red { background: #da251a; color: white; text-decoration: none; padding: 15px; border-radius: 5px; margin-top: 15px; font-size: 18px; } .button-red:hover i { -webkit-animation-name: flyingArrow; animation-name: flyingArrow; -webkit-animation-duration: 1s; animation-duration: 1s; } @media (min-width: 600px) { .button-red { width: 250px; text-transform: uppercase; font-weight: 700; } } @media (min-width: 992px) { .button-red { width: 195px; } } .button-blue { text-decoration: none; font-size: 12px; color: #133886; text-transform: uppercase; } .button-blue:hover i { -webkit-transform: translate3d(30px, 0px, 15px); transform: translate3d(30px, 0px, 15px); } .button-blue i { padding-left: 30px; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; font-size: 12px; } .body-stop { overflow: hidden; } div.btn { display: flex; flex-direction: column; justify-content: center; margin: 0 15px 0 15px; } .top-btn { position: fixed; left: 30px; bottom: 5px; z-index: 99999999; -webkit-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; } .top-btn a { font-size: 16px; color: #fff; margin: 15px auto auto 18px; padding: 15px; background: #da251a; border-radius: 30px; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; } .top-btn a:hover { background-color: #b1150cde; color: #f7e6e6; } @media (min-width: 992px) { .top-btn a { padding: 20px; } } #top { top: -50px; position: absolute; } body { max-width: 1800px; margin: 0 auto; } .homepage__about-us { height: 340px; } @media (min-width: 992px) { .homepage__about-us { height: 440px; } } @media (min-width: 1025px) { .homepage__about-us { min-height: 540px; height: auto; } } @media (min-width: 1200px) { .homepage__about-us { background-size: 100% 100%; } } .homepage__about-us .homepage__about-us--content { width: 75%; max-width: 400px; text-align: center; margin: 0 auto; } @media (min-width: 600px) { .homepage__about-us .homepage__about-us--content { max-width: 475px; text-align: left; } } @media (min-width: 992px) { .homepage__about-us .homepage__about-us--content { padding-top: 109px; margin-left: 20%; } } .homepage__about-us .homepage__about-us--content h2 { padding-top: 100px; margin: 0 auto 0 -7px; color: white; font-size: 48px; text-transform: uppercase; } @media (min-width: 600px) { .homepage__about-us .homepage__about-us--content h2 { font-size: 56px; } .homepage__about-us .homepage__about-us--content h2 span { position: relative; z-index: 1; } } @media (min-width: 992px) { .homepage__about-us .homepage__about-us--content h2 { position: relative; } } @media (min-width: 1025px) { .homepage__about-us .homepage__about-us--content h2 { font-size: 110px; position: relative; } } .homepage__about-us .homepage__about-us--content h2 img { position: absolute; top: 17px; left: 0; width: 130px; } @media (min-width: 450px) { .homepage__about-us .homepage__about-us--content h2 img { position: absolute; top: 17px; left: 0; width: 160px; } } @media (min-width: 600px) { .homepage__about-us .homepage__about-us--content h2 img { position: absolute; top: 90px; right: 110px; width: 160px; left: auto; z-index: 0; } } @media (min-width: 992px) { .homepage__about-us .homepage__about-us--content h2 img { top: 77px; right: -60px; width: 240px; } } @media (min-width: 1025px) { .homepage__about-us .homepage__about-us--content h2 img { top: 70px; right: -90px; } } @media (min-width: 992px) { .homepage__about-us .homepage__about-us--content .button-red { margin-top: 52px; } } .homepage__about-us .slider-content { background-size: cover; } .homepage__about-us .tns-outer { position: relative; overflow: hidden; } .homepage__about-us .tns-outer *:focus { outline: none; } .homepage__about-us .tns-outer .tns-nav { position: absolute; bottom: 70px; z-index: 2; } .homepage__about-us .tns-outer .tns-nav button { width: 16px; height: 16px; margin: 1px; background-color: #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 2px solid #fff; padding: 0; } .homepage__about-us .tns-outer .tns-controls { position: absolute; z-index: 1; width: 100%; display: flex; justify-content: space-between; background: none; border: 0; } .homepage__about-us .tns-outer .tns-controls:focus { outline: none; } .homepage__about-us .tns-outer .tns-controls button { background: none; border: 0; color: #ffffff; } .homepage__about-us .tns-outer .tns-controls button .btn-slider { width: 50px; height: 50px; cursor: pointer; background-image: url(../img/back.svg); -webkit-background-size: 100%; background-size: 100%; } @media (max-width: 599.98px) { .homepage__about-us .tns-outer .tns-controls { bottom: 64px; top: auto !important; } .homepage__about-us .tns-outer .tns-controls button .btn-slider { width: 30px; height: 30px; } } .homepage__about-us .tns-outer .tns-controls button .btn-slider.btn-next { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .homepage__about-us .tns-outer .tns-controls button:focus { outline: none; } .homepage__about-us .tns-outer .tns-nav button.tns-nav-active { background-color: #133886; } .homepage__info { background: url("../img/bg-mid.png") right; padding-bottom: 30px; } @media (min-width: 1200px) { .homepage__info { padding-bottom: 90px; background: url("../img/bg-mid.png") bottom left; } } @media (min-width: 800px) { .homepage__info .item-row { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (min-width: 1200px) { .homepage__info .item-row { width: 70%; margin: 0 auto; -ms-flex-pack: distribute; justify-content: space-around; } } .homepage__info .homepage__info--item { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 15px; } @media (min-width: 800px) { .homepage__info .homepage__info--item { width: 50%; margin: 15px; } } @media (min-width: 1200px) { .homepage__info .homepage__info--item { width: 43%; } } .homepage__info .homepage__info--item .img { margin-right: 30px; } .homepage__info .homepage__info--item .img img { position: relative; top: calc(50% - 22px); max-width: 60px; } .homepage__info .homepage__info--item .info h2 { font-size: 31px; padding-bottom: 15px; margin: 15px 0; color: #414141; text-transform: uppercase; position: relative; } .homepage__info .homepage__info--item .info h2:before { content: ''; height: 4px; width: 75px; background-color: #133886; display: block; position: absolute; bottom: 0; } .homepage__info .homepage__info--item .info h2 a { text-decoration: none; color: #414141; } .homepage__info .homepage__info--item .info p { margin: 0 0 15px; font-size: 16px; line-height: 25px; color: #333333; } @media (min-width: 800px) { .homepage__info .homepage__info--item .info p { min-height: 129px; } } @media (min-width: 992px) { .homepage__info .homepage__info--item .info p { min-height: 120px; } .contact__home { display: flex; } .contact__home .homepage__contact { width: 50%; overflow: hidden; } } @media (min-width: 1600px) { .homepage__info .homepage__info--item .info p { min-height: 100px; } } @media (min-width: 992px) and (max-width: 1199px) { .contact__home .homepage__contact { flex-direction: column; } .contact__home .homepage__contact .btn .button-red { margin: 0 auto; display: flex; align-items: center; justify-content: space-around; padding: 15px; } } @media (max-width: 1024px) { .contact__home .homepage__contact { height: 100%; } .contact__home .homepage__contact .btn .button-red { display: flex; align-items: center; justify-content: space-around; } } .homepage__contact { background: url("../img/bg-contact.png") no-repeat; padding-bottom: 15px; background-size: cover; } @media (min-width: 600px) { .homepage__contact { display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; } } @media (min-width: 800px) { .homepage__contact { width: 90%; margin: 0 auto; } } @media (max-width: 599px) { .homepage__contact .homepage__contact--info { text-align: center; } } @media (min-width: 992px) { .homepage__contact .homepage__contact--info { padding: 15px 0; } } @media (max-width: 1024px) { .homepage__contact .homepage__contact--info { padding: 0; } } .homepage__contact .homepage__contact--info h2 { padding: 15px 15px 0; color: #fff; font-size: 22px; margin: 0; } .homepage__contact .homepage__contact--info h2 br { display: none; } @media (min-width: 992px) { .homepage__contact .homepage__contact--info h2 { margin: 0 0 0 15px; } } @media (max-width: 1024px) { .homepage__contact .homepage__contact--info h2 { font-size: 22px; } } @media (min-width: 1025px) { .homepage__contact .homepage__contact--info h2 { padding: 0 15px; } } @media (min-width: 1200px) { .homepage__contact .homepage__contact--info h2 { font-size: 1.6vw; } } @media (min-width: 1380px) { .homepage__contact .homepage__contact--info h2 { font-size: 1.4vw; } } @media (min-width: 1800px) { .homepage__contact .homepage__contact--info h2 { font-size: 30px; } } .homepage__contact .homepage__contact--info p { margin: 5px 35px 5px 15px; font-size: 12px; color: #fff; padding-bottom: 10px; } .homepage__contact .homepage__contact--info a { color: #fff; text-decoration: none; text-transform: uppercase } @media (min-width: 992px) { .homepage__contact .homepage__contact--info p { line-height: 20px; padding: 0 15px; } } @media (min-width: 1200px) { .homepage__contact .homepage__contact--info p { font-size: 1vw; } } @media (min-width: 1800px) { .homepage__contact .homepage__contact--info p { font-size: 16px; } } .homepage__contact .button-red { max-height: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: space-around; margin-right: 15px; margin-left: auto; } @media (max-width: 599px) { .homepage__contact .button-red { width: 30%; margin: 0 auto; } } @media (min-width: 600px) and (max-width: 991px) { .homepage__contact .button-red { margin: 0 auto; } } @media (min-width: 992px) { .homepage__contact .button-red { max-height: 18px; } } @media (min-width: 800px) { .homepage__faq { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 30px; } } @media (min-width: 992px) { .homepage__faq { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; padding-top: 60px; } } @media (min-width: 1200px) { .padding { display: flex; padding: 0 10px; } .homepage__faq { width: 64%; } } @media (min-width: 1400px) { .padding { padding: 0 50px; } } @media (min-width: 992px) { .homepage__faq .homepage__faq--img { width: 34%; } } .homepage__faq .homepage__faq--img img { width: 90%; max-width: 412px; display: block; margin: 30px auto; } @media (min-width: 800px) { .homepage__faq .homepage__faq--img img { width: 100%; height: 100%; max-width: 320px; margin: 0; } } .homepage__faq .homepage__faq--content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } @media (min-width: 800px) { .homepage__faq .homepage__faq--content { width: 55%; } } @media (min-width: 929px) { .homepage__faq .homepage__faq--content { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: 66%; margin-left: 30px; } } @media (max-width: 449px) { .homepage__faq .homepage__faq--content .button-blue { font-size: 11px; } } @media (min-width: 992px) { .homepage__faq .homepage__faq--content .button-blue { min-width: 189px; } } .homepage__faq .homepage__faq--content .homepage__faq--info { width: 45%; max-width: 240px; } @media (max-width: 991px) { .homepage__faq .homepage__faq--content .homepage__faq--info { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media (min-width: 800px) { .homepage__faq .homepage__faq--content .homepage__faq--info { width: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 30px; } } @media (min-width: 992px) { .homepage__faq .homepage__faq--content .homepage__faq--info { width: 50%; max-width: none; margin: 0; } } .homepage__faq .homepage__faq--content .homepage__faq--info h2 { font-size: 25px; padding-bottom: 15px; margin: 15px 0; text-transform: uppercase; max-width: 144px; line-height: 30px; } .homepage__faq .homepage__faq--content .homepage__faq--info h2 a { text-decoration: none; color: #414141; } @media (min-width: 991px) { .homepage__faq .homepage__faq--content .homepage__faq--info h2 { width: 100%; max-width: 170px; font-size: 31px; } } .homepage__faq .homepage__faq--content .homepage__faq--info p { margin: 0 0 15px; font-size: 14px; color: #616161; max-width: 144px; line-height: 25px; } .homepage__faq .homepage__faq--content .homepage__faq--certificate { margin-left: 5px; width: 45%; max-width: 240px; } @media (max-width: 991px) { .homepage__faq .homepage__faq--content .homepage__faq--certificate { text-align: center; } } @media (min-width: 800px) { .homepage__faq .homepage__faq--content .homepage__faq--certificate { width: auto; margin-top: 55px; margin-left: 20px; } } @media (min-width: 992px) { .homepage__faq .homepage__faq--content .homepage__faq--certificate { width: 50%; max-width: none; margin: 0; } } .homepage__faq .homepage__faq--content .homepage__faq--certificate img { height: 68px; width: 60px; } .homepage__faq .homepage__faq--content .homepage__faq--certificate h2 { font-size: 25px; padding-bottom: 15px; margin: 15px 0; color: #414141; text-transform: uppercase; line-height: 30px; } .homepage__faq .homepage__faq--content .homepage__faq--certificate h2 a { text-decoration: none; color: #414141; } @media (min-width: 991px) { .homepage__faq .homepage__faq--content .homepage__faq--certificate h2 { width: 100%; max-width: 170px; font-size: 31px; margin-top: 29px; } } .homepage__faq .homepage__faq--content .homepage__faq--certificate p { margin: 0; font-size: 14px; line-height: 25px; color: #616161; max-width: 144px; min-height: 88px; } @media (max-width: 991px) { .homepage__faq .homepage__faq--content .homepage__faq--certificate p { margin: 0 0 15px; width: 100%; max-width: none; max-height: none; } } @media (min-width: 600px) and (max-width: 991px) { .homepage__contact .padding { margin: 0 auto; } } @media (min-width: 992px) { .subpage { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto; width: 80%; } } .subpage .subpage__header-bg { height: 150px; background-size: cover; background: url(../img/bg-top.png) bottom right; } @media (min-width: 992px) { .subpage .subpage__header-bg { height: 225px; position: absolute; top: 0; width: 100%; left: 0; background: url(../img/bg-top.png) no-repeat bottom; background-size: 100%; } } .subpage .subpage__about-us { text-align: left; } @media (min-width: 992px) { .subpage .subpage__about-us { margin-top: 240px; width: 62.5%; text-align: left; } } .subpage .subpage__about-us .cards { max-width: 1200px; display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .subpage .subpage__about-us .card { padding: 1rem; } .subpage .subpage__about-us .card h2 { font-size: 36px; color: #133886; font-weight: 800; margin: 40px 0 0 0; padding-bottom: 0; position: unset; } .subpage .subpage__about-us .card h3 { font-size: 36px; color: #133886; font-weight: 800; margin: 10px 0 20px 0; padding-bottom: 0; position: unset; } .subpage .subpage__about-us .card h2:before { content: none; } .subpage .subpage__about-us .card a { color: #133886; text-decoration: none; } .subpage .subpage__about-us .card p { margin: 0; font-size: 16px; color: #616161; line-height: 30px; } .subpage .subpage__about-us .card .news_pic { width: 100%; overflow: hidden; float: left; height: auto; max-height: 200px; padding: 0; margin: 0 0 30px 0; } .subpage .subpage__about-us .card .news_pic img { width: 100%; } .subpage .subpage__about-us .button-red { color: #fff !important; text-decoration: none; max-height: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: space-around; } .subpage .subpage__about-us h2 { font-size: 36px; padding-bottom: 15px; margin: 35px 15px 35px 15px; color: #414141; text-transform: uppercase; position: relative; text-align: left; } .subpage .subpage__about-us h2:before { content: ''; height: 4px; width: 75px; background-color: #133886; display: block; position: absolute; bottom: 0; border-radius: 5px; /*left: calc(50% - 32.5px);*/ } @media (min-width: 992px) { .subpage .subpage__about-us h2 { margin: 100px 0 35px 15px; } .subpage .subpage__about-us h2:before { left: 0; } } .subpage .subpage__about-us ul li { line-height: 30px; color: #616161; } .subpage .subpage__about-us ol li { line-height: 30px; color: #616161; } .subpage .subpage__about-us p { margin: 15px 15px 35px; font-size: 16px; color: #616161; line-height: 30px; } .subpage .subpage__about-us a { color: #133886; font-weight: 800; text-decoration: underline; } @media (min-width: 992px) { .subpage .subpage__sidebar { display: -webkit-box; display: -ms-flexbox; display: flex; width: 34.5%; margin-top: 400px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .subpage .subpage__sidebar .subpage__sidebar--item { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 30px auto; width: 50%; } @media (min-width: 992px) { .subpage .subpage__sidebar .subpage__sidebar--item { width: 100%; } } .subpage .subpage__sidebar .subpage__sidebar--item .img { width: 20%; margin-right: 15px; max-width: 70px; } @media (min-width: 992px) { .subpage .subpage__sidebar .subpage__sidebar--item .img { margin-right: 25px; } } .subpage .subpage__sidebar .subpage__sidebar--item .img img { width: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; height: 100%; max-width: 60px; } @media (min-width: 992px) { .subpage .subpage__sidebar .subpage__sidebar--item .img img { width: 60px; } } .subpage .subpage__sidebar .subpage__sidebar--item .info h2 { font-size: 24px; padding-bottom: 15px; color: #414141; text-transform: uppercase; position: relative; margin: 0 0 15px; } @media (min-width: 992px) { .subpage .subpage__sidebar .subpage__sidebar--item .info h2 { font-size: 36px; width: 200px; margin-bottom: 5px; } } .subpage .subpage__sidebar .subpage__sidebar--item .info h2:before { content: ''; height: 4px; width: 75px; background-color: #133886; display: block; position: absolute; bottom: 0; border-radius: 5px; } .subpage .subpage__sidebar .subpage__sidebar--item .info h2 a { text-decoration: none; color: #414141; } .subpage .subpage__sidebar .subpage__sidebar--item .info a { min-width: 189px; } footer { text-align: center; padding: 50px 0; border-top: 1px solid #ebebeb; margin-top: 15px; } @media (min-width: 800px) { footer { text-align: left; margin: 0 15px; } } @media (min-width: 1200px) { footer { padding: 0; border: 0; margin: 0; background: url("../img/dots.png") no-repeat bottom left; background-size: 75%; } } footer .footer { color: #333333; } @media (min-width: 800px) { footer .footer { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (min-width: 1200px) { footer .footer { width: 64%; margin: 0 auto; border-top: 1px solid #ebebeb; padding: 50px 0; } } @media (min-width: 992px) { footer .footer--left { display: -webkit-box; display: -ms-flexbox; display: flex; } } footer .footer--left img { max-width: 150px; margin: 0 auto; display: block; } @media (min-width: 992px) { footer .footer--left img { margin: 25px 47px 0 0; max-width: 115px; } } footer .footer--left p { font-size: 12px; } footer .footer--mid { display: -webkit-box; display: -ms-flexbox; display: flex; width: 190px; text-align: right; margin: 0 auto; font-size: 12px; } @media (min-width: 800px) { footer .footer--mid { margin-top: 25px; } } @media (min-width: 992px) { footer .footer--mid { width: 300px; } } footer .footer--mid img { margin-left: 15px; -o-object-fit: contain; object-fit: contain; max-width: 63px; } @media (min-width: 800px) { footer .footer--mid img { -o-object-position: top; object-position: top; } } @media (min-width: 800px) { footer .footer--right { margin-top: 25px; } } footer .footer--right p { font-size: 12px; } @media (min-width: 800px) { footer .footer--right p { text-align: right; } } @media (min-width: 992px) { footer .footer--right p { margin: 0; } } footer .footer--right a { text-decoration: none; font-size: 40px; color: #828282; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; min-width: 273px; font-weight: 700; } footer .footer--right a:hover { color: #223b87; } footer .footer--right a span { font-size: 20px; font-weight: 400; } .maxw { width: 100% !important; } .cookies { position: fixed; max-width: 1760px; width: calc(100% - 40px); background-color: #ffffff; border: 5px solid #223b87; padding: 15px; z-index: 999999999; display: none; } .cookies .btn-cookies { background: none; border: 0; cursor: pointer; height: 26px; width: 26px; transition-duration: .5s; position: relative; } .cookies-alert { display: flex; align-items: center; justify-content: space-between; } .cookies-alert p { margin-right: 15px; } @media (max-width: 599px) { .cookies-alert { flex-direction: column; justify-content: space-around; } .cookies-alert p { text-align: center; } } .cookies .btn-cookies:after { top: -1px; right: 12px; width: 0; content: ""; height: 30px; display: block; position: absolute; border-right: 1px solid #223b87; } .cookies .btn-cookies:before { top: -1px; right: 12px; width: 0; content: ""; height: 30px; display: block; position: absolute; border-right: 1px solid #223b87; } .cookies .btn-cookies:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .cookies .btn-cookies:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .table { padding: 0 20px; overflow-x: auto; } .table table { border-collapse: collapse; background: white; overflow: scroll; width: 100%; margin: 0 auto; position: relative; max-width: 1170px; border-radius: 0; border: 1px solid #f5f5f5; min-width: 547px; /*th{ text-align: left; } td{ text-align: left; padding: 15px 15px 15px 0; } th:nth-child(4), th:nth-child(5), th:nth-child(6),td:nth-child(4), td:nth-child(5), td:nth-child(6){ text-align: right; }*/ } .table table tbody tr.title { display: flex; background-color: #212529; color: white; font-size: 18px; cursor: initial; } .table table tbody tr.title:hover { background-color: #212529; } .table table tbody tr.title th:nth-child(1) { width: 100%; padding: 0 0 0 20px; } .table table tbody tr.title th:nth-child(2) { width: 100%; padding: 0 0 0 20px; } .table table tbody tr.title th:nth-child(3) { width: 100%; padding: 0 0 0 20px; } .table table tbody tr.title th:nth-child(4) { width: 100%; padding: 0 0 0 20px; } .table table tbody tr.title th:nth-child(5) { width: 100%; padding: 0 0 0 20px; } .table table tbody tr.title th:nth-child(6) { width: 100%; padding: 0 0 0 20px; } .table table tbody tr { display: flex; text-align: left; padding: 25px 0; color: #808080; transition-duration: .5s; cursor: pointer; flex-direction: row; border-right: 1px solid #f5f5f5; border-left: 1px solid #f5f5f5; } .table table tbody tr:hover { background-color: #f5f5f5; } .table table tbody tr:nth-child(even) { background-color: #f5f5f5; } .table table tbody tr:last-child { border-bottom: 1px solid #f5f5f5; } .table table tbody tr td { padding: 15px 15px 15px 40%; position: relative; padding: 15px; } .table table tbody tr td:nth-child(1) { width: 100%; padding: 0 0 0 20px; } .table table tbody tr td:nth-child(2) { width: 100%; padding: 0 0 0 20px; } .table table tbody tr td:nth-child(3) { width: 100%; padding: 0 0 0 20px; } .table table tbody tr td:nth-child(4) { width: 100%; padding: 0 0 0 20px; } .table table tbody tr td:nth-child(5) { width: 100%; padding: 0 0 0 20px; } .table table tbody tr td:nth-child(6) { width: 100%; padding: 0 0 0 20px; text-align: right; } .table table tbody tr td:before { display: none !important; } @keyframes menuBtn { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes flyingArrow { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; } 25% { -webkit-transform: translate(40px, 0px); transform: translate(40px, 0px); opacity: 0; } 50% { -webkit-transform: translate(-221px, 0px); transform: translate(-221px, 0px); opacity: 0; } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; } } @keyframes flyingArrow { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; } 25% { -webkit-transform: translate(40px, 0px); transform: translate(40px, 0px); opacity: 0; } 50% { -webkit-transform: translate(-221px, 0px); transform: translate(-221px, 0px); opacity: 0; } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; } }