@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Raleway:400,500,600,800,900&subset=latin-ext"); @import url("https://fonts.googleapis.com/css?family=Raleway:400,500,600,800,900&subset=latin-ext"); @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600i"); .color-primary-gradient, button, input[type="submit"], input[type="button"], a.button, nav .logo, .mobile-notification span.new, .infographic .middle, #polygonAnimation .beat > div { background-image: -o-linear-gradient(180deg, #FF2646, #da0647); background-image: -moz-linear-gradient(180deg, #FF2646, #da0647); background-image: -webkit-linear-gradient(180deg, #FF2646, #da0647); background-image: linear-gradient(180deg, #FF2646, #da0647); } .color-seconday-gradient, footer, .particle-network-animation { background-image: -o-linear-gradient(90deg, #234f7e, #042C58); background-image: -moz-linear-gradient(90deg, #234f7e, #042C58); background-image: -webkit-linear-gradient(90deg, #234f7e, #042C58); background-image: linear-gradient(90deg, #234f7e, #042C58); } /** * @name Functions API * This are all the API functions that are exposed by gridle. */ /** * Get states count * @return {Integer} The number of states defined * @author Olivier Bossel */ /** * Get the current state map * @return {Map} The current state map * @author Olivier Bossel */ /** * Get the current state name * @return {String} The current state name * @author Olivier Bossel */ /** * Get the column width in percent for the global or a specific context * * @param {Integer} [$columns=1] The number of columns to calculate * @param {Integer} [$stateMap-or-stateName=current] The state to calculate the column width for * @return {Percent} The width in percent * @author Olivier Bossel */ /* * Get a state map * * @param {String|Map} [$state=current] The name or map of the state to get * @return {Map} A state map object * @author Olivier Bossel */ /** * Check if a state exist : * @param {String} $name The name of the state to check * @return {Boolean} true if exist * @author Olivier Bossel */ /** * Get a state variable * * @param {String} $varName The variable name * @param {String} [$stateMap-or-stateName=current] The state name or a map state value * @return {Mixed} The finded value */ /** * Set a variable in a state * @param {String} $var Variable name to assign * @param {Mixed} $newValue The new value to assign * @param {String} [$state=current] The state to apply the variable for * @return {List} The states list (full) * @author Olivier Bossel */ /** * get the registered gridle states * @return {Map} All the registered states * @author Olivier Bossel */ /** * get the registered gridle states names * @return {List} All the registered states names * @author Olivier Bossel */ /** * Get the register columns map * @param {String|List} [$state=current] The state name or map * @return {Map} The map of registered columns for the specified state * @author Olivier Bossel */ /** * Will return the generated selector depending on the "package" wanted, the state and some optional values that might be needed by the package (like for row-align that need a "side" value) * @param {String} $package The package to generate the selector for (see _settings.scss file) * @param {String|List */ /** * Return the current used driver * @return {String} The used driver like default or driver * @author Olivier Bossel */ /** * Check if the used driver is the specified one * @param {String} $driver The driver to check * @return {Boolean} True if is the current driver * @author Olivier Bossel */ /** * Get the media query for a particular state, or width, etc... * * @param {Mixed} [$stateName-or-stateMap=current] The state name of the min width * @return {String} The media query string without the @media */ /** * @name Setting mixins * This are all the mixins that are exposed by gridle for the setting up your grid. */ /** * Setting up your grid * @param {Map} $settings Your default grid settings * @example scss * // default settings * $_gridle-settings : ( * name : default, * min-width : null, * max-width : null, * query : null, * classes : true, * context : 12, * column-width : null, * gutter-width : 20px, * gutter-height : 0, * gutter-top : 0, * gutter-right : 10px, * gutter-bottom : 0, * gutter-left : 10px, * direction : ltr, * dir-attribute : false, * name-multiplicator : 1, * states-classes : false, * classes-prefix : null * ); * * // setting up your grid * \@include g-setup(( * context : 12 * // other settings * )); * * @author Olivier Bossel */ /** * Register a new state with some settings * @param {String} $name The new state name * @param {Map} $settings The state settings * @example scss * \@include g-register-state(mobile, ( * max-width : 600px * )); * * @author Olivier Bossel */ /** * Register some clear each that will been generated in classes * @param {Integer} $count The n each item to clear * @param {String} $what What to clear (left, right, both) * @example scss * \@include g-register-clear-each(2, left); * * @author Olivier Bossel */ /** * Register a new custom column in case the generated ones are not enough. * This is useful when you have a 12 columns grid and you need some 1/5 ones. * @param {String} $name The column name * @param {Integer} $columns The column width * @param {Integer} $context The context on which to calculate the column width * * @example scss * \@include g-register-column(1on5, 1, 5); * * @author Olivier Bossel */ /** * Set a pattern for a specified package used to generate the classnames * @param {String} $package The package name to specify the pattern for * @param {List} $pattern The new classname pattern * * @example scss * \@include g-set-classname-map(grid, ('grid','-','%count','@','%state')); * * @author Olivier Bossel */ /** * Set a generic selector for a specific package. This generic selector will be used to target some elements like [class*="gr-"]. * If not specified for a package, the generic selector will be generated automatically but sometimes it's better to hardcode it. * @param {String} $package The package to specify the generic selector for * @param {String} $selector The generic selector like [class*="gr-"], or whatever... * @example scss * \@include g-set-generic-selector(grid, '[class*="gr-"]'); * * @author Olivier Bossel */ /** * Register some basics states: * * - mobile : 0 to 480px * - tablet : 481px to 1024px * * @example scss * \@include g-register-default-states(); * * @author Olivier Bossel */ /** * Register some basics mobile first states: * * - mobile : 320px to infinite * - tablet : 640px to infinite * - desktop : 992px to infinite * - large : 1200px to infinite * * @example scss * \@include g-register-mobile-first-states(); * * @author Olivier Bossel */ /** * Register bootstrap 3 states * * - xs : 0 to 750px * - sm : 750px to infinite * - md : 970px to infinite * - lg : 1170px to infinite * * @example scss * \@include g-register-bootstrap3-states(); * * @author Olivier Bossel */ /** * Register bootstrap 4 states * * - xs : 0 to 576px * - sm : 576px to infinite * - md : 970px to infinite * - lg : 1200px to infinite * * @example scss * \@include g-register-bootstrap4-states(); * * @author Olivier Bossel */ /** * @name Base API * This are all the base API mixins that are exposed by gridle. */ /** * Specify a layout using a single call like in the example bellow * @param {Map} $layout The map layout wanted * @param {Map|List|String} [$context=null] The context in which to apply the layout * @example scss * body { * \@include g-layout(( * '#header' : 12, * '#sidebar' : 4 mobile 12, * '#content' : 8 mobile 12, * '#footer' : 12 * )); * } * * @author Olivier Bossel */ /** * Apply some styling in a passed state * @param {Map|List|String} $states The states to apply the css for. Can be a state map, a list of states or a state name * @example scss * .my-cool-element { * // specify a register state name * \@include g-state(mobile) { * // your css code here... * } * // specify more than one register states * \@include g-state(mobile tablet) { * // your css code here... * } * // specify a min and max width * \@include g-state(200px, 500px) { * // your css code here... * } * // passing a state map (complexe usage) * \@include g-state(( * query : 'print only' * )) { * // your code here... * } * } * * @author Olivier Bossel */ /** * Apply some css depending on the element size (element queries) * **Using this mixin requires that you import the ```gridle-eq.js``` file into your javascript code** * @param {Number} $size The size to take care of. If negative, mean lower than, if positive, mean greater than. * @param {Boolean} [$height=false] Set to true to handle height instead of width * @example scss * .my-cool-element { * \@include g-eq(-400px) { * // your css that will be applied when element * // is between 0 and 399px wide * } * } * * @author Olivier Bossel */ /** * Basically, this is the same as the ```g-state``` mixin, with the difference that it will not print any media queries. It will just create a state context in which your inside code will refer. * @param {Map|List|String} $states The states to apply the css for. Can be a state map, a list of states or a state name * @example scss * @warn(g-get-state-var(min-width)); // will output the min-width of the default state * \@include g-state-context(mobile) { * @warn(g-get-state-var(min-width)); // will output the min-width of the mobile state * } * * @author Olivier Bossel */ /** * Will print the generated selector depending on the "package" wanted, the state and some optional values that might be needed by the package (like for row-align that need a "side" value) * @param {String} $package The package to generate the selector for (see _settings.scss file) * @param {String|List */ /** * Helper gridle mixin that let you specify the grid properties through ```g-set``` map, or a list of properties like "8 push 2 mobile 12 push 0" * @param {Map|List} $properties The grid properties to apply * @example scss * #content { * // using list * \@include gridle(8 mobile 12); * // using a map * \@include gridle(( * grid : 8, * mobile : ( * grid : 12 * ) * )); * } * * @author Olivier Bossel */ /** * Helper mixin that let you specify the grid properties through map formated like in the example bellow. * Here's the possible properties: * * - ```grid``` {Integer} : The grid column count * - ```container``` {Boolean} : Set the element as container * - ```grid-grow``` {Boolean} : Set the element a grid column that grow * - ```grid-adapt``` {Boolean} : Set the element a grid column that adapt * - ```grid-table``` {Boolean} : Set the element a grid column of type table * - ```push``` {Integer} : Set the push count * - ```pull``` {Integer} : Set the pull count * - ```prefix``` {Integer} : Set the prefix count * - ```suffix``` {Integer} : Set the suffix count * - ```clear-each``` {Integer} : Set the clear each count * - ```grid-centered``` {Boolean} : Set the grid column as centered * - ```row``` {Boolean} : Set the element as a grid row * - ```row-full``` {Boolean} : Set the element as a grid row full * - ```col``` {Boolean} : Set the element as a grid column (vertical) * - ```row-align``` {String} : Set the row alignement * - ```row-no-gutter``` {Boolean} : Remove the gutters on columns inside this row * - ```nowrap``` {Boolean} : Set a nowrap on the row * - ```wrap``` {Boolean} : Reset the wrap property on the row * - ```order``` {Integer} : Set the order of the column (flex driver) * - ```hide``` {Boolean} : Hide the element * - ```show``` {Boolean} : Show the element * - ```visible``` {Boolean} : Set the visibility of the element to visible * - ```not-visible``` {Boolean} : Set the visibility of the element to hidden * - ```invisible``` {Boolean} : Set the visibility of the element to hidden * - ```show-inline``` {Boolean} : Set the display of the element to inline-block * - ```float``` {String} : Set the specified float of the element * - ```clear``` {String} : Clear the specified float of the element * - ```no-gutter``` {Boolean|String|List} : Remove the specified gutters * - ```gutter``` {Boolean|String|List} : Apply the specified gutters * * @param {Map} $properties The grid map properties to apply * @example scss * #content { * // using a map * \@include gridle(( * grid : 8, * push : 2 * mobile : ( * grid : 12 * ), * {stateName} : {mapProperties} * )); * } * * @author Olivier Bossel */ /** * Set the push count for the column * @param {Integer} $columns The number of columns to push this column * @param {Integer} [$context=null] The context on which to calculate the push value. By default, it is the default context setted with ```g-setup```. * @example scss * .my-cool-column { * \@include g-push(2); * } * * @author Olivier Bossel */ /** * Set the pull count for the column * @param {Integer} $columns The number of columns to pull this column * @param {Integer} [$context=null] The context on which to calculate the pull value. By default, it is the default context setted with ```g-setup```. * @example scss * .my-cool-column { * \@include g-pull(2); * } * * @author Olivier Bossel */ /** * Set the prefix count for the column * @param {Integer} $columns The number of columns to prefix this column * @param {Integer} [$context=null] The context on which to calculate the prefix value. By default, it is the default context setted with ```g-setup```. * @example scss * .my-cool-column { * \@include g-prefix(2); * } * * @author Olivier Bossel */ /** * Set the suffix count for the column * @param {Integer} $columns The number of columns to suffix this column * @param {Integer} [$context=null] The context on which to calculate the suffix value. By default, it is the default context setted with ```g-setup```. * @example scss * .my-cool-column { * \@include g-suffix(2); * } * * @author Olivier Bossel */ /** * Display a debug grid on top of the row * @example scss * .my-row { * \@include g-row-debug(); * } * * @author Olivier Bossel */ /** * Make the element a grid container * @example scss * .my-cool-container { * \@include g-container(); * } * * @author Olivier Bossel */ /** * Remove the gutters on each columns inside the row * @param {String|List} [$sides=top right bottom left] The sides to clear * @example scss * .my-cool-row { * \@include g-row-no-gutter(left right); * } * * @author Olivier Bossel */ /** * Make a column centered * @example scss * .my-cool-column { * \@include g-grid-centered(); * } * * @author Olivier Bossel */ /** * Hide an element * @example scss * .my-cool-element { * \@include g-hide(); * } * * @author Olivier Bossel */ /** * Set the visibility of an element to hidden * @example scss * .my-cool-element { * \@include g-not-visible(); * } * * @author Olivier Bossel */ /** * Set the visibility of an element to hidden * @example scss * .my-cool-element { * \@include g-invisible(); * } * * @author Olivier Bossel */ /** * Set the display of an element to block * @example scss * .my-cool-element { * \@include g-show(); * } * * @author Olivier Bossel */ /** * Set the display of an element to inline-block * @example scss * .my-cool-element { * \@include g-show(); * } * * @author Olivier Bossel */ /** * Set the visibility of an element to visible * @example scss * .my-cool-element { * \@include g-show(); * } * * @author Olivier Bossel */ /** * Set the float property of the element to the specified direction * @param {String} [$float=left] The float direction to set * @example scss * .my-cool-element { * \@include g-float(right); * } * * @author Olivier Bossel */ /** * Clear the float property of the element to the specified direction * @param {String} [$float=left] The float direction to clear * @example scss * .my-cool-element { * \@include g-clear(right); * } * * @author Olivier Bossel */ /** * Remove the gutters on the column * @param {String|List} [$sides=top right bottom left] The sides to clear * @example scss * .my-cool-column { * \@include g-no-gutter(left right); * } * * @author Olivier Bossel */ /** * Set the gutters on the column * @param {String|List} [$sides=top right bottom left] The sides to apply gutters on * @example scss * .my-cool-column { * \@include g-gutter(left right); * } * * @author Olivier Bossel */ /** * @name Generate mixins * This are all the mixins that you can use to generate classes to use inside your HTML codebase */ /** * Generate a custom class for all the states * @param {List} $pattern The name pattern of the class * @param {List} [$statesNames=null] The states names to generate. If null or all, will generate the class for all registered states * @example scss * \@include g-generate-custom-class(('my','-','cool','-','class','-','%state')) { * color: pink; * padding: g-get-state-var(gutter-left); * } * * @author Olivier Bossel */ /** * Generate all the classes depending on the packages you have specified like: * - ```.container@{state}``` : default container * - ```.row@{state}``` : default row * - ```.row-align-{align}@{state}``` : default row-align * - ```.row-full@{state}``` : default row-full * - ```.row-debug@{state}``` : default row-debug * - ```.row-no-gutter@{state}``` : default row-no-gutter * - ```.nowrap@{state}``` : default nowrap * - ```.wrap@{state}``` : default wrap * - ```.col@{state}``` : default col * - ```.gr-{column}@{state}``` : default grid * - ```.gr-table@{state}``` : default gr-table * - ```.gr-grow@{state}``` : default gr-grow * - ```.gr-adapt@{state}``` : default gr-adapt * - ```.gr-centered@{state}``` : default gr-centered * - ```.push@{state}``` : default push * - ```.pull@{state}``` : default pull * - ```.prefix@{state}``` : default prefix * - ```.suffix@{state}``` : default suffix * - ```.hide@{state}``` : helpers hide * - ```.show@{state}``` : helpers show * - ```.show-inline@{state}``` : helpers show-inline * - ```.not-visible@{state}``` : helpers not-visible * - ```.visible@{state}``` : helpers visible * - ```.float-{%float}@{state}``` : helpers float * - ```.clear-{%float}@{state}``` : helpers clear * - ```.clear-each-{%count}@{state}``` : helpers clear-each * - ```.gutter-{%side}@{state}``` : helpers gutter * - ```.no-gutter-{%side}@{state}``` : helpers no-gutter * - ```.auto-height@{state}``` : helpers auto-height * - ```.order-{%column-count}@{state}``` : helpers order * * @param {String|List} [$states=all] The states to generate the classes for * @param {String|List} [$package=all] The packages to generate the classes for * @param {String} [$scope=null] A classname to scope the classes in * * @example scss * // generate all the classes * \@include g-classes(); * // generate only certain states * \@include g-classes(mobile tablet); * // generate only the helpers for all the states * \@include g-classes(all, helpers); * * @author Olivier Bossel */ /** * @name Default driver API * This are all the API mixins that are exposed by gridle for the flex driver. */ /** * Set the element as a row * @param {Boolean} [$reverse=false] Revert the columns order if true * @example scss * .my-cool-row { * \@include g-row(); * } * * @author Olivier Bossel */ /** * Set the element as a col * @param {Boolean} [$reverse=false] Revert the columns order if true * @example scss * .my-cool-col { * \@include g-col(); * } * * @author Olivier Bossel */ /** * Apply a nowrap on the element * @example scss * .my-cool-element { * \@include g-nowrap(); * } * * @author Olivier Bossel */ /** * Reset the nowrap on the element * @example scss * .my-cool-element { * \@include g-wrap(); * } * * @author Olivier Bossel */ /** * Apply a column width on the element * @param {Integer|String} $columns The column count to apply or a registered column name * @param {Integer} [$context=null] The context on which to calculate the column width. If null, take the context setted with ```g-setup``` * @example scss * .my-cool-column { * \@include g-grid(2); * } * * @author Olivier Bossel */ /** * Set the width of the row element to full viewport width * @example scss * .my-cool-row { * \@include g-row(); * \@include g-row-full(); * } * * @author Olivier Bossel */ /** * Set the width of the grid element to adapt to his content * @example scss * .my-cool-column { * \@include g-grid-adapt(); * // or * \@include g-grid(adapt); * } * * @author Olivier Bossel */ /** * Set the width of the grid element to grow depending on the place it has at disposal * @example scss * .my-cool-column { * \@include g-grid-grow(); * // or * \@include g-grid(grow); * } * * @author Olivier Bossel */ /** * Set the position that the column has to take inside the row to rearange the order * @example scss * .my-cool-column { * \@include g-grid(2); * \@include g-order(1); * } * * @author Olivier Bossel */ /** * Set the alignement of the columns inside the row using these alignement properties: * * - top : Align vertical top * - middle : Align vertical middle * - bottom : Align vertical bottom * - left : Align horizontal left * - center : Align horizontal center * - right : Align horizontal right * * @example scss * .my-cool-row { * \@include g-row-align(middle center); * \@include g-row-align(right); * \@include g-row-align(middle); * // etc... * } * * @author Olivier Bossel */ /** * @name default State * Here's the settings for the **default** state. * @styleguide Gridle / States * @display gridle-settings * @gridle-name default * @gridle-min-width * @gridle-max-width * @gridle-query * @gridle-classes true * @gridle-context 12 * @gridle-gutter-width 20px * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 10px * @gridle-gutter-bottom 0 * @gridle-gutter-left 10px * @gridle-direction ltr * @gridle-dir-attribute false * @gridle-name-multiplicator 1 * @gridle-states-classes false * @gridle-classes-prefix */ /** * @name mobile State * Here's the settings for the **mobile** state. * @styleguide Gridle / States * @display gridle-settings * @gridle-name mobile * @gridle-min-width * @gridle-max-width 760px * @gridle-query * @gridle-classes true * @gridle-context 12 * @gridle-gutter-width 20px * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 10px * @gridle-gutter-bottom 0 * @gridle-gutter-left 10px * @gridle-direction ltr * @gridle-dir-attribute false * @gridle-name-multiplicator 1 * @gridle-states-classes false * @gridle-classes-prefix */ /** * @name tablet State * Here's the settings for the **tablet** state. * @styleguide Gridle / States * @display gridle-settings * @gridle-name tablet * @gridle-min-width 760px * @gridle-max-width 1024px * @gridle-query * @gridle-classes true * @gridle-context 12 * @gridle-gutter-width 20px * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 10px * @gridle-gutter-bottom 0 * @gridle-gutter-left 10px * @gridle-direction ltr * @gridle-dir-attribute false * @gridle-name-multiplicator 1 * @gridle-states-classes false * @gridle-classes-prefix */ /** * @name 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 * @gridle-query (orientation : landscape) * @gridle-classes true * @gridle-context 12 * @gridle-gutter-width 20px * @gridle-gutter-height 0 * @gridle-gutter-top 0 * @gridle-gutter-right 10px * @gridle-gutter-bottom 0 * @gridle-gutter-left 10px * @gridle-direction ltr * @gridle-dir-attribute false * @gridle-name-multiplicator 1 * @gridle-states-classes false * @gridle-classes-prefix */ .inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; } @media screen and (min-width: 760px) and (max-width: 1024px) { .inner { max-width: 1180px; padding: 0 30px; } } @media screen and (max-width: 760px) { .inner { max-width: 1180px; padding: 0 20px; } } .container:after, header .inner:after { content: ""; display: table; clear: both; } .row, .row-reverse { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } .gr-0, .gr-1, .gr-2, .gr-3, .gr-4, .gr-5, .gr-6, .gr-7, .gr-8, .gr-9, .gr-10, .gr-11, .gr-12, footer .block, #usecase .item, #whitepaper .left, #whitepaper .right, #idea .headline { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; display: block; min-height: 1px; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } .gr-adapt { max-width: 100%; line-height: 1; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } .gr-grow { max-width: 100%; line-height: 1; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -moz-box-flex: 1; -moz-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } .push-0, .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12 { position: relative; } .pull-0, .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12 { position: relative; } .nowrap { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; white-space: nowrap; } .nowrap > * { white-space: normal; } .wrap { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; white-space: normal; } .gr-centered { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } @media screen and (max-width: 760px) { .container\@mobile:after { content: ""; display: table; clear: both; } } @media screen and (max-width: 760px) { .row\@mobile, .row-reverse\@mobile { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } } @media screen and (max-width: 760px) { .gr-0\@mobile, .gr-1\@mobile, .gr-2\@mobile, .gr-3\@mobile, .gr-4\@mobile, .gr-5\@mobile, .gr-6\@mobile, .gr-7\@mobile, .gr-8\@mobile, .gr-9\@mobile, .gr-10\@mobile, .gr-11\@mobile, .gr-12\@mobile, footer .block, #usecase .item, #whitepaper .right, #idea .right { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; display: block; min-height: 1px; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (max-width: 760px) { .gr-adapt\@mobile { max-width: 100%; line-height: 1; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (max-width: 760px) { .gr-grow\@mobile { max-width: 100%; line-height: 1; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -moz-box-flex: 1; -moz-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (max-width: 760px) { .push-0\@mobile, .push-1\@mobile, .push-2\@mobile, .push-3\@mobile, .push-4\@mobile, .push-5\@mobile, .push-6\@mobile, .push-7\@mobile, .push-8\@mobile, .push-9\@mobile, .push-10\@mobile, .push-11\@mobile, .push-12\@mobile { position: relative; } } @media screen and (max-width: 760px) { .pull-0\@mobile, .pull-1\@mobile, .pull-2\@mobile, .pull-3\@mobile, .pull-4\@mobile, .pull-5\@mobile, .pull-6\@mobile, .pull-7\@mobile, .pull-8\@mobile, .pull-9\@mobile, .pull-10\@mobile, .pull-11\@mobile, .pull-12\@mobile { position: relative; } } @media screen and (max-width: 760px) { .nowrap\@mobile { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; white-space: nowrap; } .nowrap\@mobile > * { white-space: normal; } } @media screen and (max-width: 760px) { .wrap\@mobile { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; white-space: normal; } } @media screen and (max-width: 760px) { .gr-centered\@mobile { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .container\@tablet:after { content: ""; display: table; clear: both; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .row\@tablet, .row-reverse\@tablet { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .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 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; display: block; min-height: 1px; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .gr-adapt\@tablet { max-width: 100%; line-height: 1; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .gr-grow\@tablet { max-width: 100%; line-height: 1; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -moz-box-flex: 1; -moz-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .push-0\@tablet, .push-1\@tablet, .push-2\@tablet, .push-3\@tablet, .push-4\@tablet, .push-5\@tablet, .push-6\@tablet, .push-7\@tablet, .push-8\@tablet, .push-9\@tablet, .push-10\@tablet, .push-11\@tablet, .push-12\@tablet { position: relative; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .pull-0\@tablet, .pull-1\@tablet, .pull-2\@tablet, .pull-3\@tablet, .pull-4\@tablet, .pull-5\@tablet, .pull-6\@tablet, .pull-7\@tablet, .pull-8\@tablet, .pull-9\@tablet, .pull-10\@tablet, .pull-11\@tablet, .pull-12\@tablet { position: relative; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .nowrap\@tablet { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; white-space: nowrap; } .nowrap\@tablet > * { white-space: normal; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .wrap\@tablet { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; white-space: normal; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .gr-centered\@tablet { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } } @media (orientation: landscape) { .container\@landscape:after { content: ""; display: table; clear: both; } } @media (orientation: landscape) { .row\@landscape, .row-reverse\@landscape { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } } @media (orientation: landscape) { .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 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; display: block; min-height: 1px; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media (orientation: landscape) { .gr-adapt\@landscape { max-width: 100%; line-height: 1; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media (orientation: landscape) { .gr-grow\@landscape { max-width: 100%; line-height: 1; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -moz-box-flex: 1; -moz-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px; padding-left: 10px; } } @media (orientation: landscape) { .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 { position: relative; } } @media (orientation: landscape) { .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 { position: relative; } } @media (orientation: landscape) { .nowrap\@landscape { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; white-space: nowrap; } .nowrap\@landscape > * { white-space: normal; } } @media (orientation: landscape) { .wrap\@landscape { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; white-space: normal; } } @media (orientation: landscape) { .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" : "12", "column-width" : null, "gutter-width" : "20px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "10px", "gutter-bottom" : "0", "gutter-left" : "10px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "mobile":{ "name" : "mobile", "min-width" : null, "max-width" : "760px", "query" : "screen and (max-width: 760px)", "classes" : true, "context" : "12", "column-width" : null, "gutter-width" : "20px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "10px", "gutter-bottom" : "0", "gutter-left" : "10px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "tablet":{ "name" : "tablet", "min-width" : "760px", "max-width" : "1024px", "query" : "screen and (min-width: 760px) and (max-width: 1024px)", "classes" : true, "context" : "12", "column-width" : null, "gutter-width" : "20px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "10px", "gutter-bottom" : "0", "gutter-left" : "10px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }, "landscape":{ "name" : "landscape", "min-width" : null, "max-width" : null, "query" : "(orientation : landscape)", "classes" : true, "context" : "12", "column-width" : null, "gutter-width" : "20px", "gutter-height" : "0", "gutter-top" : "0", "gutter-right" : "10px", "gutter-bottom" : "0", "gutter-left" : "10px", "direction" : "ltr", "dir-attribute" : false, "name-multiplicator" : "1", "states-classes" : false, "classes-prefix" : null, "_" : true }} }'; } /** * @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-0 { -webkit-flex-basis: 0%; -moz-flex-basis: 0%; -ms-flex-preferred-size: 0%; flex-basis: 0%; max-width: 0%; } .push-0 { left: 0%; right: auto; } .pull-0 { right: 0%; left: auto; } .prefix-0 { margin-left: 0%; } .suffix-0 { margin-right: 0%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -moz-order: 0; -ms-flex-order: 0; order: 0; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-1 { -webkit-flex-basis: 8.3333333333%; -moz-flex-basis: 8.3333333333%; -ms-flex-preferred-size: 8.3333333333%; flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .push-1 { left: 8.3333333333%; right: auto; } .pull-1 { right: 8.3333333333%; left: auto; } .prefix-1 { margin-left: 8.3333333333%; } .suffix-1 { margin-right: 8.3333333333%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-2 { -webkit-flex-basis: 16.6666666667%; -moz-flex-basis: 16.6666666667%; -ms-flex-preferred-size: 16.6666666667%; flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .push-2 { left: 16.6666666667%; right: auto; } .pull-2 { right: 16.6666666667%; left: auto; } .prefix-2 { margin-left: 16.6666666667%; } .suffix-2 { margin-right: 16.6666666667%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-3 { -webkit-flex-basis: 25%; -moz-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .push-3 { left: 25%; right: auto; } .pull-3 { right: 25%; left: auto; } .prefix-3 { margin-left: 25%; } .suffix-3 { margin-right: 25%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-4 { -webkit-flex-basis: 33.3333333333%; -moz-flex-basis: 33.3333333333%; -ms-flex-preferred-size: 33.3333333333%; flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .push-4 { left: 33.3333333333%; right: auto; } .pull-4 { right: 33.3333333333%; left: auto; } .prefix-4 { margin-left: 33.3333333333%; } .suffix-4 { margin-right: 33.3333333333%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-order: 4; -ms-flex-order: 4; order: 4; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-5 { -webkit-flex-basis: 41.6666666667%; -moz-flex-basis: 41.6666666667%; -ms-flex-preferred-size: 41.6666666667%; flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .push-5 { left: 41.6666666667%; right: auto; } .pull-5 { right: 41.6666666667%; left: auto; } .prefix-5 { margin-left: 41.6666666667%; } .suffix-5 { margin-right: 41.6666666667%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-order: 5; -ms-flex-order: 5; order: 5; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-6 { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .push-6 { left: 50%; right: auto; } .pull-6 { right: 50%; left: auto; } .prefix-6 { margin-left: 50%; } .suffix-6 { margin-right: 50%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -moz-order: 6; -ms-flex-order: 6; order: 6; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-7 { -webkit-flex-basis: 58.3333333333%; -moz-flex-basis: 58.3333333333%; -ms-flex-preferred-size: 58.3333333333%; flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .push-7 { left: 58.3333333333%; right: auto; } .pull-7 { right: 58.3333333333%; left: auto; } .prefix-7 { margin-left: 58.3333333333%; } .suffix-7 { margin-right: 58.3333333333%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-order: 7; -ms-flex-order: 7; order: 7; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-8 { -webkit-flex-basis: 66.6666666667%; -moz-flex-basis: 66.6666666667%; -ms-flex-preferred-size: 66.6666666667%; flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .push-8 { left: 66.6666666667%; right: auto; } .pull-8 { right: 66.6666666667%; left: auto; } .prefix-8 { margin-left: 66.6666666667%; } .suffix-8 { margin-right: 66.6666666667%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-order: 8; -ms-flex-order: 8; order: 8; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-9 { -webkit-flex-basis: 75%; -moz-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .push-9 { left: 75%; right: auto; } .pull-9 { right: 75%; left: auto; } .prefix-9 { margin-left: 75%; } .suffix-9 { margin-right: 75%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -moz-order: 9; -ms-flex-order: 9; order: 9; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-10 { -webkit-flex-basis: 83.3333333333%; -moz-flex-basis: 83.3333333333%; -ms-flex-preferred-size: 83.3333333333%; flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .push-10 { left: 83.3333333333%; right: auto; } .pull-10 { right: 83.3333333333%; left: auto; } .prefix-10 { margin-left: 83.3333333333%; } .suffix-10 { margin-right: 83.3333333333%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-order: 10; -ms-flex-order: 10; order: 10; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-11 { -webkit-flex-basis: 91.6666666667%; -moz-flex-basis: 91.6666666667%; -ms-flex-preferred-size: 91.6666666667%; flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .push-11 { left: 91.6666666667%; right: auto; } .pull-11 { right: 91.6666666667%; left: auto; } .prefix-11 { margin-left: 91.6666666667%; } .suffix-11 { margin-right: 91.6666666667%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -moz-order: 11; -ms-flex-order: 11; order: 11; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-12 { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .push-12 { left: 100%; right: auto; } .pull-12 { right: 100%; left: auto; } .prefix-12 { margin-left: 100%; } .suffix-12 { margin-right: 100%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -moz-order: 12; -ms-flex-order: 12; order: 12; } .order-last { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } body { direction: ltr; } @media screen and (max-width: 760px) { .gr-0\@mobile { -webkit-flex-basis: 0%; -moz-flex-basis: 0%; -ms-flex-preferred-size: 0%; flex-basis: 0%; max-width: 0%; } .push-0\@mobile { left: 0%; right: auto; } .pull-0\@mobile { right: 0%; left: auto; } .prefix-0\@mobile { margin-left: 0%; } .suffix-0\@mobile { margin-right: 0%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-0\@mobile { -webkit-box-ordinal-group: 1; -webkit-order: 0; -moz-order: 0; -ms-flex-order: 0; order: 0; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-1\@mobile { -webkit-flex-basis: 8.3333333333%; -moz-flex-basis: 8.3333333333%; -ms-flex-preferred-size: 8.3333333333%; flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .push-1\@mobile { left: 8.3333333333%; right: auto; } .pull-1\@mobile { right: 8.3333333333%; left: auto; } .prefix-1\@mobile { margin-left: 8.3333333333%; } .suffix-1\@mobile { margin-right: 8.3333333333%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-1\@mobile { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-2\@mobile { -webkit-flex-basis: 16.6666666667%; -moz-flex-basis: 16.6666666667%; -ms-flex-preferred-size: 16.6666666667%; flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .push-2\@mobile { left: 16.6666666667%; right: auto; } .pull-2\@mobile { right: 16.6666666667%; left: auto; } .prefix-2\@mobile { margin-left: 16.6666666667%; } .suffix-2\@mobile { margin-right: 16.6666666667%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-2\@mobile { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-3\@mobile { -webkit-flex-basis: 25%; -moz-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .push-3\@mobile { left: 25%; right: auto; } .pull-3\@mobile { right: 25%; left: auto; } .prefix-3\@mobile { margin-left: 25%; } .suffix-3\@mobile { margin-right: 25%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-3\@mobile { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-4\@mobile { -webkit-flex-basis: 33.3333333333%; -moz-flex-basis: 33.3333333333%; -ms-flex-preferred-size: 33.3333333333%; flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .push-4\@mobile { left: 33.3333333333%; right: auto; } .pull-4\@mobile { right: 33.3333333333%; left: auto; } .prefix-4\@mobile { margin-left: 33.3333333333%; } .suffix-4\@mobile { margin-right: 33.3333333333%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-4\@mobile { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-order: 4; -ms-flex-order: 4; order: 4; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-5\@mobile { -webkit-flex-basis: 41.6666666667%; -moz-flex-basis: 41.6666666667%; -ms-flex-preferred-size: 41.6666666667%; flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .push-5\@mobile { left: 41.6666666667%; right: auto; } .pull-5\@mobile { right: 41.6666666667%; left: auto; } .prefix-5\@mobile { margin-left: 41.6666666667%; } .suffix-5\@mobile { margin-right: 41.6666666667%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-5\@mobile { -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-order: 5; -ms-flex-order: 5; order: 5; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-6\@mobile { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .push-6\@mobile { left: 50%; right: auto; } .pull-6\@mobile { right: 50%; left: auto; } .prefix-6\@mobile { margin-left: 50%; } .suffix-6\@mobile { margin-right: 50%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-6\@mobile { -webkit-box-ordinal-group: 7; -webkit-order: 6; -moz-order: 6; -ms-flex-order: 6; order: 6; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-7\@mobile { -webkit-flex-basis: 58.3333333333%; -moz-flex-basis: 58.3333333333%; -ms-flex-preferred-size: 58.3333333333%; flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .push-7\@mobile { left: 58.3333333333%; right: auto; } .pull-7\@mobile { right: 58.3333333333%; left: auto; } .prefix-7\@mobile { margin-left: 58.3333333333%; } .suffix-7\@mobile { margin-right: 58.3333333333%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-7\@mobile { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-order: 7; -ms-flex-order: 7; order: 7; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-8\@mobile { -webkit-flex-basis: 66.6666666667%; -moz-flex-basis: 66.6666666667%; -ms-flex-preferred-size: 66.6666666667%; flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .push-8\@mobile { left: 66.6666666667%; right: auto; } .pull-8\@mobile { right: 66.6666666667%; left: auto; } .prefix-8\@mobile { margin-left: 66.6666666667%; } .suffix-8\@mobile { margin-right: 66.6666666667%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-8\@mobile { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-order: 8; -ms-flex-order: 8; order: 8; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-9\@mobile { -webkit-flex-basis: 75%; -moz-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .push-9\@mobile { left: 75%; right: auto; } .pull-9\@mobile { right: 75%; left: auto; } .prefix-9\@mobile { margin-left: 75%; } .suffix-9\@mobile { margin-right: 75%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-9\@mobile { -webkit-box-ordinal-group: 10; -webkit-order: 9; -moz-order: 9; -ms-flex-order: 9; order: 9; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-10\@mobile { -webkit-flex-basis: 83.3333333333%; -moz-flex-basis: 83.3333333333%; -ms-flex-preferred-size: 83.3333333333%; flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .push-10\@mobile { left: 83.3333333333%; right: auto; } .pull-10\@mobile { right: 83.3333333333%; left: auto; } .prefix-10\@mobile { margin-left: 83.3333333333%; } .suffix-10\@mobile { margin-right: 83.3333333333%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-10\@mobile { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-order: 10; -ms-flex-order: 10; order: 10; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-11\@mobile { -webkit-flex-basis: 91.6666666667%; -moz-flex-basis: 91.6666666667%; -ms-flex-preferred-size: 91.6666666667%; flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .push-11\@mobile { left: 91.6666666667%; right: auto; } .pull-11\@mobile { right: 91.6666666667%; left: auto; } .prefix-11\@mobile { margin-left: 91.6666666667%; } .suffix-11\@mobile { margin-right: 91.6666666667%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-11\@mobile { -webkit-box-ordinal-group: 12; -webkit-order: 11; -moz-order: 11; -ms-flex-order: 11; order: 11; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-12\@mobile { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .push-12\@mobile { left: 100%; right: auto; } .pull-12\@mobile { right: 100%; left: auto; } .prefix-12\@mobile { margin-left: 100%; } .suffix-12\@mobile { margin-right: 100%; } .order-first\@mobile { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-12\@mobile { -webkit-box-ordinal-group: 13; -webkit-order: 12; -moz-order: 12; -ms-flex-order: 12; order: 12; } .order-last\@mobile { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } body { direction: ltr; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .gr-0\@tablet { -webkit-flex-basis: 0%; -moz-flex-basis: 0%; -ms-flex-preferred-size: 0%; flex-basis: 0%; max-width: 0%; } .push-0\@tablet { left: 0%; right: auto; } .pull-0\@tablet { right: 0%; left: auto; } .prefix-0\@tablet { margin-left: 0%; } .suffix-0\@tablet { margin-right: 0%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-0\@tablet { -webkit-box-ordinal-group: 1; -webkit-order: 0; -moz-order: 0; -ms-flex-order: 0; order: 0; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-1\@tablet { -webkit-flex-basis: 8.3333333333%; -moz-flex-basis: 8.3333333333%; -ms-flex-preferred-size: 8.3333333333%; flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .push-1\@tablet { left: 8.3333333333%; right: auto; } .pull-1\@tablet { right: 8.3333333333%; left: auto; } .prefix-1\@tablet { margin-left: 8.3333333333%; } .suffix-1\@tablet { margin-right: 8.3333333333%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-1\@tablet { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-2\@tablet { -webkit-flex-basis: 16.6666666667%; -moz-flex-basis: 16.6666666667%; -ms-flex-preferred-size: 16.6666666667%; flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .push-2\@tablet { left: 16.6666666667%; right: auto; } .pull-2\@tablet { right: 16.6666666667%; left: auto; } .prefix-2\@tablet { margin-left: 16.6666666667%; } .suffix-2\@tablet { margin-right: 16.6666666667%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-2\@tablet { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-3\@tablet { -webkit-flex-basis: 25%; -moz-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .push-3\@tablet { left: 25%; right: auto; } .pull-3\@tablet { right: 25%; left: auto; } .prefix-3\@tablet { margin-left: 25%; } .suffix-3\@tablet { margin-right: 25%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-3\@tablet { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-4\@tablet { -webkit-flex-basis: 33.3333333333%; -moz-flex-basis: 33.3333333333%; -ms-flex-preferred-size: 33.3333333333%; flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .push-4\@tablet { left: 33.3333333333%; right: auto; } .pull-4\@tablet { right: 33.3333333333%; left: auto; } .prefix-4\@tablet { margin-left: 33.3333333333%; } .suffix-4\@tablet { margin-right: 33.3333333333%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-4\@tablet { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-order: 4; -ms-flex-order: 4; order: 4; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-5\@tablet { -webkit-flex-basis: 41.6666666667%; -moz-flex-basis: 41.6666666667%; -ms-flex-preferred-size: 41.6666666667%; flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .push-5\@tablet { left: 41.6666666667%; right: auto; } .pull-5\@tablet { right: 41.6666666667%; left: auto; } .prefix-5\@tablet { margin-left: 41.6666666667%; } .suffix-5\@tablet { margin-right: 41.6666666667%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-5\@tablet { -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-order: 5; -ms-flex-order: 5; order: 5; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-6\@tablet { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .push-6\@tablet { left: 50%; right: auto; } .pull-6\@tablet { right: 50%; left: auto; } .prefix-6\@tablet { margin-left: 50%; } .suffix-6\@tablet { margin-right: 50%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-6\@tablet { -webkit-box-ordinal-group: 7; -webkit-order: 6; -moz-order: 6; -ms-flex-order: 6; order: 6; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-7\@tablet { -webkit-flex-basis: 58.3333333333%; -moz-flex-basis: 58.3333333333%; -ms-flex-preferred-size: 58.3333333333%; flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .push-7\@tablet { left: 58.3333333333%; right: auto; } .pull-7\@tablet { right: 58.3333333333%; left: auto; } .prefix-7\@tablet { margin-left: 58.3333333333%; } .suffix-7\@tablet { margin-right: 58.3333333333%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-7\@tablet { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-order: 7; -ms-flex-order: 7; order: 7; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-8\@tablet { -webkit-flex-basis: 66.6666666667%; -moz-flex-basis: 66.6666666667%; -ms-flex-preferred-size: 66.6666666667%; flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .push-8\@tablet { left: 66.6666666667%; right: auto; } .pull-8\@tablet { right: 66.6666666667%; left: auto; } .prefix-8\@tablet { margin-left: 66.6666666667%; } .suffix-8\@tablet { margin-right: 66.6666666667%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-8\@tablet { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-order: 8; -ms-flex-order: 8; order: 8; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-9\@tablet { -webkit-flex-basis: 75%; -moz-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .push-9\@tablet { left: 75%; right: auto; } .pull-9\@tablet { right: 75%; left: auto; } .prefix-9\@tablet { margin-left: 75%; } .suffix-9\@tablet { margin-right: 75%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-9\@tablet { -webkit-box-ordinal-group: 10; -webkit-order: 9; -moz-order: 9; -ms-flex-order: 9; order: 9; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-10\@tablet { -webkit-flex-basis: 83.3333333333%; -moz-flex-basis: 83.3333333333%; -ms-flex-preferred-size: 83.3333333333%; flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .push-10\@tablet { left: 83.3333333333%; right: auto; } .pull-10\@tablet { right: 83.3333333333%; left: auto; } .prefix-10\@tablet { margin-left: 83.3333333333%; } .suffix-10\@tablet { margin-right: 83.3333333333%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-10\@tablet { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-order: 10; -ms-flex-order: 10; order: 10; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-11\@tablet { -webkit-flex-basis: 91.6666666667%; -moz-flex-basis: 91.6666666667%; -ms-flex-preferred-size: 91.6666666667%; flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .push-11\@tablet { left: 91.6666666667%; right: auto; } .pull-11\@tablet { right: 91.6666666667%; left: auto; } .prefix-11\@tablet { margin-left: 91.6666666667%; } .suffix-11\@tablet { margin-right: 91.6666666667%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-11\@tablet { -webkit-box-ordinal-group: 12; -webkit-order: 11; -moz-order: 11; -ms-flex-order: 11; order: 11; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-12\@tablet { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .push-12\@tablet { left: 100%; right: auto; } .pull-12\@tablet { right: 100%; left: auto; } .prefix-12\@tablet { margin-left: 100%; } .suffix-12\@tablet { margin-right: 100%; } .order-first\@tablet { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-12\@tablet { -webkit-box-ordinal-group: 13; -webkit-order: 12; -moz-order: 12; -ms-flex-order: 12; order: 12; } .order-last\@tablet { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } body { direction: ltr; } } @media (orientation: landscape) { .gr-0\@landscape { -webkit-flex-basis: 0%; -moz-flex-basis: 0%; -ms-flex-preferred-size: 0%; flex-basis: 0%; max-width: 0%; } .push-0\@landscape { left: 0%; right: auto; } .pull-0\@landscape { right: 0%; left: auto; } .prefix-0\@landscape { margin-left: 0%; } .suffix-0\@landscape { margin-right: 0%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-0\@landscape { -webkit-box-ordinal-group: 1; -webkit-order: 0; -moz-order: 0; -ms-flex-order: 0; order: 0; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-1\@landscape { -webkit-flex-basis: 8.3333333333%; -moz-flex-basis: 8.3333333333%; -ms-flex-preferred-size: 8.3333333333%; flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .push-1\@landscape { left: 8.3333333333%; right: auto; } .pull-1\@landscape { right: 8.3333333333%; left: auto; } .prefix-1\@landscape { margin-left: 8.3333333333%; } .suffix-1\@landscape { margin-right: 8.3333333333%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-1\@landscape { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-2\@landscape { -webkit-flex-basis: 16.6666666667%; -moz-flex-basis: 16.6666666667%; -ms-flex-preferred-size: 16.6666666667%; flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .push-2\@landscape { left: 16.6666666667%; right: auto; } .pull-2\@landscape { right: 16.6666666667%; left: auto; } .prefix-2\@landscape { margin-left: 16.6666666667%; } .suffix-2\@landscape { margin-right: 16.6666666667%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-2\@landscape { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-3\@landscape { -webkit-flex-basis: 25%; -moz-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .push-3\@landscape { left: 25%; right: auto; } .pull-3\@landscape { right: 25%; left: auto; } .prefix-3\@landscape { margin-left: 25%; } .suffix-3\@landscape { margin-right: 25%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-3\@landscape { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-4\@landscape { -webkit-flex-basis: 33.3333333333%; -moz-flex-basis: 33.3333333333%; -ms-flex-preferred-size: 33.3333333333%; flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .push-4\@landscape { left: 33.3333333333%; right: auto; } .pull-4\@landscape { right: 33.3333333333%; left: auto; } .prefix-4\@landscape { margin-left: 33.3333333333%; } .suffix-4\@landscape { margin-right: 33.3333333333%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-4\@landscape { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-order: 4; -ms-flex-order: 4; order: 4; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-5\@landscape { -webkit-flex-basis: 41.6666666667%; -moz-flex-basis: 41.6666666667%; -ms-flex-preferred-size: 41.6666666667%; flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .push-5\@landscape { left: 41.6666666667%; right: auto; } .pull-5\@landscape { right: 41.6666666667%; left: auto; } .prefix-5\@landscape { margin-left: 41.6666666667%; } .suffix-5\@landscape { margin-right: 41.6666666667%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-5\@landscape { -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-order: 5; -ms-flex-order: 5; order: 5; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-6\@landscape { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .push-6\@landscape { left: 50%; right: auto; } .pull-6\@landscape { right: 50%; left: auto; } .prefix-6\@landscape { margin-left: 50%; } .suffix-6\@landscape { margin-right: 50%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-6\@landscape { -webkit-box-ordinal-group: 7; -webkit-order: 6; -moz-order: 6; -ms-flex-order: 6; order: 6; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-7\@landscape { -webkit-flex-basis: 58.3333333333%; -moz-flex-basis: 58.3333333333%; -ms-flex-preferred-size: 58.3333333333%; flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .push-7\@landscape { left: 58.3333333333%; right: auto; } .pull-7\@landscape { right: 58.3333333333%; left: auto; } .prefix-7\@landscape { margin-left: 58.3333333333%; } .suffix-7\@landscape { margin-right: 58.3333333333%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-7\@landscape { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-order: 7; -ms-flex-order: 7; order: 7; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-8\@landscape { -webkit-flex-basis: 66.6666666667%; -moz-flex-basis: 66.6666666667%; -ms-flex-preferred-size: 66.6666666667%; flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .push-8\@landscape { left: 66.6666666667%; right: auto; } .pull-8\@landscape { right: 66.6666666667%; left: auto; } .prefix-8\@landscape { margin-left: 66.6666666667%; } .suffix-8\@landscape { margin-right: 66.6666666667%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-8\@landscape { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-order: 8; -ms-flex-order: 8; order: 8; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-9\@landscape { -webkit-flex-basis: 75%; -moz-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .push-9\@landscape { left: 75%; right: auto; } .pull-9\@landscape { right: 75%; left: auto; } .prefix-9\@landscape { margin-left: 75%; } .suffix-9\@landscape { margin-right: 75%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-9\@landscape { -webkit-box-ordinal-group: 10; -webkit-order: 9; -moz-order: 9; -ms-flex-order: 9; order: 9; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-10\@landscape { -webkit-flex-basis: 83.3333333333%; -moz-flex-basis: 83.3333333333%; -ms-flex-preferred-size: 83.3333333333%; flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .push-10\@landscape { left: 83.3333333333%; right: auto; } .pull-10\@landscape { right: 83.3333333333%; left: auto; } .prefix-10\@landscape { margin-left: 83.3333333333%; } .suffix-10\@landscape { margin-right: 83.3333333333%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-10\@landscape { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-order: 10; -ms-flex-order: 10; order: 10; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-11\@landscape { -webkit-flex-basis: 91.6666666667%; -moz-flex-basis: 91.6666666667%; -ms-flex-preferred-size: 91.6666666667%; flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .push-11\@landscape { left: 91.6666666667%; right: auto; } .pull-11\@landscape { right: 91.6666666667%; left: auto; } .prefix-11\@landscape { margin-left: 91.6666666667%; } .suffix-11\@landscape { margin-right: 91.6666666667%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-11\@landscape { -webkit-box-ordinal-group: 12; -webkit-order: 11; -moz-order: 11; -ms-flex-order: 11; order: 11; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } .gr-12\@landscape { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .push-12\@landscape { left: 100%; right: auto; } .pull-12\@landscape { right: 100%; left: auto; } .prefix-12\@landscape { margin-left: 100%; } .suffix-12\@landscape { margin-right: 100%; } .order-first\@landscape { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-order: -1; -ms-flex-order: -1; order: -1; } .order-12\@landscape { -webkit-box-ordinal-group: 13; -webkit-order: 12; -moz-order: 12; -ms-flex-order: 12; order: 12; } .order-last\@landscape { -webkit-box-ordinal-group: 10000; -webkit-order: 9999; -moz-order: 9999; -ms-flex-order: 9999; order: 9999; } body { direction: ltr; } } .float-left { float: left; } .float-right { float: right; } .clear { clear: both; } .clear-left { clear: left; } .clear-right { clear: right; } .auto-height { height: inherit; min-height: inherit; max-height: inherit; } .row { -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [class*="no-gutter"] > .row { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse { -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [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 { -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .col-reverse { -webkit-box-direction: reverse; -webkit-box-orient: vertical; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .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 { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; justify-content: flex-start; } .row-align-center { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } .row-align-right { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; justify-content: flex-end; } .row-align-middle { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .row-align-top { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; } .row-align-bottom { -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; align-items: flex-end; } .row-align-around { -ms-flex-pack: distribute; -webkit-justify-content: space-around; -moz-justify-content: space-around; justify-content: space-around; } .row-align-between { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .no-gutter { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left { padding-left: 0; } .no-gutter-right { padding-right: 0; } .no-gutter-top { padding-top: 0; } .no-gutter-bottom { padding-bottom: 0; } .gutter { padding-right: 10px; padding-left: 10px; } .gutter-left { padding-left: 10px; } .gutter-right { padding-right: 10px; } .hide { display: none !important; } .not-visible { visibility: hidden; } .show { display: block !important; } .show-inline { display: inline-block !important; } .visible { visibility: visible; } .row-debug { position: relative; z-index: 99999; overflow: hidden; } .row-debug:before { pointer-events: none; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 99999px; background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 16.6666666667% 100%; z-index: 99999; } @media screen and (max-width: 760px) { .float-left\@mobile { float: left; } .float-right\@mobile { float: right; } .clear\@mobile { clear: both; } .clear-left\@mobile { clear: left; } .clear-right\@mobile { clear: right; } .auto-height\@mobile { height: inherit; min-height: inherit; max-height: inherit; } .row\@mobile { -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [class*="no-gutter"] > .row\@mobile { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@mobile { -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [class*="no-gutter"] > .row-reverse\@mobile { margin-left: 0 !important; margin-right: 0 !important; } .row-full\@mobile { width: 100vw; margin-left: 50% !important; margin-right: 0 !important; -webkit-transform: translateX(-50%); -moz-transition: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .col\@mobile { -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .col-reverse\@mobile { -webkit-box-direction: reverse; -webkit-box-orient: vertical; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .row-no-gutter\@mobile { margin-left: 0; margin-right: 0; } .row-no-gutter\@mobile > [class*="gr-"] { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .row-no-gutter-top\@mobile { margin-left: 0; margin-right: 0; } .row-no-gutter-top\@mobile > [class*="gr-"] { padding-top: 0; } .row-no-gutter-right\@mobile { margin-left: 0; margin-right: 0; } .row-no-gutter-right\@mobile > [class*="gr-"] { padding-right: 0; } .row-no-gutter-bottom\@mobile { margin-left: 0; margin-right: 0; } .row-no-gutter-bottom\@mobile > [class*="gr-"] { padding-bottom: 0; } .row-no-gutter-left\@mobile { margin-left: 0; margin-right: 0; } .row-no-gutter-left\@mobile > [class*="gr-"] { padding-left: 0; } .row-align-left\@mobile { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; justify-content: flex-start; } .row-align-center\@mobile { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } .row-align-right\@mobile { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; justify-content: flex-end; } .row-align-middle\@mobile { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .row-align-top\@mobile { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; } .row-align-bottom\@mobile { -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; align-items: flex-end; } .row-align-around\@mobile { -ms-flex-pack: distribute; -webkit-justify-content: space-around; -moz-justify-content: space-around; justify-content: space-around; } .row-align-between\@mobile { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .no-gutter\@mobile { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@mobile { padding-left: 0; } .no-gutter-right\@mobile { padding-right: 0; } .no-gutter-top\@mobile { padding-top: 0; } .no-gutter-bottom\@mobile { padding-bottom: 0; } .gutter\@mobile { padding-right: 10px; padding-left: 10px; } .gutter-left\@mobile { padding-left: 10px; } .gutter-right\@mobile { padding-right: 10px; } .hide\@mobile { display: none !important; } .not-visible\@mobile { visibility: hidden; } .show\@mobile { display: block !important; } .show-inline\@mobile { display: inline-block !important; } .visible\@mobile { visibility: visible; } .row-debug\@mobile { position: relative; z-index: 99999; overflow: hidden; } .row-debug\@mobile:before { pointer-events: none; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 99999px; background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 16.6666666667% 100%; z-index: 99999; } } @media screen and (min-width: 760px) and (max-width: 1024px) { .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 { -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [class*="no-gutter"] > .row\@tablet { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@tablet { -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [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 { -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .col-reverse\@tablet { -webkit-box-direction: reverse; -webkit-box-orient: vertical; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .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 { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; justify-content: flex-start; } .row-align-center\@tablet { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } .row-align-right\@tablet { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; justify-content: flex-end; } .row-align-middle\@tablet { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .row-align-top\@tablet { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; } .row-align-bottom\@tablet { -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; align-items: flex-end; } .row-align-around\@tablet { -ms-flex-pack: distribute; -webkit-justify-content: space-around; -moz-justify-content: space-around; justify-content: space-around; } .row-align-between\@tablet { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .no-gutter\@tablet { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@tablet { padding-left: 0; } .no-gutter-right\@tablet { padding-right: 0; } .no-gutter-top\@tablet { padding-top: 0; } .no-gutter-bottom\@tablet { padding-bottom: 0; } .gutter\@tablet { padding-right: 10px; padding-left: 10px; } .gutter-left\@tablet { padding-left: 10px; } .gutter-right\@tablet { padding-right: 10px; } .hide\@tablet { display: none !important; } .not-visible\@tablet { visibility: hidden; } .show\@tablet { display: block !important; } .show-inline\@tablet { display: inline-block !important; } .visible\@tablet { visibility: visible; } .row-debug\@tablet { position: relative; z-index: 99999; overflow: hidden; } .row-debug\@tablet:before { pointer-events: none; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 99999px; background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 16.6666666667% 100%; z-index: 99999; } } @media (orientation: landscape) { .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 { -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [class*="no-gutter"] > .row\@landscape { margin-left: 0 !important; margin-right: 0 !important; } .row-reverse\@landscape { -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } [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 { -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .col-reverse\@landscape { -webkit-box-direction: reverse; -webkit-box-orient: vertical; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding-left: 0 !important; padding-right: 0 !important; margin-left: -10px; margin-right: -10px; } .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 { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; justify-content: flex-start; } .row-align-center\@landscape { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } .row-align-right\@landscape { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; justify-content: flex-end; } .row-align-middle\@landscape { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .row-align-top\@landscape { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; } .row-align-bottom\@landscape { -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; align-items: flex-end; } .row-align-around\@landscape { -ms-flex-pack: distribute; -webkit-justify-content: space-around; -moz-justify-content: space-around; justify-content: space-around; } .row-align-between\@landscape { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .no-gutter\@landscape { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .no-gutter-left\@landscape { padding-left: 0; } .no-gutter-right\@landscape { padding-right: 0; } .no-gutter-top\@landscape { padding-top: 0; } .no-gutter-bottom\@landscape { padding-bottom: 0; } .gutter\@landscape { padding-right: 10px; padding-left: 10px; } .gutter-left\@landscape { padding-left: 10px; } .gutter-right\@landscape { padding-right: 10px; } .hide\@landscape { display: none !important; } .not-visible\@landscape { visibility: hidden; } .show\@landscape { display: block !important; } .show-inline\@landscape { display: inline-block !important; } .visible\@landscape { visibility: visible; } .row-debug\@landscape { position: relative; z-index: 99999; overflow: hidden; } .row-debug\@landscape:before { pointer-events: none; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 99999px; background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.02) 50%); background-size: 16.6666666667% 100%; z-index: 99999; } } [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } @media screen and (max-width: 760px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 760px) and (max-width: 1024px) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } @media (orientation: landscape) { [class*="gr-"] > [class^="row"], [class*="gr-"] > [class^="col"] { margin-left: -10px; margin-right: -10px; } } body { font-family: "Raleway", Arial; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } input { font-family: "Raleway", Arial; -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } h1 { font-size: 33px; line-height: 50px; font-weight: 700; } @media screen and (min-width: 760px) and (max-width: 1024px) { h1 { font-size: 40px; line-height: 40px; } } @media screen and (max-width: 760px) { h1 { font-size: 28px; line-height: 28px; text-align: center; } } h2 { font-size: 26px; line-height: 28px; font-weight: 400; } @media screen and (min-width: 760px) and (max-width: 1024px) { h2 { font-size: 30px; line-height: 30px; } } @media screen and (max-width: 760px) { h2 { font-size: 24px; line-height: 24px; text-align: center; } } h3 { font-size: 30px; line-height: 40px; font-weight: 400; } @media screen and (min-width: 760px) and (max-width: 1024px) { h3 { font-size: 32px; line-height: 32px; } } @media screen and (max-width: 760px) { h3 { font-size: 14px; line-height: 20px; } } h4 { font-size: 32px; line-height: 32px; font-weight: 400; } @media screen and (min-width: 760px) and (max-width: 1024px) { h4 { font-size: 20px; line-height: 20px; } } @media screen and (max-width: 760px) { h4 { font-size: 18px; line-height: 18px; text-align: center; } } ul, p { font-size: 18px; color: #000; line-height: 28px; } @media screen and (min-width: 760px) and (max-width: 1024px) { ul, p { font-size: 16px; color: #000; line-height: 24px; } } @media screen and (max-width: 760px) { ul, p { font-size: 14px; color: #000; line-height: 20px; } } a { color: #042C58; text-decoration: underline; } /* Generated by Glyphter (http://www.glyphter.com) on Tue Jan 16 2018*/ @font-face { font-family: 'social'; src: url("/font/social.eot"); src: url("/font/social.eot?#iefix") format("embedded-opentype"), url("/font/social.woff") format("woff"), url("/font/social.ttf") format("truetype"), url("/font/social.svg#social") format("svg"); font-weight: normal; font-style: normal; } [class*='icon-']:before { display: inline-block; font-family: 'social'; font-style: normal; font-weight: normal; line-height: 25px; padding: 0 10px; font-size: 20px; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: transform 0.2s ease; } @media only screen and (max-width: 1170px) { [class*='icon-']:before { padding: 0 5px; } } [class*='icon-']:hover:before { transform: scale(1.1); } .icon-facebook:before { content: '\0041'; } .icon-google-plus:before { content: '\0042'; } .icon-linkedin:before { content: '\0043'; } .icon-twitter:before { content: '\0044'; } .icon-whatsapp:before { content: '\0045'; } .icon-telegram:before { content: '\0046'; } .icon-github:before { content: '\0047'; } @media screen and (max-width: 760px) { input { width: 100%; } } button, input[type="submit"], input[type="button"], a.button { display: inline-block; color: #fff; padding: 20px 30px; border: none; border-radius: 500px; font-size: 24px; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: transform 0.15s ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } @media screen and (max-width: 760px) { button, input[type="submit"], input[type="button"], a.button { font-size: 16px; padding: 15px 24px; } } button:hover, input[type="submit"]:hover, input[type="button"]:hover, a.button:hover { transform: scale(1.025); } button:active, input[type="submit"]:active, input[type="button"]:active, a.button:active { transform: scale(1); background: #E5134C; } button.small, input[type="submit"].small, input[type="button"].small, a.button.small { padding: 11px 18px; font-size: 18px; background: #cacfd5; font-weight: 600; } @media screen and (max-width: 760px) { button.small, input[type="submit"].small, input[type="button"].small, a.button.small { font-size: 12px; padding: 10px 5px; } } section > .inner { padding: 100px 40px; } @media screen and (max-width: 760px) { section > .inner { padding: 40px 20px 0 20px; } } section .headline { width: 100%; text-align: center; } header { position: relative; background: transparent; overflow: hidden; width: 100vw; min-height: 100vh; text-align: center; color: #fff; } @media screen and (max-width: 760px) { header { height: auto; overflow: visible; } } header .boxleft, header .boxright { height: 220px; } @media screen and (max-width: 760px) { header .boxleft, header .boxright { height: 180px; } } header .boxleft { display: block; float: left; width: 70%; } header .boxright { display: block; float: right; width: 30%; } header .boxright:after { content: "."; clear: both; display: block; visibility: hidden; height: 0px; } header .inner { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100vh; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 90px; } @media screen and (max-width: 760px) { header .inner { display: block; height: auto; padding-top: 90px; } } header .inner .logo { width: 220px; margin-bottom: 30px; } @media screen and (min-width: 760px) and (max-width: 1024px) { header .inner .logo { width: 175px; margin-bottom: 15px; } } @media screen and (max-width: 760px) { header .inner .logo { width: 110px; margin-bottom: 15px; } } header .content { margin: 0 auto 0 auto; } header .content .button { margin: 10px; } @media screen and (max-width: 760px) { header .content .button { margin-top: 24px; width: 80%; } } header.hidden h1 { -webkit-transform: translateY(-20px); transform: translateY(-20px); opacity: 0; } header .button { margin: 36px 0 10px 0; } header h1 { text-transform: uppercase; font-weight: 800; margin: 0 auto 10px auto; opacity: 1; -webkit-transition: opacity 0.4s ease-in-out, -webkit-transform 0.6s ease-in-out; transition: opacity 0.4s ease-in-out, -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out, opacity 0.4s ease-in-out; transition: transform 0.6s ease-in-out, opacity 0.4s ease-in-out, -webkit-transform 0.6s ease-in-out; } header h2 { margin: 0; text-align: center; margin-top: 22px; font-size: 21px; line-height: 26px; font-weight: 400; max-width: 35rem; } @media screen and (min-width: 760px) and (max-width: 1024px) { header h2 { font-size: 20px; line-height: 26px; } } @media screen and (max-width: 760px) { header h2 { font-size: 14px; line-height: 20px; } } header p { color: #fff; } header .payment { margin: 0px auto 10px auto; } header .payment p { font-size: 14px; line-height: 30px; } @media screen and (max-width: 760px) { header .payment p { font-size: 11px; } } header .payment img { position: relative; display: inline-block; vertical-align: middle; height: 22px; margin: 0 5px; } @media screen and (max-width: 760px) { header .payment img { height: 14px; } } header .statistics { display: block; width: 100%; background: transparent; padding: 0; color: #8895a5; } header .statistics a { color: #8895a5; text-decoration: none; } header .statistics strong { color: #fff; } header .statistics figure { display: block; position: relative; float: left; margin: 0; padding: 15px 0; width: 50%; font-size: 18px; } @media screen and (min-width: 760px) and (max-width: 1024px) { header .statistics figure { font-size: 16px; } } @media screen and (max-width: 760px) { header .statistics figure { font-size: 14px; width: 100%; padding: 10px 0; font-size: 14px; } } @media screen and (max-width: 760px) { header .statistics figure:first-of-type { width: 100%; } } header .statistics figure:first-of-type:before { display: none; } header .statistics figure strong { display: block; font-size: 1.75em; } @media screen and (min-width: 760px) and (max-width: 1024px) { header .statistics figure strong { font-size: 20px; } } @media screen and (max-width: 760px) { header .statistics figure strong { font-size: 18px; display: inline-block; } } header .whybeat { padding: 10px 10px 30px 10px; background-color: rgba(59, 68, 155, 0.6); border-radius: 8px; } header .whybeat .whyhead { font-weight: 800; text-transform: uppercase; font-size: 1.75em; margin: 36px 0 0 0; } header .whybeat .whytext { margin: 10px 0 0 0; } @media screen and (max-width: 760px) { header .whybeat { border-radius: 0; } } header .boxheadline { margin-bottom: 40px; } header .boxstats { display: inline-block; margin: 1em 20%; width: 70%; } @media screen and (max-width: 760px) { header .boxstats { width: 100%; } } header .meta-box { display: block; background-color: rgba(255, 255, 255, 0.1); width: auto; height: 100%; vertical-align: middle; margin: 0 auto; padding: 30px; font-size: 16px; border-radius: 10px; margin-left: 20px; } @media screen and (max-width: 760px) { header .meta-box { margin-left: 0; width: 100%; padding: 15px; font-size: 12px; } } header .meta-box.first { margin-left: 0px; } header .meta-box.first .meta-box-content:first-of-type { display: none; } header .meta-box #countdown { font-size: 38px; } @media screen and (max-width: 760px) { header .meta-box #countdown { font-size: 20px; letter-spacing: -1px; } } header .meta-box.details figure { text-align: left; } header .meta-box .meta-box-content { margin-bottom: 20px; } header .meta-box .meta-box-content:last-of-type { margin-bottom: 0; } header .meta-box .meta-box-content .meta-box-content-item { margin-bottom: 4px; } header .meta-box .meta-box-content .meta-box-content-item span { width: 134px; display: inline-block; text-align: left; } @media screen and (max-width: 760px) { header .meta-box .meta-box-content .meta-box-content-item span { width: auto; } } header .meta-box figure { text-align: center; margin: 0; padding: 0; margin-bottom: 14px; } header .meta-box figure:last-of-type { margin-bottom: 0; } header .meta-box figure strong { font-size: 22px; } @media screen and (max-width: 760px) { header .meta-box figure strong { font-size: 18px; } } header #price-in-button { font-size: 12px; margin-top: 4px; font-weight: normal; } header .progress-new { width: 90%; margin: 90px auto 40px auto; } @media screen and (max-width: 760px) { header .progress-new { width: 90%; margin: 20px auto 15px auto; } } header .progress-new .bar-step { position: absolute; margin-top: -20px; z-index: 1; font-size: 12px; } header .progress-new .label-txt { float: left; } header .progress-new .label-line { float: right; background: #000; height: 50px; width: 1px; margin-left: 5px; } header .progress-new .label-percent { float: right; margin-left: 5px; } #madeingermany { background: transparent url("/img/new/logo/madeingermany2.png") no-repeat; background-size: auto 100%; width: 120px; height: 15px; margin-top: 25px; margin-left: auto; margin-right: auto; } @media screen and (min-width: 1101px) and (max-width: 1200px) { #madeingermany { height: 12px; width: 100px; height: 12px; } } .icon-telegram { color: #6BADDA; } nav { position: fixed; display: block; width: 100%; height: 60px; z-index: 1000; background: #ffff; -webkit-box-shadow: 0 1px 20px 0 rgba(116, 116, 116, 0.53); box-shadow: 0 1px 20px 0 rgba(116, 116, 116, 0.53); } @media screen and (max-width: 1300px) { nav { height: 50px; } nav .mobilemenu { cursor: pointer; position: fixed; background: rgba(255, 255, 255, 0.9); width: 100%; height: 0; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: -1; -webkit-transition: height 0.2s ease-in-out, opacity 0.3s ease-in-out; transition: height 0.2s ease-in-out, opacity 0.3s ease-in-out; overflow: hidden; } nav.open .mobilemenu { height: 100vh; opacity: 1; overflow: visible; } } nav .whitepaper-link { color: #fff; background-color: #000; border-radius: 50px; line-height: 35px; padding: 0 15px; } nav.white { background-color: #fff; } nav.white a { color: #000; } nav.white .mobile { cursor: pointer; } nav.white .mobile .icon { background-color: #000; } nav.white .mobile .icon:before { background-color: #000; } nav.white .mobile .icon:after { background-color: #000; } nav a { display: block; text-decoration: none; text-transform: uppercase; font-weight: 600; padding: 0 10px; line-height: 60px; color: #000; font-size: 15px; } @media screen and (max-width: 1300px) { nav a { line-height: 50px; } } nav [class*='icon-']:before { line-height: 60px; display: block; float: left; } @media screen and (max-width: 1300px) { nav [class*='icon-']:before { line-height: 50px; font-size: 24px; display: none; padding: 0; } } @media screen and (max-width: 1300px) { nav [class*='icon-']:before .mobilemenu [class*='icon-']:before { display: none; } } nav .logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; float: left; width: 140px; height: 100%; } @media screen and (max-width: 1300px) { nav .logo { width: 70px; } } nav .logo a { display: block; width: 60%; height: 20px; background: transparent url("/img/new/logo/logo-cross-white.svg") center no-repeat; background-size: 100% 100%; } @media screen and (max-width: 1300px) { nav .logo a { background-image: url("/img/new/logo/logo-standalone-white.svg"); width: 60%; height: 60%; } } nav ul { margin: 0; padding: 0; display: block; list-style: none; float: left; margin-left: 10px; } @media screen and (max-width: 1300px) { nav ul { width: 100%; margin: 0; } nav ul:first-of-type { margin-top: 60px; } } nav ul.right { float: right; margin-right: 10px; } @media screen and (max-width: 1300px) { nav ul.right { margin-right: 0; } } nav ul li { display: inline-block; line-height: 50px; } @media screen and (max-width: 1300px) { nav ul li { float: none; 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: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } nav .telegram { display: none; position: absolute; width: 50px; height: 100%; top: 0; right: 50px; z-index: 1300; color: #fff; } nav .telegram a { color: #fff; } @media screen and (max-width: 1300px) { nav .telegram { display: block; } } nav .mobile { cursor: pointer; display: none; position: absolute; width: 60px; height: 100%; right: 0; top: 0; z-index: 1300; } @media screen and (max-width: 1300px) { nav .mobile { display: block; } } nav .mobile .icon { position: absolute; background: #000; width: 26px; height: 3px; margin-top: -3px; opacity: 1; margin-right: 20px; top: 50%; border-radius: 2px; left: 13px; -webkit-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; } nav .mobile .icon:after, nav .mobile .icon:before { position: absolute; width: 100%; height: 3px; content: ""; display: block; border-radius: 2px; -webkit-transition: top 0.15s ease-in-out, bottom 0.15s ease-in-out, background-color 0.2s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: top 0.15s ease-in-out, bottom 0.15s ease-in-out, background-color 0.2s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out, top 0.15s ease-in-out, bottom 0.15s ease-in-out, background-color 0.2s ease-in-out; transition: transform 0.15s ease-in-out, top 0.15s ease-in-out, bottom 0.15s ease-in-out, background-color 0.2s ease-in-out, -webkit-transform 0.15s ease-in-out; } nav .mobile .icon:after { bottom: -8.5px; background: #000; } nav .mobile .icon:before { top: -8.5px; background: #000; } nav.open .mobile .icon { background-color: transparent; } nav.open .mobile .icon:before { -webkit-transform: rotate(45deg) translate(9.5px, 5px); transform: rotate(45deg) translate(9.5px, 5px); bottom: -20px; } nav.open .mobile .icon:after { -webkit-transform: rotate(-45deg) translate(7.5px, -2px); transform: rotate(-45deg) translate(7.5px, -2px); } footer { color: #fff; padding: 100px; background: #3B449B; } @media screen and (max-width: 760px) { footer { padding: 50px 20px; } } footer strong { color: #fff; } footer h4 { font-size: 24px; text-align: left; } footer a { color: #fff; text-decoration: none; } footer p { color: #fff; } footer ul { margin: 0; padding: 0; list-style: none; } footer ul li { margin: 5px 0; padding: 5px 0; } footer ul li a { color: #C0CBD6; } footer ul li a:hover { color: #fff; } footer .logo { width: 130px; margin-bottom: 40px; } footer .block { -webkit-flex-basis: 33.3333333333%; -moz-flex-basis: 33.3333333333%; -ms-flex-preferred-size: 33.3333333333%; flex-basis: 33.3333333333%; max-width: 33.3333333333%; } @media screen and (max-width: 760px) { footer .block { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } } .video-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -1; } .video-background video { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; background: url(/img/new/video/background-video.jpg) center no-repeat; background-size: cover; } .video-youtube { position: relative; width: 50%; height: 350px; box-shadow: rgba(49, 44, 42, 0.3) 0 20px 30px 0; } @media screen and (max-width: 1000px) { .video-youtube { padding-bottom: 2rem; height: 400px; width: 100%; } } @media screen and (max-width: 620px) { .video-youtube { height: 230px; margin-bottom: 1.25em; } } .video-youtube::after { content: ''; display: block; clear: both; } .video-youtube embed, .video-youtube iframe, .video-youtube object, .video-youtube video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .box, .modal, #fall, .notification > a, #usecase .item a.inner { background: #fff; box-shadow: 0 5px 30px rgba(11, 33, 60, 0.1); } .box .inner, .modal .inner, #fall .inner, .notification > a .inner, #usecase .item a.inner .inner { padding: 40px; } @media screen and (max-width: 760px) { .box .inner, .modal .inner, #fall .inner, .notification > a .inner, #usecase .item a.inner .inner { text-align: center; } } .progress { position: relative; display: block; height: 24px; width: 100%; border-radius: 12px; background: #3C5D80; } @media screen and (max-width: 760px) { .progress { height: 18px; } } .progress .success { display: block; position: relative; height: 100%; float: left; width: 20%; color: #fff; font-size: 14px; font-weight: 600; line-height: 24px; } @media screen and (max-width: 760px) { .progress .success { font-size: 12px; line-height: 18px; } } .progress .success:nth-of-type(1) { background: #FFFFFF; width: 33%; border-radius: 12px 0 0 12px; color: #C0CBD6; } .progress .success:nth-of-type(2) { background: #C0CBD6; width: 33%; /* &:after { display: block; position: absolute; content: ""; width: 60px; height: 60px; right: -30px; top: -80%; background: transparent url(/img/new/animals/emma.svg) center no-repeat; background-size: 60px 60px; } */ } .progress .success:nth-of-type(3) { background: #9ca7b3; width: 5%; } .modal-wrapper { display: none; align-items: center; justify-content: center; z-index: 2000; position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background-color: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .modal-wrapper.open { display: flex; } .modal { max-width: 800px; width: 100%; } #fall_background { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } #fall_wrapper { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } #fall { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(600px) rotateX(20deg); -moz-transform: translateZ(600px) rotateX(20deg); -ms-transform: translateZ(600px) rotateX(20deg); transform: translateZ(600px) rotateX(20deg); max-width: 800px; width: 100%; border-radius: 8px; } .popup_visible #fall { -webkit-transform: translateZ(0px) rotateX(0deg); -moz-transform: translateZ(0px) rotateX(0deg); -ms-transform: translateZ(0px) rotateX(0deg); transform: translateZ(0px) rotateX(0deg); } .notification { position: fixed; top: 60px; right: 20px; margin: 0; width: 340px; z-index: 500; transition: opacity 0.4s ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } .notification #notificationclose { display: none; } @media screen and (max-width: 760px) { .notification { display: block; width: 100%; right: auto; height: 0; overflow: hidden; transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out; } .notification #notificationclose { display: inline-block; position: fixed; bottom: 0; width: 100%; padding: 14px 0; text-transform: uppercase; text-align: center; font-weight: 700; margin: 0 auto; overflow: hidden; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.4+100 */ background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.4) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.4) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */ color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); transform: scale(1); cursor: pointer; } .notification.open { display: block; position: fixed; top: 0; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 10000; overflow-y: scroll; -webkit-overflow-scrolling: touch; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .notification.open a { height: 80px; visibility: visible; opacity: 1; position: relative; display: block; } } .notification > a { position: relative; display: block; text-decoration: none; overflow: hidden; width: 100%; height: 80px; margin: 20px 0 20px 0; border-radius: 8px; transition: transform 1s ease-in-out, box-shadow 0.2s ease-in-out, height 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0s ease-in-out; } @media screen and (max-width: 760px) { .notification > a { height: 60px; display: block; opacity: 0; visibility: hidden; margin: 10px 2% 0 2%; position: absolute; width: 96%; } } .notification > a:nth-of-type(1) { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .notification > a:nth-of-type(2) { transition: transform 0.4s ease-in-out, box-shadow 0.2s ease-in-out; } .notification > a:nth-of-type(3) { transition: transform 0.6s ease-in-out, box-shadow 0.2s ease-in-out; } .notification > a:nth-of-type(4) { transition: transform 0.7s ease-in-out, box-shadow 0.2s ease-in-out; } .notification > a:nth-of-type(5) { transition: transform 0.75s ease-in-out, box-shadow 0.2s ease-in-out; } .notification > a:nth-of-type(6) { transition: transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out; } .notification > a:nth-of-type(7) { transition: transform 0.85s ease-in-out, box-shadow 0.2s ease-in-out; } .notification > a:nth-of-type(8) { transition: transform 0.9s ease-in-out, box-shadow 0.2s ease-in-out; } .notification > a:nth-of-type(9) { transition: transform 0.95s ease-in-out, box-shadow 0.2s ease-in-out; } .notification > a:nth-of-type(10) { transition: transform 1s ease-in-out, box-shadow 0.2s ease-in-out; } .notification > a img { max-width: 48px; max-height: 48px; margin: 10px; float: left; transition: opacity 0.2s ease-in-out; } @media screen and (max-width: 760px) { .notification > a img { max-width: 40px; max-height: 40px; } } .notification > a .content { padding: 10px 0; text-align: left; transition: opacity 0.2s ease-in-out; } .notification > a .content h4 { display: block; font-size: 16px; line-height: 20px; margin: 0; } @media screen and (max-width: 760px) { .notification > a .content h4 { font-size: 14px; } } .notification > a .content p { display: block; color: #000; font-size: 14px; line-height: 18px; margin: 0; } @media screen and (max-width: 760px) { .notification > a .content p { font-size: 12px; line-height: 16px; } } .mobile-notification { display: none; position: absolute; width: 60px; height: 100%; right: 60px; top: 0; } @media screen and (max-width: 760px) { .mobile-notification { display: block; } } .mobile-notification span { position: relative; display: block; top: 50%; margin-top: -4px; width: 32px; height: 18px; border-radius: 4px; transform: translateY(-50%); text-align: center; font-weight: 600; line-height: 18px; font-size: 12px; transition: all 0.2s ease-in-out; } .mobile-notification span:before, .mobile-notification span:after { transition: all 0.2s ease-in-out; } .mobile-notification span:before { position: absolute; display: block; content: ""; top: 20px; left: 3px; width: 24px; height: 2.5px; border-radius: 0 0 3px 3px; background: grey; } .mobile-notification span:after { position: absolute; display: block; content: ""; top: 24px; left: 6px; width: 18px; height: 2px; border-radius: 0 0 3px 3px; background: grey; } .mobile-notification span.new { color: #fff; } .mobile-notification span.new:before { background: #E5134C; opacity: 0.5; } .mobile-notification span.new:after { background: #E5134C; opacity: 0.5; } .mobile-notification.open span { color: rgba(255, 255, 255, 0); height: 7px; width: 26px; border-radius: 2px; margin-top: -10px; } .mobile-notification.open span:before, .mobile-notification.open span:after { color: rgba(255, 255, 255, 0); height: 7px; width: 26px; border-radius: 2px; opacity: 1; left: 0; } .mobile-notification.open span:before { top: 10px; } .mobile-notification.open span:after { top: 20px; } .actionbar { display: block; position: fixed; background: rgba(255, 255, 255, 0.9); bottom: 0; padding: 8px; width: 100%; box-shadow: 0 -3px 20px rgba(0, 0, 0, 0.1); opacity: 0; z-index: 1000; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transform: translateY(60px); } .actionbar p { float: left; font-weight: 600; color: #000; margin: 2px auto; } .actionbar p span { display: block; line-height: 12px; font-size: 14px; font-weight: 400; margin: 0; } @media screen and (max-width: 760px) { .actionbar p span { font-size: 12px; } } .actionbar .button { float: right; padding: 10px 14px; font-size: 14px; font-weight: 700; } @media screen and (max-width: 760px) { .actionbar .button { font-size: 11px; } } .actionbar .button:first-of-type { margin-left: 5px; } .actionbar .button:last-of-type { background: #cacfd5; color: #fff; } .actionbar.open { transform: translateY(0px); opacity: 1; } #usecase { background: #f4f6f8; } #usecase > .inner { display: block; padding-top: 100px; padding-bottom: 100px; } @media screen and (min-width: 760px) and (max-width: 1024px) { #usecase > .inner { padding-top: 25px; padding-bottom: 25px; } } #usecase .item { -webkit-flex-basis: 33.3333333333%; -moz-flex-basis: 33.3333333333%; -ms-flex-preferred-size: 33.3333333333%; flex-basis: 33.3333333333%; max-width: 33.3333333333%; margin-bottom: 20px; /* &:last-of-type { @include g-grid(12); } */ } @media screen and (max-width: 760px) { #usecase .item { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } } #usecase .item a.inner { display: block; padding: 5px; text-decoration: none; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } #usecase .item a.inner:hover { transform: translateY(-4px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } #usecase .item a.inner h5 { margin: 0; padding: 0; text-transform: uppercase; font-size: 18px; line-height: 18px; } @media screen and (min-width: 760px) and (max-width: 1024px) { #usecase .item a.inner h5 { font-size: 16px; line-height: 16px; } } @media screen and (max-width: 760px) { #usecase .item a.inner h5 { font-size: 14px; line-height: 14px; } } #usecase .item a.inner p { margin: 0; padding: 0; font-size: 14px; line-height: 14px; } @media screen and (min-width: 760px) and (max-width: 1024px) { #usecase .item a.inner p { font-size: 14px; line-height: 14px; } } @media screen and (max-width: 760px) { #usecase .item a.inner p { font-size: 14px; line-height: 14px; } } #usecase .item a.inner .icon { display: inline-block; vertical-align: middle; width: 32px; height: 32px; margin: 0 10px; } @media screen and (max-width: 760px) { #usecase .item a.inner .icon { display: inline-block; text-align: center; margin: 0; width: 100%; } } #usecase .item a.inner .icon img { width: 100%; height: 100%; } #usecase .item a.inner .text { vertical-align: middle; display: inline-block; } @media screen and (max-width: 760px) { #usecase .item a.inner .text { width: 100%; text-align: center; } } #usecases { background: url("/img/usecase-bg.png"); background-repeat: no-repeat; background-size: contain; margin-bottom: 2rem; margin-top: -3rem; } @media screen and (min-width: 1900px) { #usecases { margin-top: -5rem; } } @media screen and (max-width: 800px) { #usecases { background-size: auto; background-position: top; } } #usecases .flex { flex-direction: row-reverse; justify-content: center; align-items: center; flex-wrap: wrap; display: flex; padding-top: 10rem; } #usecases .flex .card-row { display: flex; flex-direction: column; } #usecases .flex .card-row .uc-title { max-width: 489px; margin: 1rem; } #usecases .flex .card-row .uc-title h2 { color: #fff; font-weight: 600; font-size: 42px; letter-spacing: -1.2px; line-height: 49px; margin-bottom: 0; } @media screen and (max-width: 620px) { #usecases .flex .card-row .uc-title h2 { font-size: 30px; } } #usecases .flex .card-row .uc-title h3 { color: #fff; font-size: 28px; font-weight: 500; letter-spacing: -.8px; line-height: 33px; } @media screen and (max-width: 620px) { #usecases .flex .card-row .uc-title h3 { font-size: 22px; line-height: 29px; } } #usecases .flex .card-row .card { background: #fff; border-radius: 8px; margin: 1rem; display: flex; box-shadow: 0 7px 30px 0 rgba(11, 33, 60, 0.1); max-width: 489px; display: flex; flex-direction: column; justify-content: center; align-items: center; } #usecases .flex .card-row .card span { color: white; background-color: #19B5F0; border-radius: 19.5px; margin: 1rem 1rem -1rem; font-size: 23px; font-weight: 700; letter-spacing: -1.2px; padding: 5px 10px; align-self: flex-end; } #usecases .flex .card-row .card .content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; } @media screen and (max-width: 620px) { #usecases .flex .card-row .card .content { padding: 1.5rem; } } #usecases .flex .card-row .card .content img { width: 100px; } @media screen and (max-width: 620px) { #usecases .flex .card-row .card .content img { width: 40px; } } #usecases .flex .card-row .card .content h2 { color: #555555; font-weight: 700; text-align: center; } @media screen and (max-width: 620px) { #usecases .flex .card-row .card .content h2 { margin-bottom: 0.5rem; } } #usecases .flex .card-row .card .content p { color: #858585; line-height: 28px; font-size: 16px; font-weight: 500; margin-bottom: 0; } #usecases .flex .card-row .card .content p a { font-weight: 600; color: #EC455B; } #usecases .flex .card-row .more { text-transform: uppercase; font-size: 14px; letter-spacing: -.57px; margin: 1rem; max-width: 489px; } @media screen and (max-width: 1040px) { #usecases .flex .card-row .more .more-head { text-align: center; } } #usecases .flex .card-row .more .buttons { display: flex; flex-direction: row; flex-wrap: wrap; } #usecases .flex .card-row .more .buttons button { margin: 0 0.5rem 0.5rem 0; background-image: none; box-shadow: 0 7px 30px 0 rgba(11, 33, 60, 0.1); cursor: pointer; text-transform: scale(0); background-color: #fff; padding: 10px 20px; font-weight: 500; letter-spacing: -1.2px; font-weight: 600; border: 1px solid #fff; color: #858585; border-radius: 19.5px; font-size: 16px; } @media screen and (max-width: 1040px) { #usecases .flex .card-row .more .buttons button { font-size: 12px; letter-spacing: -.4px; } } #usecases .flex .card-row .more .buttons button a { text-decoration: none; color: #858585; } #usecases .flex .card-row .more .buttons button:hover { color: #EC455B; border: 1px solid #EC455B; transform: none; } @media screen and (max-width: 1040px) { #usecases .flex .card-row .more .buttons { margin-top: 0.5rem; justify-content: center; display: flex; align-items: center; flex-wrap: wrap; } } @media screen and (max-width: 1040px) { #usecases .flex .card-row .more { justify-content: center; display: flex; align-items: center; flex-direction: column; } } @media screen and (min-width: 621px) and (max-width: 1040px) { #usecases .flex .card-row { max-width: 375px; } } #whitepaper { background: #f5f7f9 url(/img/new/whitepaper.png) no-repeat bottom left; background-size: 50%; } @media screen and (max-width: 760px) { #whitepaper { background-size: 100%; text-align: center; } } #whitepaper .left { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } @media screen and (max-width: 760px) { #whitepaper .left { display: none; } } #whitepaper .right { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; margin-bottom: 200px; } @media screen and (max-width: 760px) { #whitepaper .right { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } } #whitepaper h1 { text-align: left; width: 100%; margin-bottom: 20px; } @media screen and (max-width: 760px) { #whitepaper h1 { text-align: center; } } #whitepaper h2 { text-align: left; width: 100%; margin-bottom: 30px; } @media screen and (max-width: 760px) { #whitepaper h2 { text-align: center; } } #whitepaper p { margin-bottom: 30px; } @media screen and (max-width: 760px) { #whitepaper p { text-align: center; } } #whitepaper .container, #whitepaper header .inner, header #whitepaper .inner { padding-top: 150px; padding-bottom: 150px; } @media screen and (max-width: 760px) { #whitepaper .container, #whitepaper header .inner, header #whitepaper .inner { padding: 40px 0 300px 0; } } .particle-network-animation { position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: -1; } /** * Swiper 4.1.6 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2018 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 11, 2018 */ .swiper-container { margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .swiper-invisible-blank-slide { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform; } /* 3D Effects */ .swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent); } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent); } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent); } /* IE10 Windows Phone 8 Fixes */ .swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper { -ms-touch-action: pan-x; touch-action: pan-x; } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms opacity; transition: 300ms opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #DAE8F2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: #8FADCA; } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: 200ms top, 200ms -webkit-transform; transition: 200ms top, 200ms -webkit-transform; transition: 200ms transform, 200ms top; transition: 200ms transform, 200ms top, 200ms -webkit-transform; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms left, 200ms -webkit-transform; transition: 200ms left, 200ms -webkit-transform; transition: 200ms transform, 200ms left; transition: 200ms transform, 200ms left, 200ms -webkit-transform; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms right, 200ms -webkit-transform; transition: 200ms right, 200ms -webkit-transform; transition: 200ms transform, 200ms right; transition: 200ms transform, 200ms right, 200ms -webkit-transform; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white .swiper-pagination-bullet-active { background: #ffffff; } .swiper-pagination-progressbar.swiper-pagination-white { background: rgba(255, 255, 255, 0.25); } .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { background: #ffffff; } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000000; } .swiper-pagination-progressbar.swiper-pagination-black { background: rgba(0, 0, 0, 0.25); } .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { background: #000000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ''; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-coverflow .swiper-wrapper { /* Windows 8 IE 10 fix */ -ms-perspective: 1200px; } .swiper-wrapper { padding-bottom: 2rem; } .swiper-container { margin-right: auto; } .swiper-slide { height: auto; } .gallery-top { height: auto; width: 100%; } .gallery-thumbs { height: 130px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; margin-bottom: 30px; } @media screen and (max-width: 760px) { .gallery-thumbs { margin-bottom: 0; } } .gallery-thumbs .swiper-slide { width: 230px; height: auto; opacity: 0.3; -webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } .gallery-thumbs .swiper-slide-active { opacity: 1; -webkit-transform: translateY(-3px); transform: translateY(-3px); } #idea { overflow: hidden; } @media (max-width: 480px) { #idea #polygonAnimation { display: none; } } #idea .inner { margin-top: 0; } #idea .headline { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; text-align: center; } #idea .row { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap-reverse; } #idea .right { max-width: 400px; margin-right: 2rem; } @media screen and (max-width: 760px) { #idea .right { margin-right: 0; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } } @media (max-width: 1024px) { #idea .right { max-width: 670px; } } #idea h2 { margin: 0; font-size: 30px; color: #EC455B; font-weight: 700; text-align: left; } @media screen and (max-width: 760px) { #idea h2 { margin-top: 24px; } } #idea h3 { color: #393939; font-size: 28px; margin: .5rem 0 0 0; line-height: 33px; text-align: left; } #idea p { font-size: 16px; color: #393939; line-height: 24px; } #idea ul { padding-left: 18px; } #idea ul li { margin-bottom: 10px; } #idea .blockchain img { max-width: 100%; } @media screen and (max-width: 760px) { #idea .blockchain img { width: 120%; max-width: none; transform: translateX(-10%); } } .logos { margin: 0; padding: 0; } .logos li { list-style: none; display: block; float: left; width: 33.3%; text-align: center; margin: 30px auto; } @media screen and (max-width: 760px) { .logos li { margin: 10px auto; } } .logos li img { max-width: 90%; max-height: 60px; margin: 0 5%; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } @media screen and (max-width: 760px) { .logos li img { max-height: 26px; } } .logos li img:hover { -webkit-filter: none; filter: none; } .twenty18-hide { display: none; } .twenty18-hide img { display: none; } .rm-section { max-width: 300px; } .twenty18-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .twenty18-flex .twenty18-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .twenty18-flex .twenty18-row .rm-section .content { margin-right: 1rem; } .twenty18-flex img { display: block; } @keyframes glowing { 0% { -webkit-box-shadow: 0 0 5px #FF0606; box-shadow: 0 0 5px #FF0606; } 40% { -webkit-box-shadow: 0 0 20px #FF0606; box-shadow: 0 0 20px #FF0606; } 60% { -webkit-box-shadow: 0 0 25px #FF0606; box-shadow: 0 0 25px #FF0606; } 100% { -webkit-box-shadow: 0 0 5px #FF0606; box-shadow: 0 0 5px #FF0606; } } .glow { -webkit-animation: glowing 4500ms infinite; animation: glowing 4500ms infinite; } #roadmap { 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: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 4rem 2rem; color: #555555; } #roadmap h2 { font-size: 30px; letter-spacing: -.86px; font-weight: 700; margin: 1rem 0 4rem 0; padding-top: 2em; } #roadmap .rm-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 1rem; } #roadmap .rm-toggle button { padding: 8px 10px; cursor: pointer; background: white; color: #8398A9; border: 1px solid #CBD7E2; font-size: 14px; font-weight: 700; font-family: 'Raleway'; letter-spacing: -.55px; } #roadmap .rm-toggle button:nth-of-type(1) { border-radius: 500px 0 0 500px; } #roadmap .rm-toggle button:nth-of-type(2) { border-radius: 0 500px 500px 0; } #roadmap .rm-toggle .rm-selected { background: #E7EEF3; color: #EC455B; } @media screen and (max-width: 620px) { #roadmap { margin: 0rem 2rem; } #roadmap .twenty18-flex .twenty18-row { 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: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #roadmap .twenty18-flex .twenty18-row img { display: none; } #roadmap #timeline-desktop { display: none; } #roadmap #timeline-mobile .rm-section .circle { width: 20px; height: 20px; background: #fff; border-radius: 50%; -webkit-box-shadow: 0 7px 10px 0 rgba(11, 33, 60, 0.1); box-shadow: 0 7px 10px 0 rgba(11, 33, 60, 0.1); position: absolute; margin: 0 0 0 -25px; border: 2px solid #FF0606; z-index: 900; } } @media screen and (max-width: 620px) and (max-width: 620px) { #roadmap #timeline-mobile .rm-section .circle { width: 18px; height: 18px; background: #FF0606; margin: 0 2rem 0 -28px; border: 2px solid #fff; } } @media screen and (max-width: 620px) { #roadmap #timeline-mobile .content p { text-align: left; font-size: 12px; letter-spacing: -.34px; line-height: 19px; } #roadmap #timeline-mobile .content .head { font-size: 17px; letter-spacing: -.39px; font-weight: 700; text-align: left; } } @media screen and (min-width: 621px) { #timeline-desktop { 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: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #timeline-desktop img { width: 100%; margin-left: 3rem; } #timeline-desktop img img:after { content: ""; position: absolute; z-index: 1; bottom: 0; left: 0; pointer-events: none; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(90%, white)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 90%); width: 100%; height: 4em; } #timeline-desktop .content p { text-align: left; font-size: 12px; letter-spacing: -.34px; line-height: 19px; } #timeline-desktop .content .head { font-size: 17px; letter-spacing: -.39px; font-weight: 700; text-align: left; } #timeline-desktop .timeline-wrap { margin: 0 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } #timeline-desktop .timeline-wrap .rm-section { margin-right: 1rem; } #timeline-desktop .timeline-wrap:nth-of-type(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } #timeline-desktop .timeline-wrap:nth-of-type(2) { margin-left: 6rem; } #timeline-mobile { display: none; } } .lp { position: relative; } .lp.medical-research { background: url(/img/new/usecase/medical-research.jpg) center no-repeat; background-size: cover; } .lp.medical-care { background: url(/img/new/usecase/medical-care.jpg) center no-repeat; background-size: cover; } .lp.sports-sponsoring-everyone { background: url(/img/new/usecase/sports-sponsoring-everyone.jpg) center no-repeat; background-size: cover; } .lp.sports-sponsoring-gym { background: url(/img/new/usecase/sports-sponsoring-gym.jpg) center no-repeat; background-size: cover; } .lp .content { width: 65%; bottom: 60px; right: 60px; max-width: 800px; margin: 0 auto 0 auto; } @media screen and (max-width: 760px) { .lp .content { width: 90%; margin: 0 auto; } } .lp .content.box, .lp .content.modal, .lp .content#fall, .lp .notification > a.content, .lp #usecase .item a.content.inner, #usecase .item .lp a.content.inner { border-radius: 10px; color: #000; padding: 20px; background-color: rgba(255, 255, 255, 0.7); } .infographic img { max-width: 100%; } @media screen and (max-width: 760px) { .infographic img { max-width: 100%; } } .infographic > .inner { padding-bottom: 0; } .infographic .content { text-align: center; } .team-advisors { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 2em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 2rem 0; } @media screen and (max-width: 760px) { .team-advisors { text-align: left; } } .team-advisors a { color: #000; text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .team-advisors h2 { color: #555555; font-size: 30px; font-weight: 700; text-align: center; } @media screen and (max-width: 760px) { .team-advisors h2 { margin-top: 10px; } } .team-advisors p { font-size: 22px; color: #393939; font-weight: 500; letter-spacing: -.8px; max-width: 700px; text-align: center; line-height: 1.5em; margin: 0 1rem 1.75rem 1rem; } @media screen and (max-width: 620px) { .team-advisors p { font-size: 14px; line-height: 22px; } } .team-advisors .people { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; max-width: 1100px; } .team-advisors .people .person { 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: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 175px; } .team-advisors .people .person .headshot, .team-advisors .people .person .advisor-headshot { -webkit-transition: background-image .15s; -webkit-transition: background-image .15s; -webkit-transition: background-image .15s; -webkit-transition: background-image; transition: background-image .15s; background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer; width: 100%; height: 160px; } .team-advisors .people .person .kjeld { background-image: url("/img/new/team/kjeld-peters.png"); } .team-advisors .people .person .daniel-w { background-image: url("/img/new/team/daniel-wischer.png"); } .team-advisors .people .person .merle { background-image: url("/img/new/team/merle-molitor.png"); } .team-advisors .people .person .jens { background-image: url("/img/new/team/jens-kappe.png"); } .team-advisors .people .person .jonas { background-image: url("/img/new/team/jonas-bading.png"); } .team-advisors .people .person .sven { background-image: url("/img/new/team/sven-eismann.png"); } .team-advisors .people .person .thomas { background-image: url("/img/new/team/thomas-stampfli.png"); } .team-advisors .people .person .thomas-b { background-image: url("/img/new/team/thomas-bartz.png"); } .team-advisors .people .person .carsten { background-image: url("/img/new/team/carsten-buchberger.png"); } .team-advisors .people .person .daniel-h { background-image: url("/img/new/team/daniel-hanelt.png"); } .team-advisors .people .person .thomas { background-image: url("/img/new/team/thomas-stampfli.png"); } .team-advisors .people .person .marcel { background-image: url("/img/new/team/marcel-sangals.png"); } .team-advisors .people .person .lorenz { background-image: url("/img/new/team/lorenz-schumann.png"); } .team-advisors .people .person .mirco { background-image: url("/img/new/team/mirco-schuh.png"); } .team-advisors .people .person .kerstin { background-image: url("/img/new/team/kerstin-burgel.png"); } .team-advisors .people .person .dennis { background-image: url("/img/new/team/dennis-muth.png"); } .team-advisors .people .person .simon { background-image: url("/img/new/advisor/simon-cocking.png"); } .team-advisors .people .person .miriam { background-image: url("/img/new/advisor/miriam-neubauer.png"); } .team-advisors .people .person .kris-w { background-image: url("/img/new/advisor/kris-stelljes.png"); } .team-advisors .people .person .josh { background-image: url("/img/new/advisor/joshuwa-roomsburg.png"); } .team-advisors .people .person .brian { background-image: url("/img/new/advisor/brian-condenanza.png"); } .team-advisors .people .person .dennis-w { background-image: url("/img/new/advisor/dennis-weidner.png"); } .team-advisors .people .person .headshot:hover { background-image: url("/img/team-hover.png"); } .team-advisors .people .person .advisor-headshot:hover { background-image: url("/img/team-hover.png"); } .team-advisors .people .person .name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .team-advisors .people .person .name p { font-size: 14px; letter-spacing: -.6px; font-weight: 700; line-height: 16px; margin: 0; } @media screen and (max-width: 620px) { .team-advisors .people .person .name p { margin: .5rem 0 0 0; } } .team-advisors .people .person .name a img { width: 15px; margin-left: .5rem; } @media screen and (max-width: 620px) { .team-advisors .people .person .name { margin-top: -1rem; } } .team-advisors .people .person .title { font-size: 14px; letter-spacing: -.6px; color: #ABABAB; margin: 5px 0 .5rem 0; line-height: 18px; } @media screen and (max-width: 620px) { .team-advisors .people .person .title { height: auto; font-size: 13px; } } @media screen and (min-width: 620px) { .team-advisors .people .person { margin: 0 1rem; } } @media screen and (max-width: 620px) { .team-advisors .people .person { margin: 0 .75rem; width: 125px; } } @media screen and (min-width: 620px) { .team-advisors .people { margin: 0 1rem; max-width: 100%; } } @media screen and (min-width: 1040px) { .team-advisors .people { max-width: 70%; } } .team-advisors strong { margin-bottom: 10px; } .team-advisors [class^="col-"] { margin-bottom: 60px; } @media screen and (max-width: 760px) { .team-advisors [class^="col-"] { margin-bottom: 20px; } } .lang-select { position: relative; } .lang-select img { width: 20px; height: 20px; } .lang-select:hover .language-selection { display: block; opacity: 1; transition: opacity .3s ease; } nav .language-selection { display: none; position: absolute; background-color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); z-index: 100; line-height: 1; padding: 10px 15px; text-align: center; border-radius: 3px; right: -20px; -webkit-transform: translateY(-12px); transform: translateY(-12px); opacity: 0; transition: opacity .3s ease; } nav .language-selection img { width: 20px; height: 20px; } nav .language-selection li { margin: 5px; padding: 0; height: 28px; line-height: 1; } nav .language-selection li a { border-bottom: none !important; } nav .language-selection:after { content: ""; position: absolute; border-style: solid; display: block; width: 0; top: -15px; right: 15px; border-width: 0 15px 15px; border-color: #fff transparent; } nav .language-selection-open { display: block; opacity: 1; transition: opacity .3s ease; } .multi-bar { clear: both; } .multi-bar-content { position: relative; font-family: Arial; /* Code for activate initial animation of the multi-bar width:0px; transition: 0.5s linear; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -o-transition: 0.5s linear; -ms-transition: 0.5s linear;*/ } .multi-bar-content.yes-legend { width: 68%; margin: 0% 1%; float: left; } .multi-bar-box { background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; height: 20px; margin-bottom: 5px; overflow: hidden; } .multi-bar-big .multi-bar-box { height: 30px; } .multi-bar-small .multi-bar-box { height: 10px; } .multi-bar-bar { background-color: transparent; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset; color: #fff; float: left; font-size: 12px; height: 100%; line-height: 20px; text-align: center; transition: width 0.6s ease 0s; width: 0; } .multi-bar-box.reverse .multi-bar-bar { float: right; } .multi-bar-value-content { position: relative; height: 12px; } .multi-bar-value-box { font-size: 12px; line-height: 10px; float: left; text-align: right; } .multi-bar-value-box-hidden .multi-bar-value-box, .multi-bar-value-box.hidden { visibility: hidden; } .multi-bar-value-content.reverse .multi-bar-value-box { float: right; text-align: left; } .multi-bar-value { position: relative; right: -5px; } .multi-bar-value-content.reverse .multi-bar-value { left: -5px; position: relative; } .multi-bar-initVal { font-size: 12px; left: -20px; line-height: 10px; position: absolute; } .multi-bar-value-content.reverse .multi-bar-initVal { right: -4px; left: auto; } .multi-bar-lastVal { font-size: 12px; line-height: 10px; position: absolute; right: -4px; } .multi-bar-value-content.reverse .multi-bar-lastVal { left: -4px; } .multi-bar-marker-content { height: 30px; position: relative; } .multi-bar-marker-content.inside { top: 13px; } .multi-bar-marker { font-size: 14px; line-height: 14px; margin-left: -15px; position: absolute; text-align: center; width: 60px; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -o-transition: 0.3s linear; -ms-transition: 0.3s linear; } .multi-bar-marker-content.reverse .multi-bar-marker { margin-right: -15px; } .multi-bar-marker-tooltip { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); border-radius: 5px; color: #fff; font-size: 12px; left: 50%; margin-left: -45px; padding: 5px; position: absolute; text-align: center; top: -27px; width: 80px; } .multi-bar-legend-box { font-family: Arial; font-size: 12px; margin: 0% 1%; float: left; } .multi-bar-legend-title { border-bottom: 1px solid; font-size: 14px; font-weight: bold; margin-bottom: 3px; padding-bottom: 3px; text-align: center; } .multi-bar-legend-item { border-bottom: 1px solid #444; margin-bottom: 2px; } /* css thermometer type */ .multi-bar.thermometer .multi-bar-content { padding-left: 45px; padding-right: 6px; } .multi-bar-small.multi-bar.thermometer .multi-bar-content { padding-left: 37px; padding-right: 4px; } .multi-bar-big.multi-bar.thermometer .multi-bar-content { padding-left: 54px; padding-right: 8px; } .multi-bar.thermometer .multi-bar-box { border: 6px solid #ccc; border-left: none; border-right: none; border-radius: 0px; position: relative; z-index: 1; } .multi-bar-small.multi-bar.thermometer .multi-bar-box { border: 4px solid #ccc; border-left: none; border-right: none; border-radius: 0px; } .multi-bar-big.multi-bar.thermometer .multi-bar-box { border: 8px solid #ccc; border-left: none; border-right: none; border-radius: 0px; } .thermometer_init { background: #f5f5f5; border: 6px solid #ccc; border-radius: 28px; bottom: 5px; height: 45px; left: 0; position: absolute; width: 40px; } .multi-bar-big .thermometer_init { height: 56px; border: 8px solid #ccc; border-radius: 36px; width: 48px; bottom: 5px; } .multi-bar-small .thermometer_init { height: 34px; width: 34px; border: 4px solid #ccc; bottom: 5px; } .thermometer_end { border-radius: 3px; border-right: 6px solid #ccc; bottom: 17px; height: 32px; position: absolute; right: 0; } .multi-bar-big .thermometer_end { height: 46px; border-right: 8px solid #ccc; } .multi-bar-small .thermometer_end { height: 18px; border-right: 4px solid #ccc; } .multi-bar-marker-value { color: #fff; font-weight: bold; margin-left: -26px; } .multi-bar-marker-value:after { content: ' €'; } .multi-bar-lastVal:after, .multi-bar-initVal:after, .multi-bar-value:after { content: ' €'; } .pricebar { position: relative; background: rgba(0, 0, 0, 0.4); width: 14px; height: 100%; border-radius: 15px; margin-left: 20px; } .pricebar:before, .pricebar:after { display: block; position: absolute; content: "0.02€"; color: #fff; font-size: 12px; left: 24px; } .pricebar:before { content: "0.02€"; top: 0; } .pricebar:after { content: "0.01€"; bottom: 0; } .pricebar .success { position: absolute; background: white; border-radius: 15px; width: 14px; bottom: 0; } .pricebar .success > span { display: block; position: absolute; left: 24px; } a { cursor: pointer; } #partners { background: #F6FAFD; padding: 4rem 0; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; margin: 1rem 0; } @media screen and (min-width: 2000px) { #partners { padding: 4rem 20rem; } } #partners span { color: #C6D5E0; font-size: 14px; font-weight: 600; text-align: right; margin-top: 20px; -ms-flex-item-align: end; align-self: flex-end; } @media only screen and (max-width: 1100px) { #partners span { -ms-flex-item-align: center; align-self: center; } } #partners h2 { font-size: 18px; color: #555555; font-weight: 700; margin-left: 0.5rem; } #partners .left-wrapper { 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: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin: 0 3rem; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } @media only screen and (max-width: 1100px) { #partners .left-wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media only screen and (max-width: 500px) { #partners .left-wrapper { margin: 0 1rem; } } @media only screen and (min-width: 2200px) { #partners .left-wrapper { margin: 0 15%; } } #partners .partner-cards { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } @media only screen and (max-width: 1100px) { #partners .partner-cards { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } #partners .bottom { margin-left: 5rem; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } @media only screen and (max-width: 1100px) { #partners .bottom { margin-left: 0; } } #partners .row-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; margin: 0 3rem; } @media only screen and (max-width: 1100px) { #partners .row-right { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (max-width: 500px) { #partners .row-right { margin: 0 1rem; } } @media only screen and (min-width: 2200px) { #partners .row-right { margin: 0 15%; } } #partners .partner { height: 102px; margin: 0.5rem; border-radius: 8px; background: #FFFFFF; -webkit-box-shadow: 0 7px 30px 0 rgba(11, 33, 60, 0.1); box-shadow: 0 7px 30px 0 rgba(11, 33, 60, 0.1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #partners .partner p { font-size: 12px; color: #858585; font-weight: 500; margin: 1rem; max-width: 322px; line-height: 16px; } @media only screen and (max-width: 500px) { #partners .partner p { max-width: 400px; } } #partners .partner a img { margin: 1rem 1rem 1rem 1rem; max-width: 85px; } @media screen and (max-width: 620px) { #partners .partner a img { margin: 1rem 1rem 0rem 1rem; } } @media only screen and (max-width: 620px) { #partners .partner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: auto; } } @media only screen and (max-width: 1100px) { #partners { -ms-flex-item-align: center; align-self: center; } } .video-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #learn { margin: 3rem 1rem; text-align: left; 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: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (min-width: 620px) { #learn .video-title { display: none; } } #learn .swiper-container .swiper-wrapper { margin: 2rem 0; } #learn h2 { font-size: 30px; font-weight: 700; margin-top: 4rem; } #learn .videos { width: 100%; } @media screen and (min-width: 1500px) { #learn .videos { max-width: 30%; } } @media screen and (min-width: 620px) { #learn .videos { display: none; } } #learn .questions { margin-top: 3rem; } #learn .questions h2 { font-size: 22px; text-align: center; font-weight: 500; margin: 0 1rem; } #learn .questions h2 span { color: #EC455B; } @media screen and (max-width: 620px) { #learn .questions h2 { font-size: 18px; } } #learn .questions .social-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #learn .questions .social-icons img { margin: 2rem 1rem; } @media only screen and (max-width: 530px) { #learn .questions .social-icons img { margin: 2rem 0.5rem; height: 20px; } } #learn .questions .social-icons #discord-footer { width: 48px; height: 48px; -webkit-filter: grayscale(100%); filter: grayscale(35%); opacity: 0.42; } #learn .accordion-wrapper { margin: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; } @media screen and (max-width: 620px) { #learn .accordion-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } #learn .accordion-wrapper .accordion { font-family: raleway; font-size: 16px; width: 500px; margin: 0 1rem; } @media screen and (max-width: 620px) { #learn .accordion-wrapper .accordion { width: 100%; flex-direction: column; align-items: flex-start; } } #learn .accordion-wrapper .accordion h3 { line-height: 30px; } #learn .accordion-wrapper .accordion h3 span { margin: 0 .5rem; } #learn .accordion-wrapper .accordion .ui-accordion .ui-accordion-header .ui-icon { font-family: raleway; font-size: 16px; position: absolute; } #learn .accordion-wrapper .accordion .ui-button, #learn .accordion-wrapper .accordion .ui-state-default, #learn .accordion-wrapper .accordion .ui-widget-content .ui-state-default, #learn .accordion-wrapper .accordion .ui-widget-header .ui-state-default, #learn .accordion-wrapper .accordion html .ui-button.ui-state-disabled:active, #learn .accordion-wrapper .accordion html .ui-button.ui-state-disabled:hover { background: #FFFFFF; border-color: #D9D6D6; border-bottom-style: dashed; border-right-style: none; border-left-style: none; border-top-style: none; } #learn .accordion-wrapper .accordion .ui-widget-content { border: none; background: #F6FAFD; } #learn .accordion-wrapper .accordion .ui-accordion-header:hover { outline: none; } #learn .accordion-wrapper .accordion .ui-accordion-header:active { outline: none; } #learn .accordion-wrapper .accordion .ui-accordion-header:focus { outline: none; } #learn .accordion-wrapper .accordion .ui-accordion:visted { outline: none; } #learn .accordion-wrapper .accordion .ui-corner-all, #learn .accordion-wrapper .accordion .ui-corner-right, #learn .accordion-wrapper .accordion .ui-corner-top, #learn .accordion-wrapper .accordion .ui-corner-tr { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #learn .accordion-wrapper .accordion .ui-accordion-header-active { background: #F6FAFD; color: #698AAA; } #learn .accordion-wrapper .accordion .ui-widget-content { color: #858585; } #details { -webkit-transition: all .2s; transition: all .2s; 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: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 3rem 0; background: url("/img/token-bg.png"); background-repeat: no-repeat; background-size: cover; } #details h2 { font-size: 30px; line-height: 38px; font-weight: 700; color: #555555; } #details .token-details { 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-align: center; -ms-flex-align: center; align-items: center; } #details .token-details .table { border-radius: 8px; background: white; -webkit-box-shadow: 0 7px 30px rgba(11, 33, 60, 0.1); box-shadow: 0 7px 30px rgba(11, 33, 60, 0.1); margin-bottom: 2rem; } #details .token-details .table .token-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid rgba(151, 151, 151, 0.1); margin: .5rem; padding-bottom: .5rem; } #details .token-details .table .token-row p { color: #555555; text-align: left; letter-spacing: -.63px; } @media only screen and (max-width: 370px) { #details .token-details .table .token-row p { font-size: 13px; margin: 0 .3rem; } } #details .token-details .table .token-row p:nth-of-type(1) { margin: 0 4rem 0 0; width: 120px; } @media only screen and (max-width: 530px) { #details .token-details .table .token-row p:nth-of-type(1) { margin: 0; } } #details .token-details .table .token-row p:nth-of-type(2) { margin: 0 4rem 0 3rem; } @media only screen and (max-width: 530px) { #details .token-details .table .token-row p:nth-of-type(2) { margin: 0 .5rem 0 .5rem; } } #details .token-details .table .token-row img { width: 33px; margin: 0 2rem; } @media only screen and (max-width: 530px) { #details .token-details .table .token-row img { margin: 0 1rem; } } @media only screen and (max-width: 370px) { #details .token-details .table .token-row img { width: 20px; margin: 0 .5rem; } } #details .token-details .table .no-border { border-bottom: 0px; } #details .token-details a { color: #31A0EC; text-decoration: none; cursor: pointer; } #details button { cursor: pointer; color: #31A0EC; font-size: 17px; font-weight: 400; letter-spacing: -.86px; border: 1px solid #31A0EC; background: white; border-radius: 18px; text-transform: none; text-decoration: none; padding: 8px 20px 8px 20px; } #details .price-trend { display: none; } #details .price-trend .inner { 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: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #details .price-trend .inner .wrapper { padding: 2rem 1rem .5rem 1rem; background: #fff; border-radius: 8px; -webkit-box-shadow: 0 7px 30px rgba(11, 33, 60, 0.1); box-shadow: 0 7px 30px rgba(11, 33, 60, 0.1); margin-bottom: 2rem; } #details .price-trend .inner .wrapper h3 { font-weight: 700; font-size: 20px; line-height: 24px; text-align: center; letter-spacing: -.33px; color: #555555; margin-bottom: 0; } @media screen and (max-width: 620px) { #details .price-trend .inner .wrapper h3 { font-weight: 600; font-size: 18px; line-height: 22px; letter-spacing: -.33px; } } #details .price-trend .inner .wrapper .factors { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 1rem 0; } #details .price-trend .inner .wrapper .factors .factor { font-size: 17px; letter-spacing: -.33; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #details .price-trend .inner .wrapper .factors .factor p { margin: 0; } @media screen and (max-width: 620px) { #details .price-trend .inner .wrapper .factors .factor p { max-width: 280px; } } #details .price-trend .inner .wrapper .factors .factor div { background-color: #EC455B; width: 10px; height: 10px; margin: 0 1rem; } #details .price-trend .inner .wrapper .factors button { cursor: pointer; color: #31A0EC; font-size: 17px; font-weight: 400; letter-spacing: -.86px; border: 1px solid #31A0EC; background: white; border-radius: 18px; text-transform: none; text-decoration: none; padding: 8px 20px 8px 20px; } @media screen and (max-width: 620px) { #details .price-trend .inner .wrapper .factors { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .lang-select { position: relative; } .lang-select img { width: 20px; height: 20px; } .lang-select:hover .language-selection { display: block; opacity: 1; transition: opacity .3s ease; } nav .language-selection { display: none; position: absolute; background-color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); z-index: 100; line-height: 1; padding: 10px 15px; text-align: center; border-radius: 3px; right: -20px; -webkit-transform: translateY(-12px); transform: translateY(-12px); opacity: 0; transition: opacity .3s ease; } nav .language-selection img { width: 20px; height: 20px; } nav .language-selection li { margin: 5px; padding: 0; height: 28px; line-height: 1; } nav .language-selection li a { border-bottom: none !important; } nav .language-selection:after { content: ""; position: absolute; border-style: solid; display: block; width: 0; top: -15px; right: 15px; border-width: 0 15px 15px; border-color: #fff transparent; } nav .language-selection-open { display: block; opacity: 1; transition: opacity .3s ease; } #supply-chart { 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: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #supply-chart h2 { font-size: 30px; line-height: 38px; font-weight: 700; color: #555555; margin: 2rem; } #supply-chart p { font-size: 13px; font-weight: 600; letter-spacing: -.15px; color: #C6D5E0; } #supply-chart .supply-chart-iframe { overflow: hidden; border: none; height: 500px; } @media screen and (max-width: 1600px) { #supply-chart .supply-chart-iframe { height: 350px; } } #polygonAnimation { position: relative; width: 550px; height: 450px; } #polygonAnimation .polygon { position: absolute; display: block; width: 115px; height: 100px; background: url(/img/new/polygon/background.svg) center; -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; } #polygonAnimation .polygon:nth-of-type(1) { top: 0; left: 104px; background-image: url(/img/new/polygon/background2.svg); } #polygonAnimation .polygon:nth-of-type(2) { top: 0; left: 312px; } #polygonAnimation .polygon:nth-of-type(3) { top: 114px; left: 104px; } #polygonAnimation .polygon:nth-of-type(4) { top: 55px; left: 207px; } #polygonAnimation .polygon:nth-of-type(5) { top: 114px; left: 309px; background-image: url(/img/new/polygon/background2.svg); } #polygonAnimation .polygon:nth-of-type(6) { top: 175px; left: 0px; } #polygonAnimation .polygon:nth-of-type(7) { top: 175px; left: 207px; } #polygonAnimation .polygon:nth-of-type(8) { top: 175px; left: 409px; } #polygonAnimation .polygon:nth-of-type(9) { top: 234px; left: 104px; } #polygonAnimation .polygon:nth-of-type(10) { top: 291px; left: 0px; background-image: url(/img/new/polygon/background2.svg); } #polygonAnimation .polygon:nth-of-type(11) { top: 291px; left: 203px; background-image: url(/img/new/polygon/background2.svg); } #polygonAnimation .polygon:nth-of-type(12) { top: 234px; left: 307px; } #polygonAnimation .stoke { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } #polygonAnimation .stoke svg { position: absolute; top: 0; left: 0; } #polygonAnimation .stoke svg:nth-of-type(1) polyline { -webkit-animation: stoke 10s linear 2s infinite, strokethick 2s ease-in-out 2s infinite; animation: stoke 10s linear 2s infinite, strokethick 2s ease-in-out 2s infinite; } #polygonAnimation .stoke svg:nth-of-type(2) polyline { -webkit-animation: stoke 10s linear 1.2s infinite, strokethick 2s ease-in-out 1.2s infinite; animation: stoke 10s linear 1.2s infinite, strokethick 2s ease-in-out 1.2s infinite; } #polygonAnimation .stoke svg:nth-of-type(3) polyline { -webkit-animation: stoke 10s linear 0.7s infinite, strokethick 2s ease-in-out 0.7s infinite; animation: stoke 10s linear 0.7s infinite, strokethick 2s ease-in-out 0.7s infinite; } #polygonAnimation .stoke svg:nth-of-type(4) polyline { -webkit-animation: stoke 10s linear 0s infinite, strokethick 2s ease-in-out 0s infinite; animation: stoke 10s linear 0s infinite, strokethick 2s ease-in-out 0s infinite; } #polygonAnimation .stoke .st0 { fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-dasharray: 100; stroke-dashoffset: 800; stroke-width: 2; } #polygonAnimation .beat { display: none; } #polygonAnimation .beat > div { position: relative; width: 30px; height: 30px; border-radius: 25px; opacity: 0; -webkit-animation: beat 2s linear 2s infinite; animation: beat 2s linear 2s infinite; } #polygonAnimation .beat > div:after { position: absolute; display: block; content: ""; width: 50%; height: 50%; margin: 25%; background: url(/img/new/logo/logo-standalone-white.svg) center no-repeat; } #polygonAnimation .beat > div:nth-of-type(1) { top: 110px; left: 190px; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } #polygonAnimation .beat > div:nth-of-type(2) { top: 50px; left: 292px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } #polygonAnimation .beat > div:nth-of-type(3) { top: 97px; left: 281px; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } #polygonAnimation .beat > div:nth-of-type(4) { top: 118px; left: 132px; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } #polygonAnimation .beat > div:nth-of-type(5) { top: 139px; left: 281px; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } #polygonAnimation .beat > div:nth-of-type(6) { top: 156px; left: 193px; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } #polygonAnimation .beat > div:nth-of-type(7) { top: -21px; left: 220px; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } #polygonAnimation .beat > div:nth-of-type(8) { top: 139px; left: 281px; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } #polygonAnimation .beat > div:nth-of-type(9) { top: -31px; left: 365px; -webkit-animation-delay: 1s; animation-delay: 1s; } #polygonAnimation.connected .polygon:nth-of-type(1) { -webkit-transform: translate(18px, 25px); transform: translate(18px, 25px); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 2s; animation-delay: 2s; } #polygonAnimation.connected .polygon:nth-of-type(2) { -webkit-transform: translate(-19.5px, 24px); transform: translate(-19.5px, 24px); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s; } #polygonAnimation.connected .polygon:nth-of-type(3) { -webkit-transform: translate(16.5px, 11px); transform: translate(16.5px, 11px); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 0; animation-delay: 0; } #polygonAnimation.connected .polygon:nth-of-type(4) { -webkit-transform: translate(0, 20px); transform: translate(0, 20px); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 3s; animation-delay: 3s; } #polygonAnimation.connected .polygon:nth-of-type(5) { -webkit-transform: translate(-16px, 10px); transform: translate(-16px, 10px); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 0s; animation-delay: 0s; } #polygonAnimation.connected .polygon:nth-of-type(6) { -webkit-transform: translate(33.5px, -1px); transform: translate(33.5px, -1px); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 4s; animation-delay: 4s; } #polygonAnimation.connected .polygon:nth-of-type(7) { -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } #polygonAnimation.connected .polygon:nth-of-type(8) { -webkit-transform: translate(-29px, -2px); transform: translate(-29px, -2px); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s; } #polygonAnimation.connected .polygon:nth-of-type(9) { -webkit-transform: translate(16px, -10px); transform: translate(16px, -10px); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 6s; animation-delay: 6s; } #polygonAnimation.connected .polygon:nth-of-type(10) { -webkit-transform: translate(33.5px, -17px); transform: translate(33.5px, -17px); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 3s; animation-delay: 3s; } #polygonAnimation.connected .polygon:nth-of-type(11) { -webkit-transform: translate(4px, -18px); transform: translate(4px, -18px); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 0; animation-delay: 0; } #polygonAnimation.connected .polygon:nth-of-type(12) { -webkit-transform: translate(-13px, -10px); transform: translate(-13px, -10px); -webkit-animation: polygon 2s linear infinite; animation: polygon 2s linear infinite; -webkit-animation-delay: 0; animation-delay: 0; } #polygonAnimation.connected .beat { display: block; } #polygonAnimation.connected .stoke { opacity: 1; } @-webkit-keyframes stoke { to { stroke-dashoffset: 0; } } @keyframes stoke { to { stroke-dashoffset: 0; } } @-webkit-keyframes polygon { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } @keyframes polygon { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } @-webkit-keyframes strokethick { 0% { stroke-width: 4; } 50% { stroke-width: 2; } 100% { stroke-width: 4; } } @keyframes strokethick { 0% { stroke-width: 4; } 50% { stroke-width: 2; } 100% { stroke-width: 4; } } @-webkit-keyframes beat { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 30% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 40% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 50% { opacity: 1; -webkit-transform: scale(0.9); transform: scale(0.9); } 90% { opacity: 1; -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @keyframes beat { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 30% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 40% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 50% { opacity: 1; -webkit-transform: scale(0.9); transform: scale(0.9); } 90% { opacity: 1; -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } #about { background: #3B449B; color: #000; } #about:after { display: none; } #about .text p { color: #000; color: #fff; padding-right: 20px; } @media (max-width: 620px) { #about .text p { padding-right: 8px; } } #about .partners { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin: 0 10% 0 0; } #about .partners img { margin-bottom: 0; } @media (max-width: 620px) { #about .partners img img { height: 30px; padding-right: 8px; max-width: 100px; } } @media (max-width: 1000px) { #about .partners { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin: 2.5rem 10% 2.5rem 0; } } @media (max-width: 620px) { #about .partners { margin: 2rem 0; 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: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } #about .headline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: column-reverse; align-items: center; } @media (max-width: 1000px) { #about .headline { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } #about .headline .text { display: -webkit-box; display: -ms-flexbox; display: flex; width: 80%; -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; padding-bottom: 3rem; } #about .headline h1 { text-align: center; margin: 0; color: #fff; } #about .headline h1 span { color: #FE4160; } @media (max-width: 620px) { #about .headline h1 { text-align: center; } } @media (max-width: 450px) { #about .headline h1 { font-size: 25px; } } #about #whatroute { margin: 80px 40px; } #about #whatroute .block { display: inline-block; position: relative; width: 100%; margin: 0; padding: 0; } #about #whatroute .block .inner { margin: 80px 40px; } @media screen and (max-width: 760px) { #about #whatroute .block .inner { margin: 60px 0; } } #about #whatroute .block:before { position: absolute; content: ""; display: block; width: 120px; height: 120px; border-radius: 60px; background: url("/img/new/what/what-polygon-negative.svg") center no-repeat; background-size: 100% 100%; } @media screen and (max-width: 760px) { #about #whatroute .block:before { width: 70px; height: 70px; } } #about #whatroute .block:nth-of-type(1) { border-top: 3px solid #fff; border-right: 3px solid #fff; } #about #whatroute .block:nth-of-type(1):before { top: -60px; background-image: url("/img/new/what/what-polygon-runner.svg"); } @media screen and (max-width: 760px) { #about #whatroute .block:nth-of-type(1):before { top: -35px; } } #about #whatroute .block:nth-of-type(2) { border-top: 3px solid #fff; border-left: 3px solid #fff; } #about #whatroute .block:nth-of-type(2):before { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -60px; background-image: url("/img/new/what/what-polygon-contract.svg"); } @media screen and (max-width: 760px) { #about #whatroute .block:nth-of-type(2):before { top: -35px; left: 50%; -webkit-transform: translateX(-35px); transform: translateX(-35px); } } #about #whatroute .block:nth-of-type(3) { border-top: 3px solid #fff; } #about #whatroute .block:nth-of-type(3):before { top: -60px; right: 0; background-image: url("/img/new/what/what-polygon-earn.svg"); } @media screen and (max-width: 760px) { #about #whatroute .block:nth-of-type(3):before { top: -35px; } } #about #whatroute .block:nth-of-type(3) .inner { margin-bottom: 0; } #quotes .swiper-background { background: #F6FAFD; } #quotes .quotes { height: auto; max-width: 100%; } #quotes .quote-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 2rem 0; } @media screen and (max-width: 620px) { #quotes .quote-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } #quotes .quote-slide .text { margin-left: 2rem; max-width: 550px; display: flex; flex-direction: column; justify-content: center; } @media screen and (max-width: 620px) { #quotes .quote-slide .text { margin: 1rem 0 0rem 1rem; } } @media screen and (max-width: 620px) { #quotes .quote-slide .text p { margin: .5rem; letter-spacing: -.33px; } } #quotes .quote-slide img { width: 123px; } #quotes .quote-slide .quote { font-family: 'Open Sans', sans-serif; font-style: italic; color: #9AB2C3; font-size: 17px; font-weight: 600; letter-spacing: -.55px; line-height: 23px; margin-bottom: 0; } @media screen and (max-width: 620px) { #quotes .quote-slide .quote { line-height: 22px; font-size: 15px; } } #quotes .quote-slide .name { color: #EC455B; font-size: 14px; font-weight: 700; letter-spacing: -0.63px; text-transform: uppercase; } #quotes .quote-slide .title { color: #B9C3CB; font-size: 14px; line-height: 19px; font-weight: 500; margin: 0; } #problems .problem { 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: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 8rem 1rem; } @media screen and (max-width: 620px) { #problems .problem { margin: 1rem; } } #problems .problem h2 { margin: 0; font-size: 30px; font-weight: 700; line-height: 35px; color: #EC455B; text-align: center; letter-spacing: -.86px; } @media screen and (max-width: 760px) { #problems .problem h2 { margin-top: 24px; } } @media only screen and (max-width: 830px) { #problems .problem h2 { text-align: left; } } #problems .problem h3 { color: #393939; text-align: center; font-size: 28px; line-height: 33px; max-width: 692px; letter-spacing: -.8px; margin: 1rem 0; } @media only screen and (max-width: 830px) { #problems .problem h3 { text-align: left; } } #problems .problem .problems { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } @media only screen and (max-width: 1000px) { #problems .problem .problems { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media only screen and (max-width: 830px) { #problems .problem .problems { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } #problems .problem .single-problem { margin: 0 1rem; max-width: 33%; } #problems .problem .single-problem h4 { text-transform: uppercase; font-weight: 800; font-size: 16px; letter-spacing: -.65px; text-align: left; margin-bottom: 0; line-height: 25px; } #problems .problem .single-problem p { font-weight: 400; font-size: 16px; text-align: left; line-height: 24px; margin-top: 1rem; } @media only screen and (min-width: 1000px) { #problems .problem .single-problem p { max-width: 400px; } } @media only screen and (max-width: 830px) { #problems .problem .single-problem { margin: 0; max-width: 100%; } } #usecaseslide .swiper-background { background: #F6FAFD; } #usecaseslide .quotes { height: auto; max-width: 100%; } #usecaseslide .quote-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 2rem 0; } @media screen and (max-width: 620px) { #usecaseslide .quote-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } #usecaseslide .quote-slide .text { margin-left: 2rem; max-width: 550px; display: flex; flex-direction: column; justify-content: center; } @media screen and (max-width: 620px) { #usecaseslide .quote-slide .text { margin: 1rem 0 0rem 1rem; } } @media screen and (max-width: 620px) { #usecaseslide .quote-slide .text p { margin: .5rem; letter-spacing: -.33px; } } #usecaseslide .quote-slide img { width: 123px; } #usecaseslide .quote-slide .quote { font-family: 'Open Sans', sans-serif; font-style: italic; color: #9AB2C3; font-size: 17px; font-weight: 600; letter-spacing: -.55px; line-height: 23px; margin-bottom: 0; } @media screen and (max-width: 620px) { #usecaseslide .quote-slide .quote { line-height: 22px; font-size: 15px; } } #usecaseslide .quote-slide .name { color: #EC455B; font-size: 14px; font-weight: 700; letter-spacing: -0.63px; text-transform: uppercase; } #usecaseslide .quote-slide .title { color: #B9C3CB; font-size: 14px; line-height: 19px; font-weight: 500; margin: 0; } html { -webkit-box-sizing: border-box; box-sizing: border-box; overflow-x: hidden; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } body { margin: 0; overflow-x: hidden; } ul li { line-height: 20px; } #price-trend { display: none; } button { font-family: 'Raleway', serif; } .particles { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .particles div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } *::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } /*# sourceMappingURL=main.css.map */