├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── .npmignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── dist └── strawberry.min.css ├── docs ├── css │ ├── custom.css │ ├── opensans │ │ ├── OpenSans-Light.ttf │ │ └── OpenSans-Regular.ttf │ └── tajaval │ │ └── Tajawal-Bold.ttf ├── examples │ ├── mobile-reordering │ │ ├── index.html │ │ ├── mobile.png │ │ ├── opensans │ │ │ └── OpenSans-Regular.ttf │ │ ├── tablet-pc.png │ │ └── tajaval │ │ │ └── Tajawal-Bold.ttf │ ├── navbar │ │ └── index.html │ ├── responsive-cards │ │ ├── index2.html │ │ └── pic.png │ └── slider │ │ ├── index.html │ │ ├── pic.png │ │ └── style.css ├── img │ ├── logo-strawberry-bianco.svg │ ├── logo-strawberry.svg │ └── logo.svg ├── index.html └── js │ └── custom.js ├── img ├── logo-strawberry.png └── logo.png ├── package.json ├── sass ├── data │ ├── _breakpoints.sass │ └── _fractions.sass ├── mixins │ ├── _flex-mixin.sass │ ├── _flexbasis-mixin.sass │ ├── _flexgrow-mixin.sass │ ├── _flexprimary-mixin.sass │ └── _flexshrink-mixin.sass ├── partials │ ├── container │ │ ├── _container-alignc.sass │ │ ├── _container-aligni.sass │ │ ├── _container-allcentered.sass │ │ ├── _container-flex-flow.sass │ │ ├── _container-flex.sass │ │ └── _container-justify.sass │ ├── item │ │ ├── _align-self.sass │ │ ├── _flex-responsive.sass │ │ ├── _flex.sass │ │ └── _order-utility.sass │ ├── misc │ │ └── _reset.sass │ └── nesting │ │ ├── _nesting-alignc.sass │ │ ├── _nesting-aligni.sass │ │ ├── _nesting-allcentered.sass │ │ ├── _nesting-flex-flow.sass │ │ └── _nesting-justify.sass └── strawberry.sass └── src └── strawberry.css /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | 5 | --- 6 | 7 | **Describe the bug** 8 | A clear and concise description of what the bug is. 9 | 10 | **To Reproduce** 11 | Steps to reproduce the behavior: 12 | 1. Go to '...' 13 | 2. Click on '....' 14 | 3. Scroll down to '....' 15 | 4. See error 16 | 17 | **Expected behavior** 18 | A clear and concise description of what you expected to happen. 19 | 20 | **Screenshots** 21 | If applicable, add screenshots to help explain your problem. 22 | 23 | **Desktop (please complete the following information):** 24 | - OS: [e.g. iOS] 25 | - Browser [e.g. chrome, safari] 26 | - Version [e.g. 22] 27 | 28 | **Smartphone (please complete the following information):** 29 | - Device: [e.g. iPhone6] 30 | - OS: [e.g. iOS8.1] 31 | - Browser [e.g. stock browser, safari] 32 | - Version [e.g. 22] 33 | 34 | **Additional context** 35 | Add any other context about the problem here. 36 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | **Is your feature request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/strawberry.min.css.map 2 | src/strawberry.css.map 3 | sass/.sass-cache -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/strawberry.css 2 | img/* 3 | docs/* 4 | dist/strawberry.min.css.map 5 | src/strawberry.css.map 6 | sass/.sass-cache 7 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at andrysimo1997@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 11 | build. 12 | 2. Update the README.md with details of changes to the interface, this includes new environment 13 | variables, exposed ports, useful file locations and container parameters. 14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this 15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). 16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 17 | do not have permission to do that, you may request the second reviewer to merge it for you. 18 | 19 | ### Our Pledge 20 | 21 | In the interest of fostering an open and welcoming environment, we as 22 | contributors and maintainers pledge to making participation in our project and 23 | our community a harassment-free experience for everyone, regardless of age, body 24 | size, disability, ethnicity, gender identity and expression, level of experience, 25 | nationality, personal appearance, race, religion, or sexual identity and 26 | orientation. 27 | 28 | ### Our Standards 29 | 30 | Examples of behavior that contributes to creating a positive environment 31 | include: 32 | 33 | * Using welcoming and inclusive language 34 | * Being respectful of differing viewpoints and experiences 35 | * Gracefully accepting constructive criticism 36 | * Focusing on what is best for the community 37 | * Showing empathy towards other community members 38 | 39 | Examples of unacceptable behavior by participants include: 40 | 41 | * The use of sexualized language or imagery and unwelcome sexual attention or 42 | advances 43 | * Trolling, insulting/derogatory comments, and personal or political attacks 44 | * Public or private harassment 45 | * Publishing others' private information, such as a physical or electronic 46 | address, without explicit permission 47 | * Other conduct which could reasonably be considered inappropriate in a 48 | professional setting 49 | 50 | ### Our Responsibilities 51 | 52 | Project maintainers are responsible for clarifying the standards of acceptable 53 | behavior and are expected to take appropriate and fair corrective action in 54 | response to any instances of unacceptable behavior. 55 | 56 | Project maintainers have the right and responsibility to remove, edit, or 57 | reject comments, commits, code, wiki edits, issues, and other contributions 58 | that are not aligned to this Code of Conduct, or to ban temporarily or 59 | permanently any contributor for other behaviors that they deem inappropriate, 60 | threatening, offensive, or harmful. 61 | 62 | ### Scope 63 | 64 | This Code of Conduct applies both within project spaces and in public spaces 65 | when an individual is representing the project or its community. Examples of 66 | representing a project or community include using an official project e-mail 67 | address, posting via an official social media account, or acting as an appointed 68 | representative at an online or offline event. Representation of a project may be 69 | further defined and clarified by project maintainers. 70 | 71 | ### Enforcement 72 | 73 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 74 | reported by contacting the project team at [andrysimo1997@gmail.com]. All 75 | complaints will be reviewed and investigated and will result in a response that 76 | is deemed necessary and appropriate to the circumstances. The project team is 77 | obligated to maintain confidentiality with regard to the reporter of an incident. 78 | Further details of specific enforcement policies may be posted separately. 79 | 80 | Project maintainers who do not follow or enforce the Code of Conduct in good 81 | faith may face temporary or permanent repercussions as determined by other 82 | members of the project's leadership. 83 | 84 | ### Attribution 85 | 86 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 87 | available at [http://contributor-covenant.org/version/1/4][version] 88 | 89 | [homepage]: http://contributor-covenant.org 90 | [version]: http://contributor-covenant.org/version/1/4/ 91 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Andrea Simone Costa 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

strawberry-css logo

2 |

3 | 4 | [![NPM version](https://img.shields.io/npm/v/strawberry-css.svg)](https://www.npmjs.com/package/strawberry-css) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/jfet97/strawberry-css/blob/master/LICENSE) ![](https://img.shields.io/npm/dt/strawberry-css.svg) ![](https://img.shields.io/badge/dependencies-no%20dependencies-%231e88e5%20.svg) 5 | # Strawberry CSS 6 | ![](https://img.shields.io/github/stars/jfet97/strawberry.svg?style=social&label=Star) 7 | 8 | 9 | ## What 10 | 11 | Strawberry is a new flexbox based CSS micro-framework. 12 | A set of common flexbox's utilities focused on making your life easier and faster with nested flexboxes. 13 | 14 | > Have a look at the [website](https://jfet97.github.io/strawberry/)
15 | > Read about it [on Medium](https://medium.com/@andreasimonecosta/strawberry-a-new-flexbox-based-css-micro-framework-42ff9be49468). 16 | 17 | ## How 18 | 19 | ```sh 20 | $ npm i --save strawberry-css 21 | ``` 22 | 23 | or 24 | 25 | ```html 26 | 27 | 28 | ``` 29 | 30 | ## Why 31 | 32 | 1. It's light: less than 34Kb 33 | 2. It’s powerful: create Flexbox-based layouts in few lines of code 34 | 3. No preset graphic style: it helps you create layouts without messing up your life 35 | 4. No conflicts with other used framework in the same project: all classes start with the sb- prefix 36 | 5. Easy to override: strawberry never use !important 37 | 38 | ## Wiki 39 | [Read the wiki!](https://github.com/jfet97/strawberry/wiki) 40 | 41 | ## Bugs 42 | Have you found something wrong? 43 | 1) Read and apply [these guidelines](https://github.com/jfet97/strawberry/blob/master/.github/ISSUE_TEMPLATE/bug_report.md) 44 | 2) Feel free to [open an issue](https://github.com/jfet97/strawberry/issues) or to email us at [andrysimo1997@gmail.com]. 45 | 46 | ## Features 47 | Would you like to see a new feature added? 48 | 1) Read and apply [these guidelines](https://github.com/jfet97/strawberry/blob/master/.github/ISSUE_TEMPLATE/feature_request.md) 49 | 2) Feel free to [open an issue](https://github.com/jfet97/strawberry/issues) or to email us at [andrysimo1997@gmail.com]. 50 | 51 | ## Examples 52 | I'm working [on them](https://github.com/jfet97/strawberry/wiki/Examples). Stay Tuned! 53 | 54 | ## Contributing 55 | 56 | Please read [CONTRIBUTING.md](https://github.com/jfet97/strawberry/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us. 57 | 58 | ## Versioning 59 | 60 | We use [SemVer](http://semver.org/) for versioning. For the versions available, click [here](https://github.com/jfet97/strawberry/releases). 61 | 62 | ## Author 63 | 64 | * **Andrea Simone Costa** aka [jfet97](https://github.com/jfet97) 65 | 66 | See also the list of [contributors](https://github.com/jfet97/strawberry/graphs/contributors) who participated in this project. 67 | 68 | ## Contacts 69 | * andrysimo1997@gmail.com 70 | * [facebook](https://www.facebook.com/strawberrycss/) 71 | * [slack](https://join.slack.com/t/strawberrycss/shared_invite/enQtMzgwMTIwOTg0ODA1LTExYzM1ZDg4Y2NiZjcyMGNjY2Q1MTBhODQzODFkOTcyYTg5OThjMDRlYjQwNjRjMDgwMjkwNDU0YmYwZmFjZjU) 72 | * [gitter](https://gitter.im/strawberrycss) 73 | 74 | ## License 75 | 76 | MIT 77 | -------------------------------------------------------------------------------- /dist/strawberry.min.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box;margin:0;padding:0}.sb-n-flex-row>*{display:flex;flex-direction:row}.sb-n-flex-rev-row>*{display:flex;flex-direction:row-reverse}.sb-n-flex-col>*{display:flex;flex-direction:column}.sb-n-flex-rev-col>*{display:flex;flex-direction:column-reverse}.sb-n-flex-inline>*{display:inline-flex}@media only screen and (min-width:992px){.sb-n-flex-row-l{display:flex;flex-direction:row}.sb-n-flex-rev-row-l{display:flex;flex-direction:row-reverse}.sb-n-flex-col-l{display:flex;flex-direction:column}.sb-n-flex-rev-col-l{display:flex;flex-direction:column-reverse}.sb-n-flex-inline-l{display:inline-flex}}@media only screen and (min-width:600px) and (max-width:992px){.sb-n-flex-row-m{display:flex;flex-direction:row}.sb-n-flex-rev-row-m{display:flex;flex-direction:row-reverse}.sb-n-flex-col-m{display:flex;flex-direction:column}.sb-n-flex-rev-col-m{display:flex;flex-direction:column-reverse}.sb-n-flex-inline-m{display:inline-flex}}@media only screen and (max-width:600px){.sb-n-flex-row-s{display:flex;flex-direction:row}.sb-n-flex-rev-row-s{display:flex;flex-direction:row-reverse}.sb-n-flex-col-s{display:flex;flex-direction:column}.sb-n-flex-rev-col-s{display:flex;flex-direction:column-reverse}.sb-n-flex-inline-s{display:inline-flex}}.sb-n-wrap>*{flex-wrap:wrap}.sb-n-rev-wrap>*{flex-wrap:wrap-reverse}.sb-n-nowrap>*{flex-wrap:nowrap}@media only screen and (min-width:992px){.sb-n-wrap-l>*{flex-wrap:wrap}.sb-n-rev-wrap-l>*{flex-wrap:wrap-reverse}.sb-n-nowrap-l>*{flex-wrap:nowrap}}@media only screen and (min-width:600px) and (max-width:992px){.sb-n-wrap-m>*{flex-wrap:wrap}.sb-n-rev-wrap-m>*{flex-wrap:wrap-reverse}.sb-n-nowrap-m>*{flex-wrap:nowrap}}@media only screen and (max-width:600px){.sb-n-wrap-s>*{flex-wrap:wrap}.sb-n-rev-wrap-s>*{flex-wrap:wrap-reverse}.sb-n-nowrap-s>*{flex-wrap:nowrap}}.sb-n-all-is-centered>*{justify-content:center;align-items:center;align-content:center}.sb-n-ai-stretch>*{align-items:stretch}.sb-n-ai-center>*{align-items:center}.sb-n-ai-flex-start>*{align-items:flex-start}.sb-n-ai-flex-end>*{align-items:flex-end}.sb-n-ai-baseline>*{align-items:baseline}.sb-n-ai-initial>*{align-items:initial}.sb-n-ai-inherit>*{align-items:inherit}.sb-n-ac-stretch>*{align-content:stretch}.sb-n-ac-center>*{align-content:center}.sb-n-ac-flex-start>*{align-content:flex-start}.sb-n-ac-flex-end>*{align-content:flex-end}.sb-n-ac-space-bn>*{align-content:space-between}.sb-n-ac-space-ad>*{align-content:space-around}.sb-n-ac-initial>*{align-content:initial}.sb-n-ac-inherit>*{align-content:inherit}.sb-n-jc-flex-start>*{justify-content:flex-start}.sb-n-jc-flex-end>*{justify-content:flex-end}.sb-n-jc-center>*{justify-content:center}.sb-n-jc-space-bn>*{justify-content:space-between}.sb-n-jc-space-ad>*{justify-content:space-around}.sb-n-jc-initial>*{justify-content:initial}.sb-n-jc-inherit>*{justify-content:inherit}.sb-flex-row{display:flex;flex-direction:row}.sb-flex-rev-row{display:flex;flex-direction:row-reverse}.sb-flex-col{display:flex;flex-direction:column}.sb-flex-rev-col{display:flex;flex-direction:column-reverse}.sb-flex-inline{display:inline-flex}@media only screen and (min-width:992px){.sb-flex-row-l{display:flex;flex-direction:row}.sb-flex-rev-row-l{display:flex;flex-direction:row-reverse}.sb-flex-col-l{display:flex;flex-direction:column}.sb-flex-rev-col-l{display:flex;flex-direction:column-reverse}.sb-flex-inline-l{display:inline-flex}}@media only screen and (min-width:600px) and (max-width:992px){.sb-flex-row-m{display:flex;flex-direction:row}.sb-flex-rev-row-m{display:flex;flex-direction:row-reverse}.sb-flex-col-m{display:flex;flex-direction:column}.sb-flex-rev-col-m{display:flex;flex-direction:column-reverse}.sb-flex-inline-m{display:inline-flex}}@media only screen and (max-width:600px){.sb-flex-row-s{display:flex;flex-direction:row}.sb-flex-rev-row-s{display:flex;flex-direction:row-reverse}.sb-flex-col-s{display:flex;flex-direction:column}.sb-flex-rev-col-s{display:flex;flex-direction:column-reverse}.sb-flex-inline-s{display:inline-flex}}.sb-wrap{flex-wrap:wrap}.sb-rev-wrap{flex-wrap:wrap-reverse}.sb-nowrap{flex-wrap:nowrap}@media only screen and (min-width:992px){.sb-wrap-l{flex-wrap:wrap}.sb-rev-wrap-l{flex-wrap:wrap-reverse}.sb-nowrap-l{flex-wrap:nowrap}}@media only screen and (min-width:600px) and (max-width:992px){.sb-wrap-m{flex-wrap:wrap}.sb-rev-wrap-m{flex-wrap:wrap-reverse}.sb-nowrap-m{flex-wrap:nowrap}}@media only screen and (max-width:600px){.sb-wrap-s{flex-wrap:wrap}.sb-rev-wrap-s{flex-wrap:wrap-reverse}.sb-nowrap-s{flex-wrap:nowrap}}.sb-all-is-centered{justify-content:center;align-items:center;align-content:center}.sb-ai-stretch{align-items:stretch}.sb-ai-center{align-items:center}.sb-ai-flex-start{align-items:flex-start}.sb-ai-flex-end{align-items:flex-end}.sb-ai-baseline{align-items:baseline}.sb-ai-initial{align-items:initial}.sb-ai-inherit{align-items:inherit}.sb-ac-stretch{align-content:stretch}.sb-ac-center{align-content:center}.sb-ac-flex-start{align-content:flex-start}.sb-ac-flex-end{align-content:flex-end}.sb-ac-space-bn{align-content:space-between}.sb-ac-space-ad{align-content:space-around}.sb-ac-initial{align-content:initial}.sb-ac-inherit{align-content:inherit}.sb-jc-flex-start{justify-content:flex-start}.sb-jc-flex-end{justify-content:flex-end}.sb-jc-center{justify-content:center}.sb-jc-space-bn{justify-content:space-between}.sb-jc-space-ad{justify-content:space-around}.sb-jc-initial{justify-content:initial}.sb-jc-inherit{justify-content:inherit}.sb-order-0{order:0}.sb-order-1{order:1}.sb-order-2{order:2}.sb-order-3{order:3}.sb-order-4{order:4}.sb-order-5{order:5}.sb-order-6{order:6}.sb-order-7{order:7}.sb-order-8{order:8}.sb-order-9{order:9}.sb-order-10{order:10}@media only screen and (min-width:992px){.sb-order-0-l{order:0}.sb-order-1-l{order:1}.sb-order-2-l{order:2}.sb-order-3-l{order:3}.sb-order-4-l{order:4}.sb-order-5-l{order:5}.sb-order-6-l{order:6}.sb-order-7-l{order:7}.sb-order-8-l{order:8}.sb-order-9-l{order:9}.sb-order-10-l{order:10}}@media only screen and (min-width:600px) and (max-width:992px){.sb-order-0-m{order:0}.sb-order-1-m{order:1}.sb-order-2-m{order:2}.sb-order-3-m{order:3}.sb-order-4-m{order:4}.sb-order-5-m{order:5}.sb-order-6-m{order:6}.sb-order-7-m{order:7}.sb-order-8-m{order:8}.sb-order-9-m{order:9}.sb-order-10-m{order:10}}@media only screen and (max-width:600px){.sb-order-0-s{order:0}.sb-order-1-s{order:1}.sb-order-2-s{order:2}.sb-order-3-s{order:3}.sb-order-4-s{order:4}.sb-order-5-s{order:5}.sb-order-6-s{order:6}.sb-order-7-s{order:7}.sb-order-8-s{order:8}.sb-order-9-s{order:9}.sb-order-10-s{order:10}}.sb-first-item{order:-1000000}.sb-last-item{order:1000000}@media only screen and (min-width:992px){.sb-first-item-l{order:-1000000}.sb-last-item-l{order:1000000}}@media only screen and (min-width:600px) and (max-width:992px){.sb-first-item-m{order:-1000000}.sb-last-item-m{order:1000000}}@media only screen and (max-width:600px){.sb-first-item-s{order:-1000000}.sb-last-item-s{order:1000000}}.sb-as-auto{align-self:auto}.sb-as-stretch{align-self:stretch}.sb-as-center{align-self:center}.sb-as-flex-start{align-self:flex-start}.sb-as-flex-end{align-self:flex-end}.sb-as-baseline{align-self:baseline}.sb-as-initial{align-self:auto}.sb-as-inherit{align-self:inherit}.sb-items-100>*{flex:1 1 100%}.sb-items-90>*{flex:1 1 90%}.sb-items-80>*{flex:1 1 80%}.sb-items-70>*{flex:1 1 70%}.sb-items-60>*{flex:1 1 60%}.sb-items-50>*{flex:1 1 50%}.sb-items-40>*{flex:1 1 40%}.sb-items-30>*{flex:1 1 30%}.sb-items-20>*{flex:1 1 20%}.sb-items-10>*{flex:1 1 10%}.sb-items-third>*{flex:1 1 33.3333%}.sb-items-quarter>*{flex:1 1 25%}.sb-items-sixth>*{flex:1 1 16.6666%}.sb-items-seventh>*{flex:1 1 14.2857%}.sb-items-eighth>*{flex:1 1 12.5%}.sb-items-ninth>*{flex:1 1 11.1111%}.sb-items-1-1-0>*{flex:1 1 0}.sb-items-1-1-auto>*{flex:1 1 auto}.sb-items-100-nog>*{flex:0 1 100%}.sb-items-90-nog>*{flex:0 1 90%}.sb-items-80-nog>*{flex:0 1 80%}.sb-items-70-nog>*{flex:0 1 70%}.sb-items-60-nog>*{flex:0 1 60%}.sb-items-50-nog>*{flex:0 1 50%}.sb-items-40-nog>*{flex:0 1 40%}.sb-items-30-nog>*{flex:0 1 30%}.sb-items-20-nog>*{flex:0 1 20%}.sb-items-10-nog>*{flex:0 1 10%}.sb-items-third-nog>*{flex:0 1 33.3333%}.sb-items-quarter-nog>*{flex:0 1 25%}.sb-items-sixth-nog>*{flex:0 1 16.6666%}.sb-items-seventh-nog>*{flex:0 1 14.2857%}.sb-items-eighth-nog>*{flex:0 1 12.5%}.sb-items-ninth-nog>*{flex:0 1 11.1111%}.sb-items-0-1-0-nog>*{flex:0 1 0}.sb-items-0-1-auto-nog>*{flex:0 1 auto}.sb-items-100-nos>*{flex:1 0 100%}.sb-items-90-nos>*{flex:1 0 90%}.sb-items-80-nos>*{flex:1 0 80%}.sb-items-70-nos>*{flex:1 0 70%}.sb-items-60-nos>*{flex:1 0 60%}.sb-items-50-nos>*{flex:1 0 50%}.sb-items-40-nos>*{flex:1 0 40%}.sb-items-30-nos>*{flex:1 0 30%}.sb-items-20-nos>*{flex:1 0 20%}.sb-items-10-nos>*{flex:1 0 10%}.sb-items-third-nos>*{flex:1 0 33.3333%}.sb-items-quarter-nos>*{flex:1 0 25%}.sb-items-sixth-nos>*{flex:1 0 16.6666%}.sb-items-seventh-nos>*{flex:1 0 14.2857%}.sb-items-eighth-nos>*{flex:1 0 12.5%}.sb-items-ninth-nos>*{flex:1 0 11.1111%}.sb-items-1-0-0-nos>*{flex:1 0 0}.sb-items-1-0-auto-nos>*{flex:1 0 auto}.sb-items-100-nogs>*{flex:0 0 100%}.sb-items-90-nogs>*{flex:0 0 90%}.sb-items-80-nogs>*{flex:0 0 80%}.sb-items-70-nogs>*{flex:0 0 70%}.sb-items-60-nogs>*{flex:0 0 60%}.sb-items-50-nogs>*{flex:0 0 50%}.sb-items-40-nogs>*{flex:0 0 40%}.sb-items-30-nogs>*{flex:0 0 30%}.sb-items-20-nogs>*{flex:0 0 20%}.sb-items-10-nogs>*{flex:0 0 10%}.sb-items-third-nogs>*{flex:0 0 33.3333%}.sb-items-quarter-nogs>*{flex:0 0 25%}.sb-items-sixth-nogs>*{flex:0 0 16.6666%}.sb-items-seventh-nogs>*{flex:0 0 14.2857%}.sb-items-eighth-nogs>*{flex:0 0 12.5%}.sb-items-ninth-nogs>*{flex:0 0 11.1111%}.sb-items-0-0-0-nogs>*{flex:0 0 0}.sb-items-0-0-auto-nogs>*{flex:0 0 auto}@media only screen and (min-width:992px){.sb-items-100-l>*{flex:1 1 100%}.sb-items-90-l>*{flex:1 1 90%}.sb-items-80-l>*{flex:1 1 80%}.sb-items-70-l>*{flex:1 1 70%}.sb-items-60-l>*{flex:1 1 60%}.sb-items-50-l>*{flex:1 1 50%}.sb-items-40-l>*{flex:1 1 40%}.sb-items-30-l>*{flex:1 1 30%}.sb-items-20-l>*{flex:1 1 20%}.sb-items-10-l>*{flex:1 1 10%}.sb-items-third-l>*{flex:1 1 33.3333%}.sb-items-quarter-l>*{flex:1 1 25%}.sb-items-sixth-l>*{flex:1 1 16.6666%}.sb-items-seventh-l>*{flex:1 1 14.2857%}.sb-items-eighth-l>*{flex:1 1 12.5%}.sb-items-ninth-l>*{flex:1 1 11.1111%}.sb-items-1-1-0-l>*{flex:1 1 0}.sb-items-1-1-auto-l>*{flex:1 1 auto}.sb-items-100-nog-l>*{flex:0 1 100%}.sb-items-90-nog-l>*{flex:0 1 90%}.sb-items-80-nog-l>*{flex:0 1 80%}.sb-items-70-nog-l>*{flex:0 1 70%}.sb-items-60-nog-l>*{flex:0 1 60%}.sb-items-50-nog-l>*{flex:0 1 50%}.sb-items-40-nog-l>*{flex:0 1 40%}.sb-items-30-nog-l>*{flex:0 1 30%}.sb-items-20-nog-l>*{flex:0 1 20%}.sb-items-10-nog-l>*{flex:0 1 10%}.sb-items-third-nog-l>*{flex:0 1 33.3333%}.sb-items-quarter-nog-l>*{flex:0 1 25%}.sb-items-sixth-nog-l>*{flex:0 1 16.6666%}.sb-items-seventh-nog-l>*{flex:0 1 14.2857%}.sb-items-eighth-nog-l>*{flex:0 1 12.5%}.sb-items-ninth-nog-l>*{flex:0 1 11.1111%}.sb-items-0-1-0-nog-l>*{flex:0 1 0}.sb-items-0-1-auto-nog-l>*{flex:0 1 auto}.sb-items-100-nos-l>*{flex:1 0 100%}.sb-items-90-nos-l>*{flex:1 0 90%}.sb-items-80-nos-l>*{flex:1 0 80%}.sb-items-70-nos-l>*{flex:1 0 70%}.sb-items-60-nos-l>*{flex:1 0 60%}.sb-items-50-nos-l>*{flex:1 0 50%}.sb-items-40-nos-l>*{flex:1 0 40%}.sb-items-30-nos-l>*{flex:1 0 30%}.sb-items-20-nos-l>*{flex:1 0 20%}.sb-items-10-nos-l>*{flex:1 0 10%}.sb-items-third-nos-l>*{flex:1 0 33.3333%}.sb-items-quarter-nos-l>*{flex:1 0 25%}.sb-items-sixth-nos-l>*{flex:1 0 16.6666%}.sb-items-seventh-nos-l>*{flex:1 0 14.2857%}.sb-items-eighth-nos-l>*{flex:1 0 12.5%}.sb-items-ninth-nos-l>*{flex:1 0 11.1111%}.sb-items-1-0-0-nos-l>*{flex:1 0 0}.sb-items-1-0-auto-nos-l>*{flex:1 0 auto}.sb-items-100-nogs-l>*{flex:0 0 100%}.sb-items-90-nogs-l>*{flex:0 0 90%}.sb-items-80-nogs-l>*{flex:0 0 80%}.sb-items-70-nogs-l>*{flex:0 0 70%}.sb-items-60-nogs-l>*{flex:0 0 60%}.sb-items-50-nogs-l>*{flex:0 0 50%}.sb-items-40-nogs-l>*{flex:0 0 40%}.sb-items-30-nogs-l>*{flex:0 0 30%}.sb-items-20-nogs-l>*{flex:0 0 20%}.sb-items-10-nogs-l>*{flex:0 0 10%}.sb-items-third-nogs-l>*{flex:0 0 33.3333%}.sb-items-quarter-nogs-l>*{flex:0 0 25%}.sb-items-sixth-nogs-l>*{flex:0 0 16.6666%}.sb-items-seventh-nogs-l>*{flex:0 0 14.2857%}.sb-items-eighth-nogs-l>*{flex:0 0 12.5%}.sb-items-ninth-nogs-l>*{flex:0 0 11.1111%}.sb-items-0-0-0-nogs-l>*{flex:0 0 0}.sb-items-0-0-auto-nogs-l>*{flex:0 0 auto}}@media only screen and (min-width:600px) and (max-width:992px){.sb-items-100-m>*{flex:1 1 100%}.sb-items-90-m>*{flex:1 1 90%}.sb-items-80-m>*{flex:1 1 80%}.sb-items-70-m>*{flex:1 1 70%}.sb-items-60-m>*{flex:1 1 60%}.sb-items-50-m>*{flex:1 1 50%}.sb-items-40-m>*{flex:1 1 40%}.sb-items-30-m>*{flex:1 1 30%}.sb-items-20-m>*{flex:1 1 20%}.sb-items-10-m>*{flex:1 1 10%}.sb-items-third-m>*{flex:1 1 33.3333%}.sb-items-quarter-m>*{flex:1 1 25%}.sb-items-sixth-m>*{flex:1 1 16.6666%}.sb-items-seventh-m>*{flex:1 1 14.2857%}.sb-items-eighth-m>*{flex:1 1 12.5%}.sb-items-ninth-m>*{flex:1 1 11.1111%}.sb-items-1-1-0-m>*{flex:1 1 0}.sb-items-1-1-auto-m>*{flex:1 1 auto}.sb-items-100-nog-m>*{flex:0 1 100%}.sb-items-90-nog-m>*{flex:0 1 90%}.sb-items-80-nog-m>*{flex:0 1 80%}.sb-items-70-nog-m>*{flex:0 1 70%}.sb-items-60-nog-m>*{flex:0 1 60%}.sb-items-50-nog-m>*{flex:0 1 50%}.sb-items-40-nog-m>*{flex:0 1 40%}.sb-items-30-nog-m>*{flex:0 1 30%}.sb-items-20-nog-m>*{flex:0 1 20%}.sb-items-10-nog-m>*{flex:0 1 10%}.sb-items-third-nog-m>*{flex:0 1 33.3333%}.sb-items-quarter-nog-m>*{flex:0 1 25%}.sb-items-sixth-nog-m>*{flex:0 1 16.6666%}.sb-items-seventh-nog-m>*{flex:0 1 14.2857%}.sb-items-eighth-nog-m>*{flex:0 1 12.5%}.sb-items-ninth-nog-m>*{flex:0 1 11.1111%}.sb-items-0-1-0-nog-m>*{flex:0 1 0}.sb-items-0-1-auto-nog-m>*{flex:0 1 auto}.sb-items-100-nos-m>*{flex:1 0 100%}.sb-items-90-nos-m>*{flex:1 0 90%}.sb-items-80-nos-m>*{flex:1 0 80%}.sb-items-70-nos-m>*{flex:1 0 70%}.sb-items-60-nos-m>*{flex:1 0 60%}.sb-items-50-nos-m>*{flex:1 0 50%}.sb-items-40-nos-m>*{flex:1 0 40%}.sb-items-30-nos-m>*{flex:1 0 30%}.sb-items-20-nos-m>*{flex:1 0 20%}.sb-items-10-nos-m>*{flex:1 0 10%}.sb-items-third-nos-m>*{flex:1 0 33.3333%}.sb-items-quarter-nos-m>*{flex:1 0 25%}.sb-items-sixth-nos-m>*{flex:1 0 16.6666%}.sb-items-seventh-nos-m>*{flex:1 0 14.2857%}.sb-items-eighth-nos-m>*{flex:1 0 12.5%}.sb-items-ninth-nos-m>*{flex:1 0 11.1111%}.sb-items-1-0-0-nos-m>*{flex:1 0 0}.sb-items-1-0-auto-nos-m>*{flex:1 0 auto}.sb-items-100-nogs-m>*{flex:0 0 100%}.sb-items-90-nogs-m>*{flex:0 0 90%}.sb-items-80-nogs-m>*{flex:0 0 80%}.sb-items-70-nogs-m>*{flex:0 0 70%}.sb-items-60-nogs-m>*{flex:0 0 60%}.sb-items-50-nogs-m>*{flex:0 0 50%}.sb-items-40-nogs-m>*{flex:0 0 40%}.sb-items-30-nogs-m>*{flex:0 0 30%}.sb-items-20-nogs-m>*{flex:0 0 20%}.sb-items-10-nogs-m>*{flex:0 0 10%}.sb-items-third-nogs-m>*{flex:0 0 33.3333%}.sb-items-quarter-nogs-m>*{flex:0 0 25%}.sb-items-sixth-nogs-m>*{flex:0 0 16.6666%}.sb-items-seventh-nogs-m>*{flex:0 0 14.2857%}.sb-items-eighth-nogs-m>*{flex:0 0 12.5%}.sb-items-ninth-nogs-m>*{flex:0 0 11.1111%}.sb-items-0-0-0-nogs-m>*{flex:0 0 0}.sb-items-0-0-auto-nogs-m>*{flex:0 0 auto}}@media only screen and (max-width:600px){.sb-items-100-s>*{flex:1 1 100%}.sb-items-90-s>*{flex:1 1 90%}.sb-items-80-s>*{flex:1 1 80%}.sb-items-70-s>*{flex:1 1 70%}.sb-items-60-s>*{flex:1 1 60%}.sb-items-50-s>*{flex:1 1 50%}.sb-items-40-s>*{flex:1 1 40%}.sb-items-30-s>*{flex:1 1 30%}.sb-items-20-s>*{flex:1 1 20%}.sb-items-10-s>*{flex:1 1 10%}.sb-items-third-s>*{flex:1 1 33.3333%}.sb-items-quarter-s>*{flex:1 1 25%}.sb-items-sixth-s>*{flex:1 1 16.6666%}.sb-items-seventh-s>*{flex:1 1 14.2857%}.sb-items-eighth-s>*{flex:1 1 12.5%}.sb-items-ninth-s>*{flex:1 1 11.1111%}.sb-items-1-1-0-s>*{flex:1 1 0}.sb-items-1-1-auto-s>*{flex:1 1 auto}.sb-items-100-nog-s>*{flex:0 1 100%}.sb-items-90-nog-s>*{flex:0 1 90%}.sb-items-80-nog-s>*{flex:0 1 80%}.sb-items-70-nog-s>*{flex:0 1 70%}.sb-items-60-nog-s>*{flex:0 1 60%}.sb-items-50-nog-s>*{flex:0 1 50%}.sb-items-40-nog-s>*{flex:0 1 40%}.sb-items-30-nog-s>*{flex:0 1 30%}.sb-items-20-nog-s>*{flex:0 1 20%}.sb-items-10-nog-s>*{flex:0 1 10%}.sb-items-third-nog-s>*{flex:0 1 33.3333%}.sb-items-quarter-nog-s>*{flex:0 1 25%}.sb-items-sixth-nog-s>*{flex:0 1 16.6666%}.sb-items-seventh-nog-s>*{flex:0 1 14.2857%}.sb-items-eighth-nog-s>*{flex:0 1 12.5%}.sb-items-ninth-nog-s>*{flex:0 1 11.1111%}.sb-items-0-1-0-nog-s>*{flex:0 1 0}.sb-items-0-1-auto-nog-s>*{flex:0 1 auto}.sb-items-100-nos-s>*{flex:1 0 100%}.sb-items-90-nos-s>*{flex:1 0 90%}.sb-items-80-nos-s>*{flex:1 0 80%}.sb-items-70-nos-s>*{flex:1 0 70%}.sb-items-60-nos-s>*{flex:1 0 60%}.sb-items-50-nos-s>*{flex:1 0 50%}.sb-items-40-nos-s>*{flex:1 0 40%}.sb-items-30-nos-s>*{flex:1 0 30%}.sb-items-20-nos-s>*{flex:1 0 20%}.sb-items-10-nos-s>*{flex:1 0 10%}.sb-items-third-nos-s>*{flex:1 0 33.3333%}.sb-items-quarter-nos-s>*{flex:1 0 25%}.sb-items-sixth-nos-s>*{flex:1 0 16.6666%}.sb-items-seventh-nos-s>*{flex:1 0 14.2857%}.sb-items-eighth-nos-s>*{flex:1 0 12.5%}.sb-items-ninth-nos-s>*{flex:1 0 11.1111%}.sb-items-1-0-0-nos-s>*{flex:1 0 0}.sb-items-1-0-auto-nos-s>*{flex:1 0 auto}.sb-items-100-nogs-s>*{flex:0 0 100%}.sb-items-90-nogs-s>*{flex:0 0 90%}.sb-items-80-nogs-s>*{flex:0 0 80%}.sb-items-70-nogs-s>*{flex:0 0 70%}.sb-items-60-nogs-s>*{flex:0 0 60%}.sb-items-50-nogs-s>*{flex:0 0 50%}.sb-items-40-nogs-s>*{flex:0 0 40%}.sb-items-30-nogs-s>*{flex:0 0 30%}.sb-items-20-nogs-s>*{flex:0 0 20%}.sb-items-10-nogs-s>*{flex:0 0 10%}.sb-items-third-nogs-s>*{flex:0 0 33.3333%}.sb-items-quarter-nogs-s>*{flex:0 0 25%}.sb-items-sixth-nogs-s>*{flex:0 0 16.6666%}.sb-items-seventh-nogs-s>*{flex:0 0 14.2857%}.sb-items-eighth-nogs-s>*{flex:0 0 12.5%}.sb-items-ninth-nogs-s>*{flex:0 0 11.1111%}.sb-items-0-0-0-nogs-s>*{flex:0 0 0}.sb-items-0-0-auto-nogs-s>*{flex:0 0 auto}}.sb-flex-grow-0{flex-grow:0}.sb-flex-grow-1{flex-grow:1}.sb-flex-grow-2{flex-grow:2}.sb-flex-grow-3{flex-grow:3}.sb-flex-grow-4{flex-grow:4}.sb-flex-grow-5{flex-grow:5}.sb-flex-grow-6{flex-grow:6}.sb-flex-grow-7{flex-grow:7}.sb-flex-grow-8{flex-grow:8}.sb-flex-grow-9{flex-grow:9}.sb-flex-grow-10{flex-grow:10}.sb-flex-shrink-0{flex-shrink:0}.sb-flex-shrink-1{flex-shrink:1}.sb-flex-shrink-2{flex-shrink:2}.sb-flex-shrink-3{flex-shrink:3}.sb-flex-shrink-4{flex-shrink:4}.sb-flex-shrink-5{flex-shrink:5}.sb-flex-shrink-6{flex-shrink:6}.sb-flex-shrink-7{flex-shrink:7}.sb-flex-shrink-8{flex-shrink:8}.sb-flex-shrink-9{flex-shrink:9}.sb-flex-shrink-10{flex-shrink:10}.sb-flex-basis-100{flex-basis:100%}.sb-flex-basis-90{flex-basis:90%}.sb-flex-basis-80{flex-basis:80%}.sb-flex-basis-70{flex-basis:70%}.sb-flex-basis-60{flex-basis:60%}.sb-flex-basis-50{flex-basis:50%}.sb-flex-basis-40{flex-basis:40%}.sb-flex-basis-30{flex-basis:30%}.sb-flex-basis-20{flex-basis:20%}.sb-flex-basis-10{flex-basis:10%}.sb-flex-basis-third{flex-basis:33.3333%}.sb-flex-basis-quarter{flex-basis:25%}.sb-flex-basis-sixth{flex-basis:16.6666%}.sb-flex-basis-seventh{flex-basis:14.2857%}.sb-flex-basis-eighth{flex-basis:12.5%}.sb-flex-basis-ninth{flex-basis:11.1111%}.sb-flex-basis-0{flex-basis:0}.sb-flex-basis-auto{flex-basis:auto}.sb-1-1-100{flex:1 1 100%}.sb-1-1-90{flex:1 1 90%}.sb-1-1-80{flex:1 1 80%}.sb-1-1-70{flex:1 1 70%}.sb-1-1-60{flex:1 1 60%}.sb-1-1-50{flex:1 1 50%}.sb-1-1-40{flex:1 1 40%}.sb-1-1-30{flex:1 1 30%}.sb-1-1-20{flex:1 1 20%}.sb-1-1-10{flex:1 1 10%}.sb-1-1-third{flex:1 1 33.3333%}.sb-1-1-quarter{flex:1 1 25%}.sb-1-1-sixth{flex:1 1 16.6666%}.sb-1-1-seventh{flex:1 1 14.2857%}.sb-1-1-eighth{flex:1 1 12.5%}.sb-1-1-ninth{flex:1 1 11.1111%}.sb-1-1-0{flex:1 1 0}.sb-1-1-auto{flex:1 1 auto}.sb-0-1-100{flex:0 1 100%}.sb-0-1-90{flex:0 1 90%}.sb-0-1-80{flex:0 1 80%}.sb-0-1-70{flex:0 1 70%}.sb-0-1-60{flex:0 1 60%}.sb-0-1-50{flex:0 1 50%}.sb-0-1-40{flex:0 1 40%}.sb-0-1-30{flex:0 1 30%}.sb-0-1-20{flex:0 1 20%}.sb-0-1-10{flex:0 1 10%}.sb-0-1-third{flex:0 1 33.3333%}.sb-0-1-quarter{flex:0 1 25%}.sb-0-1-sixth{flex:0 1 16.6666%}.sb-0-1-seventh{flex:0 1 14.2857%}.sb-0-1-eighth{flex:0 1 12.5%}.sb-0-1-ninth{flex:0 1 11.1111%}.sb-0-1-0{flex:0 1 0}.sb-0-1-auto{flex:0 1 auto}.sb-1-0-100{flex:1 0 100%}.sb-1-0-90{flex:1 0 90%}.sb-1-0-80{flex:1 0 80%}.sb-1-0-70{flex:1 0 70%}.sb-1-0-60{flex:1 0 60%}.sb-1-0-50{flex:1 0 50%}.sb-1-0-40{flex:1 0 40%}.sb-1-0-30{flex:1 0 30%}.sb-1-0-20{flex:1 0 20%}.sb-1-0-10{flex:1 0 10%}.sb-1-0-third{flex:1 0 33.3333%}.sb-1-0-quarter{flex:1 0 25%}.sb-1-0-sixth{flex:1 0 16.6666%}.sb-1-0-seventh{flex:1 0 14.2857%}.sb-1-0-eighth{flex:1 0 12.5%}.sb-1-0-ninth{flex:1 0 11.1111%}.sb-1-0-0{flex:1 0 0}.sb-1-0-auto{flex:1 0 auto}.sb-0-0-100{flex:0 0 100%}.sb-0-0-90{flex:0 0 90%}.sb-0-0-80{flex:0 0 80%}.sb-0-0-70{flex:0 0 70%}.sb-0-0-60{flex:0 0 60%}.sb-0-0-50{flex:0 0 50%}.sb-0-0-40{flex:0 0 40%}.sb-0-0-30{flex:0 0 30%}.sb-0-0-20{flex:0 0 20%}.sb-0-0-10{flex:0 0 10%}.sb-0-0-third{flex:0 0 33.3333%}.sb-0-0-quarter{flex:0 0 25%}.sb-0-0-sixth{flex:0 0 16.6666%}.sb-0-0-seventh{flex:0 0 14.2857%}.sb-0-0-eighth{flex:0 0 12.5%}.sb-0-0-ninth{flex:0 0 11.1111%}.sb-0-0-0{flex:0 0 0}.sb-0-0-auto{flex:0 0 auto}@media only screen and (min-width:992px){.sb-1-1-100-l{flex:1 1 100%}.sb-1-1-90-l{flex:1 1 90%}.sb-1-1-80-l{flex:1 1 80%}.sb-1-1-70-l{flex:1 1 70%}.sb-1-1-60-l{flex:1 1 60%}.sb-1-1-50-l{flex:1 1 50%}.sb-1-1-40-l{flex:1 1 40%}.sb-1-1-30-l{flex:1 1 30%}.sb-1-1-20-l{flex:1 1 20%}.sb-1-1-10-l{flex:1 1 10%}.sb-1-1-third-l{flex:1 1 33.3333%}.sb-1-1-quarter-l{flex:1 1 25%}.sb-1-1-sixth-l{flex:1 1 16.6666%}.sb-1-1-seventh-l{flex:1 1 14.2857%}.sb-1-1-eighth-l{flex:1 1 12.5%}.sb-1-1-ninth-l{flex:1 1 11.1111%}.sb-1-1-0-l{flex:1 1 0}.sb-1-1-auto-l{flex:1 1 auto}}@media only screen and (min-width:600px) and (max-width:992px){.sb-1-1-100-m{flex:1 1 100%}.sb-1-1-90-m{flex:1 1 90%}.sb-1-1-80-m{flex:1 1 80%}.sb-1-1-70-m{flex:1 1 70%}.sb-1-1-60-m{flex:1 1 60%}.sb-1-1-50-m{flex:1 1 50%}.sb-1-1-40-m{flex:1 1 40%}.sb-1-1-30-m{flex:1 1 30%}.sb-1-1-20-m{flex:1 1 20%}.sb-1-1-10-m{flex:1 1 10%}.sb-1-1-third-m{flex:1 1 33.3333%}.sb-1-1-quarter-m{flex:1 1 25%}.sb-1-1-sixth-m{flex:1 1 16.6666%}.sb-1-1-seventh-m{flex:1 1 14.2857%}.sb-1-1-eighth-m{flex:1 1 12.5%}.sb-1-1-ninth-m{flex:1 1 11.1111%}.sb-1-1-0-m{flex:1 1 0}.sb-1-1-auto-m{flex:1 1 auto}}@media only screen and (max-width:600px){.sb-1-1-100-s{flex:1 1 100%}.sb-1-1-90-s{flex:1 1 90%}.sb-1-1-80-s{flex:1 1 80%}.sb-1-1-70-s{flex:1 1 70%}.sb-1-1-60-s{flex:1 1 60%}.sb-1-1-50-s{flex:1 1 50%}.sb-1-1-40-s{flex:1 1 40%}.sb-1-1-30-s{flex:1 1 30%}.sb-1-1-20-s{flex:1 1 20%}.sb-1-1-10-s{flex:1 1 10%}.sb-1-1-third-s{flex:1 1 33.3333%}.sb-1-1-quarter-s{flex:1 1 25%}.sb-1-1-sixth-s{flex:1 1 16.6666%}.sb-1-1-seventh-s{flex:1 1 14.2857%}.sb-1-1-eighth-s{flex:1 1 12.5%}.sb-1-1-ninth-s{flex:1 1 11.1111%}.sb-1-1-0-s{flex:1 1 0}.sb-1-1-auto-s{flex:1 1 auto}}@media only screen and (min-width:992px){.sb-0-1-100-l{flex:0 1 100%}.sb-0-1-90-l{flex:0 1 90%}.sb-0-1-80-l{flex:0 1 80%}.sb-0-1-70-l{flex:0 1 70%}.sb-0-1-60-l{flex:0 1 60%}.sb-0-1-50-l{flex:0 1 50%}.sb-0-1-40-l{flex:0 1 40%}.sb-0-1-30-l{flex:0 1 30%}.sb-0-1-20-l{flex:0 1 20%}.sb-0-1-10-l{flex:0 1 10%}.sb-0-1-third-l{flex:0 1 33.3333%}.sb-0-1-quarter-l{flex:0 1 25%}.sb-0-1-sixth-l{flex:0 1 16.6666%}.sb-0-1-seventh-l{flex:0 1 14.2857%}.sb-0-1-eighth-l{flex:0 1 12.5%}.sb-0-1-ninth-l{flex:0 1 11.1111%}.sb-0-1-0-l{flex:0 1 0}.sb-0-1-auto-l{flex:0 1 auto}}@media only screen and (min-width:600px) and (max-width:992px){.sb-0-1-100-m{flex:0 1 100%}.sb-0-1-90-m{flex:0 1 90%}.sb-0-1-80-m{flex:0 1 80%}.sb-0-1-70-m{flex:0 1 70%}.sb-0-1-60-m{flex:0 1 60%}.sb-0-1-50-m{flex:0 1 50%}.sb-0-1-40-m{flex:0 1 40%}.sb-0-1-30-m{flex:0 1 30%}.sb-0-1-20-m{flex:0 1 20%}.sb-0-1-10-m{flex:0 1 10%}.sb-0-1-third-m{flex:0 1 33.3333%}.sb-0-1-quarter-m{flex:0 1 25%}.sb-0-1-sixth-m{flex:0 1 16.6666%}.sb-0-1-seventh-m{flex:0 1 14.2857%}.sb-0-1-eighth-m{flex:0 1 12.5%}.sb-0-1-ninth-m{flex:0 1 11.1111%}.sb-0-1-0-m{flex:0 1 0}.sb-0-1-auto-m{flex:0 1 auto}}@media only screen and (max-width:600px){.sb-10-1-100-s{flex:0 1 100%}.sb-10-1-90-s{flex:0 1 90%}.sb-10-1-80-s{flex:0 1 80%}.sb-10-1-70-s{flex:0 1 70%}.sb-10-1-60-s{flex:0 1 60%}.sb-10-1-50-s{flex:0 1 50%}.sb-10-1-40-s{flex:0 1 40%}.sb-10-1-30-s{flex:0 1 30%}.sb-10-1-20-s{flex:0 1 20%}.sb-10-1-10-s{flex:0 1 10%}.sb-0-1-third-s{flex:0 1 33.3333%}.sb-0-1-quarter-s{flex:0 1 25%}.sb-0-1-sixth-s{flex:0 1 16.6666%}.sb-0-1-seventh-s{flex:0 1 14.2857%}.sb-0-1-eighth-s{flex:0 1 12.5%}.sb-0-1-ninth-s{flex:0 1 11.1111%}.sb-0-1-0-s{flex:0 1 0}.sb-0-1-auto-s{flex:0 1 auto}}@media only screen and (min-width:992px){.sb-1-0-100-l{flex:1 0 100%}.sb-1-0-90-l{flex:1 0 90%}.sb-1-0-80-l{flex:1 0 80%}.sb-1-0-70-l{flex:1 0 70%}.sb-1-0-60-l{flex:1 0 60%}.sb-1-0-50-l{flex:1 0 50%}.sb-1-0-40-l{flex:1 0 40%}.sb-1-0-30-l{flex:1 0 30%}.sb-1-0-20-l{flex:1 0 20%}.sb-1-0-10-l{flex:1 0 10%}.sb-1-0-third-l{flex:1 0 33.3333%}.sb-1-0-quarter-l{flex:1 0 25%}.sb-1-0-sixth-l{flex:1 0 16.6666%}.sb-1-0-seventh-l{flex:1 0 14.2857%}.sb-1-0-eighth-l{flex:1 0 12.5%}.sb-1-0-ninth-l{flex:1 0 11.1111%}.sb-1-0-0-l{flex:1 0 0}.sb-1-0-auto-l{flex:1 0 auto}}@media only screen and (min-width:600px) and (max-width:992px){.sb-1-0-100-m{flex:1 0 100%}.sb-1-0-90-m{flex:1 0 90%}.sb-1-0-80-m{flex:1 0 80%}.sb-1-0-70-m{flex:1 0 70%}.sb-1-0-60-m{flex:1 0 60%}.sb-1-0-50-m{flex:1 0 50%}.sb-1-0-40-m{flex:1 0 40%}.sb-1-0-30-m{flex:1 0 30%}.sb-1-0-20-m{flex:1 0 20%}.sb-1-0-10-m{flex:1 0 10%}.sb-1-0-third-m{flex:1 0 33.3333%}.sb-1-0-quarter-m{flex:1 0 25%}.sb-1-0-sixth-m{flex:1 0 16.6666%}.sb-1-0-seventh-m{flex:1 0 14.2857%}.sb-1-0-eighth-m{flex:1 0 12.5%}.sb-1-0-ninth-m{flex:1 0 11.1111%}.sb-1-0-0-m{flex:1 0 0}.sb-1-0-auto-m{flex:1 0 auto}}@media only screen and (max-width:600px){.sb-1-0-100-s{flex:1 0 100%}.sb-1-0-90-s{flex:1 0 90%}.sb-1-0-80-s{flex:1 0 80%}.sb-1-0-70-s{flex:1 0 70%}.sb-1-0-60-s{flex:1 0 60%}.sb-1-0-50-s{flex:1 0 50%}.sb-1-0-40-s{flex:1 0 40%}.sb-1-0-30-s{flex:1 0 30%}.sb-1-0-20-s{flex:1 0 20%}.sb-1-0-10-s{flex:1 0 10%}.sb-1-0-third-s{flex:1 0 33.3333%}.sb-1-0-quarter-s{flex:1 0 25%}.sb-1-0-sixth-s{flex:1 0 16.6666%}.sb-1-0-seventh-s{flex:1 0 14.2857%}.sb-1-0-eighth-s{flex:1 0 12.5%}.sb-1-0-ninth-s{flex:1 0 11.1111%}.sb-1-0-0-s{flex:1 0 0}.sb-1-0-auto-s{flex:1 0 auto}}@media only screen and (min-width:992px){.sb-0-0-100-l{flex:0 0 100%}.sb-0-0-90-l{flex:0 0 90%}.sb-0-0-80-l{flex:0 0 80%}.sb-0-0-70-l{flex:0 0 70%}.sb-0-0-60-l{flex:0 0 60%}.sb-0-0-50-l{flex:0 0 50%}.sb-0-0-40-l{flex:0 0 40%}.sb-0-0-30-l{flex:0 0 30%}.sb-0-0-20-l{flex:0 0 20%}.sb-0-0-10-l{flex:0 0 10%}.sb-0-0-third-l{flex:0 0 33.3333%}.sb-0-0-quarter-l{flex:0 0 25%}.sb-0-0-sixth-l{flex:0 0 16.6666%}.sb-0-0-seventh-l{flex:0 0 14.2857%}.sb-0-0-eighth-l{flex:0 0 12.5%}.sb-0-0-ninth-l{flex:0 0 11.1111%}.sb-0-0-0-l{flex:0 0 0}.sb-0-0-auto-l{flex:0 0 auto}}@media only screen and (min-width:600px) and (max-width:992px){.sb-0-0-100-m{flex:0 0 100%}.sb-0-0-90-m{flex:0 0 90%}.sb-0-0-80-m{flex:0 0 80%}.sb-0-0-70-m{flex:0 0 70%}.sb-0-0-60-m{flex:0 0 60%}.sb-0-0-50-m{flex:0 0 50%}.sb-0-0-40-m{flex:0 0 40%}.sb-0-0-30-m{flex:0 0 30%}.sb-0-0-20-m{flex:0 0 20%}.sb-0-0-10-m{flex:0 0 10%}.sb-0-0-third-m{flex:0 0 33.3333%}.sb-0-0-quarter-m{flex:0 0 25%}.sb-0-0-sixth-m{flex:0 0 16.6666%}.sb-0-0-seventh-m{flex:0 0 14.2857%}.sb-0-0-eighth-m{flex:0 0 12.5%}.sb-0-0-ninth-m{flex:0 0 11.1111%}.sb-0-0-0-m{flex:0 0 0}.sb-0-0-auto-m{flex:0 0 auto}}@media only screen and (max-width:600px){.sb-0-0-100-s{flex:0 0 100%}.sb-0-0-90-s{flex:0 0 90%}.sb-0-0-80-s{flex:0 0 80%}.sb-0-0-70-s{flex:0 0 70%}.sb-0-0-60-s{flex:0 0 60%}.sb-0-0-50-s{flex:0 0 50%}.sb-0-0-40-s{flex:0 0 40%}.sb-0-0-30-s{flex:0 0 30%}.sb-0-0-20-s{flex:0 0 20%}.sb-0-0-10-s{flex:0 0 10%}.sb-0-0-third-s{flex:0 0 33.3333%}.sb-0-0-quarter-s{flex:0 0 25%}.sb-0-0-sixth-s{flex:0 0 16.6666%}.sb-0-0-seventh-s{flex:0 0 14.2857%}.sb-0-0-eighth-s{flex:0 0 12.5%}.sb-0-0-ninth-s{flex:0 0 11.1111%}.sb-0-0-0-s{flex:0 0 0}.sb-0-0-auto-s{flex:0 0 auto}}.sb-flex-10{flex:10 1 0}.sb-flex-9{flex:9 1 0}.sb-flex-8{flex:8 1 0}.sb-flex-7{flex:7 1 0}.sb-flex-6{flex:6 1 0}.sb-flex-5{flex:5 1 0}.sb-flex-4{flex:4 1 0}.sb-flex-3{flex:3 1 0}.sb-flex-2{flex:2 1 0}.sb-flex-1{flex:1 1 0}.sb-flex-0{flex:0 1 0}.sb-flex-0-1-auto,.sb-flex-0-auto,.sb-flex-initial{flex:0 1 auto}.sb-flex-0-0-auto,.sb-flex-1-1-auto,.sb-flex-auto,.sb-flex-none{flex:1 1 auto}@media only screen and (min-width:992px){.sb-flex-10-l{flex:10 1 0}.sb-flex-9-l{flex:9 1 0}.sb-flex-8-l{flex:8 1 0}.sb-flex-7-l{flex:7 1 0}.sb-flex-6-l{flex:6 1 0}.sb-flex-5-l{flex:5 1 0}.sb-flex-4-l{flex:4 1 0}.sb-flex-3-l{flex:3 1 0}.sb-flex-2-l{flex:2 1 0}.sb-flex-1-l{flex:1 1 0}.sb-flex-0-l{flex:0 1 0}.sb-flex-0-1-auto-l,.sb-flex-0-auto-l,.sb-flex-initial-l{flex:0 1 auto}.sb-flex-0-0-auto-l,.sb-flex-1-1-auto-l,.sb-flex-auto-l,.sb-flex-none-l{flex:1 1 auto}}@media only screen and (min-width:600px) and (max-width:992px){.sb-flex-10-m{flex:10 1 0}.sb-flex-9-m{flex:9 1 0}.sb-flex-8-m{flex:8 1 0}.sb-flex-7-m{flex:7 1 0}.sb-flex-6-m{flex:6 1 0}.sb-flex-5-m{flex:5 1 0}.sb-flex-4-m{flex:4 1 0}.sb-flex-3-m{flex:3 1 0}.sb-flex-2-m{flex:2 1 0}.sb-flex-1-m{flex:1 1 0}.sb-flex-0-m{flex:0 1 0}.sb-flex-0-1-auto-m,.sb-flex-0-auto-m,.sb-flex-initial-m{flex:0 1 auto}.sb-flex-0-0-auto-m,.sb-flex-1-1-auto-m,.sb-flex-auto-m,.sb-flex-none-m{flex:1 1 auto}}@media only screen and (max-width:600px){.sb-flex-10-s{flex:10 1 0}.sb-flex-9-s{flex:9 1 0}.sb-flex-8-s{flex:8 1 0}.sb-flex-7-s{flex:7 1 0}.sb-flex-6-s{flex:6 1 0}.sb-flex-5-s{flex:5 1 0}.sb-flex-4-s{flex:4 1 0}.sb-flex-3-s{flex:3 1 0}.sb-flex-2-s{flex:2 1 0}.sb-flex-1-s{flex:1 1 0}.sb-flex-0-s{flex:0 1 0}.sb-flex-0-1-auto-s,.sb-flex-0-auto-s,.sb-flex-initial-s{flex:0 1 auto}.sb-flex-0-0-auto-s,.sb-flex-1-1-auto-s,.sb-flex-auto-s,.sb-flex-none-s{flex:1 1 auto}}@media only screen and (min-width:992px){.sb-flex-grow-0-l{flex-grow:0}.sb-flex-grow-1-l{flex-grow:1}.sb-flex-grow-2-l{flex-grow:2}.sb-flex-grow-3-l{flex-grow:3}.sb-flex-grow-4-l{flex-grow:4}.sb-flex-grow-5-l{flex-grow:5}.sb-flex-grow-6-l{flex-grow:6}.sb-flex-grow-7-l{flex-grow:7}.sb-flex-grow-8-l{flex-grow:8}.sb-flex-grow-9-l{flex-grow:9}.sb-flex-grow-10-l{flex-grow:10}}@media only screen and (min-width:600px) and (max-width:992px){.sb-flex-grow-0-m{flex-grow:0}.sb-flex-grow-1-m{flex-grow:1}.sb-flex-grow-2-m{flex-grow:2}.sb-flex-grow-3-m{flex-grow:3}.sb-flex-grow-4-m{flex-grow:4}.sb-flex-grow-5-m{flex-grow:5}.sb-flex-grow-6-m{flex-grow:6}.sb-flex-grow-7-m{flex-grow:7}.sb-flex-grow-8-m{flex-grow:8}.sb-flex-grow-9-m{flex-grow:9}.sb-flex-grow-10-m{flex-grow:10}}@media only screen and (max-width:600px){.sb-flex-grow-0-s{flex-grow:0}.sb-flex-grow-1-s{flex-grow:1}.sb-flex-grow-2-s{flex-grow:2}.sb-flex-grow-3-s{flex-grow:3}.sb-flex-grow-4-s{flex-grow:4}.sb-flex-grow-5-s{flex-grow:5}.sb-flex-grow-6-s{flex-grow:6}.sb-flex-grow-7-s{flex-grow:7}.sb-flex-grow-8-s{flex-grow:8}.sb-flex-grow-9-s{flex-grow:9}.sb-flex-grow-10-s{flex-grow:10}}@media only screen and (min-width:992px){.sb-flex-shrink-0-l{flex-shrink:0}.sb-flex-shrink-1-l{flex-shrink:1}.sb-flex-shrink-2-l{flex-shrink:2}.sb-flex-shrink-3-l{flex-shrink:3}.sb-flex-shrink-4-l{flex-shrink:4}.sb-flex-shrink-5-l{flex-shrink:5}.sb-flex-shrink-6-l{flex-shrink:6}.sb-flex-shrink-7-l{flex-shrink:7}.sb-flex-shrink-8-l{flex-shrink:8}.sb-flex-shrink-9-l{flex-shrink:9}.sb-flex-shrink-10-l{flex-shrink:10}}@media only screen and (min-width:600px) and (max-width:992px){.sb-flex-shrink-0-m{flex-shrink:0}.sb-flex-shrink-1-m{flex-shrink:1}.sb-flex-shrink-2-m{flex-shrink:2}.sb-flex-shrink-3-m{flex-shrink:3}.sb-flex-shrink-4-m{flex-shrink:4}.sb-flex-shrink-5-m{flex-shrink:5}.sb-flex-shrink-6-m{flex-shrink:6}.sb-flex-shrink-7-m{flex-shrink:7}.sb-flex-shrink-8-m{flex-shrink:8}.sb-flex-shrink-9-m{flex-shrink:9}.sb-flex-shrink-10-m{flex-shrink:10}}@media only screen and (max-width:600px){.sb-flex-shrink-0-s{flex-shrink:0}.sb-flex-shrink-1-s{flex-shrink:1}.sb-flex-shrink-2-s{flex-shrink:2}.sb-flex-shrink-3-s{flex-shrink:3}.sb-flex-shrink-4-s{flex-shrink:4}.sb-flex-shrink-5-s{flex-shrink:5}.sb-flex-shrink-6-s{flex-shrink:6}.sb-flex-shrink-7-s{flex-shrink:7}.sb-flex-shrink-8-s{flex-shrink:8}.sb-flex-shrink-9-s{flex-shrink:9}.sb-flex-shrink-10-s{flex-shrink:10}}@media only screen and (min-width:992px){.sb-flex-basis-100-l{flex-basis:100%}.sb-flex-basis-90-l{flex-basis:90%}.sb-flex-basis-80-l{flex-basis:80%}.sb-flex-basis-70-l{flex-basis:70%}.sb-flex-basis-60-l{flex-basis:60%}.sb-flex-basis-50-l{flex-basis:50%}.sb-flex-basis-40-l{flex-basis:40%}.sb-flex-basis-30-l{flex-basis:30%}.sb-flex-basis-20-l{flex-basis:20%}.sb-flex-basis-10-l{flex-basis:10%}.sb-flex-basis-third-l{flex-basis:33.3333%}.sb-flex-basis-quarter-l{flex-basis:25%}.sb-flex-basis-sixth-l{flex-basis:16.6666%}.sb-flex-basis-seventh-l{flex-basis:14.2857%}.sb-flex-basis-eighth-l{flex-basis:12.5%}.sb-flex-basis-ninth-l{flex-basis:11.1111%}.sb-flex-basis-0-l{flex-basis:0}.sb-flex-basis-auto-l{flex-basis:auto}}@media only screen and (min-width:600px) and (max-width:992px){.sb-flex-basis-100-m{flex-basis:100%}.sb-flex-basis-90-m{flex-basis:90%}.sb-flex-basis-80-m{flex-basis:80%}.sb-flex-basis-70-m{flex-basis:70%}.sb-flex-basis-60-m{flex-basis:60%}.sb-flex-basis-50-m{flex-basis:50%}.sb-flex-basis-40-m{flex-basis:40%}.sb-flex-basis-30-m{flex-basis:30%}.sb-flex-basis-20-m{flex-basis:20%}.sb-flex-basis-10-m{flex-basis:10%}.sb-flex-basis-third-m{flex-basis:33.3333%}.sb-flex-basis-quarter-m{flex-basis:25%}.sb-flex-basis-sixth-m{flex-basis:16.6666%}.sb-flex-basis-seventh-m{flex-basis:14.2857%}.sb-flex-basis-eighth-m{flex-basis:12.5%}.sb-flex-basis-ninth-m{flex-basis:11.1111%}.sb-flex-basis-0-m{flex-basis:0}.sb-flex-basis-auto-m{flex-basis:auto}}@media only screen and (max-width:600px){.sb-flex-basis-100-s{flex-basis:100%}.sb-flex-basis-90-s{flex-basis:90%}.sb-flex-basis-80-s{flex-basis:80%}.sb-flex-basis-70-s{flex-basis:70%}.sb-flex-basis-60-s{flex-basis:60%}.sb-flex-basis-50-s{flex-basis:50%}.sb-flex-basis-40-s{flex-basis:40%}.sb-flex-basis-30-s{flex-basis:30%}.sb-flex-basis-20-s{flex-basis:20%}.sb-flex-basis-10-s{flex-basis:10%}.sb-flex-basis-third-s{flex-basis:33.3333%}.sb-flex-basis-quarter-s{flex-basis:25%}.sb-flex-basis-sixth-s{flex-basis:16.6666%}.sb-flex-basis-seventh-s{flex-basis:14.2857%}.sb-flex-basis-eighth-s{flex-basis:12.5%}.sb-flex-basis-ninth-s{flex-basis:11.1111%}.sb-flex-basis-0-s{flex-basis:0}.sb-flex-basis-auto-s{flex-basis:auto}} -------------------------------------------------------------------------------- /docs/css/custom.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: OpenSans; 3 | src: url(opensans/OpenSans-Regular.ttf); 4 | } 5 | 6 | @font-face { 7 | font-family: OpenSans-Light; 8 | src: url(opensans/OpenSans-Light.ttf); 9 | } 10 | 11 | @font-face { 12 | font-family: Tajaval; 13 | src: url(tajaval/Tajawal-Bold.ttf); 14 | } 15 | 16 | 17 | 18 | p { 19 | text-align: center; 20 | } 21 | 22 | pre { 23 | white-space: pre-wrap; 24 | word-wrap: break-word; 25 | } 26 | 27 | html { 28 | font-size: 16px; 29 | font-family: 'OpenSans', sans-serif; 30 | line-height: 1.5rem; 31 | } 32 | 33 | #logo { 34 | height: 50vh; 35 | margin-top: 10%; 36 | } 37 | 38 | @media all and (max-width: 650px) { 39 | #logo { 40 | margin-top: 50%; 41 | } 42 | } 43 | 44 | 45 | .logo-container { 46 | height: 100vh; 47 | background: linear-gradient(-17deg, #ef5350 0%, #6abf69 100%); 48 | padding: 0 15%; 49 | } 50 | 51 | @media all and (max-width: 650px) { 52 | .logo-container { 53 | background: linear-gradient(-17deg, #ef5350 0%, #6abf69 100%); 54 | } 55 | } 56 | 57 | .logo-container h1 { 58 | text-align: center; 59 | font-family: 'Tajaval', sans-serif; 60 | font-size: 1.6rem; 61 | color: #ffffff; 62 | } 63 | 64 | @media all and (max-width: 650px) { 65 | .logo-container h1 { 66 | font-size: 1.2em; 67 | } 68 | } 69 | 70 | .installation-container { 71 | background: #ffffff; 72 | height: 100vh; 73 | padding: 0 15%; 74 | color: #000000; 75 | } 76 | 77 | .installation-container h2 { 78 | color: #6abf69; 79 | font-family: 'Tajaval', sans-serif; 80 | } 81 | 82 | .installation-container pre { 83 | background: #f6f8fa; 84 | color: #24292e; 85 | padding: 15px; 86 | } 87 | 88 | .features-container { 89 | background-color: #f9f9f9; 90 | height: 100vh; 91 | padding: 0 15%; 92 | color: #000000; 93 | } 94 | 95 | .features-container h2 { 96 | color: #ef5350; 97 | font-family: 'Tajaval', sans-serif; 98 | margin: 55px 0; 99 | } 100 | 101 | 102 | .wiki-container { 103 | background: #ffffff; 104 | height: 100vh; 105 | padding: 0 15%; 106 | color: #000000; 107 | } 108 | 109 | .wiki-container h2 { 110 | color: #6abf69; 111 | font-family: 'Tajaval', sans-serif; 112 | } 113 | 114 | .wiki-container a { 115 | text-decoration: none; 116 | color: #ef5350; 117 | } 118 | 119 | .repo-container { 120 | background-color: #f9f9f9; 121 | height: 100vh; 122 | padding: 0 15%; 123 | color: #000000; 124 | } 125 | 126 | .repo-container h2 { 127 | color: #ef5350; 128 | font-family: 'Tajaval', sans-serif; 129 | margin: 55px 0; 130 | } 131 | 132 | .repo-container a { 133 | text-decoration: none; 134 | color: #6abf69; 135 | } 136 | 137 | 138 | .examples-container { 139 | background-color: #ffffff; 140 | height: 100vh; 141 | padding: 0 15%; 142 | color: #000000; 143 | } 144 | 145 | .examples-container h2 { 146 | color: #6abf69; 147 | font-family: 'Tajaval', sans-serif; 148 | margin: 55px 0; 149 | } 150 | 151 | .examples-container a { 152 | text-decoration: none; 153 | color: #ef5350; 154 | } 155 | 156 | 157 | .contacts-container { 158 | background: #f9f9f9; 159 | height: 100vh; 160 | padding: 0 15%; 161 | color: #000000; 162 | } 163 | 164 | .contacts-container h2 { 165 | color: #6abf69; 166 | font-family: 'Tajaval', sans-serif; 167 | } 168 | 169 | .contacts-container a { 170 | text-decoration: none; 171 | color: #ef5350; 172 | } -------------------------------------------------------------------------------- /docs/css/opensans/OpenSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfet97/strawberry/72fb5045348dc8ded9fb2a01cd70baee0bfb99b7/docs/css/opensans/OpenSans-Light.ttf -------------------------------------------------------------------------------- /docs/css/opensans/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfet97/strawberry/72fb5045348dc8ded9fb2a01cd70baee0bfb99b7/docs/css/opensans/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /docs/css/tajaval/Tajawal-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfet97/strawberry/72fb5045348dc8ded9fb2a01cd70baee0bfb99b7/docs/css/tajaval/Tajawal-Bold.ttf -------------------------------------------------------------------------------- /docs/examples/mobile-reordering/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FlexBox Nav 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 103 | 104 |
105 | 106 | 107 |
108 |

Strawberry

109 |
110 | 111 | 156 | 157 |
158 | 159 |
160 | 161 |
162 |

A great Framework!

163 |

It is so powerful.

164 |
165 | 166 |
167 |
168 | 169 | 170 | 171 |
172 |
173 | 174 | 177 | 178 | 179 |
180 | 181 | 182 | 191 | 192 | 193 | 194 | -------------------------------------------------------------------------------- /docs/examples/mobile-reordering/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfet97/strawberry/72fb5045348dc8ded9fb2a01cd70baee0bfb99b7/docs/examples/mobile-reordering/mobile.png -------------------------------------------------------------------------------- /docs/examples/mobile-reordering/opensans/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfet97/strawberry/72fb5045348dc8ded9fb2a01cd70baee0bfb99b7/docs/examples/mobile-reordering/opensans/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /docs/examples/mobile-reordering/tablet-pc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfet97/strawberry/72fb5045348dc8ded9fb2a01cd70baee0bfb99b7/docs/examples/mobile-reordering/tablet-pc.png -------------------------------------------------------------------------------- /docs/examples/mobile-reordering/tajaval/Tajawal-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfet97/strawberry/72fb5045348dc8ded9fb2a01cd70baee0bfb99b7/docs/examples/mobile-reordering/tajaval/Tajawal-Bold.ttf -------------------------------------------------------------------------------- /docs/examples/navbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 | 14 | 15 | 43 | 44 | 45 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /docs/examples/responsive-cards/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 | 14 | 40 |
41 |
42 | pic 43 | 1 44 |
45 |
46 | pic 47 | 2 48 |
49 |
50 | pic 51 | 3 52 |
53 |
54 | pic 55 | 4 56 |
57 |
58 | pic 59 | 5 60 |
61 |
62 | pic 63 | 6 64 |
65 |
66 | pic 67 | 7 68 |
69 |
70 | pic 71 | 8 72 |
73 |
74 | pic 75 | 9 76 |
77 |
78 | pic 79 | 10 80 |
81 |
82 | pic 83 | 11 84 |
85 |
86 | pic 87 | 12 88 |
89 |
90 | 91 | 92 | -------------------------------------------------------------------------------- /docs/examples/responsive-cards/pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfet97/strawberry/72fb5045348dc8ded9fb2a01cd70baee0bfb99b7/docs/examples/responsive-cards/pic.png -------------------------------------------------------------------------------- /docs/examples/slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | FlexBox Nav 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 |
16 | 17 | 46 | 47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /docs/examples/slider/pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfet97/strawberry/72fb5045348dc8ded9fb2a01cd70baee0bfb99b7/docs/examples/slider/pic.png -------------------------------------------------------------------------------- /docs/examples/slider/style.css: -------------------------------------------------------------------------------- 1 | /* As you can see all flexbox work is done by Strawberry; here there is only some style for elements */ 2 | 3 | body { 4 | font-family: sans-serif; 5 | background-image: linear-gradient(-17deg, #ef5350 0%, #6abf69 100%); 6 | font-size: 16px; 7 | } 8 | 9 | .wrapper { 10 | min-height: 100vh; 11 | padding-top: 30px; 12 | max-width: 800px; 13 | margin: 0 auto; 14 | } 15 | 16 | img { 17 | max-width:100%; 18 | display: block; 19 | margin-bottom: 30px; 20 | } 21 | 22 | .arrow { 23 | font-size: 2.5em; 24 | } 25 | 26 | a { 27 | color:white; 28 | text-decoration: none; 29 | padding: 15px 5px; 30 | } 31 | 32 | a:hover { 33 | background:rgba(0,0,0,0.6); 34 | } 35 | 36 | 37 | .slider-nav ul { 38 | list-style: none; 39 | background: #6abf69; 40 | border: 2px solid #388e3c; 41 | } 42 | 43 | .slider-nav li { 44 | min-height: 50px; 45 | } 46 | 47 | .slider-nav a { 48 | text-align: center; 49 | } -------------------------------------------------------------------------------- /docs/img/logo-strawberry-bianco.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 13 | 14 | 16 | 24 | 25 | 27 | 28 | 33 | 36 | 39 | 45 | 49 | 54 | 59 | 62 | 65 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /docs/img/logo-strawberry.svg: -------------------------------------------------------------------------------- 1 | Tavola disegno 1 -------------------------------------------------------------------------------- /docs/img/logo.svg: -------------------------------------------------------------------------------- 1 | aaaaaTavola disegno 1 -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Document 11 | 12 | 13 | 14 | 15 |
16 | 17 |

Strawberry is a new flexbox based CSS micro-framework

18 |
19 | 20 |
21 |
22 |

23 | logoInstallation

24 |
25 |
26 | 
$ npm i --save strawberry-css
27 |
28 |
29 |

or

30 |
31 |
32 | 
<link rel="stylesheet" href="https://unpkg.com/strawberry-css/dist/strawberry.min.css">
33 |
34 |
35 | 36 |
37 |
38 |

39 | logoFeatures

40 |
41 |
42 | 49 |
50 |
51 | 52 |
53 |
54 |

55 | logoWiki

56 |
57 |
58 |

You can read the documentation 59 | here 60 |

61 |
62 |
63 | 64 |
65 |
66 |

67 | logoRepository

68 |
69 |
70 |

Check it out 71 | here and feel free to contribute

72 |
73 |
74 | 75 |
76 |
77 |

78 | logoExamples

79 |
80 |
81 |

I'm working hard on them. Stay tuned!

82 |
83 |
84 | 85 |
86 |
87 |

88 | logoContacts

89 |
90 |
91 |

Feel free to email me for anything

andrysimo1997@gmail.com

92 |
93 |
94 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /docs/js/custom.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | /* 3 | var w = window.innerWidth; 4 | var logo_container = document.getElementsByClassName("logo-container"); 5 | 6 | if(w >= 1000) { 7 | logo_container[0].classList.add("sb-each-item-40-nogs"); 8 | } 9 | 10 | if((w < 1000)&&(w >= 600)) { 11 | logo_container[0].classList.add("sb-each-item-30-nogs"); 12 | } 13 | 14 | if(w < 600) { 15 | logo_container[0].classList.add("sb-each-item-20-nogs"); 16 | } */ 17 | 18 | } 19 | 20 | window.onresize = function() { 21 | 22 | /* 23 | var w = window.innerWidth; 24 | var logo_container = document.getElementsByClassName("logo-container"); 25 | 26 | 27 | if(w >= 1000) { 28 | logo_container[0].classList.toggle("sb-each-item-30-nogs", false); 29 | logo_container[0].classList.toggle("sb-each-item-20-nogs", false); 30 | logo_container[0].classList.add("sb-each-item-40-nogs"); 31 | } 32 | 33 | if((w < 1000)&&(w >= 600)) { 34 | logo_container[0].classList.toggle("sb-each-item-40-nogs", false); 35 | logo_container[0].classList.toggle("sb-each-item-20-nogs", false); 36 | logo_container[0].classList.add("sb-each-item-30-nogs"); 37 | } 38 | 39 | if(w < 600) { 40 | logo_container[0].classList.toggle("sb-each-item-40-nogs", false); 41 | logo_container[0].classList.toggle("sb-each-item-30-nogs", false); 42 | logo_container[0].classList.add("sb-each-item-20-nogs"); 43 | } 44 | */ 45 | 46 | } 47 | -------------------------------------------------------------------------------- /img/logo-strawberry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfet97/strawberry/72fb5045348dc8ded9fb2a01cd70baee0bfb99b7/img/logo-strawberry.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfet97/strawberry/72fb5045348dc8ded9fb2a01cd70baee0bfb99b7/img/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "strawberry-css", 3 | "version": "2.3.2", 4 | "description": "New flexbox based CSS micro-framework, a set of flexbox common utilities focused on make life easier and faster with nested flexbox", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/jfet97/strawberry.git" 12 | }, 13 | "keywords": [ 14 | "flexbox", 15 | "css", 16 | "framework" 17 | ], 18 | "author": "Andrea Simone Costa ", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/jfet97/strawberry/issues" 22 | }, 23 | "homepage": "https://github.com/jfet97/strawberry#readme", 24 | "devDependencies": {} 25 | } 26 | -------------------------------------------------------------------------------- /sass/data/_breakpoints.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * 0 - 600 => small s 3 | * 600 - 992 => medium m 4 | * 992 - ... => large l */ 5 | 6 | $l: "only screen and (min-width:992px)" 7 | $m: "only screen and (min-width:600px) and (max-width:992px)" 8 | $s: "only screen and (max-width:600px)" -------------------------------------------------------------------------------- /sass/data/_fractions.sass: -------------------------------------------------------------------------------- 1 | $fractions-map: (third: 33.3333, quarter: 25, sixth: 16.6666, seventh: 14.2857, eighth: 12.50, ninth: 11.1111) -------------------------------------------------------------------------------- /sass/mixins/_flex-mixin.sass: -------------------------------------------------------------------------------- 1 | =flex($grow, $shrink, $basis) 2 | flex: $grow $shrink $basis 3 | -------------------------------------------------------------------------------- /sass/mixins/_flexbasis-mixin.sass: -------------------------------------------------------------------------------- 1 | =flex-basis($basis) 2 | flex-basis: $basis -------------------------------------------------------------------------------- /sass/mixins/_flexgrow-mixin.sass: -------------------------------------------------------------------------------- 1 | =flex-grow($grow) 2 | flex-grow: $grow -------------------------------------------------------------------------------- /sass/mixins/_flexprimary-mixin.sass: -------------------------------------------------------------------------------- 1 | =flex-primary($direction) 2 | display: flex 3 | flex-direction: $direction -------------------------------------------------------------------------------- /sass/mixins/_flexshrink-mixin.sass: -------------------------------------------------------------------------------- 1 | =flex-shrink($shrink) 2 | flex-shrink: $shrink 3 | -------------------------------------------------------------------------------- /sass/partials/container/_container-alignc.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * Align Content */ 3 | 4 | .sb-ac-stretch 5 | align-content: stretch 6 | 7 | .sb-ac-center 8 | align-content: center 9 | 10 | .sb-ac-flex-start 11 | align-content: flex-start 12 | 13 | .sb-ac-flex-end 14 | align-content: flex-end 15 | 16 | .sb-ac-space-bn 17 | align-content: space-between 18 | 19 | .sb-ac-space-ad 20 | align-content: space-around 21 | 22 | .sb-ac-initial 23 | align-content: initial 24 | 25 | .sb-ac-inherit 26 | align-content: inherit 27 | 28 | -------------------------------------------------------------------------------- /sass/partials/container/_container-aligni.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * Align Item */ 3 | 4 | 5 | .sb-ai-stretch 6 | align-items: stretch 7 | 8 | .sb-ai-center 9 | align-items: center 10 | 11 | .sb-ai-flex-start 12 | align-items: flex-start 13 | 14 | .sb-ai-flex-end 15 | align-items: flex-end 16 | 17 | .sb-ai-baseline 18 | align-items: baseline 19 | 20 | .sb-ai-initial 21 | align-items: initial 22 | 23 | .sb-ai-inherit 24 | align-items: inherit 25 | -------------------------------------------------------------------------------- /sass/partials/container/_container-allcentered.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * All Centered */ 3 | 4 | .sb-all-is-centered 5 | justify-content: center 6 | align-items: center 7 | align-content: center 8 | 9 | -------------------------------------------------------------------------------- /sass/partials/container/_container-flex-flow.sass: -------------------------------------------------------------------------------- 1 | @import ../../data/breakpoints 2 | @import ../../mixins/flexprimary-mixin 3 | 4 | /* 5 | * Flex Row */ 6 | 7 | .sb-flex-row 8 | +flex-primary(row) 9 | 10 | .sb-flex-rev-row 11 | +flex-primary(row-reverse) 12 | 13 | /* 14 | * Flex Column */ 15 | 16 | .sb-flex-col 17 | +flex-primary(column) 18 | 19 | .sb-flex-rev-col 20 | +flex-primary(column-reverse) 21 | 22 | /* 23 | * Flex Inline */ 24 | 25 | .sb-flex-inline 26 | display: inline-flex 27 | 28 | 29 | @media #{$l} 30 | .sb-flex-row-l 31 | +flex-primary(row) 32 | 33 | .sb-flex-rev-row-l 34 | +flex-primary(row-reverse) 35 | 36 | .sb-flex-col-l 37 | +flex-primary(column) 38 | 39 | .sb-flex-rev-col-l 40 | +flex-primary(column-reverse) 41 | 42 | .sb-flex-inline-l 43 | display: inline-flex 44 | 45 | @media #{$m} 46 | .sb-flex-row-m 47 | +flex-primary(row) 48 | 49 | .sb-flex-rev-row-m 50 | +flex-primary(row-reverse) 51 | 52 | .sb-flex-col-m 53 | +flex-primary(column) 54 | 55 | .sb-flex-rev-col-m 56 | +flex-primary(column-reverse) 57 | 58 | .sb-flex-inline-m 59 | display: inline-flex 60 | 61 | @media #{$s} 62 | .sb-flex-row-s 63 | +flex-primary(row) 64 | 65 | .sb-flex-rev-row-s 66 | +flex-primary(row-reverse) 67 | 68 | .sb-flex-col-s 69 | +flex-primary(column) 70 | 71 | .sb-flex-rev-col-s 72 | +flex-primary(column-reverse) 73 | 74 | .sb-flex-inline-s 75 | display: inline-flex 76 | 77 | /* 78 | * Wrap */ 79 | 80 | .sb-wrap 81 | flex-wrap: wrap 82 | 83 | .sb-rev-wrap 84 | flex-wrap: wrap-reverse 85 | 86 | .sb-nowrap 87 | flex-wrap: nowrap 88 | 89 | @media #{$l} 90 | .sb-wrap-l 91 | flex-wrap: wrap 92 | 93 | .sb-rev-wrap-l 94 | flex-wrap: wrap-reverse 95 | 96 | .sb-nowrap-l 97 | flex-wrap: nowrap 98 | 99 | @media #{$m} 100 | .sb-wrap-m 101 | flex-wrap: wrap 102 | 103 | .sb-rev-wrap-m 104 | flex-wrap: wrap-reverse 105 | 106 | .sb-nowrap-m 107 | flex-wrap: nowrap 108 | 109 | @media #{$s} 110 | .sb-wrap-s 111 | flex-wrap: wrap 112 | 113 | .sb-rev-wrap-s 114 | flex-wrap: wrap-reverse 115 | 116 | .sb-nowrap-s 117 | flex-wrap: nowrap -------------------------------------------------------------------------------- /sass/partials/container/_container-flex.sass: -------------------------------------------------------------------------------- 1 | @import ../../data/fractions 2 | @import ../../mixins/flex-mixin 3 | 4 | 5 | /* 6 | * ------------------------------------ 7 | * Flex Grow - Flex Shrink - Flex Basis 8 | * ------------------------------------ */ 9 | 10 | 11 | /* 12 | * 13 | * 14 | * Flex Grow 1 Flex Shrink 1 */ 15 | @for $i from 10 through 1 16 | .sb-items-#{$i * 10} > * 17 | +flex(1, 1, #{$i * 10%}) 18 | 19 | @each $name, $value in $fractions-map 20 | .sb-items-#{$name} > * 21 | +flex(1, 1, #{$value * 1%}) 22 | 23 | .sb-items-1-1-0 > * 24 | +flex(1, 1, 0) 25 | .sb-items-1-1-auto > * 26 | +flex(1, 1, auto) 27 | 28 | /* 29 | * 30 | * 31 | * Flex Grow 0 Flex Shrink 1 */ 32 | @for $i from 10 through 1 33 | .sb-items-#{$i * 10}-nog > * 34 | +flex(0, 1, #{$i * 10%}) 35 | 36 | @each $name, $value in $fractions-map 37 | .sb-items-#{$name}-nog > * 38 | +flex(0, 1, #{$value * 1%}) 39 | 40 | .sb-items-0-1-0-nog > * 41 | +flex(0, 1, 0) 42 | .sb-items-0-1-auto-nog > * 43 | +flex(0, 1, auto) 44 | 45 | /* 46 | * 47 | * 48 | * Flex Grow 1 Flex Shrink 0 */ 49 | @for $i from 10 through 1 50 | .sb-items-#{$i * 10}-nos > * 51 | +flex(1, 0, #{$i * 10%}) 52 | 53 | @each $name, $value in $fractions-map 54 | .sb-items-#{$name}-nos > * 55 | +flex(1, 0, #{$value * 1%}) 56 | 57 | .sb-items-1-0-0-nos > * 58 | +flex(1, 0, 0) 59 | .sb-items-1-0-auto-nos > * 60 | +flex(1, 0, auto) 61 | 62 | /* 63 | * 64 | * 65 | * Flex Grow 0 Flex Shrink 0 */ 66 | @for $i from 10 through 1 67 | .sb-items-#{$i * 10}-nogs > * 68 | +flex(0, 0, #{$i * 10%}) 69 | 70 | @each $name, $value in $fractions-map 71 | .sb-items-#{$name}-nogs > * 72 | +flex(0, 0, #{$value * 1%}) 73 | 74 | 75 | .sb-items-0-0-0-nogs > * 76 | +flex(0, 0, 0) 77 | .sb-items-0-0-auto-nogs > * 78 | +flex(0, 0, auto) 79 | 80 | 81 | 82 | /* 83 | * 84 | * Responsive is the way */ 85 | @each $media, $query in (l: "only screen and (min-width:992px)", m: "only screen and (min-width:600px) and (max-width:992px)", s: "only screen and (max-width:600px)") 86 | @media #{$query} 87 | 88 | /* 89 | * 90 | * 91 | * Flex Grow 1 Flex Shrink 1 */ 92 | @for $i from 10 through 1 93 | .sb-items-#{$i * 10}-#{$media} > * 94 | +flex(1, 1, #{$i * 10%}) 95 | 96 | @each $name, $value in $fractions-map 97 | .sb-items-#{$name}-#{$media} > * 98 | +flex(1, 1, #{$value * 1%}) 99 | 100 | .sb-items-1-1-0-#{$media} > * 101 | +flex(1, 1, 0) 102 | .sb-items-1-1-auto-#{$media} > * 103 | +flex(1, 1, auto) 104 | 105 | /* 106 | * 107 | * 108 | * Flex Grow 0 Flex Shrink 1 */ 109 | @for $i from 10 through 1 110 | .sb-items-#{$i * 10}-nog-#{$media} > * 111 | +flex(0, 1, #{$i * 10%}) 112 | 113 | @each $name, $value in $fractions-map 114 | .sb-items-#{$name}-nog-#{$media} > * 115 | +flex(0, 1, #{$value * 1%}) 116 | 117 | .sb-items-0-1-0-nog-#{$media} > * 118 | +flex(0, 1, 0) 119 | .sb-items-0-1-auto-nog-#{$media} > * 120 | +flex(0, 1, auto) 121 | 122 | /* 123 | * 124 | * 125 | * Flex Grow 1 Flex Shrink 0 */ 126 | @for $i from 10 through 1 127 | .sb-items-#{$i * 10}-nos-#{$media} > * 128 | +flex(1, 0, #{$i * 10%}) 129 | 130 | @each $name, $value in $fractions-map 131 | .sb-items-#{$name}-nos-#{$media} > * 132 | +flex(1, 0, #{$value * 1%}) 133 | 134 | .sb-items-1-0-0-nos-#{$media} > * 135 | +flex(1, 0, 0) 136 | .sb-items-1-0-auto-nos-#{$media} > * 137 | +flex(1, 0, auto) 138 | 139 | /* 140 | * 141 | * 142 | * Flex Grow 0 Flex Shrink 0 */ 143 | @for $i from 10 through 1 144 | .sb-items-#{$i * 10}-nogs-#{$media} > * 145 | +flex(0, 0, #{$i * 10%}) 146 | 147 | @each $name, $value in $fractions-map 148 | .sb-items-#{$name}-nogs-#{$media} > * 149 | +flex(0, 0, #{$value * 1%}) 150 | 151 | 152 | .sb-items-0-0-0-nogs-#{$media} > * 153 | +flex(0, 0, 0) 154 | .sb-items-0-0-auto-nogs-#{$media} > * 155 | +flex(0, 0, auto) -------------------------------------------------------------------------------- /sass/partials/container/_container-justify.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * Justify Content */ 3 | 4 | .sb-jc-flex-start 5 | justify-content: flex-start 6 | 7 | .sb-jc-flex-end 8 | justify-content: flex-end 9 | 10 | .sb-jc-center 11 | justify-content: center 12 | 13 | .sb-jc-space-bn 14 | justify-content: space-between 15 | 16 | .sb-jc-space-ad 17 | justify-content: space-around 18 | 19 | .sb-jc-initial 20 | justify-content: initial 21 | 22 | .sb-jc-inherit 23 | justify-content: inherit 24 | 25 | -------------------------------------------------------------------------------- /sass/partials/item/_align-self.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * Align Self */ 3 | 4 | .sb-as-auto 5 | align-self: auto 6 | 7 | .sb-as-stretch 8 | align-self: stretch 9 | 10 | .sb-as-center 11 | align-self: center 12 | 13 | .sb-as-flex-start 14 | align-self: flex-start 15 | 16 | .sb-as-flex-end 17 | align-self: flex-end 18 | 19 | .sb-as-baseline 20 | align-self: baseline 21 | 22 | .sb-as-initial 23 | align-self: initial 24 | 25 | .sb-as-inherit 26 | align-self: inherit 27 | 28 | -------------------------------------------------------------------------------- /sass/partials/item/_flex-responsive.sass: -------------------------------------------------------------------------------- 1 | @import ../../data/breakpoints 2 | @import ../../data/fractions 3 | @import ../../mixins/flexgrow-mixin 4 | @import ../../mixins/flexshrink-mixin 5 | @import ../../mixins/flexbasis-mixin 6 | @import ../../mixins/flex-mixin 7 | 8 | /* 9 | * 10 | * Flex helpers section - 2 */ 11 | 12 | @for $i from 10 through 1 13 | .sb-1-1-#{$i * 10} 14 | +flex(1, 1, #{$i * 10%}) 15 | 16 | @each $name, $value in $fractions-map 17 | .sb-1-1-#{$name} 18 | +flex(1, 1, #{$value * 1%}) 19 | 20 | .sb-1-1-0 21 | +flex(1, 1, 0) 22 | .sb-1-1-auto 23 | +flex(1, 1, auto) 24 | 25 | 26 | @for $i from 10 through 1 27 | .sb-0-1-#{$i * 10} 28 | +flex(0, 1, #{$i * 10%}) 29 | 30 | @each $name, $value in $fractions-map 31 | .sb-0-1-#{$name} 32 | +flex(0, 1, #{$value * 1%}) 33 | 34 | .sb-0-1-0 35 | +flex(0, 1, 0) 36 | .sb-0-1-auto 37 | +flex(0, 1, auto) 38 | 39 | 40 | @for $i from 10 through 1 41 | .sb-1-0-#{$i * 10} 42 | +flex(1, 0, #{$i * 10%}) 43 | 44 | @each $name, $value in $fractions-map 45 | .sb-1-0-#{$name} 46 | +flex(1, 0, #{$value * 1%}) 47 | 48 | .sb-1-0-0 49 | +flex(1, 0, 0) 50 | .sb-1-0-auto 51 | +flex(1, 0, auto) 52 | 53 | 54 | @for $i from 10 through 1 55 | .sb-0-0-#{$i * 10} 56 | +flex(0, 0, #{$i * 10%}) 57 | 58 | @each $name, $value in $fractions-map 59 | .sb-0-0-#{$name} 60 | +flex(0, 0, #{$value * 1%}) 61 | 62 | .sb-0-0-0 63 | +flex(0, 0, 0) 64 | .sb-0-0-auto 65 | +flex(0, 0, auto) 66 | 67 | 68 | 69 | /* 70 | * 71 | * 72 | * Flex helpers section - 2 Responsive for items */ 73 | 74 | @media #{$l} 75 | 76 | @for $i from 10 through 1 77 | .sb-1-1-#{$i * 10}-l 78 | +flex(1, 1, #{$i * 10%}) 79 | 80 | @each $name, $value in $fractions-map 81 | .sb-1-1-#{$name}-l 82 | +flex(1, 1, #{$value * 1%}) 83 | 84 | .sb-1-1-0-l 85 | +flex(1, 1, 0) 86 | .sb-1-1-auto-l 87 | +flex(1, 1, auto) 88 | 89 | @media #{$m} 90 | 91 | @for $i from 10 through 1 92 | .sb-1-1-#{$i * 10}-m 93 | +flex(1, 1, #{$i * 10%}) 94 | 95 | @each $name, $value in $fractions-map 96 | .sb-1-1-#{$name}-m 97 | +flex(1, 1, #{$value * 1%}) 98 | 99 | .sb-1-1-0-m 100 | +flex(1, 1, 0) 101 | .sb-1-1-auto-m 102 | +flex(1, 1, auto) 103 | 104 | @media #{$s} 105 | 106 | @for $i from 10 through 1 107 | .sb-1-1-#{$i * 10}-s 108 | +flex(1, 1, #{$i * 10%}) 109 | 110 | @each $name, $value in $fractions-map 111 | .sb-1-1-#{$name}-s 112 | +flex(1, 1, #{$value * 1%}) 113 | 114 | .sb-1-1-0-s 115 | +flex(1, 1, 0) 116 | .sb-1-1-auto-s 117 | +flex(1, 1, auto) 118 | 119 | 120 | @media #{$l} 121 | 122 | @for $i from 10 through 1 123 | .sb-0-1-#{$i * 10}-l 124 | +flex(0, 1, #{$i * 10%}) 125 | 126 | @each $name, $value in $fractions-map 127 | .sb-0-1-#{$name}-l 128 | +flex(0, 1, #{$value * 1%}) 129 | 130 | .sb-0-1-0-l 131 | +flex(0, 1, 0) 132 | .sb-0-1-auto-l 133 | +flex(0, 1, auto) 134 | 135 | @media #{$m} 136 | 137 | @for $i from 10 through 1 138 | .sb-0-1-#{$i * 10}-m 139 | +flex(0, 1, #{$i * 10%}) 140 | 141 | @each $name, $value in $fractions-map 142 | .sb-0-1-#{$name}-m 143 | +flex(0, 1, #{$value * 1%}) 144 | 145 | .sb-0-1-0-m 146 | +flex(0, 1, 0) 147 | .sb-0-1-auto-m 148 | +flex(0, 1, auto) 149 | 150 | @media #{$s} 151 | 152 | @for $i from 10 through 1 153 | .sb-10-1-#{$i * 10}-s 154 | +flex(0, 1, #{$i * 10%}) 155 | 156 | @each $name, $value in $fractions-map 157 | .sb-0-1-#{$name}-s 158 | +flex(0, 1, #{$value * 1%}) 159 | 160 | .sb-0-1-0-s 161 | +flex(0, 1, 0) 162 | .sb-0-1-auto-s 163 | +flex(0, 1, auto) 164 | 165 | @media #{$l} 166 | 167 | @for $i from 10 through 1 168 | .sb-1-0-#{$i * 10}-l 169 | +flex(1, 0, #{$i * 10%}) 170 | 171 | @each $name, $value in $fractions-map 172 | .sb-1-0-#{$name}-l 173 | +flex(1, 0, #{$value * 1%}) 174 | 175 | .sb-1-0-0-l 176 | +flex(1, 0, 0) 177 | .sb-1-0-auto-l 178 | +flex(1, 0, auto) 179 | 180 | @media #{$m} 181 | 182 | @for $i from 10 through 1 183 | .sb-1-0-#{$i * 10}-m 184 | +flex(1, 0, #{$i * 10%}) 185 | 186 | @each $name, $value in $fractions-map 187 | .sb-1-0-#{$name}-m 188 | +flex(1, 0, #{$value * 1%}) 189 | 190 | .sb-1-0-0-m 191 | +flex(1, 0, 0) 192 | .sb-1-0-auto-m 193 | +flex(1, 0, auto) 194 | 195 | @media #{$s} 196 | 197 | @for $i from 10 through 1 198 | .sb-1-0-#{$i * 10}-s 199 | +flex(1, 0, #{$i * 10%}) 200 | 201 | @each $name, $value in $fractions-map 202 | .sb-1-0-#{$name}-s 203 | +flex(1, 0, #{$value * 1%}) 204 | 205 | .sb-1-0-0-s 206 | +flex(1, 0, 0) 207 | .sb-1-0-auto-s 208 | +flex(1, 0, auto) 209 | 210 | 211 | @media #{$l} 212 | 213 | @for $i from 10 through 1 214 | .sb-0-0-#{$i * 10}-l 215 | +flex(0, 0, #{$i * 10%}) 216 | 217 | @each $name, $value in $fractions-map 218 | .sb-0-0-#{$name}-l 219 | +flex(0, 0, #{$value * 1%}) 220 | 221 | .sb-0-0-0-l 222 | +flex(0, 0, 0) 223 | .sb-0-0-auto-l 224 | +flex(0, 0, auto) 225 | 226 | @media #{$m} 227 | 228 | @for $i from 10 through 1 229 | .sb-0-0-#{$i * 10}-m 230 | +flex(0, 0, #{$i * 10%}) 231 | 232 | @each $name, $value in $fractions-map 233 | .sb-0-0-#{$name}-m 234 | +flex(0, 0, #{$value * 1%}) 235 | 236 | .sb-0-0-0-m 237 | +flex(0, 0, 0) 238 | .sb-0-0-auto-m 239 | +flex(0, 0, auto) 240 | 241 | @media #{$s} 242 | 243 | @for $i from 10 through 1 244 | .sb-0-0-#{$i * 10}-s 245 | +flex(0, 0, #{$i * 10%}) 246 | 247 | @each $name, $value in $fractions-map 248 | .sb-0-0-#{$name}-s 249 | +flex(0, 0, #{$value * 1%}) 250 | 251 | .sb-0-0-0-s 252 | +flex(0, 0, 0) 253 | .sb-0-0-auto-s 254 | +flex(0, 0, auto) 255 | 256 | 257 | 258 | 259 | 260 | /* 261 | * 262 | * Flex helpers Section 1 */ 263 | 264 | 265 | @for $i from 10 through 0 266 | .sb-flex-#{$i} 267 | +flex($i, 1, 0) 268 | 269 | .sb-flex-initial, 270 | .sb-flex-0-auto, 271 | .sb-flex-0-1-auto 272 | +flex(0, 1, auto) 273 | 274 | .sb-flex-auto, 275 | .sb-flex-1-1-auto 276 | +flex(1, 1, auto) 277 | 278 | .sb-flex-none, 279 | .sb-flex-0-0-auto 280 | +flex(1, 1, auto) 281 | 282 | /* 283 | * 284 | * Flex helpers Section 1 Responsive */ 285 | 286 | @each $media, $query in (l: "only screen and (min-width:992px)", m: "only screen and (min-width:600px) and (max-width:992px)", s: "only screen and (max-width:600px)") 287 | @media #{$query} 288 | 289 | @for $i from 10 through 0 290 | .sb-flex-#{$i}-#{$media} 291 | +flex($i, 1, 0) 292 | 293 | .sb-flex-initial-#{$media}, 294 | .sb-flex-0-auto-#{$media}, 295 | .sb-flex-0-1-auto-#{$media} 296 | +flex(0, 1, auto) 297 | 298 | .sb-flex-auto-#{$media}, 299 | .sb-flex-1-1-auto-#{$media} 300 | +flex(1, 1, auto) 301 | 302 | .sb-flex-none-#{$media}, 303 | .sb-flex-0-0-auto-#{$media} 304 | +flex(1, 1, auto) 305 | 306 | 307 | 308 | /* 309 | * 310 | * 311 | * Flex Grow */ 312 | 313 | @media #{$l} 314 | @for $i from 0 through 10 315 | .sb-flex-grow-#{$i}-l 316 | +flex-grow(#{$i}) 317 | 318 | @media #{$m} 319 | @for $i from 0 through 10 320 | .sb-flex-grow-#{$i}-m 321 | +flex-grow(#{$i}) 322 | 323 | @media #{$s} 324 | @for $i from 0 through 10 325 | .sb-flex-grow-#{$i}-s 326 | +flex-grow(#{$i}) 327 | 328 | /* 329 | * 330 | * 331 | * Flex Shrink */ 332 | @media #{$l} 333 | @for $i from 0 through 10 334 | .sb-flex-shrink-#{$i}-l 335 | +flex-shrink(#{$i}) 336 | 337 | @media #{$m} 338 | @for $i from 0 through 10 339 | .sb-flex-shrink-#{$i}-m 340 | +flex-shrink(#{$i}) 341 | 342 | @media #{$s} 343 | @for $i from 0 through 10 344 | .sb-flex-shrink-#{$i}-s 345 | +flex-shrink(#{$i}) 346 | /* 347 | * 348 | * 349 | * Flex Basis */ 350 | @media #{$l} 351 | 352 | @for $i from 10 through 1 353 | .sb-flex-basis-#{$i * 10}-l 354 | +flex-basis(#{$i * 10%}) 355 | 356 | @each $name, $value in $fractions-map 357 | .sb-flex-basis-#{$name}-l 358 | +flex-basis(#{$value * 1%}) 359 | 360 | .sb-flex-basis-0-l 361 | +flex-basis(0) 362 | .sb-flex-basis-auto-l 363 | +flex-basis(auto) 364 | 365 | @media #{$m} 366 | 367 | @for $i from 10 through 1 368 | .sb-flex-basis-#{$i * 10}-m 369 | +flex-basis(#{$i * 10%}) 370 | 371 | @each $name, $value in $fractions-map 372 | .sb-flex-basis-#{$name}-m 373 | +flex-basis(#{$value * 1%}) 374 | 375 | .sb-flex-basis-0-m 376 | +flex-basis(0) 377 | .sb-flex-basis-auto-m 378 | +flex-basis(auto) 379 | 380 | @media #{$s} 381 | 382 | @for $i from 10 through 1 383 | .sb-flex-basis-#{$i * 10}-s 384 | +flex-basis(#{$i * 10%}) 385 | 386 | @each $name, $value in $fractions-map 387 | .sb-flex-basis-#{$name}-s 388 | +flex-basis(#{$value * 1%}) 389 | 390 | .sb-flex-basis-0-s 391 | +flex-basis(0) 392 | .sb-flex-basis-auto-s 393 | +flex-basis(auto) 394 | 395 | 396 | 397 | 398 | 399 | 400 | -------------------------------------------------------------------------------- /sass/partials/item/_flex.sass: -------------------------------------------------------------------------------- 1 | @import ../../data/fractions 2 | @import ../../mixins/flexgrow-mixin 3 | @import ../../mixins/flexshrink-mixin 4 | @import ../../mixins/flexbasis-mixin 5 | 6 | 7 | /* 8 | * ------------------------------------ 9 | * Flex Grow - Flex Shrink - Flex Basis for a single Item 10 | * ------------------------------------ */ 11 | 12 | 13 | /* 14 | * 15 | * 16 | * Flex Grow */ 17 | @for $i from 0 through 10 18 | .sb-flex-grow-#{$i} 19 | +flex-grow(#{$i}) 20 | /* 21 | * 22 | * 23 | * Flex Shrink */ 24 | @for $i from 0 through 10 25 | .sb-flex-shrink-#{$i} 26 | +flex-shrink(#{$i}) 27 | /* 28 | * 29 | * 30 | * Flex Basis */ 31 | @for $i from 10 through 1 32 | .sb-flex-basis-#{$i * 10} 33 | +flex-basis(#{$i * 10%}) 34 | 35 | @each $name, $value in $fractions-map 36 | .sb-flex-basis-#{$name} 37 | +flex-basis(#{$value * 1%}) 38 | 39 | .sb-flex-basis-0 40 | +flex-basis(0) 41 | .sb-flex-basis-auto 42 | +flex-basis(auto) 43 | 44 | -------------------------------------------------------------------------------- /sass/partials/item/_order-utility.sass: -------------------------------------------------------------------------------- 1 | @import ../../data/breakpoints 2 | 3 | 4 | 5 | 6 | 7 | /* 8 | * Order */ 9 | 10 | @for $i from 0 through 10 11 | .sb-order-#{$i} 12 | order: $i 13 | 14 | @media #{$l} 15 | @for $i from 0 through 10 16 | .sb-order-#{$i}-l 17 | order: $i 18 | 19 | @media #{$m} 20 | @for $i from 0 through 10 21 | .sb-order-#{$i}-m 22 | order: $i 23 | 24 | @media #{$s} 25 | @for $i from 0 through 10 26 | .sb-order-#{$i}-s 27 | order: $i 28 | 29 | 30 | .sb-first-item 31 | order: -1000000 32 | 33 | .sb-last-item 34 | order: 1000000 35 | 36 | @media #{$l} 37 | .sb-first-item-l 38 | order: -1000000 39 | .sb-last-item-l 40 | order: 1000000 41 | 42 | @media #{$m} 43 | .sb-first-item-m 44 | order: -1000000 45 | .sb-last-item-m 46 | order: 1000000 47 | 48 | @media #{$s} 49 | .sb-first-item-s 50 | order: -1000000 51 | .sb-last-item-s 52 | order: 1000000 53 | -------------------------------------------------------------------------------- /sass/partials/misc/_reset.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * Reset */ 3 | 4 | *, 5 | *::before, 6 | *::after 7 | box-sizing: border-box 8 | margin: 0 9 | padding: 0 10 | -------------------------------------------------------------------------------- /sass/partials/nesting/_nesting-alignc.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * Align Content */ 3 | 4 | .sb-n-ac-stretch > * 5 | align-content: stretch 6 | 7 | .sb-n-ac-center > * 8 | align-content: center 9 | 10 | .sb-n-ac-flex-start > * 11 | align-content: flex-start 12 | 13 | .sb-n-ac-flex-end > * 14 | align-content: flex-end 15 | 16 | .sb-n-ac-space-bn > * 17 | align-content: space-between 18 | 19 | .sb-n-ac-space-ad > * 20 | align-content: space-around 21 | 22 | .sb-n-ac-initial > * 23 | align-content: initial 24 | 25 | .sb-n-ac-inherit > * 26 | align-content: inherit 27 | -------------------------------------------------------------------------------- /sass/partials/nesting/_nesting-aligni.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * Align Item */ 3 | 4 | 5 | .sb-n-ai-stretch > * 6 | align-items: stretch 7 | 8 | .sb-n-ai-center > * 9 | align-items: center 10 | 11 | .sb-n-ai-flex-start > * 12 | align-items: flex-start 13 | 14 | .sb-n-ai-flex-end > * 15 | align-items: flex-end 16 | 17 | .sb-n-ai-baseline > * 18 | align-items: baseline 19 | 20 | .sb-n-ai-initial > * 21 | align-items: initial 22 | 23 | .sb-n-ai-inherit > * 24 | align-items: inherit 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /sass/partials/nesting/_nesting-allcentered.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * All Centered */ 3 | 4 | .sb-n-all-is-centered > * 5 | justify-content: center 6 | align-items: center 7 | align-content: center 8 | 9 | -------------------------------------------------------------------------------- /sass/partials/nesting/_nesting-flex-flow.sass: -------------------------------------------------------------------------------- 1 | @import ../../data/breakpoints 2 | @import ../../mixins/flexprimary-mixin 3 | 4 | 5 | /* 6 | 7 | * Flex Row */ 8 | 9 | .sb-n-flex-row> * 10 | +flex-primary(row) 11 | 12 | .sb-n-flex-rev-row > * 13 | +flex-primary(row-reverse) 14 | 15 | /* 16 | * Flex Column */ 17 | .sb-n-flex-col > * 18 | +flex-primary(column) 19 | 20 | 21 | .sb-n-flex-rev-col > * 22 | +flex-primary(column-reverse) 23 | 24 | /* 25 | * Flex Inline */ 26 | 27 | .sb-n-flex-inline > * 28 | display: inline-flex 29 | 30 | 31 | @media #{$l} 32 | .sb-n-flex-row-l 33 | +flex-primary(row) 34 | 35 | .sb-n-flex-rev-row-l 36 | +flex-primary(row-reverse) 37 | 38 | .sb-n-flex-col-l 39 | +flex-primary(column) 40 | 41 | .sb-n-flex-rev-col-l 42 | +flex-primary(column-reverse) 43 | 44 | .sb-n-flex-inline-l 45 | display: inline-flex 46 | 47 | @media #{$m} 48 | .sb-n-flex-row-m 49 | +flex-primary(row) 50 | 51 | .sb-n-flex-rev-row-m 52 | +flex-primary(row-reverse) 53 | 54 | .sb-n-flex-col-m 55 | +flex-primary(column) 56 | 57 | .sb-n-flex-rev-col-m 58 | +flex-primary(column-reverse) 59 | 60 | .sb-n-flex-inline-m 61 | display: inline-flex 62 | 63 | @media #{$s} 64 | .sb-n-flex-row-s 65 | +flex-primary(row) 66 | 67 | .sb-n-flex-rev-row-s 68 | +flex-primary(row-reverse) 69 | 70 | .sb-n-flex-col-s 71 | +flex-primary(column) 72 | 73 | .sb-n-flex-rev-col-s 74 | +flex-primary(column-reverse) 75 | 76 | .sb-n-flex-inline-s 77 | display: inline-flex 78 | 79 | /* 80 | * Reverse Wrap */ 81 | 82 | .sb-n-wrap > * 83 | flex-wrap: wrap 84 | 85 | .sb-n-rev-wrap > * 86 | flex-wrap: wrap-reverse 87 | 88 | .sb-n-nowrap > * 89 | flex-wrap: nowrap 90 | 91 | 92 | @media #{$l} 93 | .sb-n-wrap-l > * 94 | flex-wrap: wrap 95 | 96 | .sb-n-rev-wrap-l > * 97 | flex-wrap: wrap-reverse 98 | 99 | .sb-n-nowrap-l > * 100 | flex-wrap: nowrap 101 | 102 | @media #{$m} 103 | .sb-n-wrap-m > * 104 | flex-wrap: wrap 105 | 106 | .sb-n-rev-wrap-m > * 107 | flex-wrap: wrap-reverse 108 | 109 | .sb-n-nowrap-m > * 110 | flex-wrap: nowrap 111 | 112 | @media #{$s} 113 | .sb-n-wrap-s > * 114 | flex-wrap: wrap 115 | 116 | .sb-n-rev-wrap-s > * 117 | flex-wrap: wrap-reverse 118 | 119 | .sb-n-nowrap-s > * 120 | flex-wrap: nowrap -------------------------------------------------------------------------------- /sass/partials/nesting/_nesting-justify.sass: -------------------------------------------------------------------------------- 1 | /* 2 | * Justify Content */ 3 | 4 | .sb-n-jc-flex-start > * 5 | justify-content: flex-start 6 | 7 | .sb-n-jc-flex-end > * 8 | justify-content: flex-end 9 | 10 | .sb-n-jc-center > * 11 | justify-content: center 12 | 13 | .sb-n-jc-space-bn > * 14 | justify-content: space-between 15 | 16 | .sb-n-jc-space-ad > * 17 | justify-content: space-around 18 | 19 | .sb-n-jc-initial > * 20 | justify-content: initial 21 | 22 | .sb-n-jc-inherit > * 23 | justify-content: inherit 24 | -------------------------------------------------------------------------------- /sass/strawberry.sass: -------------------------------------------------------------------------------- 1 | @import partials/misc/reset 2 | 3 | // ------------------------------------------------------------------------------------------------------------------------------ 4 | 5 | @import partials/nesting/nesting-flex-flow 6 | 7 | // . 8 | 9 | @import partials/nesting/nesting-allcentered 10 | 11 | // . 12 | 13 | @import partials/nesting/nesting-aligni 14 | 15 | // . 16 | 17 | @import partials/nesting/nesting-alignc 18 | 19 | // . 20 | 21 | @import partials/nesting/nesting-justify 22 | 23 | // . 24 | 25 | @import partials/container/container-flex-flow 26 | 27 | // . 28 | 29 | @import partials/container/container-allcentered 30 | 31 | // . 32 | 33 | @import partials/container/container-aligni 34 | 35 | // . 36 | 37 | @import partials/container/container-alignc 38 | 39 | // . 40 | 41 | @import partials/container/container-justify 42 | 43 | // ------------------------------------------------------------------------------------------------------------------------------ 44 | 45 | @import partials/item/order-utility 46 | 47 | // . 48 | 49 | @import partials/item/align-self 50 | 51 | // ------------------------------------------------------------------------------------------------------------------------------- 52 | 53 | @import partials/container/container-flex 54 | 55 | // . 56 | 57 | @import partials/item/flex 58 | 59 | //. 60 | 61 | @import partials/item/flex-responsive -------------------------------------------------------------------------------- /src/strawberry.css: -------------------------------------------------------------------------------- 1 | /* Reset */ 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | /* 0 - 600 => small s 11 | * 600 - 992 => medium m 12 | * 992 - ... => large l */ 13 | /* 14 | * Flex Row */ 15 | .sb-n-flex-row > * { 16 | display: flex; 17 | flex-direction: row; 18 | } 19 | 20 | .sb-n-flex-rev-row > * { 21 | display: flex; 22 | flex-direction: row-reverse; 23 | } 24 | 25 | /* Flex Column */ 26 | .sb-n-flex-col > * { 27 | display: flex; 28 | flex-direction: column; 29 | } 30 | 31 | .sb-n-flex-rev-col > * { 32 | display: flex; 33 | flex-direction: column-reverse; 34 | } 35 | 36 | /* Flex Inline */ 37 | .sb-n-flex-inline > * { 38 | display: inline-flex; 39 | } 40 | 41 | @media only screen and (min-width: 992px) { 42 | .sb-n-flex-row-l { 43 | display: flex; 44 | flex-direction: row; 45 | } 46 | 47 | .sb-n-flex-rev-row-l { 48 | display: flex; 49 | flex-direction: row-reverse; 50 | } 51 | 52 | .sb-n-flex-col-l { 53 | display: flex; 54 | flex-direction: column; 55 | } 56 | 57 | .sb-n-flex-rev-col-l { 58 | display: flex; 59 | flex-direction: column-reverse; 60 | } 61 | 62 | .sb-n-flex-inline-l { 63 | display: inline-flex; 64 | } 65 | } 66 | @media only screen and (min-width: 600px) and (max-width: 992px) { 67 | .sb-n-flex-row-m { 68 | display: flex; 69 | flex-direction: row; 70 | } 71 | 72 | .sb-n-flex-rev-row-m { 73 | display: flex; 74 | flex-direction: row-reverse; 75 | } 76 | 77 | .sb-n-flex-col-m { 78 | display: flex; 79 | flex-direction: column; 80 | } 81 | 82 | .sb-n-flex-rev-col-m { 83 | display: flex; 84 | flex-direction: column-reverse; 85 | } 86 | 87 | .sb-n-flex-inline-m { 88 | display: inline-flex; 89 | } 90 | } 91 | @media only screen and (max-width: 600px) { 92 | .sb-n-flex-row-s { 93 | display: flex; 94 | flex-direction: row; 95 | } 96 | 97 | .sb-n-flex-rev-row-s { 98 | display: flex; 99 | flex-direction: row-reverse; 100 | } 101 | 102 | .sb-n-flex-col-s { 103 | display: flex; 104 | flex-direction: column; 105 | } 106 | 107 | .sb-n-flex-rev-col-s { 108 | display: flex; 109 | flex-direction: column-reverse; 110 | } 111 | 112 | .sb-n-flex-inline-s { 113 | display: inline-flex; 114 | } 115 | } 116 | /* Reverse Wrap */ 117 | .sb-n-wrap > * { 118 | flex-wrap: wrap; 119 | } 120 | 121 | .sb-n-rev-wrap > * { 122 | flex-wrap: wrap-reverse; 123 | } 124 | 125 | .sb-n-nowrap > * { 126 | flex-wrap: nowrap; 127 | } 128 | 129 | @media only screen and (min-width: 992px) { 130 | .sb-n-wrap-l > * { 131 | flex-wrap: wrap; 132 | } 133 | 134 | .sb-n-rev-wrap-l > * { 135 | flex-wrap: wrap-reverse; 136 | } 137 | 138 | .sb-n-nowrap-l > * { 139 | flex-wrap: nowrap; 140 | } 141 | } 142 | @media only screen and (min-width: 600px) and (max-width: 992px) { 143 | .sb-n-wrap-m > * { 144 | flex-wrap: wrap; 145 | } 146 | 147 | .sb-n-rev-wrap-m > * { 148 | flex-wrap: wrap-reverse; 149 | } 150 | 151 | .sb-n-nowrap-m > * { 152 | flex-wrap: nowrap; 153 | } 154 | } 155 | @media only screen and (max-width: 600px) { 156 | .sb-n-wrap-s > * { 157 | flex-wrap: wrap; 158 | } 159 | 160 | .sb-n-rev-wrap-s > * { 161 | flex-wrap: wrap-reverse; 162 | } 163 | 164 | .sb-n-nowrap-s > * { 165 | flex-wrap: nowrap; 166 | } 167 | } 168 | /* All Centered */ 169 | .sb-n-all-is-centered > * { 170 | justify-content: center; 171 | align-items: center; 172 | align-content: center; 173 | } 174 | 175 | /* Align Item */ 176 | .sb-n-ai-stretch > * { 177 | align-items: stretch; 178 | } 179 | 180 | .sb-n-ai-center > * { 181 | align-items: center; 182 | } 183 | 184 | .sb-n-ai-flex-start > * { 185 | align-items: flex-start; 186 | } 187 | 188 | .sb-n-ai-flex-end > * { 189 | align-items: flex-end; 190 | } 191 | 192 | .sb-n-ai-baseline > * { 193 | align-items: baseline; 194 | } 195 | 196 | .sb-n-ai-initial > * { 197 | align-items: initial; 198 | } 199 | 200 | .sb-n-ai-inherit > * { 201 | align-items: inherit; 202 | } 203 | 204 | /* Align Content */ 205 | .sb-n-ac-stretch > * { 206 | align-content: stretch; 207 | } 208 | 209 | .sb-n-ac-center > * { 210 | align-content: center; 211 | } 212 | 213 | .sb-n-ac-flex-start > * { 214 | align-content: flex-start; 215 | } 216 | 217 | .sb-n-ac-flex-end > * { 218 | align-content: flex-end; 219 | } 220 | 221 | .sb-n-ac-space-bn > * { 222 | align-content: space-between; 223 | } 224 | 225 | .sb-n-ac-space-ad > * { 226 | align-content: space-around; 227 | } 228 | 229 | .sb-n-ac-initial > * { 230 | align-content: initial; 231 | } 232 | 233 | .sb-n-ac-inherit > * { 234 | align-content: inherit; 235 | } 236 | 237 | /* Justify Content */ 238 | .sb-n-jc-flex-start > * { 239 | justify-content: flex-start; 240 | } 241 | 242 | .sb-n-jc-flex-end > * { 243 | justify-content: flex-end; 244 | } 245 | 246 | .sb-n-jc-center > * { 247 | justify-content: center; 248 | } 249 | 250 | .sb-n-jc-space-bn > * { 251 | justify-content: space-between; 252 | } 253 | 254 | .sb-n-jc-space-ad > * { 255 | justify-content: space-around; 256 | } 257 | 258 | .sb-n-jc-initial > * { 259 | justify-content: initial; 260 | } 261 | 262 | .sb-n-jc-inherit > * { 263 | justify-content: inherit; 264 | } 265 | 266 | /* 0 - 600 => small s 267 | * 600 - 992 => medium m 268 | * 992 - ... => large l */ 269 | /* Flex Row */ 270 | .sb-flex-row { 271 | display: flex; 272 | flex-direction: row; 273 | } 274 | 275 | .sb-flex-rev-row { 276 | display: flex; 277 | flex-direction: row-reverse; 278 | } 279 | 280 | /* Flex Column */ 281 | .sb-flex-col { 282 | display: flex; 283 | flex-direction: column; 284 | } 285 | 286 | .sb-flex-rev-col { 287 | display: flex; 288 | flex-direction: column-reverse; 289 | } 290 | 291 | /* Flex Inline */ 292 | .sb-flex-inline { 293 | display: inline-flex; 294 | } 295 | 296 | @media only screen and (min-width: 992px) { 297 | .sb-flex-row-l { 298 | display: flex; 299 | flex-direction: row; 300 | } 301 | 302 | .sb-flex-rev-row-l { 303 | display: flex; 304 | flex-direction: row-reverse; 305 | } 306 | 307 | .sb-flex-col-l { 308 | display: flex; 309 | flex-direction: column; 310 | } 311 | 312 | .sb-flex-rev-col-l { 313 | display: flex; 314 | flex-direction: column-reverse; 315 | } 316 | 317 | .sb-flex-inline-l { 318 | display: inline-flex; 319 | } 320 | } 321 | @media only screen and (min-width: 600px) and (max-width: 992px) { 322 | .sb-flex-row-m { 323 | display: flex; 324 | flex-direction: row; 325 | } 326 | 327 | .sb-flex-rev-row-m { 328 | display: flex; 329 | flex-direction: row-reverse; 330 | } 331 | 332 | .sb-flex-col-m { 333 | display: flex; 334 | flex-direction: column; 335 | } 336 | 337 | .sb-flex-rev-col-m { 338 | display: flex; 339 | flex-direction: column-reverse; 340 | } 341 | 342 | .sb-flex-inline-m { 343 | display: inline-flex; 344 | } 345 | } 346 | @media only screen and (max-width: 600px) { 347 | .sb-flex-row-s { 348 | display: flex; 349 | flex-direction: row; 350 | } 351 | 352 | .sb-flex-rev-row-s { 353 | display: flex; 354 | flex-direction: row-reverse; 355 | } 356 | 357 | .sb-flex-col-s { 358 | display: flex; 359 | flex-direction: column; 360 | } 361 | 362 | .sb-flex-rev-col-s { 363 | display: flex; 364 | flex-direction: column-reverse; 365 | } 366 | 367 | .sb-flex-inline-s { 368 | display: inline-flex; 369 | } 370 | } 371 | /* Wrap */ 372 | .sb-wrap { 373 | flex-wrap: wrap; 374 | } 375 | 376 | .sb-rev-wrap { 377 | flex-wrap: wrap-reverse; 378 | } 379 | 380 | .sb-nowrap { 381 | flex-wrap: nowrap; 382 | } 383 | 384 | @media only screen and (min-width: 992px) { 385 | .sb-wrap-l { 386 | flex-wrap: wrap; 387 | } 388 | 389 | .sb-rev-wrap-l { 390 | flex-wrap: wrap-reverse; 391 | } 392 | 393 | .sb-nowrap-l { 394 | flex-wrap: nowrap; 395 | } 396 | } 397 | @media only screen and (min-width: 600px) and (max-width: 992px) { 398 | .sb-wrap-m { 399 | flex-wrap: wrap; 400 | } 401 | 402 | .sb-rev-wrap-m { 403 | flex-wrap: wrap-reverse; 404 | } 405 | 406 | .sb-nowrap-m { 407 | flex-wrap: nowrap; 408 | } 409 | } 410 | @media only screen and (max-width: 600px) { 411 | .sb-wrap-s { 412 | flex-wrap: wrap; 413 | } 414 | 415 | .sb-rev-wrap-s { 416 | flex-wrap: wrap-reverse; 417 | } 418 | 419 | .sb-nowrap-s { 420 | flex-wrap: nowrap; 421 | } 422 | } 423 | /* All Centered */ 424 | .sb-all-is-centered { 425 | justify-content: center; 426 | align-items: center; 427 | align-content: center; 428 | } 429 | 430 | /* Align Item */ 431 | .sb-ai-stretch { 432 | align-items: stretch; 433 | } 434 | 435 | .sb-ai-center { 436 | align-items: center; 437 | } 438 | 439 | .sb-ai-flex-start { 440 | align-items: flex-start; 441 | } 442 | 443 | .sb-ai-flex-end { 444 | align-items: flex-end; 445 | } 446 | 447 | .sb-ai-baseline { 448 | align-items: baseline; 449 | } 450 | 451 | .sb-ai-initial { 452 | align-items: initial; 453 | } 454 | 455 | .sb-ai-inherit { 456 | align-items: inherit; 457 | } 458 | 459 | /* Align Content */ 460 | .sb-ac-stretch { 461 | align-content: stretch; 462 | } 463 | 464 | .sb-ac-center { 465 | align-content: center; 466 | } 467 | 468 | .sb-ac-flex-start { 469 | align-content: flex-start; 470 | } 471 | 472 | .sb-ac-flex-end { 473 | align-content: flex-end; 474 | } 475 | 476 | .sb-ac-space-bn { 477 | align-content: space-between; 478 | } 479 | 480 | .sb-ac-space-ad { 481 | align-content: space-around; 482 | } 483 | 484 | .sb-ac-initial { 485 | align-content: initial; 486 | } 487 | 488 | .sb-ac-inherit { 489 | align-content: inherit; 490 | } 491 | 492 | /* Justify Content */ 493 | .sb-jc-flex-start { 494 | justify-content: flex-start; 495 | } 496 | 497 | .sb-jc-flex-end { 498 | justify-content: flex-end; 499 | } 500 | 501 | .sb-jc-center { 502 | justify-content: center; 503 | } 504 | 505 | .sb-jc-space-bn { 506 | justify-content: space-between; 507 | } 508 | 509 | .sb-jc-space-ad { 510 | justify-content: space-around; 511 | } 512 | 513 | .sb-jc-initial { 514 | justify-content: initial; 515 | } 516 | 517 | .sb-jc-inherit { 518 | justify-content: inherit; 519 | } 520 | 521 | /* 0 - 600 => small s 522 | * 600 - 992 => medium m 523 | * 992 - ... => large l */ 524 | /* Order */ 525 | .sb-order-0 { 526 | order: 0; 527 | } 528 | 529 | .sb-order-1 { 530 | order: 1; 531 | } 532 | 533 | .sb-order-2 { 534 | order: 2; 535 | } 536 | 537 | .sb-order-3 { 538 | order: 3; 539 | } 540 | 541 | .sb-order-4 { 542 | order: 4; 543 | } 544 | 545 | .sb-order-5 { 546 | order: 5; 547 | } 548 | 549 | .sb-order-6 { 550 | order: 6; 551 | } 552 | 553 | .sb-order-7 { 554 | order: 7; 555 | } 556 | 557 | .sb-order-8 { 558 | order: 8; 559 | } 560 | 561 | .sb-order-9 { 562 | order: 9; 563 | } 564 | 565 | .sb-order-10 { 566 | order: 10; 567 | } 568 | 569 | @media only screen and (min-width: 992px) { 570 | .sb-order-0-l { 571 | order: 0; 572 | } 573 | 574 | .sb-order-1-l { 575 | order: 1; 576 | } 577 | 578 | .sb-order-2-l { 579 | order: 2; 580 | } 581 | 582 | .sb-order-3-l { 583 | order: 3; 584 | } 585 | 586 | .sb-order-4-l { 587 | order: 4; 588 | } 589 | 590 | .sb-order-5-l { 591 | order: 5; 592 | } 593 | 594 | .sb-order-6-l { 595 | order: 6; 596 | } 597 | 598 | .sb-order-7-l { 599 | order: 7; 600 | } 601 | 602 | .sb-order-8-l { 603 | order: 8; 604 | } 605 | 606 | .sb-order-9-l { 607 | order: 9; 608 | } 609 | 610 | .sb-order-10-l { 611 | order: 10; 612 | } 613 | } 614 | @media only screen and (min-width: 600px) and (max-width: 992px) { 615 | .sb-order-0-m { 616 | order: 0; 617 | } 618 | 619 | .sb-order-1-m { 620 | order: 1; 621 | } 622 | 623 | .sb-order-2-m { 624 | order: 2; 625 | } 626 | 627 | .sb-order-3-m { 628 | order: 3; 629 | } 630 | 631 | .sb-order-4-m { 632 | order: 4; 633 | } 634 | 635 | .sb-order-5-m { 636 | order: 5; 637 | } 638 | 639 | .sb-order-6-m { 640 | order: 6; 641 | } 642 | 643 | .sb-order-7-m { 644 | order: 7; 645 | } 646 | 647 | .sb-order-8-m { 648 | order: 8; 649 | } 650 | 651 | .sb-order-9-m { 652 | order: 9; 653 | } 654 | 655 | .sb-order-10-m { 656 | order: 10; 657 | } 658 | } 659 | @media only screen and (max-width: 600px) { 660 | .sb-order-0-s { 661 | order: 0; 662 | } 663 | 664 | .sb-order-1-s { 665 | order: 1; 666 | } 667 | 668 | .sb-order-2-s { 669 | order: 2; 670 | } 671 | 672 | .sb-order-3-s { 673 | order: 3; 674 | } 675 | 676 | .sb-order-4-s { 677 | order: 4; 678 | } 679 | 680 | .sb-order-5-s { 681 | order: 5; 682 | } 683 | 684 | .sb-order-6-s { 685 | order: 6; 686 | } 687 | 688 | .sb-order-7-s { 689 | order: 7; 690 | } 691 | 692 | .sb-order-8-s { 693 | order: 8; 694 | } 695 | 696 | .sb-order-9-s { 697 | order: 9; 698 | } 699 | 700 | .sb-order-10-s { 701 | order: 10; 702 | } 703 | } 704 | .sb-first-item { 705 | order: -1000000; 706 | } 707 | 708 | .sb-last-item { 709 | order: 1000000; 710 | } 711 | 712 | @media only screen and (min-width: 992px) { 713 | .sb-first-item-l { 714 | order: -1000000; 715 | } 716 | 717 | .sb-last-item-l { 718 | order: 1000000; 719 | } 720 | } 721 | @media only screen and (min-width: 600px) and (max-width: 992px) { 722 | .sb-first-item-m { 723 | order: -1000000; 724 | } 725 | 726 | .sb-last-item-m { 727 | order: 1000000; 728 | } 729 | } 730 | @media only screen and (max-width: 600px) { 731 | .sb-first-item-s { 732 | order: -1000000; 733 | } 734 | 735 | .sb-last-item-s { 736 | order: 1000000; 737 | } 738 | } 739 | /* Align Self */ 740 | .sb-as-auto { 741 | align-self: auto; 742 | } 743 | 744 | .sb-as-stretch { 745 | align-self: stretch; 746 | } 747 | 748 | .sb-as-center { 749 | align-self: center; 750 | } 751 | 752 | .sb-as-flex-start { 753 | align-self: flex-start; 754 | } 755 | 756 | .sb-as-flex-end { 757 | align-self: flex-end; 758 | } 759 | 760 | .sb-as-baseline { 761 | align-self: baseline; 762 | } 763 | 764 | .sb-as-initial { 765 | align-self: initial; 766 | } 767 | 768 | .sb-as-inherit { 769 | align-self: inherit; 770 | } 771 | 772 | /* ------------------------------------ 773 | * Flex Grow - Flex Shrink - Flex Basis 774 | * ------------------------------------ */ 775 | /* 776 | * 777 | * Flex Grow 1 Flex Shrink 1 */ 778 | .sb-items-100 > * { 779 | flex: 1 1 100%; 780 | } 781 | 782 | .sb-items-90 > * { 783 | flex: 1 1 90%; 784 | } 785 | 786 | .sb-items-80 > * { 787 | flex: 1 1 80%; 788 | } 789 | 790 | .sb-items-70 > * { 791 | flex: 1 1 70%; 792 | } 793 | 794 | .sb-items-60 > * { 795 | flex: 1 1 60%; 796 | } 797 | 798 | .sb-items-50 > * { 799 | flex: 1 1 50%; 800 | } 801 | 802 | .sb-items-40 > * { 803 | flex: 1 1 40%; 804 | } 805 | 806 | .sb-items-30 > * { 807 | flex: 1 1 30%; 808 | } 809 | 810 | .sb-items-20 > * { 811 | flex: 1 1 20%; 812 | } 813 | 814 | .sb-items-10 > * { 815 | flex: 1 1 10%; 816 | } 817 | 818 | .sb-items-third > * { 819 | flex: 1 1 33.3333%; 820 | } 821 | 822 | .sb-items-quarter > * { 823 | flex: 1 1 25%; 824 | } 825 | 826 | .sb-items-sixth > * { 827 | flex: 1 1 16.6666%; 828 | } 829 | 830 | .sb-items-seventh > * { 831 | flex: 1 1 14.2857%; 832 | } 833 | 834 | .sb-items-eighth > * { 835 | flex: 1 1 12.5%; 836 | } 837 | 838 | .sb-items-ninth > * { 839 | flex: 1 1 11.1111%; 840 | } 841 | 842 | .sb-items-1-1-0 > * { 843 | flex: 1 1 0; 844 | } 845 | 846 | .sb-items-1-1-auto > * { 847 | flex: 1 1 auto; 848 | } 849 | 850 | /* 851 | * 852 | * Flex Grow 0 Flex Shrink 1 */ 853 | .sb-items-100-nog > * { 854 | flex: 0 1 100%; 855 | } 856 | 857 | .sb-items-90-nog > * { 858 | flex: 0 1 90%; 859 | } 860 | 861 | .sb-items-80-nog > * { 862 | flex: 0 1 80%; 863 | } 864 | 865 | .sb-items-70-nog > * { 866 | flex: 0 1 70%; 867 | } 868 | 869 | .sb-items-60-nog > * { 870 | flex: 0 1 60%; 871 | } 872 | 873 | .sb-items-50-nog > * { 874 | flex: 0 1 50%; 875 | } 876 | 877 | .sb-items-40-nog > * { 878 | flex: 0 1 40%; 879 | } 880 | 881 | .sb-items-30-nog > * { 882 | flex: 0 1 30%; 883 | } 884 | 885 | .sb-items-20-nog > * { 886 | flex: 0 1 20%; 887 | } 888 | 889 | .sb-items-10-nog > * { 890 | flex: 0 1 10%; 891 | } 892 | 893 | .sb-items-third-nog > * { 894 | flex: 0 1 33.3333%; 895 | } 896 | 897 | .sb-items-quarter-nog > * { 898 | flex: 0 1 25%; 899 | } 900 | 901 | .sb-items-sixth-nog > * { 902 | flex: 0 1 16.6666%; 903 | } 904 | 905 | .sb-items-seventh-nog > * { 906 | flex: 0 1 14.2857%; 907 | } 908 | 909 | .sb-items-eighth-nog > * { 910 | flex: 0 1 12.5%; 911 | } 912 | 913 | .sb-items-ninth-nog > * { 914 | flex: 0 1 11.1111%; 915 | } 916 | 917 | .sb-items-0-1-0-nog > * { 918 | flex: 0 1 0; 919 | } 920 | 921 | .sb-items-0-1-auto-nog > * { 922 | flex: 0 1 auto; 923 | } 924 | 925 | /* 926 | * 927 | * Flex Grow 1 Flex Shrink 0 */ 928 | .sb-items-100-nos > * { 929 | flex: 1 0 100%; 930 | } 931 | 932 | .sb-items-90-nos > * { 933 | flex: 1 0 90%; 934 | } 935 | 936 | .sb-items-80-nos > * { 937 | flex: 1 0 80%; 938 | } 939 | 940 | .sb-items-70-nos > * { 941 | flex: 1 0 70%; 942 | } 943 | 944 | .sb-items-60-nos > * { 945 | flex: 1 0 60%; 946 | } 947 | 948 | .sb-items-50-nos > * { 949 | flex: 1 0 50%; 950 | } 951 | 952 | .sb-items-40-nos > * { 953 | flex: 1 0 40%; 954 | } 955 | 956 | .sb-items-30-nos > * { 957 | flex: 1 0 30%; 958 | } 959 | 960 | .sb-items-20-nos > * { 961 | flex: 1 0 20%; 962 | } 963 | 964 | .sb-items-10-nos > * { 965 | flex: 1 0 10%; 966 | } 967 | 968 | .sb-items-third-nos > * { 969 | flex: 1 0 33.3333%; 970 | } 971 | 972 | .sb-items-quarter-nos > * { 973 | flex: 1 0 25%; 974 | } 975 | 976 | .sb-items-sixth-nos > * { 977 | flex: 1 0 16.6666%; 978 | } 979 | 980 | .sb-items-seventh-nos > * { 981 | flex: 1 0 14.2857%; 982 | } 983 | 984 | .sb-items-eighth-nos > * { 985 | flex: 1 0 12.5%; 986 | } 987 | 988 | .sb-items-ninth-nos > * { 989 | flex: 1 0 11.1111%; 990 | } 991 | 992 | .sb-items-1-0-0-nos > * { 993 | flex: 1 0 0; 994 | } 995 | 996 | .sb-items-1-0-auto-nos > * { 997 | flex: 1 0 auto; 998 | } 999 | 1000 | /* 1001 | * 1002 | * Flex Grow 0 Flex Shrink 0 */ 1003 | .sb-items-100-nogs > * { 1004 | flex: 0 0 100%; 1005 | } 1006 | 1007 | .sb-items-90-nogs > * { 1008 | flex: 0 0 90%; 1009 | } 1010 | 1011 | .sb-items-80-nogs > * { 1012 | flex: 0 0 80%; 1013 | } 1014 | 1015 | .sb-items-70-nogs > * { 1016 | flex: 0 0 70%; 1017 | } 1018 | 1019 | .sb-items-60-nogs > * { 1020 | flex: 0 0 60%; 1021 | } 1022 | 1023 | .sb-items-50-nogs > * { 1024 | flex: 0 0 50%; 1025 | } 1026 | 1027 | .sb-items-40-nogs > * { 1028 | flex: 0 0 40%; 1029 | } 1030 | 1031 | .sb-items-30-nogs > * { 1032 | flex: 0 0 30%; 1033 | } 1034 | 1035 | .sb-items-20-nogs > * { 1036 | flex: 0 0 20%; 1037 | } 1038 | 1039 | .sb-items-10-nogs > * { 1040 | flex: 0 0 10%; 1041 | } 1042 | 1043 | .sb-items-third-nogs > * { 1044 | flex: 0 0 33.3333%; 1045 | } 1046 | 1047 | .sb-items-quarter-nogs > * { 1048 | flex: 0 0 25%; 1049 | } 1050 | 1051 | .sb-items-sixth-nogs > * { 1052 | flex: 0 0 16.6666%; 1053 | } 1054 | 1055 | .sb-items-seventh-nogs > * { 1056 | flex: 0 0 14.2857%; 1057 | } 1058 | 1059 | .sb-items-eighth-nogs > * { 1060 | flex: 0 0 12.5%; 1061 | } 1062 | 1063 | .sb-items-ninth-nogs > * { 1064 | flex: 0 0 11.1111%; 1065 | } 1066 | 1067 | .sb-items-0-0-0-nogs > * { 1068 | flex: 0 0 0; 1069 | } 1070 | 1071 | .sb-items-0-0-auto-nogs > * { 1072 | flex: 0 0 auto; 1073 | } 1074 | 1075 | /* 1076 | * Responsive is the way */ 1077 | @media only screen and (min-width: 992px) { 1078 | /* 1079 | * 1080 | * Flex Grow 1 Flex Shrink 1 */ 1081 | .sb-items-100-l > * { 1082 | flex: 1 1 100%; 1083 | } 1084 | 1085 | .sb-items-90-l > * { 1086 | flex: 1 1 90%; 1087 | } 1088 | 1089 | .sb-items-80-l > * { 1090 | flex: 1 1 80%; 1091 | } 1092 | 1093 | .sb-items-70-l > * { 1094 | flex: 1 1 70%; 1095 | } 1096 | 1097 | .sb-items-60-l > * { 1098 | flex: 1 1 60%; 1099 | } 1100 | 1101 | .sb-items-50-l > * { 1102 | flex: 1 1 50%; 1103 | } 1104 | 1105 | .sb-items-40-l > * { 1106 | flex: 1 1 40%; 1107 | } 1108 | 1109 | .sb-items-30-l > * { 1110 | flex: 1 1 30%; 1111 | } 1112 | 1113 | .sb-items-20-l > * { 1114 | flex: 1 1 20%; 1115 | } 1116 | 1117 | .sb-items-10-l > * { 1118 | flex: 1 1 10%; 1119 | } 1120 | 1121 | .sb-items-third-l > * { 1122 | flex: 1 1 33.3333%; 1123 | } 1124 | 1125 | .sb-items-quarter-l > * { 1126 | flex: 1 1 25%; 1127 | } 1128 | 1129 | .sb-items-sixth-l > * { 1130 | flex: 1 1 16.6666%; 1131 | } 1132 | 1133 | .sb-items-seventh-l > * { 1134 | flex: 1 1 14.2857%; 1135 | } 1136 | 1137 | .sb-items-eighth-l > * { 1138 | flex: 1 1 12.5%; 1139 | } 1140 | 1141 | .sb-items-ninth-l > * { 1142 | flex: 1 1 11.1111%; 1143 | } 1144 | 1145 | .sb-items-1-1-0-l > * { 1146 | flex: 1 1 0; 1147 | } 1148 | 1149 | .sb-items-1-1-auto-l > * { 1150 | flex: 1 1 auto; 1151 | } 1152 | 1153 | /* 1154 | * 1155 | * Flex Grow 0 Flex Shrink 1 */ 1156 | .sb-items-100-nog-l > * { 1157 | flex: 0 1 100%; 1158 | } 1159 | 1160 | .sb-items-90-nog-l > * { 1161 | flex: 0 1 90%; 1162 | } 1163 | 1164 | .sb-items-80-nog-l > * { 1165 | flex: 0 1 80%; 1166 | } 1167 | 1168 | .sb-items-70-nog-l > * { 1169 | flex: 0 1 70%; 1170 | } 1171 | 1172 | .sb-items-60-nog-l > * { 1173 | flex: 0 1 60%; 1174 | } 1175 | 1176 | .sb-items-50-nog-l > * { 1177 | flex: 0 1 50%; 1178 | } 1179 | 1180 | .sb-items-40-nog-l > * { 1181 | flex: 0 1 40%; 1182 | } 1183 | 1184 | .sb-items-30-nog-l > * { 1185 | flex: 0 1 30%; 1186 | } 1187 | 1188 | .sb-items-20-nog-l > * { 1189 | flex: 0 1 20%; 1190 | } 1191 | 1192 | .sb-items-10-nog-l > * { 1193 | flex: 0 1 10%; 1194 | } 1195 | 1196 | .sb-items-third-nog-l > * { 1197 | flex: 0 1 33.3333%; 1198 | } 1199 | 1200 | .sb-items-quarter-nog-l > * { 1201 | flex: 0 1 25%; 1202 | } 1203 | 1204 | .sb-items-sixth-nog-l > * { 1205 | flex: 0 1 16.6666%; 1206 | } 1207 | 1208 | .sb-items-seventh-nog-l > * { 1209 | flex: 0 1 14.2857%; 1210 | } 1211 | 1212 | .sb-items-eighth-nog-l > * { 1213 | flex: 0 1 12.5%; 1214 | } 1215 | 1216 | .sb-items-ninth-nog-l > * { 1217 | flex: 0 1 11.1111%; 1218 | } 1219 | 1220 | .sb-items-0-1-0-nog-l > * { 1221 | flex: 0 1 0; 1222 | } 1223 | 1224 | .sb-items-0-1-auto-nog-l > * { 1225 | flex: 0 1 auto; 1226 | } 1227 | 1228 | /* 1229 | * 1230 | * Flex Grow 1 Flex Shrink 0 */ 1231 | .sb-items-100-nos-l > * { 1232 | flex: 1 0 100%; 1233 | } 1234 | 1235 | .sb-items-90-nos-l > * { 1236 | flex: 1 0 90%; 1237 | } 1238 | 1239 | .sb-items-80-nos-l > * { 1240 | flex: 1 0 80%; 1241 | } 1242 | 1243 | .sb-items-70-nos-l > * { 1244 | flex: 1 0 70%; 1245 | } 1246 | 1247 | .sb-items-60-nos-l > * { 1248 | flex: 1 0 60%; 1249 | } 1250 | 1251 | .sb-items-50-nos-l > * { 1252 | flex: 1 0 50%; 1253 | } 1254 | 1255 | .sb-items-40-nos-l > * { 1256 | flex: 1 0 40%; 1257 | } 1258 | 1259 | .sb-items-30-nos-l > * { 1260 | flex: 1 0 30%; 1261 | } 1262 | 1263 | .sb-items-20-nos-l > * { 1264 | flex: 1 0 20%; 1265 | } 1266 | 1267 | .sb-items-10-nos-l > * { 1268 | flex: 1 0 10%; 1269 | } 1270 | 1271 | .sb-items-third-nos-l > * { 1272 | flex: 1 0 33.3333%; 1273 | } 1274 | 1275 | .sb-items-quarter-nos-l > * { 1276 | flex: 1 0 25%; 1277 | } 1278 | 1279 | .sb-items-sixth-nos-l > * { 1280 | flex: 1 0 16.6666%; 1281 | } 1282 | 1283 | .sb-items-seventh-nos-l > * { 1284 | flex: 1 0 14.2857%; 1285 | } 1286 | 1287 | .sb-items-eighth-nos-l > * { 1288 | flex: 1 0 12.5%; 1289 | } 1290 | 1291 | .sb-items-ninth-nos-l > * { 1292 | flex: 1 0 11.1111%; 1293 | } 1294 | 1295 | .sb-items-1-0-0-nos-l > * { 1296 | flex: 1 0 0; 1297 | } 1298 | 1299 | .sb-items-1-0-auto-nos-l > * { 1300 | flex: 1 0 auto; 1301 | } 1302 | 1303 | /* 1304 | * 1305 | * Flex Grow 0 Flex Shrink 0 */ 1306 | .sb-items-100-nogs-l > * { 1307 | flex: 0 0 100%; 1308 | } 1309 | 1310 | .sb-items-90-nogs-l > * { 1311 | flex: 0 0 90%; 1312 | } 1313 | 1314 | .sb-items-80-nogs-l > * { 1315 | flex: 0 0 80%; 1316 | } 1317 | 1318 | .sb-items-70-nogs-l > * { 1319 | flex: 0 0 70%; 1320 | } 1321 | 1322 | .sb-items-60-nogs-l > * { 1323 | flex: 0 0 60%; 1324 | } 1325 | 1326 | .sb-items-50-nogs-l > * { 1327 | flex: 0 0 50%; 1328 | } 1329 | 1330 | .sb-items-40-nogs-l > * { 1331 | flex: 0 0 40%; 1332 | } 1333 | 1334 | .sb-items-30-nogs-l > * { 1335 | flex: 0 0 30%; 1336 | } 1337 | 1338 | .sb-items-20-nogs-l > * { 1339 | flex: 0 0 20%; 1340 | } 1341 | 1342 | .sb-items-10-nogs-l > * { 1343 | flex: 0 0 10%; 1344 | } 1345 | 1346 | .sb-items-third-nogs-l > * { 1347 | flex: 0 0 33.3333%; 1348 | } 1349 | 1350 | .sb-items-quarter-nogs-l > * { 1351 | flex: 0 0 25%; 1352 | } 1353 | 1354 | .sb-items-sixth-nogs-l > * { 1355 | flex: 0 0 16.6666%; 1356 | } 1357 | 1358 | .sb-items-seventh-nogs-l > * { 1359 | flex: 0 0 14.2857%; 1360 | } 1361 | 1362 | .sb-items-eighth-nogs-l > * { 1363 | flex: 0 0 12.5%; 1364 | } 1365 | 1366 | .sb-items-ninth-nogs-l > * { 1367 | flex: 0 0 11.1111%; 1368 | } 1369 | 1370 | .sb-items-0-0-0-nogs-l > * { 1371 | flex: 0 0 0; 1372 | } 1373 | 1374 | .sb-items-0-0-auto-nogs-l > * { 1375 | flex: 0 0 auto; 1376 | } 1377 | } 1378 | @media only screen and (min-width: 600px) and (max-width: 992px) { 1379 | /* 1380 | * 1381 | * Flex Grow 1 Flex Shrink 1 */ 1382 | .sb-items-100-m > * { 1383 | flex: 1 1 100%; 1384 | } 1385 | 1386 | .sb-items-90-m > * { 1387 | flex: 1 1 90%; 1388 | } 1389 | 1390 | .sb-items-80-m > * { 1391 | flex: 1 1 80%; 1392 | } 1393 | 1394 | .sb-items-70-m > * { 1395 | flex: 1 1 70%; 1396 | } 1397 | 1398 | .sb-items-60-m > * { 1399 | flex: 1 1 60%; 1400 | } 1401 | 1402 | .sb-items-50-m > * { 1403 | flex: 1 1 50%; 1404 | } 1405 | 1406 | .sb-items-40-m > * { 1407 | flex: 1 1 40%; 1408 | } 1409 | 1410 | .sb-items-30-m > * { 1411 | flex: 1 1 30%; 1412 | } 1413 | 1414 | .sb-items-20-m > * { 1415 | flex: 1 1 20%; 1416 | } 1417 | 1418 | .sb-items-10-m > * { 1419 | flex: 1 1 10%; 1420 | } 1421 | 1422 | .sb-items-third-m > * { 1423 | flex: 1 1 33.3333%; 1424 | } 1425 | 1426 | .sb-items-quarter-m > * { 1427 | flex: 1 1 25%; 1428 | } 1429 | 1430 | .sb-items-sixth-m > * { 1431 | flex: 1 1 16.6666%; 1432 | } 1433 | 1434 | .sb-items-seventh-m > * { 1435 | flex: 1 1 14.2857%; 1436 | } 1437 | 1438 | .sb-items-eighth-m > * { 1439 | flex: 1 1 12.5%; 1440 | } 1441 | 1442 | .sb-items-ninth-m > * { 1443 | flex: 1 1 11.1111%; 1444 | } 1445 | 1446 | .sb-items-1-1-0-m > * { 1447 | flex: 1 1 0; 1448 | } 1449 | 1450 | .sb-items-1-1-auto-m > * { 1451 | flex: 1 1 auto; 1452 | } 1453 | 1454 | /* 1455 | * 1456 | * Flex Grow 0 Flex Shrink 1 */ 1457 | .sb-items-100-nog-m > * { 1458 | flex: 0 1 100%; 1459 | } 1460 | 1461 | .sb-items-90-nog-m > * { 1462 | flex: 0 1 90%; 1463 | } 1464 | 1465 | .sb-items-80-nog-m > * { 1466 | flex: 0 1 80%; 1467 | } 1468 | 1469 | .sb-items-70-nog-m > * { 1470 | flex: 0 1 70%; 1471 | } 1472 | 1473 | .sb-items-60-nog-m > * { 1474 | flex: 0 1 60%; 1475 | } 1476 | 1477 | .sb-items-50-nog-m > * { 1478 | flex: 0 1 50%; 1479 | } 1480 | 1481 | .sb-items-40-nog-m > * { 1482 | flex: 0 1 40%; 1483 | } 1484 | 1485 | .sb-items-30-nog-m > * { 1486 | flex: 0 1 30%; 1487 | } 1488 | 1489 | .sb-items-20-nog-m > * { 1490 | flex: 0 1 20%; 1491 | } 1492 | 1493 | .sb-items-10-nog-m > * { 1494 | flex: 0 1 10%; 1495 | } 1496 | 1497 | .sb-items-third-nog-m > * { 1498 | flex: 0 1 33.3333%; 1499 | } 1500 | 1501 | .sb-items-quarter-nog-m > * { 1502 | flex: 0 1 25%; 1503 | } 1504 | 1505 | .sb-items-sixth-nog-m > * { 1506 | flex: 0 1 16.6666%; 1507 | } 1508 | 1509 | .sb-items-seventh-nog-m > * { 1510 | flex: 0 1 14.2857%; 1511 | } 1512 | 1513 | .sb-items-eighth-nog-m > * { 1514 | flex: 0 1 12.5%; 1515 | } 1516 | 1517 | .sb-items-ninth-nog-m > * { 1518 | flex: 0 1 11.1111%; 1519 | } 1520 | 1521 | .sb-items-0-1-0-nog-m > * { 1522 | flex: 0 1 0; 1523 | } 1524 | 1525 | .sb-items-0-1-auto-nog-m > * { 1526 | flex: 0 1 auto; 1527 | } 1528 | 1529 | /* 1530 | * 1531 | * Flex Grow 1 Flex Shrink 0 */ 1532 | .sb-items-100-nos-m > * { 1533 | flex: 1 0 100%; 1534 | } 1535 | 1536 | .sb-items-90-nos-m > * { 1537 | flex: 1 0 90%; 1538 | } 1539 | 1540 | .sb-items-80-nos-m > * { 1541 | flex: 1 0 80%; 1542 | } 1543 | 1544 | .sb-items-70-nos-m > * { 1545 | flex: 1 0 70%; 1546 | } 1547 | 1548 | .sb-items-60-nos-m > * { 1549 | flex: 1 0 60%; 1550 | } 1551 | 1552 | .sb-items-50-nos-m > * { 1553 | flex: 1 0 50%; 1554 | } 1555 | 1556 | .sb-items-40-nos-m > * { 1557 | flex: 1 0 40%; 1558 | } 1559 | 1560 | .sb-items-30-nos-m > * { 1561 | flex: 1 0 30%; 1562 | } 1563 | 1564 | .sb-items-20-nos-m > * { 1565 | flex: 1 0 20%; 1566 | } 1567 | 1568 | .sb-items-10-nos-m > * { 1569 | flex: 1 0 10%; 1570 | } 1571 | 1572 | .sb-items-third-nos-m > * { 1573 | flex: 1 0 33.3333%; 1574 | } 1575 | 1576 | .sb-items-quarter-nos-m > * { 1577 | flex: 1 0 25%; 1578 | } 1579 | 1580 | .sb-items-sixth-nos-m > * { 1581 | flex: 1 0 16.6666%; 1582 | } 1583 | 1584 | .sb-items-seventh-nos-m > * { 1585 | flex: 1 0 14.2857%; 1586 | } 1587 | 1588 | .sb-items-eighth-nos-m > * { 1589 | flex: 1 0 12.5%; 1590 | } 1591 | 1592 | .sb-items-ninth-nos-m > * { 1593 | flex: 1 0 11.1111%; 1594 | } 1595 | 1596 | .sb-items-1-0-0-nos-m > * { 1597 | flex: 1 0 0; 1598 | } 1599 | 1600 | .sb-items-1-0-auto-nos-m > * { 1601 | flex: 1 0 auto; 1602 | } 1603 | 1604 | /* 1605 | * 1606 | * Flex Grow 0 Flex Shrink 0 */ 1607 | .sb-items-100-nogs-m > * { 1608 | flex: 0 0 100%; 1609 | } 1610 | 1611 | .sb-items-90-nogs-m > * { 1612 | flex: 0 0 90%; 1613 | } 1614 | 1615 | .sb-items-80-nogs-m > * { 1616 | flex: 0 0 80%; 1617 | } 1618 | 1619 | .sb-items-70-nogs-m > * { 1620 | flex: 0 0 70%; 1621 | } 1622 | 1623 | .sb-items-60-nogs-m > * { 1624 | flex: 0 0 60%; 1625 | } 1626 | 1627 | .sb-items-50-nogs-m > * { 1628 | flex: 0 0 50%; 1629 | } 1630 | 1631 | .sb-items-40-nogs-m > * { 1632 | flex: 0 0 40%; 1633 | } 1634 | 1635 | .sb-items-30-nogs-m > * { 1636 | flex: 0 0 30%; 1637 | } 1638 | 1639 | .sb-items-20-nogs-m > * { 1640 | flex: 0 0 20%; 1641 | } 1642 | 1643 | .sb-items-10-nogs-m > * { 1644 | flex: 0 0 10%; 1645 | } 1646 | 1647 | .sb-items-third-nogs-m > * { 1648 | flex: 0 0 33.3333%; 1649 | } 1650 | 1651 | .sb-items-quarter-nogs-m > * { 1652 | flex: 0 0 25%; 1653 | } 1654 | 1655 | .sb-items-sixth-nogs-m > * { 1656 | flex: 0 0 16.6666%; 1657 | } 1658 | 1659 | .sb-items-seventh-nogs-m > * { 1660 | flex: 0 0 14.2857%; 1661 | } 1662 | 1663 | .sb-items-eighth-nogs-m > * { 1664 | flex: 0 0 12.5%; 1665 | } 1666 | 1667 | .sb-items-ninth-nogs-m > * { 1668 | flex: 0 0 11.1111%; 1669 | } 1670 | 1671 | .sb-items-0-0-0-nogs-m > * { 1672 | flex: 0 0 0; 1673 | } 1674 | 1675 | .sb-items-0-0-auto-nogs-m > * { 1676 | flex: 0 0 auto; 1677 | } 1678 | } 1679 | @media only screen and (max-width: 600px) { 1680 | /* 1681 | * 1682 | * Flex Grow 1 Flex Shrink 1 */ 1683 | .sb-items-100-s > * { 1684 | flex: 1 1 100%; 1685 | } 1686 | 1687 | .sb-items-90-s > * { 1688 | flex: 1 1 90%; 1689 | } 1690 | 1691 | .sb-items-80-s > * { 1692 | flex: 1 1 80%; 1693 | } 1694 | 1695 | .sb-items-70-s > * { 1696 | flex: 1 1 70%; 1697 | } 1698 | 1699 | .sb-items-60-s > * { 1700 | flex: 1 1 60%; 1701 | } 1702 | 1703 | .sb-items-50-s > * { 1704 | flex: 1 1 50%; 1705 | } 1706 | 1707 | .sb-items-40-s > * { 1708 | flex: 1 1 40%; 1709 | } 1710 | 1711 | .sb-items-30-s > * { 1712 | flex: 1 1 30%; 1713 | } 1714 | 1715 | .sb-items-20-s > * { 1716 | flex: 1 1 20%; 1717 | } 1718 | 1719 | .sb-items-10-s > * { 1720 | flex: 1 1 10%; 1721 | } 1722 | 1723 | .sb-items-third-s > * { 1724 | flex: 1 1 33.3333%; 1725 | } 1726 | 1727 | .sb-items-quarter-s > * { 1728 | flex: 1 1 25%; 1729 | } 1730 | 1731 | .sb-items-sixth-s > * { 1732 | flex: 1 1 16.6666%; 1733 | } 1734 | 1735 | .sb-items-seventh-s > * { 1736 | flex: 1 1 14.2857%; 1737 | } 1738 | 1739 | .sb-items-eighth-s > * { 1740 | flex: 1 1 12.5%; 1741 | } 1742 | 1743 | .sb-items-ninth-s > * { 1744 | flex: 1 1 11.1111%; 1745 | } 1746 | 1747 | .sb-items-1-1-0-s > * { 1748 | flex: 1 1 0; 1749 | } 1750 | 1751 | .sb-items-1-1-auto-s > * { 1752 | flex: 1 1 auto; 1753 | } 1754 | 1755 | /* 1756 | * 1757 | * Flex Grow 0 Flex Shrink 1 */ 1758 | .sb-items-100-nog-s > * { 1759 | flex: 0 1 100%; 1760 | } 1761 | 1762 | .sb-items-90-nog-s > * { 1763 | flex: 0 1 90%; 1764 | } 1765 | 1766 | .sb-items-80-nog-s > * { 1767 | flex: 0 1 80%; 1768 | } 1769 | 1770 | .sb-items-70-nog-s > * { 1771 | flex: 0 1 70%; 1772 | } 1773 | 1774 | .sb-items-60-nog-s > * { 1775 | flex: 0 1 60%; 1776 | } 1777 | 1778 | .sb-items-50-nog-s > * { 1779 | flex: 0 1 50%; 1780 | } 1781 | 1782 | .sb-items-40-nog-s > * { 1783 | flex: 0 1 40%; 1784 | } 1785 | 1786 | .sb-items-30-nog-s > * { 1787 | flex: 0 1 30%; 1788 | } 1789 | 1790 | .sb-items-20-nog-s > * { 1791 | flex: 0 1 20%; 1792 | } 1793 | 1794 | .sb-items-10-nog-s > * { 1795 | flex: 0 1 10%; 1796 | } 1797 | 1798 | .sb-items-third-nog-s > * { 1799 | flex: 0 1 33.3333%; 1800 | } 1801 | 1802 | .sb-items-quarter-nog-s > * { 1803 | flex: 0 1 25%; 1804 | } 1805 | 1806 | .sb-items-sixth-nog-s > * { 1807 | flex: 0 1 16.6666%; 1808 | } 1809 | 1810 | .sb-items-seventh-nog-s > * { 1811 | flex: 0 1 14.2857%; 1812 | } 1813 | 1814 | .sb-items-eighth-nog-s > * { 1815 | flex: 0 1 12.5%; 1816 | } 1817 | 1818 | .sb-items-ninth-nog-s > * { 1819 | flex: 0 1 11.1111%; 1820 | } 1821 | 1822 | .sb-items-0-1-0-nog-s > * { 1823 | flex: 0 1 0; 1824 | } 1825 | 1826 | .sb-items-0-1-auto-nog-s > * { 1827 | flex: 0 1 auto; 1828 | } 1829 | 1830 | /* 1831 | * 1832 | * Flex Grow 1 Flex Shrink 0 */ 1833 | .sb-items-100-nos-s > * { 1834 | flex: 1 0 100%; 1835 | } 1836 | 1837 | .sb-items-90-nos-s > * { 1838 | flex: 1 0 90%; 1839 | } 1840 | 1841 | .sb-items-80-nos-s > * { 1842 | flex: 1 0 80%; 1843 | } 1844 | 1845 | .sb-items-70-nos-s > * { 1846 | flex: 1 0 70%; 1847 | } 1848 | 1849 | .sb-items-60-nos-s > * { 1850 | flex: 1 0 60%; 1851 | } 1852 | 1853 | .sb-items-50-nos-s > * { 1854 | flex: 1 0 50%; 1855 | } 1856 | 1857 | .sb-items-40-nos-s > * { 1858 | flex: 1 0 40%; 1859 | } 1860 | 1861 | .sb-items-30-nos-s > * { 1862 | flex: 1 0 30%; 1863 | } 1864 | 1865 | .sb-items-20-nos-s > * { 1866 | flex: 1 0 20%; 1867 | } 1868 | 1869 | .sb-items-10-nos-s > * { 1870 | flex: 1 0 10%; 1871 | } 1872 | 1873 | .sb-items-third-nos-s > * { 1874 | flex: 1 0 33.3333%; 1875 | } 1876 | 1877 | .sb-items-quarter-nos-s > * { 1878 | flex: 1 0 25%; 1879 | } 1880 | 1881 | .sb-items-sixth-nos-s > * { 1882 | flex: 1 0 16.6666%; 1883 | } 1884 | 1885 | .sb-items-seventh-nos-s > * { 1886 | flex: 1 0 14.2857%; 1887 | } 1888 | 1889 | .sb-items-eighth-nos-s > * { 1890 | flex: 1 0 12.5%; 1891 | } 1892 | 1893 | .sb-items-ninth-nos-s > * { 1894 | flex: 1 0 11.1111%; 1895 | } 1896 | 1897 | .sb-items-1-0-0-nos-s > * { 1898 | flex: 1 0 0; 1899 | } 1900 | 1901 | .sb-items-1-0-auto-nos-s > * { 1902 | flex: 1 0 auto; 1903 | } 1904 | 1905 | /* 1906 | * 1907 | * Flex Grow 0 Flex Shrink 0 */ 1908 | .sb-items-100-nogs-s > * { 1909 | flex: 0 0 100%; 1910 | } 1911 | 1912 | .sb-items-90-nogs-s > * { 1913 | flex: 0 0 90%; 1914 | } 1915 | 1916 | .sb-items-80-nogs-s > * { 1917 | flex: 0 0 80%; 1918 | } 1919 | 1920 | .sb-items-70-nogs-s > * { 1921 | flex: 0 0 70%; 1922 | } 1923 | 1924 | .sb-items-60-nogs-s > * { 1925 | flex: 0 0 60%; 1926 | } 1927 | 1928 | .sb-items-50-nogs-s > * { 1929 | flex: 0 0 50%; 1930 | } 1931 | 1932 | .sb-items-40-nogs-s > * { 1933 | flex: 0 0 40%; 1934 | } 1935 | 1936 | .sb-items-30-nogs-s > * { 1937 | flex: 0 0 30%; 1938 | } 1939 | 1940 | .sb-items-20-nogs-s > * { 1941 | flex: 0 0 20%; 1942 | } 1943 | 1944 | .sb-items-10-nogs-s > * { 1945 | flex: 0 0 10%; 1946 | } 1947 | 1948 | .sb-items-third-nogs-s > * { 1949 | flex: 0 0 33.3333%; 1950 | } 1951 | 1952 | .sb-items-quarter-nogs-s > * { 1953 | flex: 0 0 25%; 1954 | } 1955 | 1956 | .sb-items-sixth-nogs-s > * { 1957 | flex: 0 0 16.6666%; 1958 | } 1959 | 1960 | .sb-items-seventh-nogs-s > * { 1961 | flex: 0 0 14.2857%; 1962 | } 1963 | 1964 | .sb-items-eighth-nogs-s > * { 1965 | flex: 0 0 12.5%; 1966 | } 1967 | 1968 | .sb-items-ninth-nogs-s > * { 1969 | flex: 0 0 11.1111%; 1970 | } 1971 | 1972 | .sb-items-0-0-0-nogs-s > * { 1973 | flex: 0 0 0; 1974 | } 1975 | 1976 | .sb-items-0-0-auto-nogs-s > * { 1977 | flex: 0 0 auto; 1978 | } 1979 | } 1980 | /* ------------------------------------ 1981 | * Flex Grow - Flex Shrink - Flex Basis for a single Item 1982 | * ------------------------------------ */ 1983 | /* 1984 | * 1985 | * Flex Grow */ 1986 | .sb-flex-grow-0 { 1987 | flex-grow: 0; 1988 | } 1989 | 1990 | .sb-flex-grow-1 { 1991 | flex-grow: 1; 1992 | } 1993 | 1994 | .sb-flex-grow-2 { 1995 | flex-grow: 2; 1996 | } 1997 | 1998 | .sb-flex-grow-3 { 1999 | flex-grow: 3; 2000 | } 2001 | 2002 | .sb-flex-grow-4 { 2003 | flex-grow: 4; 2004 | } 2005 | 2006 | .sb-flex-grow-5 { 2007 | flex-grow: 5; 2008 | } 2009 | 2010 | .sb-flex-grow-6 { 2011 | flex-grow: 6; 2012 | } 2013 | 2014 | .sb-flex-grow-7 { 2015 | flex-grow: 7; 2016 | } 2017 | 2018 | .sb-flex-grow-8 { 2019 | flex-grow: 8; 2020 | } 2021 | 2022 | .sb-flex-grow-9 { 2023 | flex-grow: 9; 2024 | } 2025 | 2026 | .sb-flex-grow-10 { 2027 | flex-grow: 10; 2028 | } 2029 | 2030 | /* 2031 | * 2032 | * Flex Shrink */ 2033 | .sb-flex-shrink-0 { 2034 | flex-shrink: 0; 2035 | } 2036 | 2037 | .sb-flex-shrink-1 { 2038 | flex-shrink: 1; 2039 | } 2040 | 2041 | .sb-flex-shrink-2 { 2042 | flex-shrink: 2; 2043 | } 2044 | 2045 | .sb-flex-shrink-3 { 2046 | flex-shrink: 3; 2047 | } 2048 | 2049 | .sb-flex-shrink-4 { 2050 | flex-shrink: 4; 2051 | } 2052 | 2053 | .sb-flex-shrink-5 { 2054 | flex-shrink: 5; 2055 | } 2056 | 2057 | .sb-flex-shrink-6 { 2058 | flex-shrink: 6; 2059 | } 2060 | 2061 | .sb-flex-shrink-7 { 2062 | flex-shrink: 7; 2063 | } 2064 | 2065 | .sb-flex-shrink-8 { 2066 | flex-shrink: 8; 2067 | } 2068 | 2069 | .sb-flex-shrink-9 { 2070 | flex-shrink: 9; 2071 | } 2072 | 2073 | .sb-flex-shrink-10 { 2074 | flex-shrink: 10; 2075 | } 2076 | 2077 | /* 2078 | * 2079 | * Flex Basis */ 2080 | .sb-flex-basis-100 { 2081 | flex-basis: 100%; 2082 | } 2083 | 2084 | .sb-flex-basis-90 { 2085 | flex-basis: 90%; 2086 | } 2087 | 2088 | .sb-flex-basis-80 { 2089 | flex-basis: 80%; 2090 | } 2091 | 2092 | .sb-flex-basis-70 { 2093 | flex-basis: 70%; 2094 | } 2095 | 2096 | .sb-flex-basis-60 { 2097 | flex-basis: 60%; 2098 | } 2099 | 2100 | .sb-flex-basis-50 { 2101 | flex-basis: 50%; 2102 | } 2103 | 2104 | .sb-flex-basis-40 { 2105 | flex-basis: 40%; 2106 | } 2107 | 2108 | .sb-flex-basis-30 { 2109 | flex-basis: 30%; 2110 | } 2111 | 2112 | .sb-flex-basis-20 { 2113 | flex-basis: 20%; 2114 | } 2115 | 2116 | .sb-flex-basis-10 { 2117 | flex-basis: 10%; 2118 | } 2119 | 2120 | .sb-flex-basis-third { 2121 | flex-basis: 33.3333%; 2122 | } 2123 | 2124 | .sb-flex-basis-quarter { 2125 | flex-basis: 25%; 2126 | } 2127 | 2128 | .sb-flex-basis-sixth { 2129 | flex-basis: 16.6666%; 2130 | } 2131 | 2132 | .sb-flex-basis-seventh { 2133 | flex-basis: 14.2857%; 2134 | } 2135 | 2136 | .sb-flex-basis-eighth { 2137 | flex-basis: 12.5%; 2138 | } 2139 | 2140 | .sb-flex-basis-ninth { 2141 | flex-basis: 11.1111%; 2142 | } 2143 | 2144 | .sb-flex-basis-0 { 2145 | flex-basis: 0; 2146 | } 2147 | 2148 | .sb-flex-basis-auto { 2149 | flex-basis: auto; 2150 | } 2151 | 2152 | /* 0 - 600 => small s 2153 | * 600 - 992 => medium m 2154 | * 992 - ... => large l */ 2155 | /* 2156 | * Flex helpers section - 2 */ 2157 | .sb-1-1-100 { 2158 | flex: 1 1 100%; 2159 | } 2160 | 2161 | .sb-1-1-90 { 2162 | flex: 1 1 90%; 2163 | } 2164 | 2165 | .sb-1-1-80 { 2166 | flex: 1 1 80%; 2167 | } 2168 | 2169 | .sb-1-1-70 { 2170 | flex: 1 1 70%; 2171 | } 2172 | 2173 | .sb-1-1-60 { 2174 | flex: 1 1 60%; 2175 | } 2176 | 2177 | .sb-1-1-50 { 2178 | flex: 1 1 50%; 2179 | } 2180 | 2181 | .sb-1-1-40 { 2182 | flex: 1 1 40%; 2183 | } 2184 | 2185 | .sb-1-1-30 { 2186 | flex: 1 1 30%; 2187 | } 2188 | 2189 | .sb-1-1-20 { 2190 | flex: 1 1 20%; 2191 | } 2192 | 2193 | .sb-1-1-10 { 2194 | flex: 1 1 10%; 2195 | } 2196 | 2197 | .sb-1-1-third { 2198 | flex: 1 1 33.3333%; 2199 | } 2200 | 2201 | .sb-1-1-quarter { 2202 | flex: 1 1 25%; 2203 | } 2204 | 2205 | .sb-1-1-sixth { 2206 | flex: 1 1 16.6666%; 2207 | } 2208 | 2209 | .sb-1-1-seventh { 2210 | flex: 1 1 14.2857%; 2211 | } 2212 | 2213 | .sb-1-1-eighth { 2214 | flex: 1 1 12.5%; 2215 | } 2216 | 2217 | .sb-1-1-ninth { 2218 | flex: 1 1 11.1111%; 2219 | } 2220 | 2221 | .sb-1-1-0 { 2222 | flex: 1 1 0; 2223 | } 2224 | 2225 | .sb-1-1-auto { 2226 | flex: 1 1 auto; 2227 | } 2228 | 2229 | .sb-0-1-100 { 2230 | flex: 0 1 100%; 2231 | } 2232 | 2233 | .sb-0-1-90 { 2234 | flex: 0 1 90%; 2235 | } 2236 | 2237 | .sb-0-1-80 { 2238 | flex: 0 1 80%; 2239 | } 2240 | 2241 | .sb-0-1-70 { 2242 | flex: 0 1 70%; 2243 | } 2244 | 2245 | .sb-0-1-60 { 2246 | flex: 0 1 60%; 2247 | } 2248 | 2249 | .sb-0-1-50 { 2250 | flex: 0 1 50%; 2251 | } 2252 | 2253 | .sb-0-1-40 { 2254 | flex: 0 1 40%; 2255 | } 2256 | 2257 | .sb-0-1-30 { 2258 | flex: 0 1 30%; 2259 | } 2260 | 2261 | .sb-0-1-20 { 2262 | flex: 0 1 20%; 2263 | } 2264 | 2265 | .sb-0-1-10 { 2266 | flex: 0 1 10%; 2267 | } 2268 | 2269 | .sb-0-1-third { 2270 | flex: 0 1 33.3333%; 2271 | } 2272 | 2273 | .sb-0-1-quarter { 2274 | flex: 0 1 25%; 2275 | } 2276 | 2277 | .sb-0-1-sixth { 2278 | flex: 0 1 16.6666%; 2279 | } 2280 | 2281 | .sb-0-1-seventh { 2282 | flex: 0 1 14.2857%; 2283 | } 2284 | 2285 | .sb-0-1-eighth { 2286 | flex: 0 1 12.5%; 2287 | } 2288 | 2289 | .sb-0-1-ninth { 2290 | flex: 0 1 11.1111%; 2291 | } 2292 | 2293 | .sb-0-1-0 { 2294 | flex: 0 1 0; 2295 | } 2296 | 2297 | .sb-0-1-auto { 2298 | flex: 0 1 auto; 2299 | } 2300 | 2301 | .sb-1-0-100 { 2302 | flex: 1 0 100%; 2303 | } 2304 | 2305 | .sb-1-0-90 { 2306 | flex: 1 0 90%; 2307 | } 2308 | 2309 | .sb-1-0-80 { 2310 | flex: 1 0 80%; 2311 | } 2312 | 2313 | .sb-1-0-70 { 2314 | flex: 1 0 70%; 2315 | } 2316 | 2317 | .sb-1-0-60 { 2318 | flex: 1 0 60%; 2319 | } 2320 | 2321 | .sb-1-0-50 { 2322 | flex: 1 0 50%; 2323 | } 2324 | 2325 | .sb-1-0-40 { 2326 | flex: 1 0 40%; 2327 | } 2328 | 2329 | .sb-1-0-30 { 2330 | flex: 1 0 30%; 2331 | } 2332 | 2333 | .sb-1-0-20 { 2334 | flex: 1 0 20%; 2335 | } 2336 | 2337 | .sb-1-0-10 { 2338 | flex: 1 0 10%; 2339 | } 2340 | 2341 | .sb-1-0-third { 2342 | flex: 1 0 33.3333%; 2343 | } 2344 | 2345 | .sb-1-0-quarter { 2346 | flex: 1 0 25%; 2347 | } 2348 | 2349 | .sb-1-0-sixth { 2350 | flex: 1 0 16.6666%; 2351 | } 2352 | 2353 | .sb-1-0-seventh { 2354 | flex: 1 0 14.2857%; 2355 | } 2356 | 2357 | .sb-1-0-eighth { 2358 | flex: 1 0 12.5%; 2359 | } 2360 | 2361 | .sb-1-0-ninth { 2362 | flex: 1 0 11.1111%; 2363 | } 2364 | 2365 | .sb-1-0-0 { 2366 | flex: 1 0 0; 2367 | } 2368 | 2369 | .sb-1-0-auto { 2370 | flex: 1 0 auto; 2371 | } 2372 | 2373 | .sb-0-0-100 { 2374 | flex: 0 0 100%; 2375 | } 2376 | 2377 | .sb-0-0-90 { 2378 | flex: 0 0 90%; 2379 | } 2380 | 2381 | .sb-0-0-80 { 2382 | flex: 0 0 80%; 2383 | } 2384 | 2385 | .sb-0-0-70 { 2386 | flex: 0 0 70%; 2387 | } 2388 | 2389 | .sb-0-0-60 { 2390 | flex: 0 0 60%; 2391 | } 2392 | 2393 | .sb-0-0-50 { 2394 | flex: 0 0 50%; 2395 | } 2396 | 2397 | .sb-0-0-40 { 2398 | flex: 0 0 40%; 2399 | } 2400 | 2401 | .sb-0-0-30 { 2402 | flex: 0 0 30%; 2403 | } 2404 | 2405 | .sb-0-0-20 { 2406 | flex: 0 0 20%; 2407 | } 2408 | 2409 | .sb-0-0-10 { 2410 | flex: 0 0 10%; 2411 | } 2412 | 2413 | .sb-0-0-third { 2414 | flex: 0 0 33.3333%; 2415 | } 2416 | 2417 | .sb-0-0-quarter { 2418 | flex: 0 0 25%; 2419 | } 2420 | 2421 | .sb-0-0-sixth { 2422 | flex: 0 0 16.6666%; 2423 | } 2424 | 2425 | .sb-0-0-seventh { 2426 | flex: 0 0 14.2857%; 2427 | } 2428 | 2429 | .sb-0-0-eighth { 2430 | flex: 0 0 12.5%; 2431 | } 2432 | 2433 | .sb-0-0-ninth { 2434 | flex: 0 0 11.1111%; 2435 | } 2436 | 2437 | .sb-0-0-0 { 2438 | flex: 0 0 0; 2439 | } 2440 | 2441 | .sb-0-0-auto { 2442 | flex: 0 0 auto; 2443 | } 2444 | 2445 | /* 2446 | * 2447 | * Flex helpers section - 2 Responsive for items */ 2448 | @media only screen and (min-width: 992px) { 2449 | .sb-1-1-100-l { 2450 | flex: 1 1 100%; 2451 | } 2452 | 2453 | .sb-1-1-90-l { 2454 | flex: 1 1 90%; 2455 | } 2456 | 2457 | .sb-1-1-80-l { 2458 | flex: 1 1 80%; 2459 | } 2460 | 2461 | .sb-1-1-70-l { 2462 | flex: 1 1 70%; 2463 | } 2464 | 2465 | .sb-1-1-60-l { 2466 | flex: 1 1 60%; 2467 | } 2468 | 2469 | .sb-1-1-50-l { 2470 | flex: 1 1 50%; 2471 | } 2472 | 2473 | .sb-1-1-40-l { 2474 | flex: 1 1 40%; 2475 | } 2476 | 2477 | .sb-1-1-30-l { 2478 | flex: 1 1 30%; 2479 | } 2480 | 2481 | .sb-1-1-20-l { 2482 | flex: 1 1 20%; 2483 | } 2484 | 2485 | .sb-1-1-10-l { 2486 | flex: 1 1 10%; 2487 | } 2488 | 2489 | .sb-1-1-third-l { 2490 | flex: 1 1 33.3333%; 2491 | } 2492 | 2493 | .sb-1-1-quarter-l { 2494 | flex: 1 1 25%; 2495 | } 2496 | 2497 | .sb-1-1-sixth-l { 2498 | flex: 1 1 16.6666%; 2499 | } 2500 | 2501 | .sb-1-1-seventh-l { 2502 | flex: 1 1 14.2857%; 2503 | } 2504 | 2505 | .sb-1-1-eighth-l { 2506 | flex: 1 1 12.5%; 2507 | } 2508 | 2509 | .sb-1-1-ninth-l { 2510 | flex: 1 1 11.1111%; 2511 | } 2512 | 2513 | .sb-1-1-0-l { 2514 | flex: 1 1 0; 2515 | } 2516 | 2517 | .sb-1-1-auto-l { 2518 | flex: 1 1 auto; 2519 | } 2520 | } 2521 | @media only screen and (min-width: 600px) and (max-width: 992px) { 2522 | .sb-1-1-100-m { 2523 | flex: 1 1 100%; 2524 | } 2525 | 2526 | .sb-1-1-90-m { 2527 | flex: 1 1 90%; 2528 | } 2529 | 2530 | .sb-1-1-80-m { 2531 | flex: 1 1 80%; 2532 | } 2533 | 2534 | .sb-1-1-70-m { 2535 | flex: 1 1 70%; 2536 | } 2537 | 2538 | .sb-1-1-60-m { 2539 | flex: 1 1 60%; 2540 | } 2541 | 2542 | .sb-1-1-50-m { 2543 | flex: 1 1 50%; 2544 | } 2545 | 2546 | .sb-1-1-40-m { 2547 | flex: 1 1 40%; 2548 | } 2549 | 2550 | .sb-1-1-30-m { 2551 | flex: 1 1 30%; 2552 | } 2553 | 2554 | .sb-1-1-20-m { 2555 | flex: 1 1 20%; 2556 | } 2557 | 2558 | .sb-1-1-10-m { 2559 | flex: 1 1 10%; 2560 | } 2561 | 2562 | .sb-1-1-third-m { 2563 | flex: 1 1 33.3333%; 2564 | } 2565 | 2566 | .sb-1-1-quarter-m { 2567 | flex: 1 1 25%; 2568 | } 2569 | 2570 | .sb-1-1-sixth-m { 2571 | flex: 1 1 16.6666%; 2572 | } 2573 | 2574 | .sb-1-1-seventh-m { 2575 | flex: 1 1 14.2857%; 2576 | } 2577 | 2578 | .sb-1-1-eighth-m { 2579 | flex: 1 1 12.5%; 2580 | } 2581 | 2582 | .sb-1-1-ninth-m { 2583 | flex: 1 1 11.1111%; 2584 | } 2585 | 2586 | .sb-1-1-0-m { 2587 | flex: 1 1 0; 2588 | } 2589 | 2590 | .sb-1-1-auto-m { 2591 | flex: 1 1 auto; 2592 | } 2593 | } 2594 | @media only screen and (max-width: 600px) { 2595 | .sb-1-1-100-s { 2596 | flex: 1 1 100%; 2597 | } 2598 | 2599 | .sb-1-1-90-s { 2600 | flex: 1 1 90%; 2601 | } 2602 | 2603 | .sb-1-1-80-s { 2604 | flex: 1 1 80%; 2605 | } 2606 | 2607 | .sb-1-1-70-s { 2608 | flex: 1 1 70%; 2609 | } 2610 | 2611 | .sb-1-1-60-s { 2612 | flex: 1 1 60%; 2613 | } 2614 | 2615 | .sb-1-1-50-s { 2616 | flex: 1 1 50%; 2617 | } 2618 | 2619 | .sb-1-1-40-s { 2620 | flex: 1 1 40%; 2621 | } 2622 | 2623 | .sb-1-1-30-s { 2624 | flex: 1 1 30%; 2625 | } 2626 | 2627 | .sb-1-1-20-s { 2628 | flex: 1 1 20%; 2629 | } 2630 | 2631 | .sb-1-1-10-s { 2632 | flex: 1 1 10%; 2633 | } 2634 | 2635 | .sb-1-1-third-s { 2636 | flex: 1 1 33.3333%; 2637 | } 2638 | 2639 | .sb-1-1-quarter-s { 2640 | flex: 1 1 25%; 2641 | } 2642 | 2643 | .sb-1-1-sixth-s { 2644 | flex: 1 1 16.6666%; 2645 | } 2646 | 2647 | .sb-1-1-seventh-s { 2648 | flex: 1 1 14.2857%; 2649 | } 2650 | 2651 | .sb-1-1-eighth-s { 2652 | flex: 1 1 12.5%; 2653 | } 2654 | 2655 | .sb-1-1-ninth-s { 2656 | flex: 1 1 11.1111%; 2657 | } 2658 | 2659 | .sb-1-1-0-s { 2660 | flex: 1 1 0; 2661 | } 2662 | 2663 | .sb-1-1-auto-s { 2664 | flex: 1 1 auto; 2665 | } 2666 | } 2667 | @media only screen and (min-width: 992px) { 2668 | .sb-0-1-100-l { 2669 | flex: 0 1 100%; 2670 | } 2671 | 2672 | .sb-0-1-90-l { 2673 | flex: 0 1 90%; 2674 | } 2675 | 2676 | .sb-0-1-80-l { 2677 | flex: 0 1 80%; 2678 | } 2679 | 2680 | .sb-0-1-70-l { 2681 | flex: 0 1 70%; 2682 | } 2683 | 2684 | .sb-0-1-60-l { 2685 | flex: 0 1 60%; 2686 | } 2687 | 2688 | .sb-0-1-50-l { 2689 | flex: 0 1 50%; 2690 | } 2691 | 2692 | .sb-0-1-40-l { 2693 | flex: 0 1 40%; 2694 | } 2695 | 2696 | .sb-0-1-30-l { 2697 | flex: 0 1 30%; 2698 | } 2699 | 2700 | .sb-0-1-20-l { 2701 | flex: 0 1 20%; 2702 | } 2703 | 2704 | .sb-0-1-10-l { 2705 | flex: 0 1 10%; 2706 | } 2707 | 2708 | .sb-0-1-third-l { 2709 | flex: 0 1 33.3333%; 2710 | } 2711 | 2712 | .sb-0-1-quarter-l { 2713 | flex: 0 1 25%; 2714 | } 2715 | 2716 | .sb-0-1-sixth-l { 2717 | flex: 0 1 16.6666%; 2718 | } 2719 | 2720 | .sb-0-1-seventh-l { 2721 | flex: 0 1 14.2857%; 2722 | } 2723 | 2724 | .sb-0-1-eighth-l { 2725 | flex: 0 1 12.5%; 2726 | } 2727 | 2728 | .sb-0-1-ninth-l { 2729 | flex: 0 1 11.1111%; 2730 | } 2731 | 2732 | .sb-0-1-0-l { 2733 | flex: 0 1 0; 2734 | } 2735 | 2736 | .sb-0-1-auto-l { 2737 | flex: 0 1 auto; 2738 | } 2739 | } 2740 | @media only screen and (min-width: 600px) and (max-width: 992px) { 2741 | .sb-0-1-100-m { 2742 | flex: 0 1 100%; 2743 | } 2744 | 2745 | .sb-0-1-90-m { 2746 | flex: 0 1 90%; 2747 | } 2748 | 2749 | .sb-0-1-80-m { 2750 | flex: 0 1 80%; 2751 | } 2752 | 2753 | .sb-0-1-70-m { 2754 | flex: 0 1 70%; 2755 | } 2756 | 2757 | .sb-0-1-60-m { 2758 | flex: 0 1 60%; 2759 | } 2760 | 2761 | .sb-0-1-50-m { 2762 | flex: 0 1 50%; 2763 | } 2764 | 2765 | .sb-0-1-40-m { 2766 | flex: 0 1 40%; 2767 | } 2768 | 2769 | .sb-0-1-30-m { 2770 | flex: 0 1 30%; 2771 | } 2772 | 2773 | .sb-0-1-20-m { 2774 | flex: 0 1 20%; 2775 | } 2776 | 2777 | .sb-0-1-10-m { 2778 | flex: 0 1 10%; 2779 | } 2780 | 2781 | .sb-0-1-third-m { 2782 | flex: 0 1 33.3333%; 2783 | } 2784 | 2785 | .sb-0-1-quarter-m { 2786 | flex: 0 1 25%; 2787 | } 2788 | 2789 | .sb-0-1-sixth-m { 2790 | flex: 0 1 16.6666%; 2791 | } 2792 | 2793 | .sb-0-1-seventh-m { 2794 | flex: 0 1 14.2857%; 2795 | } 2796 | 2797 | .sb-0-1-eighth-m { 2798 | flex: 0 1 12.5%; 2799 | } 2800 | 2801 | .sb-0-1-ninth-m { 2802 | flex: 0 1 11.1111%; 2803 | } 2804 | 2805 | .sb-0-1-0-m { 2806 | flex: 0 1 0; 2807 | } 2808 | 2809 | .sb-0-1-auto-m { 2810 | flex: 0 1 auto; 2811 | } 2812 | } 2813 | @media only screen and (max-width: 600px) { 2814 | .sb-10-1-100-s { 2815 | flex: 0 1 100%; 2816 | } 2817 | 2818 | .sb-10-1-90-s { 2819 | flex: 0 1 90%; 2820 | } 2821 | 2822 | .sb-10-1-80-s { 2823 | flex: 0 1 80%; 2824 | } 2825 | 2826 | .sb-10-1-70-s { 2827 | flex: 0 1 70%; 2828 | } 2829 | 2830 | .sb-10-1-60-s { 2831 | flex: 0 1 60%; 2832 | } 2833 | 2834 | .sb-10-1-50-s { 2835 | flex: 0 1 50%; 2836 | } 2837 | 2838 | .sb-10-1-40-s { 2839 | flex: 0 1 40%; 2840 | } 2841 | 2842 | .sb-10-1-30-s { 2843 | flex: 0 1 30%; 2844 | } 2845 | 2846 | .sb-10-1-20-s { 2847 | flex: 0 1 20%; 2848 | } 2849 | 2850 | .sb-10-1-10-s { 2851 | flex: 0 1 10%; 2852 | } 2853 | 2854 | .sb-0-1-third-s { 2855 | flex: 0 1 33.3333%; 2856 | } 2857 | 2858 | .sb-0-1-quarter-s { 2859 | flex: 0 1 25%; 2860 | } 2861 | 2862 | .sb-0-1-sixth-s { 2863 | flex: 0 1 16.6666%; 2864 | } 2865 | 2866 | .sb-0-1-seventh-s { 2867 | flex: 0 1 14.2857%; 2868 | } 2869 | 2870 | .sb-0-1-eighth-s { 2871 | flex: 0 1 12.5%; 2872 | } 2873 | 2874 | .sb-0-1-ninth-s { 2875 | flex: 0 1 11.1111%; 2876 | } 2877 | 2878 | .sb-0-1-0-s { 2879 | flex: 0 1 0; 2880 | } 2881 | 2882 | .sb-0-1-auto-s { 2883 | flex: 0 1 auto; 2884 | } 2885 | } 2886 | @media only screen and (min-width: 992px) { 2887 | .sb-1-0-100-l { 2888 | flex: 1 0 100%; 2889 | } 2890 | 2891 | .sb-1-0-90-l { 2892 | flex: 1 0 90%; 2893 | } 2894 | 2895 | .sb-1-0-80-l { 2896 | flex: 1 0 80%; 2897 | } 2898 | 2899 | .sb-1-0-70-l { 2900 | flex: 1 0 70%; 2901 | } 2902 | 2903 | .sb-1-0-60-l { 2904 | flex: 1 0 60%; 2905 | } 2906 | 2907 | .sb-1-0-50-l { 2908 | flex: 1 0 50%; 2909 | } 2910 | 2911 | .sb-1-0-40-l { 2912 | flex: 1 0 40%; 2913 | } 2914 | 2915 | .sb-1-0-30-l { 2916 | flex: 1 0 30%; 2917 | } 2918 | 2919 | .sb-1-0-20-l { 2920 | flex: 1 0 20%; 2921 | } 2922 | 2923 | .sb-1-0-10-l { 2924 | flex: 1 0 10%; 2925 | } 2926 | 2927 | .sb-1-0-third-l { 2928 | flex: 1 0 33.3333%; 2929 | } 2930 | 2931 | .sb-1-0-quarter-l { 2932 | flex: 1 0 25%; 2933 | } 2934 | 2935 | .sb-1-0-sixth-l { 2936 | flex: 1 0 16.6666%; 2937 | } 2938 | 2939 | .sb-1-0-seventh-l { 2940 | flex: 1 0 14.2857%; 2941 | } 2942 | 2943 | .sb-1-0-eighth-l { 2944 | flex: 1 0 12.5%; 2945 | } 2946 | 2947 | .sb-1-0-ninth-l { 2948 | flex: 1 0 11.1111%; 2949 | } 2950 | 2951 | .sb-1-0-0-l { 2952 | flex: 1 0 0; 2953 | } 2954 | 2955 | .sb-1-0-auto-l { 2956 | flex: 1 0 auto; 2957 | } 2958 | } 2959 | @media only screen and (min-width: 600px) and (max-width: 992px) { 2960 | .sb-1-0-100-m { 2961 | flex: 1 0 100%; 2962 | } 2963 | 2964 | .sb-1-0-90-m { 2965 | flex: 1 0 90%; 2966 | } 2967 | 2968 | .sb-1-0-80-m { 2969 | flex: 1 0 80%; 2970 | } 2971 | 2972 | .sb-1-0-70-m { 2973 | flex: 1 0 70%; 2974 | } 2975 | 2976 | .sb-1-0-60-m { 2977 | flex: 1 0 60%; 2978 | } 2979 | 2980 | .sb-1-0-50-m { 2981 | flex: 1 0 50%; 2982 | } 2983 | 2984 | .sb-1-0-40-m { 2985 | flex: 1 0 40%; 2986 | } 2987 | 2988 | .sb-1-0-30-m { 2989 | flex: 1 0 30%; 2990 | } 2991 | 2992 | .sb-1-0-20-m { 2993 | flex: 1 0 20%; 2994 | } 2995 | 2996 | .sb-1-0-10-m { 2997 | flex: 1 0 10%; 2998 | } 2999 | 3000 | .sb-1-0-third-m { 3001 | flex: 1 0 33.3333%; 3002 | } 3003 | 3004 | .sb-1-0-quarter-m { 3005 | flex: 1 0 25%; 3006 | } 3007 | 3008 | .sb-1-0-sixth-m { 3009 | flex: 1 0 16.6666%; 3010 | } 3011 | 3012 | .sb-1-0-seventh-m { 3013 | flex: 1 0 14.2857%; 3014 | } 3015 | 3016 | .sb-1-0-eighth-m { 3017 | flex: 1 0 12.5%; 3018 | } 3019 | 3020 | .sb-1-0-ninth-m { 3021 | flex: 1 0 11.1111%; 3022 | } 3023 | 3024 | .sb-1-0-0-m { 3025 | flex: 1 0 0; 3026 | } 3027 | 3028 | .sb-1-0-auto-m { 3029 | flex: 1 0 auto; 3030 | } 3031 | } 3032 | @media only screen and (max-width: 600px) { 3033 | .sb-1-0-100-s { 3034 | flex: 1 0 100%; 3035 | } 3036 | 3037 | .sb-1-0-90-s { 3038 | flex: 1 0 90%; 3039 | } 3040 | 3041 | .sb-1-0-80-s { 3042 | flex: 1 0 80%; 3043 | } 3044 | 3045 | .sb-1-0-70-s { 3046 | flex: 1 0 70%; 3047 | } 3048 | 3049 | .sb-1-0-60-s { 3050 | flex: 1 0 60%; 3051 | } 3052 | 3053 | .sb-1-0-50-s { 3054 | flex: 1 0 50%; 3055 | } 3056 | 3057 | .sb-1-0-40-s { 3058 | flex: 1 0 40%; 3059 | } 3060 | 3061 | .sb-1-0-30-s { 3062 | flex: 1 0 30%; 3063 | } 3064 | 3065 | .sb-1-0-20-s { 3066 | flex: 1 0 20%; 3067 | } 3068 | 3069 | .sb-1-0-10-s { 3070 | flex: 1 0 10%; 3071 | } 3072 | 3073 | .sb-1-0-third-s { 3074 | flex: 1 0 33.3333%; 3075 | } 3076 | 3077 | .sb-1-0-quarter-s { 3078 | flex: 1 0 25%; 3079 | } 3080 | 3081 | .sb-1-0-sixth-s { 3082 | flex: 1 0 16.6666%; 3083 | } 3084 | 3085 | .sb-1-0-seventh-s { 3086 | flex: 1 0 14.2857%; 3087 | } 3088 | 3089 | .sb-1-0-eighth-s { 3090 | flex: 1 0 12.5%; 3091 | } 3092 | 3093 | .sb-1-0-ninth-s { 3094 | flex: 1 0 11.1111%; 3095 | } 3096 | 3097 | .sb-1-0-0-s { 3098 | flex: 1 0 0; 3099 | } 3100 | 3101 | .sb-1-0-auto-s { 3102 | flex: 1 0 auto; 3103 | } 3104 | } 3105 | @media only screen and (min-width: 992px) { 3106 | .sb-0-0-100-l { 3107 | flex: 0 0 100%; 3108 | } 3109 | 3110 | .sb-0-0-90-l { 3111 | flex: 0 0 90%; 3112 | } 3113 | 3114 | .sb-0-0-80-l { 3115 | flex: 0 0 80%; 3116 | } 3117 | 3118 | .sb-0-0-70-l { 3119 | flex: 0 0 70%; 3120 | } 3121 | 3122 | .sb-0-0-60-l { 3123 | flex: 0 0 60%; 3124 | } 3125 | 3126 | .sb-0-0-50-l { 3127 | flex: 0 0 50%; 3128 | } 3129 | 3130 | .sb-0-0-40-l { 3131 | flex: 0 0 40%; 3132 | } 3133 | 3134 | .sb-0-0-30-l { 3135 | flex: 0 0 30%; 3136 | } 3137 | 3138 | .sb-0-0-20-l { 3139 | flex: 0 0 20%; 3140 | } 3141 | 3142 | .sb-0-0-10-l { 3143 | flex: 0 0 10%; 3144 | } 3145 | 3146 | .sb-0-0-third-l { 3147 | flex: 0 0 33.3333%; 3148 | } 3149 | 3150 | .sb-0-0-quarter-l { 3151 | flex: 0 0 25%; 3152 | } 3153 | 3154 | .sb-0-0-sixth-l { 3155 | flex: 0 0 16.6666%; 3156 | } 3157 | 3158 | .sb-0-0-seventh-l { 3159 | flex: 0 0 14.2857%; 3160 | } 3161 | 3162 | .sb-0-0-eighth-l { 3163 | flex: 0 0 12.5%; 3164 | } 3165 | 3166 | .sb-0-0-ninth-l { 3167 | flex: 0 0 11.1111%; 3168 | } 3169 | 3170 | .sb-0-0-0-l { 3171 | flex: 0 0 0; 3172 | } 3173 | 3174 | .sb-0-0-auto-l { 3175 | flex: 0 0 auto; 3176 | } 3177 | } 3178 | @media only screen and (min-width: 600px) and (max-width: 992px) { 3179 | .sb-0-0-100-m { 3180 | flex: 0 0 100%; 3181 | } 3182 | 3183 | .sb-0-0-90-m { 3184 | flex: 0 0 90%; 3185 | } 3186 | 3187 | .sb-0-0-80-m { 3188 | flex: 0 0 80%; 3189 | } 3190 | 3191 | .sb-0-0-70-m { 3192 | flex: 0 0 70%; 3193 | } 3194 | 3195 | .sb-0-0-60-m { 3196 | flex: 0 0 60%; 3197 | } 3198 | 3199 | .sb-0-0-50-m { 3200 | flex: 0 0 50%; 3201 | } 3202 | 3203 | .sb-0-0-40-m { 3204 | flex: 0 0 40%; 3205 | } 3206 | 3207 | .sb-0-0-30-m { 3208 | flex: 0 0 30%; 3209 | } 3210 | 3211 | .sb-0-0-20-m { 3212 | flex: 0 0 20%; 3213 | } 3214 | 3215 | .sb-0-0-10-m { 3216 | flex: 0 0 10%; 3217 | } 3218 | 3219 | .sb-0-0-third-m { 3220 | flex: 0 0 33.3333%; 3221 | } 3222 | 3223 | .sb-0-0-quarter-m { 3224 | flex: 0 0 25%; 3225 | } 3226 | 3227 | .sb-0-0-sixth-m { 3228 | flex: 0 0 16.6666%; 3229 | } 3230 | 3231 | .sb-0-0-seventh-m { 3232 | flex: 0 0 14.2857%; 3233 | } 3234 | 3235 | .sb-0-0-eighth-m { 3236 | flex: 0 0 12.5%; 3237 | } 3238 | 3239 | .sb-0-0-ninth-m { 3240 | flex: 0 0 11.1111%; 3241 | } 3242 | 3243 | .sb-0-0-0-m { 3244 | flex: 0 0 0; 3245 | } 3246 | 3247 | .sb-0-0-auto-m { 3248 | flex: 0 0 auto; 3249 | } 3250 | } 3251 | @media only screen and (max-width: 600px) { 3252 | .sb-0-0-100-s { 3253 | flex: 0 0 100%; 3254 | } 3255 | 3256 | .sb-0-0-90-s { 3257 | flex: 0 0 90%; 3258 | } 3259 | 3260 | .sb-0-0-80-s { 3261 | flex: 0 0 80%; 3262 | } 3263 | 3264 | .sb-0-0-70-s { 3265 | flex: 0 0 70%; 3266 | } 3267 | 3268 | .sb-0-0-60-s { 3269 | flex: 0 0 60%; 3270 | } 3271 | 3272 | .sb-0-0-50-s { 3273 | flex: 0 0 50%; 3274 | } 3275 | 3276 | .sb-0-0-40-s { 3277 | flex: 0 0 40%; 3278 | } 3279 | 3280 | .sb-0-0-30-s { 3281 | flex: 0 0 30%; 3282 | } 3283 | 3284 | .sb-0-0-20-s { 3285 | flex: 0 0 20%; 3286 | } 3287 | 3288 | .sb-0-0-10-s { 3289 | flex: 0 0 10%; 3290 | } 3291 | 3292 | .sb-0-0-third-s { 3293 | flex: 0 0 33.3333%; 3294 | } 3295 | 3296 | .sb-0-0-quarter-s { 3297 | flex: 0 0 25%; 3298 | } 3299 | 3300 | .sb-0-0-sixth-s { 3301 | flex: 0 0 16.6666%; 3302 | } 3303 | 3304 | .sb-0-0-seventh-s { 3305 | flex: 0 0 14.2857%; 3306 | } 3307 | 3308 | .sb-0-0-eighth-s { 3309 | flex: 0 0 12.5%; 3310 | } 3311 | 3312 | .sb-0-0-ninth-s { 3313 | flex: 0 0 11.1111%; 3314 | } 3315 | 3316 | .sb-0-0-0-s { 3317 | flex: 0 0 0; 3318 | } 3319 | 3320 | .sb-0-0-auto-s { 3321 | flex: 0 0 auto; 3322 | } 3323 | } 3324 | /* 3325 | * Flex helpers Section 1 */ 3326 | .sb-flex-10 { 3327 | flex: 10 1 0; 3328 | } 3329 | 3330 | .sb-flex-9 { 3331 | flex: 9 1 0; 3332 | } 3333 | 3334 | .sb-flex-8 { 3335 | flex: 8 1 0; 3336 | } 3337 | 3338 | .sb-flex-7 { 3339 | flex: 7 1 0; 3340 | } 3341 | 3342 | .sb-flex-6 { 3343 | flex: 6 1 0; 3344 | } 3345 | 3346 | .sb-flex-5 { 3347 | flex: 5 1 0; 3348 | } 3349 | 3350 | .sb-flex-4 { 3351 | flex: 4 1 0; 3352 | } 3353 | 3354 | .sb-flex-3 { 3355 | flex: 3 1 0; 3356 | } 3357 | 3358 | .sb-flex-2 { 3359 | flex: 2 1 0; 3360 | } 3361 | 3362 | .sb-flex-1 { 3363 | flex: 1 1 0; 3364 | } 3365 | 3366 | .sb-flex-0 { 3367 | flex: 0 1 0; 3368 | } 3369 | 3370 | .sb-flex-initial, 3371 | .sb-flex-0-auto, 3372 | .sb-flex-0-1-auto { 3373 | flex: 0 1 auto; 3374 | } 3375 | 3376 | .sb-flex-auto, 3377 | .sb-flex-1-1-auto { 3378 | flex: 1 1 auto; 3379 | } 3380 | 3381 | .sb-flex-none, 3382 | .sb-flex-0-0-auto { 3383 | flex: 1 1 auto; 3384 | } 3385 | 3386 | /* 3387 | * Flex helpers Section 1 Responsive */ 3388 | @media only screen and (min-width: 992px) { 3389 | .sb-flex-10-l { 3390 | flex: 10 1 0; 3391 | } 3392 | 3393 | .sb-flex-9-l { 3394 | flex: 9 1 0; 3395 | } 3396 | 3397 | .sb-flex-8-l { 3398 | flex: 8 1 0; 3399 | } 3400 | 3401 | .sb-flex-7-l { 3402 | flex: 7 1 0; 3403 | } 3404 | 3405 | .sb-flex-6-l { 3406 | flex: 6 1 0; 3407 | } 3408 | 3409 | .sb-flex-5-l { 3410 | flex: 5 1 0; 3411 | } 3412 | 3413 | .sb-flex-4-l { 3414 | flex: 4 1 0; 3415 | } 3416 | 3417 | .sb-flex-3-l { 3418 | flex: 3 1 0; 3419 | } 3420 | 3421 | .sb-flex-2-l { 3422 | flex: 2 1 0; 3423 | } 3424 | 3425 | .sb-flex-1-l { 3426 | flex: 1 1 0; 3427 | } 3428 | 3429 | .sb-flex-0-l { 3430 | flex: 0 1 0; 3431 | } 3432 | 3433 | .sb-flex-initial-l, 3434 | .sb-flex-0-auto-l, 3435 | .sb-flex-0-1-auto-l { 3436 | flex: 0 1 auto; 3437 | } 3438 | 3439 | .sb-flex-auto-l, 3440 | .sb-flex-1-1-auto-l { 3441 | flex: 1 1 auto; 3442 | } 3443 | 3444 | .sb-flex-none-l, 3445 | .sb-flex-0-0-auto-l { 3446 | flex: 1 1 auto; 3447 | } 3448 | } 3449 | @media only screen and (min-width: 600px) and (max-width: 992px) { 3450 | .sb-flex-10-m { 3451 | flex: 10 1 0; 3452 | } 3453 | 3454 | .sb-flex-9-m { 3455 | flex: 9 1 0; 3456 | } 3457 | 3458 | .sb-flex-8-m { 3459 | flex: 8 1 0; 3460 | } 3461 | 3462 | .sb-flex-7-m { 3463 | flex: 7 1 0; 3464 | } 3465 | 3466 | .sb-flex-6-m { 3467 | flex: 6 1 0; 3468 | } 3469 | 3470 | .sb-flex-5-m { 3471 | flex: 5 1 0; 3472 | } 3473 | 3474 | .sb-flex-4-m { 3475 | flex: 4 1 0; 3476 | } 3477 | 3478 | .sb-flex-3-m { 3479 | flex: 3 1 0; 3480 | } 3481 | 3482 | .sb-flex-2-m { 3483 | flex: 2 1 0; 3484 | } 3485 | 3486 | .sb-flex-1-m { 3487 | flex: 1 1 0; 3488 | } 3489 | 3490 | .sb-flex-0-m { 3491 | flex: 0 1 0; 3492 | } 3493 | 3494 | .sb-flex-initial-m, 3495 | .sb-flex-0-auto-m, 3496 | .sb-flex-0-1-auto-m { 3497 | flex: 0 1 auto; 3498 | } 3499 | 3500 | .sb-flex-auto-m, 3501 | .sb-flex-1-1-auto-m { 3502 | flex: 1 1 auto; 3503 | } 3504 | 3505 | .sb-flex-none-m, 3506 | .sb-flex-0-0-auto-m { 3507 | flex: 1 1 auto; 3508 | } 3509 | } 3510 | @media only screen and (max-width: 600px) { 3511 | .sb-flex-10-s { 3512 | flex: 10 1 0; 3513 | } 3514 | 3515 | .sb-flex-9-s { 3516 | flex: 9 1 0; 3517 | } 3518 | 3519 | .sb-flex-8-s { 3520 | flex: 8 1 0; 3521 | } 3522 | 3523 | .sb-flex-7-s { 3524 | flex: 7 1 0; 3525 | } 3526 | 3527 | .sb-flex-6-s { 3528 | flex: 6 1 0; 3529 | } 3530 | 3531 | .sb-flex-5-s { 3532 | flex: 5 1 0; 3533 | } 3534 | 3535 | .sb-flex-4-s { 3536 | flex: 4 1 0; 3537 | } 3538 | 3539 | .sb-flex-3-s { 3540 | flex: 3 1 0; 3541 | } 3542 | 3543 | .sb-flex-2-s { 3544 | flex: 2 1 0; 3545 | } 3546 | 3547 | .sb-flex-1-s { 3548 | flex: 1 1 0; 3549 | } 3550 | 3551 | .sb-flex-0-s { 3552 | flex: 0 1 0; 3553 | } 3554 | 3555 | .sb-flex-initial-s, 3556 | .sb-flex-0-auto-s, 3557 | .sb-flex-0-1-auto-s { 3558 | flex: 0 1 auto; 3559 | } 3560 | 3561 | .sb-flex-auto-s, 3562 | .sb-flex-1-1-auto-s { 3563 | flex: 1 1 auto; 3564 | } 3565 | 3566 | .sb-flex-none-s, 3567 | .sb-flex-0-0-auto-s { 3568 | flex: 1 1 auto; 3569 | } 3570 | } 3571 | /* 3572 | * 3573 | * Flex Grow */ 3574 | @media only screen and (min-width: 992px) { 3575 | .sb-flex-grow-0-l { 3576 | flex-grow: 0; 3577 | } 3578 | 3579 | .sb-flex-grow-1-l { 3580 | flex-grow: 1; 3581 | } 3582 | 3583 | .sb-flex-grow-2-l { 3584 | flex-grow: 2; 3585 | } 3586 | 3587 | .sb-flex-grow-3-l { 3588 | flex-grow: 3; 3589 | } 3590 | 3591 | .sb-flex-grow-4-l { 3592 | flex-grow: 4; 3593 | } 3594 | 3595 | .sb-flex-grow-5-l { 3596 | flex-grow: 5; 3597 | } 3598 | 3599 | .sb-flex-grow-6-l { 3600 | flex-grow: 6; 3601 | } 3602 | 3603 | .sb-flex-grow-7-l { 3604 | flex-grow: 7; 3605 | } 3606 | 3607 | .sb-flex-grow-8-l { 3608 | flex-grow: 8; 3609 | } 3610 | 3611 | .sb-flex-grow-9-l { 3612 | flex-grow: 9; 3613 | } 3614 | 3615 | .sb-flex-grow-10-l { 3616 | flex-grow: 10; 3617 | } 3618 | } 3619 | @media only screen and (min-width: 600px) and (max-width: 992px) { 3620 | .sb-flex-grow-0-m { 3621 | flex-grow: 0; 3622 | } 3623 | 3624 | .sb-flex-grow-1-m { 3625 | flex-grow: 1; 3626 | } 3627 | 3628 | .sb-flex-grow-2-m { 3629 | flex-grow: 2; 3630 | } 3631 | 3632 | .sb-flex-grow-3-m { 3633 | flex-grow: 3; 3634 | } 3635 | 3636 | .sb-flex-grow-4-m { 3637 | flex-grow: 4; 3638 | } 3639 | 3640 | .sb-flex-grow-5-m { 3641 | flex-grow: 5; 3642 | } 3643 | 3644 | .sb-flex-grow-6-m { 3645 | flex-grow: 6; 3646 | } 3647 | 3648 | .sb-flex-grow-7-m { 3649 | flex-grow: 7; 3650 | } 3651 | 3652 | .sb-flex-grow-8-m { 3653 | flex-grow: 8; 3654 | } 3655 | 3656 | .sb-flex-grow-9-m { 3657 | flex-grow: 9; 3658 | } 3659 | 3660 | .sb-flex-grow-10-m { 3661 | flex-grow: 10; 3662 | } 3663 | } 3664 | @media only screen and (max-width: 600px) { 3665 | .sb-flex-grow-0-s { 3666 | flex-grow: 0; 3667 | } 3668 | 3669 | .sb-flex-grow-1-s { 3670 | flex-grow: 1; 3671 | } 3672 | 3673 | .sb-flex-grow-2-s { 3674 | flex-grow: 2; 3675 | } 3676 | 3677 | .sb-flex-grow-3-s { 3678 | flex-grow: 3; 3679 | } 3680 | 3681 | .sb-flex-grow-4-s { 3682 | flex-grow: 4; 3683 | } 3684 | 3685 | .sb-flex-grow-5-s { 3686 | flex-grow: 5; 3687 | } 3688 | 3689 | .sb-flex-grow-6-s { 3690 | flex-grow: 6; 3691 | } 3692 | 3693 | .sb-flex-grow-7-s { 3694 | flex-grow: 7; 3695 | } 3696 | 3697 | .sb-flex-grow-8-s { 3698 | flex-grow: 8; 3699 | } 3700 | 3701 | .sb-flex-grow-9-s { 3702 | flex-grow: 9; 3703 | } 3704 | 3705 | .sb-flex-grow-10-s { 3706 | flex-grow: 10; 3707 | } 3708 | } 3709 | /* 3710 | * 3711 | * Flex Shrink */ 3712 | @media only screen and (min-width: 992px) { 3713 | .sb-flex-shrink-0-l { 3714 | flex-shrink: 0; 3715 | } 3716 | 3717 | .sb-flex-shrink-1-l { 3718 | flex-shrink: 1; 3719 | } 3720 | 3721 | .sb-flex-shrink-2-l { 3722 | flex-shrink: 2; 3723 | } 3724 | 3725 | .sb-flex-shrink-3-l { 3726 | flex-shrink: 3; 3727 | } 3728 | 3729 | .sb-flex-shrink-4-l { 3730 | flex-shrink: 4; 3731 | } 3732 | 3733 | .sb-flex-shrink-5-l { 3734 | flex-shrink: 5; 3735 | } 3736 | 3737 | .sb-flex-shrink-6-l { 3738 | flex-shrink: 6; 3739 | } 3740 | 3741 | .sb-flex-shrink-7-l { 3742 | flex-shrink: 7; 3743 | } 3744 | 3745 | .sb-flex-shrink-8-l { 3746 | flex-shrink: 8; 3747 | } 3748 | 3749 | .sb-flex-shrink-9-l { 3750 | flex-shrink: 9; 3751 | } 3752 | 3753 | .sb-flex-shrink-10-l { 3754 | flex-shrink: 10; 3755 | } 3756 | } 3757 | @media only screen and (min-width: 600px) and (max-width: 992px) { 3758 | .sb-flex-shrink-0-m { 3759 | flex-shrink: 0; 3760 | } 3761 | 3762 | .sb-flex-shrink-1-m { 3763 | flex-shrink: 1; 3764 | } 3765 | 3766 | .sb-flex-shrink-2-m { 3767 | flex-shrink: 2; 3768 | } 3769 | 3770 | .sb-flex-shrink-3-m { 3771 | flex-shrink: 3; 3772 | } 3773 | 3774 | .sb-flex-shrink-4-m { 3775 | flex-shrink: 4; 3776 | } 3777 | 3778 | .sb-flex-shrink-5-m { 3779 | flex-shrink: 5; 3780 | } 3781 | 3782 | .sb-flex-shrink-6-m { 3783 | flex-shrink: 6; 3784 | } 3785 | 3786 | .sb-flex-shrink-7-m { 3787 | flex-shrink: 7; 3788 | } 3789 | 3790 | .sb-flex-shrink-8-m { 3791 | flex-shrink: 8; 3792 | } 3793 | 3794 | .sb-flex-shrink-9-m { 3795 | flex-shrink: 9; 3796 | } 3797 | 3798 | .sb-flex-shrink-10-m { 3799 | flex-shrink: 10; 3800 | } 3801 | } 3802 | @media only screen and (max-width: 600px) { 3803 | .sb-flex-shrink-0-s { 3804 | flex-shrink: 0; 3805 | } 3806 | 3807 | .sb-flex-shrink-1-s { 3808 | flex-shrink: 1; 3809 | } 3810 | 3811 | .sb-flex-shrink-2-s { 3812 | flex-shrink: 2; 3813 | } 3814 | 3815 | .sb-flex-shrink-3-s { 3816 | flex-shrink: 3; 3817 | } 3818 | 3819 | .sb-flex-shrink-4-s { 3820 | flex-shrink: 4; 3821 | } 3822 | 3823 | .sb-flex-shrink-5-s { 3824 | flex-shrink: 5; 3825 | } 3826 | 3827 | .sb-flex-shrink-6-s { 3828 | flex-shrink: 6; 3829 | } 3830 | 3831 | .sb-flex-shrink-7-s { 3832 | flex-shrink: 7; 3833 | } 3834 | 3835 | .sb-flex-shrink-8-s { 3836 | flex-shrink: 8; 3837 | } 3838 | 3839 | .sb-flex-shrink-9-s { 3840 | flex-shrink: 9; 3841 | } 3842 | 3843 | .sb-flex-shrink-10-s { 3844 | flex-shrink: 10; 3845 | } 3846 | } 3847 | /* 3848 | * 3849 | * Flex Basis */ 3850 | @media only screen and (min-width: 992px) { 3851 | .sb-flex-basis-100-l { 3852 | flex-basis: 100%; 3853 | } 3854 | 3855 | .sb-flex-basis-90-l { 3856 | flex-basis: 90%; 3857 | } 3858 | 3859 | .sb-flex-basis-80-l { 3860 | flex-basis: 80%; 3861 | } 3862 | 3863 | .sb-flex-basis-70-l { 3864 | flex-basis: 70%; 3865 | } 3866 | 3867 | .sb-flex-basis-60-l { 3868 | flex-basis: 60%; 3869 | } 3870 | 3871 | .sb-flex-basis-50-l { 3872 | flex-basis: 50%; 3873 | } 3874 | 3875 | .sb-flex-basis-40-l { 3876 | flex-basis: 40%; 3877 | } 3878 | 3879 | .sb-flex-basis-30-l { 3880 | flex-basis: 30%; 3881 | } 3882 | 3883 | .sb-flex-basis-20-l { 3884 | flex-basis: 20%; 3885 | } 3886 | 3887 | .sb-flex-basis-10-l { 3888 | flex-basis: 10%; 3889 | } 3890 | 3891 | .sb-flex-basis-third-l { 3892 | flex-basis: 33.3333%; 3893 | } 3894 | 3895 | .sb-flex-basis-quarter-l { 3896 | flex-basis: 25%; 3897 | } 3898 | 3899 | .sb-flex-basis-sixth-l { 3900 | flex-basis: 16.6666%; 3901 | } 3902 | 3903 | .sb-flex-basis-seventh-l { 3904 | flex-basis: 14.2857%; 3905 | } 3906 | 3907 | .sb-flex-basis-eighth-l { 3908 | flex-basis: 12.5%; 3909 | } 3910 | 3911 | .sb-flex-basis-ninth-l { 3912 | flex-basis: 11.1111%; 3913 | } 3914 | 3915 | .sb-flex-basis-0-l { 3916 | flex-basis: 0; 3917 | } 3918 | 3919 | .sb-flex-basis-auto-l { 3920 | flex-basis: auto; 3921 | } 3922 | } 3923 | @media only screen and (min-width: 600px) and (max-width: 992px) { 3924 | .sb-flex-basis-100-m { 3925 | flex-basis: 100%; 3926 | } 3927 | 3928 | .sb-flex-basis-90-m { 3929 | flex-basis: 90%; 3930 | } 3931 | 3932 | .sb-flex-basis-80-m { 3933 | flex-basis: 80%; 3934 | } 3935 | 3936 | .sb-flex-basis-70-m { 3937 | flex-basis: 70%; 3938 | } 3939 | 3940 | .sb-flex-basis-60-m { 3941 | flex-basis: 60%; 3942 | } 3943 | 3944 | .sb-flex-basis-50-m { 3945 | flex-basis: 50%; 3946 | } 3947 | 3948 | .sb-flex-basis-40-m { 3949 | flex-basis: 40%; 3950 | } 3951 | 3952 | .sb-flex-basis-30-m { 3953 | flex-basis: 30%; 3954 | } 3955 | 3956 | .sb-flex-basis-20-m { 3957 | flex-basis: 20%; 3958 | } 3959 | 3960 | .sb-flex-basis-10-m { 3961 | flex-basis: 10%; 3962 | } 3963 | 3964 | .sb-flex-basis-third-m { 3965 | flex-basis: 33.3333%; 3966 | } 3967 | 3968 | .sb-flex-basis-quarter-m { 3969 | flex-basis: 25%; 3970 | } 3971 | 3972 | .sb-flex-basis-sixth-m { 3973 | flex-basis: 16.6666%; 3974 | } 3975 | 3976 | .sb-flex-basis-seventh-m { 3977 | flex-basis: 14.2857%; 3978 | } 3979 | 3980 | .sb-flex-basis-eighth-m { 3981 | flex-basis: 12.5%; 3982 | } 3983 | 3984 | .sb-flex-basis-ninth-m { 3985 | flex-basis: 11.1111%; 3986 | } 3987 | 3988 | .sb-flex-basis-0-m { 3989 | flex-basis: 0; 3990 | } 3991 | 3992 | .sb-flex-basis-auto-m { 3993 | flex-basis: auto; 3994 | } 3995 | } 3996 | @media only screen and (max-width: 600px) { 3997 | .sb-flex-basis-100-s { 3998 | flex-basis: 100%; 3999 | } 4000 | 4001 | .sb-flex-basis-90-s { 4002 | flex-basis: 90%; 4003 | } 4004 | 4005 | .sb-flex-basis-80-s { 4006 | flex-basis: 80%; 4007 | } 4008 | 4009 | .sb-flex-basis-70-s { 4010 | flex-basis: 70%; 4011 | } 4012 | 4013 | .sb-flex-basis-60-s { 4014 | flex-basis: 60%; 4015 | } 4016 | 4017 | .sb-flex-basis-50-s { 4018 | flex-basis: 50%; 4019 | } 4020 | 4021 | .sb-flex-basis-40-s { 4022 | flex-basis: 40%; 4023 | } 4024 | 4025 | .sb-flex-basis-30-s { 4026 | flex-basis: 30%; 4027 | } 4028 | 4029 | .sb-flex-basis-20-s { 4030 | flex-basis: 20%; 4031 | } 4032 | 4033 | .sb-flex-basis-10-s { 4034 | flex-basis: 10%; 4035 | } 4036 | 4037 | .sb-flex-basis-third-s { 4038 | flex-basis: 33.3333%; 4039 | } 4040 | 4041 | .sb-flex-basis-quarter-s { 4042 | flex-basis: 25%; 4043 | } 4044 | 4045 | .sb-flex-basis-sixth-s { 4046 | flex-basis: 16.6666%; 4047 | } 4048 | 4049 | .sb-flex-basis-seventh-s { 4050 | flex-basis: 14.2857%; 4051 | } 4052 | 4053 | .sb-flex-basis-eighth-s { 4054 | flex-basis: 12.5%; 4055 | } 4056 | 4057 | .sb-flex-basis-ninth-s { 4058 | flex-basis: 11.1111%; 4059 | } 4060 | 4061 | .sb-flex-basis-0-s { 4062 | flex-basis: 0; 4063 | } 4064 | 4065 | .sb-flex-basis-auto-s { 4066 | flex-basis: auto; 4067 | } 4068 | } 4069 | 4070 | /*# sourceMappingURL=strawberry.css.map */ 4071 | --------------------------------------------------------------------------------