├── src ├── scss │ ├── styles │ │ ├── _footer.scss │ │ ├── _header.scss │ │ └── _variables-colors.scss │ ├── styles.scss │ ├── base │ │ ├── _lists.scss │ │ ├── _code.scss │ │ ├── _blockquotes.scss │ │ ├── _tables.scss │ │ ├── _print.scss │ │ ├── _buttons.scss │ │ ├── _resets.scss │ │ ├── _grid-non-responsive.scss │ │ ├── _mixins.scss │ │ ├── _animations.scss │ │ ├── _typography.scss │ │ ├── _forms.scss │ │ ├── _variables.scss │ │ ├── _grid.scss │ │ └── _helpers.scss │ └── base.scss ├── img │ ├── favicon.png │ ├── apple-touch-icon.png │ ├── apple-touch-icon-72x72.png │ └── apple-touch-icon-114x114.png ├── js │ └── default.js ├── index.html └── css │ └── styles.css ├── dist ├── js │ └── default.js ├── img │ ├── favicon.png │ ├── apple-touch-icon.png │ ├── apple-touch-icon-72x72.png │ └── apple-touch-icon-114x114.png ├── index.html └── css │ └── styles.css ├── .travis.yml ├── .gitignore ├── bower.json ├── package.json ├── readme.markdown ├── gulpfile.js └── changelog.markdown /src/scss/styles/_footer.scss: -------------------------------------------------------------------------------- 1 | // Footer 2 | 3 | -------------------------------------------------------------------------------- /src/scss/styles/_header.scss: -------------------------------------------------------------------------------- 1 | // Header 2 | 3 | -------------------------------------------------------------------------------- /dist/js/default.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){}); -------------------------------------------------------------------------------- /src/scss/styles/_variables-colors.scss: -------------------------------------------------------------------------------- 1 | // Website Variables and Colours 2 | 3 | -------------------------------------------------------------------------------- /src/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekryski/base/master/src/img/favicon.png -------------------------------------------------------------------------------- /dist/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekryski/base/master/dist/img/favicon.png -------------------------------------------------------------------------------- /dist/img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekryski/base/master/dist/img/apple-touch-icon.png -------------------------------------------------------------------------------- /src/img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekryski/base/master/src/img/apple-touch-icon.png -------------------------------------------------------------------------------- /src/img/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekryski/base/master/src/img/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /dist/img/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekryski/base/master/dist/img/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /src/img/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekryski/base/master/src/img/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4.4.4" 4 | before_script: 5 | - npm install -g gulp 6 | script: gulp build -------------------------------------------------------------------------------- /dist/img/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekryski/base/master/dist/img/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .config.codekit 3 | .codekit.cache 4 | scss/.sass-cache 5 | config.codekit 6 | node_modules/ 7 | bower_components/ 8 | npm-debug.log -------------------------------------------------------------------------------- /src/js/default.js: -------------------------------------------------------------------------------- 1 | // Default JavaScript Functions and Initiations 2 | $(document).ready(function() { 3 | 4 | // Functions go here... 5 | 6 | }); // end document ready 7 | -------------------------------------------------------------------------------- /src/scss/styles.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Website or App Stylesheet 3 | // ========================================================================== 4 | 5 | // Variables and Colors 6 | @import "styles/variables-colors"; 7 | 8 | // Import Base 9 | @import "base"; 10 | 11 | // Website / App Styles 12 | @import "styles/header"; 13 | @import "styles/footer"; 14 | 15 | // Import Base Helpers 16 | @import "base/_helpers"; -------------------------------------------------------------------------------- /src/scss/base/_lists.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Lists 3 | // ========================================================================== 4 | ul, ol { 5 | margin: 20px 0; 6 | padding: 0 0 0 40px; 7 | } 8 | dl { 9 | &:before, &:after { content: " "; display: table; } &:after { clear: both; } 10 | dt { 11 | float: left; 12 | width: 25%; 13 | display: block; 14 | font-weight: 400; 15 | } 16 | dd { 17 | overflow: hidden; 18 | display: block; 19 | } 20 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "base", 3 | "version": "3.1.5", 4 | "homepage": "http://matthewhartman.github.io/base/", 5 | "authors": [ 6 | "Matthew Hartman " 7 | ], 8 | "description": "A Rock Solid, Responsive HTML/CSS Framework built to work on all devices big and small.", 9 | "keywords": [ 10 | "css", 11 | "scss", 12 | "framework", 13 | "mobile-first", 14 | "lightweight", 15 | "responsive" 16 | ], 17 | "license": "MIT", 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests" 24 | ] 25 | } -------------------------------------------------------------------------------- /src/scss/base/_code.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Code 3 | // ========================================================================== 4 | code, kbd, pre, samp { 5 | @include font-size($base-code-font-size); 6 | @include line-height($base-code-line-height); 7 | word-wrap: break-word; 8 | font-family: $base-code-font-family; 9 | color: $base-code-color; 10 | background-color: $base-code-background-color; 11 | font-weight: normal; 12 | padding: 0; 13 | white-space: pre-wrap; 14 | } 15 | pre { 16 | padding: 10px; 17 | overflow: auto; 18 | border: 1px solid $base-code-border-color; 19 | } -------------------------------------------------------------------------------- /src/scss/base/_blockquotes.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Blockquote 3 | // ========================================================================== 4 | blockquote, 5 | .blockquote { 6 | font-family: $base-blockquote-font-family; 7 | font-weight: $base-font-weight; 8 | font-style: italic; 9 | margin: 20px 0; 10 | p { 11 | @include font-size($base-blockquote-font-size); 12 | @include line-height($base-blockquote-line-height); 13 | margin-bottom: 20px; 14 | } 15 | cite { 16 | @include font-size($base-font-size - 3); 17 | @include line-height($base-line-height - 3); 18 | font-weight: 700; 19 | font-style: normal; 20 | } 21 | } -------------------------------------------------------------------------------- /src/scss/base/_tables.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Tables 3 | // ========================================================================== 4 | caption { 5 | font-size: inherit; 6 | line-height: normal; 7 | font-weight: 700; 8 | text-align: left; 9 | padding: 10px; 10 | border-bottom: 1px solid #d7d7d7; 11 | } 12 | table { 13 | @include font-size($base-font-size - 2); 14 | border-collapse: collapse; 15 | border-spacing: 0; 16 | width: 100%; 17 | margin: 0; 18 | text-align: left; 19 | thead, 20 | tbody, 21 | tfoot { 22 | td, 23 | th { 24 | color: #585858; 25 | padding: 10px; 26 | border-bottom: 1px solid #e9e9e9; 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /src/scss/base.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | 3 | // Base Stylesheet - http://getbase.org 4 | // Author: Matthew Hartman - http://www.matthewhartman.com.au/ 5 | // Version: 3.1.5 - Last Updated: July 02, 2016 6 | 7 | ========================================================================== */ 8 | 9 | @import "base/_variables"; 10 | 11 | @import "base/_mixins"; 12 | @import "base/_resets"; 13 | 14 | @import "base/_typography"; 15 | @import "base/_lists"; 16 | @import "base/_blockquotes"; 17 | @import "base/_tables"; 18 | @import "base/_code"; 19 | @import "base/_forms"; 20 | @import "base/_buttons"; 21 | 22 | @import "base/_grid"; 23 | @import "base/_animations";; 24 | 25 | @media print { 26 | @import "base/_print"; 27 | } -------------------------------------------------------------------------------- /src/scss/base/_print.scss: -------------------------------------------------------------------------------- 1 | // All Elements 2 | *, 3 | *:before, 4 | *:after { 5 | background: transparent; 6 | color: #000; 7 | box-shadow: none; 8 | text-shadow: none; 9 | } 10 | 11 | // Links 12 | a, a:visited { text-decoration: underline; } 13 | a[href]:after { content: " (" attr(href) ")"; } 14 | a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } 15 | 16 | // Code and Blockquotes 17 | pre, blockquote { page-break-inside: avoid; } 18 | 19 | // Tables 20 | thead { display: table-header-group; } 21 | tr { page-break-inside: avoid; } 22 | 23 | // Images 24 | img { page-break-inside: avoid; max-width: 100%;} 25 | 26 | // Typography 27 | p, h2, h3 { orphans: 3; widows: 3; } 28 | h2, h3 { page-break-after: avoid; } 29 | abbr[title]:after { content: " (" attr(title) ")"; } -------------------------------------------------------------------------------- /src/scss/base/_buttons.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Assets 3 | // ========================================================================== 4 | 5 | // Custom Buttons 6 | .button { 7 | cursor: pointer; 8 | border: 1px solid #d7d7d7; 9 | background-color: #f3f3f3; 10 | line-height: normal; 11 | padding: 10px 20px; 12 | text-decoration: none; 13 | color: #363636; 14 | display: inline-block; 15 | transition: all 0.3s; 16 | &:hover, &:active { text-decoration: none; } 17 | &:hover { background: #f9f9f9; } 18 | } 19 | .button-primary { 20 | // Add your styles here 21 | } 22 | .button-secondary { 23 | // Add your styles here 24 | } 25 | 26 | // Button Styled as Link 27 | .button-link { 28 | color: $base-link-color; 29 | text-decoration: underline; 30 | border: 0; 31 | background: transparent; 32 | padding: 0; 33 | &:hover { text-decoration: none; } 34 | &:active { outline: 0; } 35 | } -------------------------------------------------------------------------------- /src/scss/base/_resets.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Global Resets 3 | // ========================================================================== 4 | 5 | // Border Box 6 | *, *:before, *:after { 7 | -webkit-box-sizing: border-box; 8 | -moz-box-sizing: border-box; 9 | box-sizing: border-box; 10 | } 11 | 12 | // HTML Font / Text Size Resets 13 | html { 14 | font-family: sans-serif; 15 | -ms-text-size-adjust: 100%; 16 | -webkit-text-size-adjust: 100%; 17 | } 18 | html, button, input, select, textarea { font-family: inherit; } 19 | 20 | // HTML5 Elements 21 | article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } 22 | 23 | // Remove Default Margins 24 | body, form, fieldset, legend, input, select, textarea, button { margin: 0; } 25 | 26 | // Audio and Video Elements 27 | audio:not([controls]) { 28 | display: none; 29 | height: 0; 30 | } 31 | audio, canvas, progress, video { display: inline-block; } 32 | progress { vertical-align: baseline; } 33 | 34 | // Hidden Elements 35 | [hidden], template { display: none; } 36 | 37 | // Images 38 | img { border-style: none; } 39 | svg:not(:root) { overflow: hidden; } -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Base 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Base 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "getbase", 3 | "version": "3.1.5", 4 | "description": "A Rock Solid, Responsive HTML/CSS Framework built to work on all devices big and small.", 5 | "homepage": "http://getbase.org/", 6 | "scripts": { 7 | "start": "gulp", 8 | "build": "gulp build" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/matthewhartman/base.git" 13 | }, 14 | "authors": [ 15 | "Matthew Hartman " 16 | ], 17 | "keywords": [ 18 | "css", 19 | "scss", 20 | "framework", 21 | "mobile-first", 22 | "lightweight", 23 | "responsive" 24 | ], 25 | "license": "MIT", 26 | "ignore": [ 27 | "**/.*", 28 | "node_modules", 29 | "bower_components", 30 | "test", 31 | "tests" 32 | ], 33 | "devDependencies": { 34 | "browser-sync": "^2.12.3", 35 | "del": "^2.2.0", 36 | "gulp": "^3.9.1", 37 | "gulp-autoprefixer": "^3.1.0", 38 | "gulp-cache": "^0.4.4", 39 | "gulp-css-base64": "^1.3.4", 40 | "gulp-imagemin": "^2.4.0", 41 | "gulp-inline-source": "^2.1.0", 42 | "gulp-notify": "^2.2.0", 43 | "gulp-sass": "^2.3.1", 44 | "gulp-sourcemaps": "^1.6.0", 45 | "gulp-uglify": "^1.5.3", 46 | "gulp-watch": "^4.3.5", 47 | "path": "^0.12.7", 48 | "run-sequence": "^1.1.5" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/scss/base/_grid-non-responsive.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Non-Responsive Grid 3 | // ========================================================================== 4 | 5 | // Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ 6 | .clear:before, .clear:after { content: " "; display: table; } .clear:after { clear: both; } 7 | .row:before, .row:after { content: ""; display: table; } .row:after { clear: both; } 8 | 9 | .row { 10 | position: relative; 11 | margin-left: -$grid-gutter; 12 | margin-right: -$grid-gutter; 13 | } 14 | 15 | // Mobile Container 16 | .container { 17 | padding-left: $grid-gutter; 18 | padding-right: $grid-gutter; 19 | margin-left: auto; 20 | margin-right: auto; 21 | width: $container-desktop; 22 | } 23 | .container-full { 24 | padding-left: 0; 25 | padding-right: 0; 26 | margin-left: auto; 27 | margin-right: auto; 28 | } 29 | 30 | // Grid Columns - Global Rules 31 | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { 32 | padding-left: $grid-gutter; 33 | padding-right: $grid-gutter; 34 | position: relative; 35 | float: left; 36 | } 37 | 38 | // Grid 39 | $columns: 12; 40 | @for $i from 1 through $columns { 41 | .col-#{$i} { 42 | width: ($i / $columns) * 100%; 43 | } 44 | } 45 | 46 | // Push Offsets 47 | @for $i from 1 through $columns - 1 { 48 | .push-#{$i} { 49 | left: ($i / $columns) * 100%; 50 | } 51 | } 52 | 53 | // Pull Offsets 54 | @for $i from 1 through $columns - 1 { 55 | .pull-#{$i} { 56 | left: -($i / $columns) * 100%; 57 | } 58 | } -------------------------------------------------------------------------------- /readme.markdown: -------------------------------------------------------------------------------- 1 | # [Base](http://getbase.org) 2 | 3 | ## A Rock Solid, Responsive HTML/CSS Framework built to work on all devices big and small. 4 | Lightweight and minimal code. Spend less time overriding styles and focus more time on creating beautiful website applications. 5 | 6 | [![Build Status](https://travis-ci.org/matthewhartman/base.svg?branch=master)](https://travis-ci.org/matthewhartman/base) 7 | 8 | ## Installation 9 | Getting started is easy, simply install base using [NPM](https://www.npmjs.com/): 10 | 11 | npm install --save getbase 12 | 13 | Once you have the latest version of Base installed, head over to the [docs](http://getbase.org/docs/) to learn more. 14 | 15 | * * * 16 | 17 | ## Support 18 | IE8+ and all other modern browsers 19 | 20 | * * * 21 | 22 | ## LESS Version 23 | Base has a [LESS version](https://github.com/matthewhartman/base/tree/base-less) 24 | 25 | * * * 26 | 27 | ## Looking for old docs? 28 | - [Base 1 docs](http://getbase.org/v1-docs/) 29 | - [Base 2 docs](http://getbase.org/v2-docs/) 30 | 31 | * * * 32 | 33 | ## Thanks 34 | - [base_css-rails](https://github.com/rkrdo/base_css-rails) - Gem that adds the Base framework by Ricardo Cruz 35 | - [HTML5 boilerplate](https://html5boilerplate.com/) for the base HTML template 36 | - Daniel Eden for the CSS3 animations - [animate.css](http://daneden.github.io/animate.css/) 37 | - Nicolas Gallagher [@necolas](https://twitter.com/necolas) for normalize.css and micro clearfix 38 | - Tristan McNab for adding bower support 39 | 40 | ## License 41 | [MIT Open Source](https://opensource.org/licenses/MIT) 42 | 43 | * * * 44 | 45 | Base was built by Matthew Hartman [(@matthewhartmans)](http://twitter.com/matthewhartmans) - a passionate web developer based in Melbourne, Australia. -------------------------------------------------------------------------------- /src/scss/base/_mixins.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Mixins 3 | // ========================================================================== 4 | 5 | // Breakpoint sizes 6 | // Example usage @include breakpoint(x) { ... }; - where x is the device 7 | @mixin breakpoint($bp) { 8 | @if $bp == xl { 9 | @media only screen and (min-width: $breakpoint-xl) { @content ; } 10 | } 11 | @else if $bp == l { 12 | @media only screen and (min-width: $breakpoint-l) { @content ; } 13 | } 14 | @else if $bp == m { 15 | @media only screen and (min-width: $breakpoint-m) { @content ; } 16 | } 17 | } 18 | 19 | // Font sizes (primary sizing in `rem` units with a fallback of `px`) 20 | // Example usage @include font-size(18); 21 | @mixin font-size ($size) { 22 | $remValue: $size / 16; 23 | $pxValue: ($size); 24 | font-size: $pxValue + px; 25 | font-size: $remValue + rem; 26 | } 27 | 28 | // Line height sizes (primary sizing in `rem` units with a fallback of `px`) 29 | // Example usage @include line-height(22); 30 | @mixin line-height ($size) { 31 | $remValue: $size / 16; 32 | $pxValue: ($size); 33 | line-height: $pxValue + px; 34 | line-height: $remValue + rem; 35 | } 36 | 37 | // Background Color with Opacity 38 | // Example Usage: @include bg-rgba(#111, 50%); 39 | @mixin background-alpha($color, $alpha) { 40 | $opacity: $alpha / 100%; 41 | $rgba: rgba($color, $opacity); 42 | background: $color; 43 | background: rgba($color, $opacity); 44 | } 45 | 46 | // Animations 47 | // Example Usage @mixin animation(1s); 48 | @mixin animation($duration: 1s) { 49 | animation-duration: $duration; 50 | animation-fill-mode: both; 51 | } 52 | 53 | // Arrows 54 | // Example Usage @mixin arrow(4px, #000, up); 55 | @mixin arrow ($size: 5px, $color: #333, $direction: right) { 56 | position: relative; 57 | &:before { 58 | content: ""; 59 | position: absolute; 60 | border: $size solid transparent; 61 | z-index: -1; 62 | @if $direction == right { 63 | top: 50%; 64 | left: 100%; 65 | border-left-color: $color; 66 | transform: translate3d(0, -50%, 0); 67 | } 68 | @else if $direction == left { 69 | top: 50%; 70 | left: 0; 71 | border-right-color: $color; 72 | transform: translate3d(-100%, -50%, 0); 73 | } 74 | @else if $direction == down { 75 | top: 100%; 76 | left: 50%; 77 | border-top-color: $color; 78 | transform: translate3d(-50%, 0, 0); 79 | } 80 | @else if $direction == up { 81 | top: 0; 82 | left: 50%; 83 | border-bottom-color: $color; 84 | transform: translate3d(-50%, -100%, 0); 85 | } 86 | } 87 | } -------------------------------------------------------------------------------- /src/scss/base/_animations.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Animations – Selective animations from Animate.css - http://daneden.me/animate 3 | // ========================================================================== 4 | 5 | // Fade In 6 | @keyframes fadeIn { 7 | 0% { opacity: 0; } 8 | 100% { opacity: 1; } 9 | } 10 | 11 | .fade-in { animation-name: fadeIn; } 12 | 13 | // Fade In Down 14 | @keyframes fadeInDown { 15 | 0% { 16 | opacity: 0; 17 | transform: translate3d(0, -30px, 0); 18 | } 19 | 100% { 20 | opacity: 1; 21 | transform: none; 22 | } 23 | } 24 | 25 | .fade-in-down { animation-name: fadeInDown; } 26 | 27 | // Fade In Down Big 28 | @keyframes fadeInDownBig { 29 | 0% { 30 | opacity: 0; 31 | transform: translate3d(0, -100%, 0); 32 | } 33 | 100% { 34 | opacity: 1; 35 | transform: none; 36 | } 37 | } 38 | 39 | .fade-in-down-big { animation-name: fadeInDownBig; } 40 | 41 | // Fade In Left 42 | @keyframes fadeInLeft { 43 | 0% { 44 | opacity: 0; 45 | transform: translate3d(-30px, 0, 0); 46 | } 47 | 100% { 48 | opacity: 1; 49 | transform: none; 50 | } 51 | } 52 | 53 | .fade-in-left { animation-name: fadeInLeft; } 54 | 55 | // Fade In Left Big 56 | @keyframes fadeInLeftBig { 57 | 0% { 58 | opacity: 0; 59 | transform: translate3d(-100%, 0, 0); 60 | } 61 | 100% { 62 | opacity: 1; 63 | transform: none; 64 | } 65 | } 66 | 67 | .fade-in-left-big { animation-name: fadeInLeftBig; } 68 | 69 | // Fade In Right 70 | @keyframes fadeInRight { 71 | 0% { 72 | opacity: 0; 73 | transform: translate3d(30px, 0, 0); 74 | } 75 | 76 | 100% { 77 | opacity: 1; 78 | transform: none; 79 | } 80 | } 81 | 82 | .fade-in-right { animation-name: fadeInRight; } 83 | 84 | // Fade In Right Big 85 | @keyframes fadeInRightBig { 86 | 0% { 87 | opacity: 0; 88 | transform: translate3d(100%, 0, 0); 89 | } 90 | 100% { 91 | opacity: 1; 92 | transform: none; 93 | } 94 | } 95 | 96 | .fade-in-right-big { animation-name: fadeInRightBig; } 97 | 98 | // Fade In Up 99 | @keyframes fadeInUp { 100 | 0% { 101 | opacity: 0; 102 | transform: translate3d(0, 30px, 0); 103 | } 104 | 100% { 105 | opacity: 1; 106 | transform: none; 107 | } 108 | } 109 | 110 | .fade-in-up { animation-name: fadeInUp; } 111 | 112 | // Fade In Up Big 113 | @keyframes fadeInUpBig { 114 | 0% { 115 | opacity: 0; 116 | transform: translate3d(0, 100%, 0); 117 | } 118 | 119 | 100% { 120 | opacity: 1; 121 | transform: none; 122 | } 123 | } 124 | 125 | .fade-in-up-big { animation-name: fadeInUpBig; } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Base Gulp File 2 | var gulp = require('gulp'), 3 | watch = require('gulp-watch'), 4 | sass = require('gulp-sass'), 5 | sourcemaps = require('gulp-sourcemaps'), 6 | cssBase64 = require('gulp-css-base64'), 7 | path = require('path'), 8 | notify = require('gulp-notify'), 9 | inlinesource = require('gulp-inline-source'), 10 | browserSync = require('browser-sync'), 11 | imagemin = require('gulp-imagemin'), 12 | del = require('del'), 13 | cache = require('gulp-cache'), 14 | uglify = require('gulp-uglify'), 15 | autoprefixer = require('gulp-autoprefixer'), 16 | runSequence = require('run-sequence'); 17 | 18 | // Task to compile SCSS 19 | gulp.task('sass', function () { 20 | return gulp.src('./src/scss/styles.scss') 21 | .pipe(sourcemaps.init()) 22 | .pipe(sass({ 23 | errLogToConsole: false, 24 | paths: [ path.join(__dirname, 'scss', 'includes') ] 25 | }) 26 | .on("error", notify.onError(function(error) { 27 | return "Failed to Compile SCSS: " + error.message; 28 | }))) 29 | .pipe(cssBase64()) 30 | .pipe(autoprefixer()) 31 | .pipe(sourcemaps.write('./')) 32 | .pipe(gulp.dest('./src/css/')) 33 | .pipe(gulp.dest('./dist/css/')) 34 | .pipe(browserSync.reload({ 35 | stream: true 36 | })) 37 | .pipe(notify("SCSS Compiled Successfully :)")); 38 | }); 39 | 40 | // Task to Minify JS 41 | gulp.task('jsmin', function() { 42 | return gulp.src('./src/js/**/*.js') 43 | .pipe(uglify()) 44 | .pipe(gulp.dest('./dist/js/')); 45 | }); 46 | 47 | // Minify Images 48 | gulp.task('imagemin', function (){ 49 | return gulp.src('./src/img/**/*.+(png|jpg|jpeg|gif|svg)') 50 | // Caching images that ran through imagemin 51 | .pipe(cache(imagemin({ 52 | interlaced: true 53 | }))) 54 | .pipe(gulp.dest('./dist/img')); 55 | }); 56 | 57 | // BrowserSync Task (Live reload) 58 | gulp.task('browserSync', function() { 59 | browserSync({ 60 | server: { 61 | baseDir: './src/' 62 | } 63 | }) 64 | }); 65 | 66 | // Gulp Inline Source Task 67 | // Embed scripts, CSS or images inline (make sure to add an inline attribute to the linked files) 68 | // Eg: 69 | // Will compile all inline within the html file (less http requests - woot!) 70 | gulp.task('inlinesource', function () { 71 | return gulp.src('./src/**/*.html') 72 | .pipe(inlinesource()) 73 | .pipe(gulp.dest('./dist/')); 74 | }); 75 | 76 | // Gulp Watch Task 77 | gulp.task('watch', ['browserSync'], function () { 78 | gulp.watch('./src/scss/**/*', ['sass']); 79 | gulp.watch('./src/**/*.html').on('change', browserSync.reload); 80 | }); 81 | 82 | // Gulp Clean Up Task 83 | gulp.task('clean', function() { 84 | del('dist'); 85 | }); 86 | 87 | // Gulp Default Task 88 | gulp.task('default', ['watch']); 89 | 90 | // Gulp Build Task 91 | gulp.task('build', function() { 92 | runSequence('clean', 'sass', 'imagemin', 'jsmin', 'inlinesource'); 93 | }); -------------------------------------------------------------------------------- /src/scss/base/_typography.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Typography 3 | // ========================================================================== 4 | 5 | // Body 6 | body { 7 | font-family: $base-font-family; 8 | @include font-size($base-font-size); 9 | @include line-height($base-line-height); 10 | color: $base-font-color; 11 | font-weight: $base-font-weight; 12 | background: $base-background-color; 13 | } 14 | 15 | // Paragraph 16 | p { margin: 0 0 20px 0; } 17 | 18 | // Links 19 | a { 20 | color: $base-link-color; 21 | text-decoration: underline; 22 | background-color: transparent; 23 | -webkit-text-decoration-skip: objects; 24 | &:active, &:hover { 25 | color: $base-link-hover-color; 26 | outline-width: 0; 27 | text-decoration: none; 28 | } 29 | } 30 | 31 | // Headings 32 | h1, h2, h3, h4, h5, h6 { 33 | font-family: $base-heading-font-family; 34 | margin: 0; 35 | } 36 | h1, .fs-1 { 37 | @include font-size($base-h1-font-size); 38 | @include line-height($base-h1-line-height); 39 | } 40 | h2, .fs-2 { 41 | @include font-size($base-h2-font-size); 42 | @include line-height($base-h2-line-height); 43 | } 44 | h3, .fs-3 { 45 | @include font-size($base-h3-font-size); 46 | @include line-height($base-h3-line-height); 47 | } 48 | h4, .fs-4 { 49 | @include font-size($base-h4-font-size); 50 | @include line-height($base-h4-line-height); 51 | } 52 | h5, .fs-5 { 53 | @include font-size($base-h5-font-size); 54 | @include line-height($base-h5-line-height); 55 | } 56 | h6, .fs-6 { 57 | @include font-size($base-h6-font-size); 58 | @include line-height($base-h6-line-height); 59 | } 60 | h1 { 61 | margin-bottom: .5em; 62 | color: $base-h1-color; 63 | font-weight: $base-h1-font-weight; 64 | } 65 | h2 { 66 | margin-bottom: .2em; 67 | color: $base-h2-color; 68 | font-weight: $base-h2-font-weight; 69 | } 70 | h3 { 71 | margin-bottom: .2em; 72 | color: $base-h3-color; 73 | font-weight: $base-h3-font-weight; 74 | } 75 | h4 { 76 | margin-bottom: .2em; 77 | color: $base-h4-color; 78 | font-weight: $base-h4-font-weight; 79 | } 80 | h5 { 81 | margin-bottom: .1em; 82 | color: $base-h5-color; 83 | font-weight: $base-h5-font-weight; 84 | } 85 | h6 { 86 | margin-bottom: .1em; 87 | color: $base-h6-color; 88 | font-weight: $base-h6-font-weight; 89 | } 90 | 91 | // Bold and Strong 92 | b, strong, .strong { font-weight: 700; } 93 | 94 | // Italics 95 | em, .em { font-style: italic; } 96 | 97 | // Abbreviation 98 | abbr[title], .abbr[title] { 99 | border-bottom: none; 100 | text-decoration: underline; 101 | text-decoration: underline dotted; 102 | } 103 | 104 | // Definition 105 | dfn { font-style: italic; } 106 | 107 | // Small 108 | small, .small { 109 | @include font-size(13); 110 | @include line-height(16); 111 | } 112 | 113 | // Mark 114 | mark, .mark { 115 | background-color: #ff0; 116 | color: #000; 117 | } 118 | 119 | // Sub and Sup 120 | sub, .sub, sup, .sup { 121 | font-size: 75%; 122 | line-height: 0; 123 | position: relative; 124 | vertical-align: baseline; 125 | } 126 | sub, .sub { bottom: -0.25em; } 127 | sup, .sup { top: -0.5em; } 128 | 129 | // Del 130 | del, .del { text-decoration: line-through; } 131 | 132 | // Images 133 | figure { margin: 1em 40px; } 134 | 135 | // Horizontal Rules 136 | hr, .hr { 137 | -moz-box-sizing: content-box; 138 | box-sizing: content-box; 139 | height: 1px; 140 | background: #eee; 141 | border: 0; 142 | margin-top: 20px; 143 | margin-bottom: 20px; 144 | } -------------------------------------------------------------------------------- /src/scss/base/_forms.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Forms 3 | // ========================================================================== 4 | 5 | // Form, Fieldset and Legend 6 | fieldset { 7 | border: 1px solid #c0c0c0; 8 | margin: 0 2px; 9 | padding: 0.35em 0.625em 0.75em; 10 | } 11 | legend { 12 | box-sizing: border-box; 13 | color: inherit; 14 | display: table; 15 | max-width: 100%; 16 | padding: 0; 17 | white-space: normal; 18 | } 19 | 20 | // All Form Elements 21 | label, 22 | button, 23 | input, 24 | optgroup, 25 | select, 26 | textarea { 27 | color: $base-input-color; 28 | font: inherit; 29 | margin: 0; 30 | } 31 | 32 | // Mixed Input Fields 33 | [type="text"], 34 | [type="email"], 35 | [type="password"], 36 | [type="tel"], 37 | [type="number"], 38 | [type="date"] { 39 | height: $base-input-height; 40 | padding: 10px; 41 | background-color: $base-input-background-color; 42 | border: 1px solid $base-input-border-color; 43 | -webkit-appearance: none; 44 | -moz-appearance: textfield; 45 | border-radius: 0; 46 | &:focus { 47 | background-color: $base-input-background-focus-color; 48 | border-color: $base-input-border-focus-color; 49 | outline: 0; 50 | } 51 | } 52 | [type="number"]::-webkit-inner-spin-button, 53 | [type="number"]::-webkit-outer-spin-button { 54 | height: auto; 55 | } 56 | [type="date"]::-webkit-inner-spin-button { 57 | display: none; 58 | -webkit-appearance: none; 59 | } 60 | [type="checkbox"], 61 | [type="radio"] { 62 | box-sizing: border-box; 63 | padding: 0; 64 | } 65 | [type="number"]::-webkit-inner-spin-button, 66 | [type="number"]::-webkit-outer-spin-button { 67 | height: auto; 68 | } 69 | [type="search"] { 70 | -webkit-appearance: textfield; 71 | outline-offset: -2px; 72 | } 73 | [type="search"]::-webkit-search-cancel-button, 74 | [type="search"]::-webkit-search-decoration { 75 | -webkit-appearance: none; 76 | } 77 | 78 | // Text Area 79 | textarea { 80 | padding: 10px; 81 | background-color: $base-input-background-color; 82 | border: 1px solid $base-input-border-color; 83 | overflow: auto; 84 | border-radius: 0; 85 | &:focus { 86 | background-color: $base-input-background-focus-color; 87 | border-color: $base-input-border-focus-color; 88 | outline: 0; 89 | } 90 | } 91 | 92 | // Select 93 | select { 94 | text-transform: none; 95 | height: $base-input-height; 96 | padding: 0 10px; 97 | background-color: $base-input-background-color; 98 | border: 1px solid $base-input-border-color; 99 | &:focus { 100 | background-color: $base-input-background-focus-color; 101 | border-color: $base-input-border-focus-color; 102 | outline: 0; 103 | } 104 | } 105 | optgroup { font-weight: 700; } 106 | 107 | // Buttons 108 | button { 109 | border-radius: 0; 110 | overflow: visible; 111 | text-transform: none; 112 | cursor: pointer; 113 | } 114 | 115 | button, 116 | html [type="button"], 117 | [type="reset"], 118 | [type="submit"] { 119 | -webkit-appearance: button; 120 | border-radius: 0; 121 | } 122 | 123 | button::-moz-focus-inner, 124 | [type="button"]::-moz-focus-inner, 125 | [type="reset"]::-moz-focus-inner, 126 | [type="submit"]::-moz-focus-inner { 127 | border-style: none; 128 | padding: 0; 129 | } 130 | 131 | button:-moz-focusring, 132 | [type="button"]:-moz-focusring, 133 | [type="reset"]:-moz-focusring, 134 | [type="submit"]:-moz-focusring { 135 | outline: 1px dotted ButtonText; 136 | } 137 | 138 | button[disabled], 139 | html input[disabled] { 140 | cursor: not-allowed; 141 | } 142 | 143 | 144 | // Placeholder Colour 145 | input::-webkit-input-placeholder { color: $base-input-placeholder-color; } 146 | input:-moz-placeholder { color: $base-input-placeholder-color; } 147 | input::-moz-placeholder { color: $base-input-placeholder-color; } 148 | input:-ms-input-placeholder { color: $base-input-placeholder-color; } -------------------------------------------------------------------------------- /src/scss/base/_variables.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Variables 3 | // ========================================================================== 4 | 5 | // Global Typography 6 | $base-background-color: #fff !default; 7 | $base-font-family: sans-serif !default; 8 | $base-font-size: 16 !default; 9 | $base-line-height: 22 !default; 10 | $base-font-weight: 400 !default; 11 | $base-font-color: #000 !default; 12 | $base-link-color: #000 !default; 13 | $base-link-hover-color: #000 !default; 14 | 15 | // Headings 16 | $base-heading-font-family: sans-serif !default; 17 | $base-h1-font-size: 32 !default; 18 | $base-h1-line-height: 38 !default; 19 | $base-h1-font-weight: 700 !default; 20 | $base-h1-color: #000 !default; 21 | $base-h2-font-size: 26 !default; 22 | $base-h2-line-height: 32 !default; 23 | $base-h2-font-weight: 700 !default; 24 | $base-h2-color: #000 !default; 25 | $base-h3-font-size: 22 !default; 26 | $base-h3-line-height: 28 !default; 27 | $base-h3-font-weight: 700 !default; 28 | $base-h3-color: #000 !default; 29 | $base-h4-font-size: 18 !default; 30 | $base-h4-line-height: 24 !default; 31 | $base-h4-font-weight: 700 !default; 32 | $base-h4-color: #000 !default; 33 | $base-h5-font-size: 16 !default; 34 | $base-h5-line-height: 22 !default; 35 | $base-h5-font-weight: 700 !default; 36 | $base-h5-color: #000 !default; 37 | $base-h6-font-size: 14 !default; 38 | $base-h6-line-height: 20 !default; 39 | $base-h6-font-weight: 700 !default; 40 | $base-h6-color: #000 !default; 41 | 42 | // Blockquotes 43 | $base-blockquote-font-family: sans-serif !default; 44 | $base-blockquote-font-size: 22 !default; 45 | $base-blockquote-line-height: 28 !default; 46 | 47 | // Code 48 | $base-code-font-family: monospace, monospace !default; 49 | $base-code-font-size: 13 !default; 50 | $base-code-line-height: 18 !default; 51 | $base-code-color: #000 !default; 52 | $base-code-background-color: transparent !default; 53 | $base-code-border-color: #d7d7d7 !default; 54 | 55 | // Forms 56 | $base-input-height: 36px !default; 57 | $base-input-placeholder-color: #999 !default; 58 | $base-input-color: #000 !default; 59 | $base-input-background-color: #fff !default; 60 | $base-input-background-focus-color: #fff !default; 61 | $base-input-border-color: #ccc !default; 62 | $base-input-border-focus-color: #f7c723 !default; 63 | $base-select-box-height: 36px; 64 | 65 | // Grid Containers 66 | $container: 100% !default; 67 | $container-m: 720px !default; 68 | $container-l: 960px !default; 69 | $container-xl: 1120px !default; 70 | 71 | // Grid Gutters 72 | $grid-gutter: 15px !default; 73 | $grid-gutter-m: 15px !default; 74 | $grid-gutter-l: 15px !default; 75 | $grid-gutter-xl: 15px !default; 76 | 77 | // Responsive Breakpoints 78 | $breakpoint-m: ($container-m + 20) !default; 79 | $breakpoint-l: ($container-l + 20) !default; 80 | $breakpoint-xl: ($container-xl + 20) !default; -------------------------------------------------------------------------------- /src/scss/base/_grid.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Mobile-First Grid 3 | // ========================================================================== 4 | 5 | // Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ 6 | .clear:before, .clear:after { content: " "; display: table; } .clear:after { clear: both; } 7 | .row:before, .row:after { content: ""; display: table; } .row:after { clear: both; } 8 | 9 | // Rows 10 | .row { 11 | position: relative; 12 | margin-left: -$grid-gutter; 13 | margin-right: -$grid-gutter; 14 | } 15 | // Medium Device Row 16 | @include breakpoint(m) { 17 | .row-m { 18 | position: relative; 19 | margin-left: -$grid-gutter-m; 20 | margin-right: -$grid-gutter-m; 21 | &:before, &:after { content: ""; display: table; } &:after { clear: both; } 22 | } 23 | .clear-m:before, .clear-m:after { content: ""; display: table; } .clear-m:after { clear: both; } 24 | } 25 | // Large Device Row 26 | @include breakpoint(l) { 27 | .row-l { 28 | position: relative; 29 | margin-left: -$grid-gutter-l; 30 | margin-right: -$grid-gutter-l; 31 | &:before, &:after { content: ""; display: table; } &:after { clear: both; } 32 | } 33 | .clear-l:before, .clear-l:after { content: ""; display: table; } .clear-l:after { clear: both; } 34 | } 35 | // Extra Large Device Row 36 | @include breakpoint(xl) { 37 | .row-xl { 38 | position: relative; 39 | margin-left: -$grid-gutter-xl; 40 | margin-right: -$grid-gutter-xl; 41 | &:before, &:after { content: ""; display: table; } &:after { clear: both; } 42 | } 43 | .clear-xl:before, .clear-xl:after { content: ""; display: table; } .clear-xl:after { clear: both; } 44 | } 45 | 46 | // Container 47 | .container { 48 | padding-left: $grid-gutter; 49 | padding-right: $grid-gutter; 50 | margin-left: auto; 51 | margin-right: auto; 52 | } 53 | .container-full { 54 | padding-left: 0; 55 | padding-right: 0; 56 | margin-left: auto; 57 | margin-right: auto; 58 | } 59 | // Medium Device Container 60 | @include breakpoint(m) { 61 | .container, .container-full { 62 | width: $container-m; 63 | } 64 | .container-m { 65 | width: $container-m; 66 | padding-left: $grid-gutter-m; 67 | padding-right: $grid-gutter-m; 68 | margin-left: auto; 69 | margin-right: auto; 70 | } 71 | .container-full-m { 72 | width: $container-m; 73 | margin-left: auto; 74 | margin-right: auto; 75 | padding-left: 0; 76 | padding-right: 0; 77 | } 78 | } 79 | // Large Device Container 80 | @include breakpoint(l) { 81 | .container, .container-full { 82 | width: $container-l; 83 | } 84 | .container-l { 85 | width: $container-l; 86 | padding-left: $grid-gutter-l; 87 | padding-right: $grid-gutter-l; 88 | margin-left: auto; 89 | margin-right: auto; 90 | } 91 | .container-full-l { 92 | width: $container-l; 93 | margin-left: auto; 94 | margin-right: auto; 95 | padding-left: 0; 96 | padding-right: 0; 97 | } 98 | } 99 | // Extra Large Device Container 100 | @include breakpoint(xl) { 101 | .container, .container-full { 102 | width: $container-xl; 103 | } 104 | .container-xl { 105 | width: $container-xl; 106 | padding-left: $grid-gutter-xl; 107 | padding-right: $grid-gutter-xl; 108 | margin-left: auto; 109 | margin-right: auto; 110 | } 111 | .container-full-xl { 112 | width: $container-xl; 113 | margin-left: auto; 114 | margin-right: auto; 115 | padding-left: 0; 116 | padding-right: 0; 117 | } 118 | } 119 | 120 | // Mobile-first Grid Columns - Global Rules 121 | .col-1, 122 | .col-2, 123 | .col-3, 124 | .col-4, 125 | .col-5, 126 | .col-6, 127 | .col-7, 128 | .col-8, 129 | .col-9, 130 | .col-10, 131 | .col-11, 132 | .col-12, 133 | .col-1-2, 134 | .col-1-3, 135 | .col-2-3, 136 | .col-1-4, 137 | .col-3-4, 138 | .col-1-5, 139 | .col-2-5, 140 | .col-3-5, 141 | .col-4-5 { 142 | padding-left: $grid-gutter; 143 | padding-right: $grid-gutter; 144 | position: relative; 145 | float: left; 146 | } 147 | 148 | // Mobile-first Grid 149 | $columns: 12; 150 | @for $i from 1 through $columns { 151 | .col-#{$i} { 152 | width: ($i / $columns) * 100%; 153 | } 154 | } 155 | .col-1-2 { width: (6 / 12) * 100%; } 156 | .col-1-3 { width: (4 / 12) * 100%; } 157 | .col-2-3 { width: (8 / 12) * 100%; } 158 | .col-1-4 { width: (3 / 12) * 100%; } 159 | .col-3-4 { width: (9 / 12) * 100%; } 160 | .col-1-5 { width: (2.4 / 12) * 100%; } 161 | .col-2-5 { width: (4.8 / 12) * 100%; } 162 | .col-3-5 { width: (7.2 / 12) * 100%; } 163 | .col-4-5 { width: (9.6 / 12) * 100%; } 164 | .col-full { width: 100%; } 165 | 166 | // Mobile Push Offsets 167 | @for $i from 1 through $columns - 1 { 168 | .push-#{$i} { 169 | left: ($i / $columns) * 100%; 170 | } 171 | } 172 | .push-1-2 { left: (6 / 12) * 100%; } 173 | .push-1-3 { left: (4 / 12) * 100%; } 174 | .push-2-3 { left: (8 / 12) * 100%; } 175 | .push-1-4 { left: (3 / 12) * 100%; } 176 | .push-3-4 { left: (9 / 12) * 100%; } 177 | .push-1-5 { left: (2.4 / 12) * 100%; } 178 | .push-2-5 { left: (4.8 / 12) * 100%; } 179 | .push-3-5 { left: (7.2 / 12) * 100%; } 180 | .push-4-5 { left: (9.6 / 12) * 100%; } 181 | 182 | // Mobile Pull Offsets 183 | @for $i from 1 through $columns - 1 { 184 | .pull-#{$i} { 185 | left: -($i / $columns) * 100%; 186 | } 187 | } 188 | .pull-1-2 { left: -(6 / 12) * 100%; } 189 | .pull-1-3 { left: -(4 / 12) * 100%; } 190 | .pull-2-3 { left: -(8 / 12) * 100%; } 191 | .pull-1-4 { left: -(3 / 12) * 100%; } 192 | .pull-3-4 { left: -(9 / 12) * 100%; } 193 | .pull-1-5 { left: -(2.4 / 12) * 100%; } 194 | .pull-2-5 { left: -(4.8 / 12) * 100%; } 195 | .pull-3-5 { left: -(7.2 / 12) * 100%; } 196 | .pull-4-5 { left: -(9.6 / 12) * 100%; } 197 | 198 | 199 | // Medium Device Grid 200 | @include breakpoint(m) { 201 | 202 | // Medium Device Grid Columns - Global Rules 203 | .col-1-m, 204 | .col-2-m, 205 | .col-3-m, 206 | .col-4-m, 207 | .col-5-m, 208 | .col-6-m, 209 | .col-7-m, 210 | .col-8-m, 211 | .col-9-m, 212 | .col-10-m, 213 | .col-11-m, 214 | .col-12-m, 215 | .col-1-2-m, 216 | .col-1-3-m, 217 | .col-2-3-m, 218 | .col-1-4-m, 219 | .col-3-4-m, 220 | .col-1-5-m, 221 | .col-2-5-m, 222 | .col-3-5-m, 223 | .col-4-5-m { 224 | padding-left: $grid-gutter-m; 225 | padding-right: $grid-gutter-m; 226 | position: relative; 227 | float: left; 228 | } 229 | 230 | // Medium Device Grid 231 | $columns: 12; 232 | @for $i from 1 through $columns { 233 | .col-#{$i}-m { 234 | width: ($i / $columns) * 100%; 235 | } 236 | } 237 | .col-1-2-m { width: (6 / 12) * 100%; } 238 | .col-1-3-m { width: (4 / 12) * 100%; } 239 | .col-2-3-m { width: (8 / 12) * 100%; } 240 | .col-1-4-m { width: (3 / 12) * 100%; } 241 | .col-3-4-m { width: (9 / 12) * 100%; } 242 | .col-1-5-m { width: (2.4 / 12) * 100%; } 243 | .col-2-5-m { width: (4.8 / 12) * 100%; } 244 | .col-3-5-m { width: (7.2 / 12) * 100%; } 245 | .col-4-5-m { width: (9.6 / 12) * 100%; } 246 | .col-full-m { width: 100%; } 247 | 248 | // Medium Device Push Offsets 249 | @for $i from 1 through $columns - 1 { 250 | .push-#{$i}-m { 251 | left: ($i / $columns) * 100%; 252 | } 253 | } 254 | .push-1-2-m { left: (6 / 12) * 100%; } 255 | .push-1-3-m { left: (4 / 12) * 100%; } 256 | .push-2-3-m { left: (8 / 12) * 100%; } 257 | .push-1-4-m { left: (3 / 12) * 100%; } 258 | .push-3-4-m { left: (9 / 12) * 100%; } 259 | .push-1-5-m { left: (2.4 / 12) * 100%; } 260 | .push-2-5-m { left: (4.8 / 12) * 100%; } 261 | .push-3-5-m { left: (7.2 / 12) * 100%; } 262 | .push-4-5-m { left: (9.6 / 12) * 100%; } 263 | 264 | // Medium Device Pull Offsets 265 | @for $i from 1 through $columns - 1 { 266 | .pull-#{$i}-m { 267 | left: -($i / $columns) * 100%; 268 | } 269 | } 270 | .pull-1-2-m { left: -(6 / 12) * 100%; } 271 | .pull-1-3-m { left: -(4 / 12) * 100%; } 272 | .pull-2-3-m { left: -(8 / 12) * 100%; } 273 | .pull-1-4-m { left: -(3 / 12) * 100%; } 274 | .pull-3-4-m { left: -(9 / 12) * 100%; } 275 | .pull-1-5-m { left: -(2.4 / 12) * 100%; } 276 | .pull-2-5-m { left: -(4.8 / 12) * 100%; } 277 | .pull-3-5-m { left: -(7.2 / 12) * 100%; } 278 | .pull-4-5-m { left: -(9.6 / 12) * 100%; } 279 | 280 | } 281 | 282 | // Large Device Grid 283 | @include breakpoint(l) { 284 | 285 | // Large Device Grid Columns - Global Rules 286 | .col-1-l, 287 | .col-2-l, 288 | .col-3-l, 289 | .col-4-l, 290 | .col-5-l, 291 | .col-6-l, 292 | .col-7-l, 293 | .col-8-l, 294 | .col-9-l, 295 | .col-10-l, 296 | .col-11-l, 297 | .col-12-l, 298 | .col-1-2-l, 299 | .col-1-3-l, 300 | .col-2-3-l, 301 | .col-1-4-l, 302 | .col-3-4-l, 303 | .col-1-5-l, 304 | .col-2-5-l, 305 | .col-3-5-l, 306 | .col-4-5-l { 307 | padding-left: $grid-gutter-l; 308 | padding-right: $grid-gutter-l; 309 | position: relative; 310 | float: left; 311 | } 312 | 313 | // Large Device Grid 314 | $columns: 12; 315 | @for $i from 1 through $columns { 316 | .col-#{$i}-l { 317 | width: ($i / $columns) * 100%; 318 | } 319 | } 320 | .col-1-2-l { width: (6 / 12) * 100%; } 321 | .col-1-3-l { width: (4 / 12) * 100%; } 322 | .col-2-3-l { width: (8 / 12) * 100%; } 323 | .col-1-4-l { width: (3 / 12) * 100%; } 324 | .col-3-4-l { width: (9 / 12) * 100%; } 325 | .col-1-5-l { width: (2.4 / 12) * 100%; } 326 | .col-2-5-l { width: (4.8 / 12) * 100%; } 327 | .col-3-5-l { width: (7.2 / 12) * 100%; } 328 | .col-4-5-l { width: (9.6 / 12) * 100%; } 329 | .col-full-l { width: 100%; } 330 | 331 | // Large Device Push Offsets 332 | @for $i from 1 through $columns - 1 { 333 | .push-#{$i}-l { 334 | left: ($i / $columns) * 100%; 335 | } 336 | } 337 | .push-1-2-l { left: (6 / 12) * 100%; } 338 | .push-1-3-l { left: (4 / 12) * 100%; } 339 | .push-2-3-l { left: (8 / 12) * 100%; } 340 | .push-1-4-l { left: (3 / 12) * 100%; } 341 | .push-3-4-l { left: (9 / 12) * 100%; } 342 | .push-1-5-l { left: (2.4 / 12) * 100%; } 343 | .push-2-5-l { left: (4.8 / 12) * 100%; } 344 | .push-3-5-l { left: (7.2 / 12) * 100%; } 345 | .push-4-5-l { left: (9.6 / 12) * 100%; } 346 | 347 | // Large Device Pull Offsets 348 | @for $i from 1 through $columns - 1 { 349 | .pull-#{$i}-l { 350 | left: -($i / $columns) * 100%; 351 | } 352 | } 353 | .pull-1-2-l { left: -(6 / 12) * 100%; } 354 | .pull-1-3-l { left: -(4 / 12) * 100%; } 355 | .pull-2-3-l { left: -(8 / 12) * 100%; } 356 | .pull-1-4-l { left: -(3 / 12) * 100%; } 357 | .pull-3-4-l { left: -(9 / 12) * 100%; } 358 | .pull-1-5-l { left: -(2.4 / 12) * 100%; } 359 | .pull-2-5-l { left: -(4.8 / 12) * 100%; } 360 | .pull-3-5-l { left: -(7.2 / 12) * 100%; } 361 | .pull-4-5-l { left: -(9.6 / 12) * 100%; } 362 | 363 | } 364 | 365 | // Extra Large Device Grid 366 | @include breakpoint(xl) { 367 | 368 | // Extra Large Device Grid Columns - Global Rules 369 | .col-1-xl, 370 | .col-2-xl, 371 | .col-3-xl, 372 | .col-4-xl, 373 | .col-5-xl, 374 | .col-6-xl, 375 | .col-7-xl, 376 | .col-8-xl, 377 | .col-9-xl, 378 | .col-10-xl, 379 | .col-11-xl, 380 | .col-12-xl, 381 | .col-1-2-xl, 382 | .col-1-3-xl, 383 | .col-2-3-xl, 384 | .col-1-4-xl, 385 | .col-3-4-xl, 386 | .col-1-5-xl, 387 | .col-2-5-xl, 388 | .col-3-5-xl, 389 | .col-4-5-xl { 390 | padding-left: $grid-gutter-xl; 391 | padding-right: $grid-gutter-xl; 392 | position: relative; 393 | float: left; 394 | } 395 | 396 | // Extra Large Device Grid 397 | $columns: 12; 398 | @for $i from 1 through $columns { 399 | .col-#{$i}-xl { 400 | width: ($i / $columns) * 100%; 401 | } 402 | } 403 | .col-1-2-xl { width: (6 / 12) * 100%; } 404 | .col-1-3-xl { width: (4 / 12) * 100%; } 405 | .col-2-3-xl { width: (8 / 12) * 100%; } 406 | .col-1-4-xl { width: (3 / 12) * 100%; } 407 | .col-3-4-xl { width: (9 / 12) * 100%; } 408 | .col-1-5-xl { width: (2.4 / 12) * 100%; } 409 | .col-2-5-xl { width: (4.8 / 12) * 100%; } 410 | .col-3-5-xl { width: (7.2 / 12) * 100%; } 411 | .col-4-5-xl { width: (9.6 / 12) * 100%; } 412 | .col-full-xl { width: 100%; } 413 | 414 | // Extra Large Device Push Offsets 415 | @for $i from 1 through $columns - 1 { 416 | .push-#{$i}-xl { 417 | left: ($i / $columns) * 100%; 418 | } 419 | } 420 | .push-1-2-xl { left: (6 / 12) * 100%; } 421 | .push-1-3-xl { left: (4 / 12) * 100%; } 422 | .push-2-3-xl { left: (8 / 12) * 100%; } 423 | .push-1-4-xl { left: (3 / 12) * 100%; } 424 | .push-3-4-xl { left: (9 / 12) * 100%; } 425 | .push-1-5-xl { left: (2.4 / 12) * 100%; } 426 | .push-2-5-xl { left: (4.8 / 12) * 100%; } 427 | .push-3-5-xl { left: (7.2 / 12) * 100%; } 428 | .push-4-5-xl { left: (9.6 / 12) * 100%; } 429 | 430 | // Extra Large Device Pull Offsets 431 | @for $i from 1 through $columns - 1 { 432 | .pull-#{$i}-xl { 433 | left: -($i / $columns) * 100%; 434 | } 435 | } 436 | .pull-1-2-xl { left: -(6 / 12) * 100%; } 437 | .pull-1-3-xl { left: -(4 / 12) * 100%; } 438 | .pull-2-3-xl { left: -(8 / 12) * 100%; } 439 | .pull-1-4-xl { left: -(3 / 12) * 100%; } 440 | .pull-3-4-xl { left: -(9 / 12) * 100%; } 441 | .pull-1-5-xl { left: -(2.4 / 12) * 100%; } 442 | .pull-2-5-xl { left: -(4.8 / 12) * 100%; } 443 | .pull-3-5-xl { left: -(7.2 / 12) * 100%; } 444 | .pull-4-5-xl { left: -(9.6 / 12) * 100%; } 445 | 446 | } -------------------------------------------------------------------------------- /changelog.markdown: -------------------------------------------------------------------------------- 1 | # Base 2 Change Log 2 | 3 | 4 | ## [3.1.5] - 2016-07-02 5 | ### Base V3.1.5 6 | - Fixed IE bug with placeholder color override 7 | - Version bump for style.scss, package.json and bower.json 8 | 9 | 10 | ## [3.1.4] - 2016-07-02 11 | ### Base V3.1.4 12 | - Removed rounded corners on buttons and inputs for Safari 13 | - Corrected .row-m, .row-l, .row-xl bug in grid.scss 14 | - Version bump for style.scss, package.json and bower.json 15 | 16 | 17 | ## [3.1.3] - 2016-06-18 18 | ### Base V3.1.3 19 | - Updated animate mixin to animation 20 | - Updated .animate and .animate-delay helpers to animation and animation-delay 21 | - Added arrow mixin 22 | - Version bump for style.scss, package.json and bower.json 23 | 24 | 25 | ## [3.1.2] - 2016-06-17 26 | ### Base V3.1.2 27 | - Updated styles.scss 28 | - Version bump for style.scss, package.json and bower.json 29 | 30 | 31 | ## [3.1.1] - 2016-06-17 32 | ### Base V3.1.1 33 | - Cleaned up styles.scss 34 | - Removed overflow hidden on pretty select (.select) 35 | - Version bump for style.scss, package.json and bower.json 36 | 37 | 38 | ## [3.1.0] - 2016-06-17 39 | ### Base V3.1.0 40 | - Cleaned up vendor prefixes on .button 41 | - Added variables to custom select 42 | - Cleaned up font-weight variables 43 | - Added flex helpers for medium, large and extra large devices 44 | - Added clearfix for medium, large and extra large devices 45 | - Removed Styleguide 46 | - Minor update in SCSS structure 47 | - Moved _helpers.scss into styles.scss 48 | - Updated default jQuery version to 1.12.4 49 | - Version bump for style.scss, package.json and bower.json 50 | 51 | 52 | ## [3.0.2] - 2016-05-21 53 | ### Base V3.0.2 54 | - Minor update to variable names for consistency ($base-link-color-hover to $base-link-hover-color, $base-input-background-color-focus to $base-input-background-focus-color and $base-input-border-color-focus to $base-input-border-focus-color) 55 | - Removed image position helpers img-left and img-right as grid can be used 56 | - Fixed issue where buttons would have rounded corners on Safari and small clean up with vendor prefixes in _forms.scss 57 | - Added clearfix rules to .row-m, .row-l, .row-xl 58 | - Added push/pull classes for .push-1-2-xl, .pull-1-2-xl, .push-1-3-xl, .pull-1-3-xl, .push-2-3-xl, .pull-2-3-xl, .push-1-4-xl, .pull-1-4-xl, .push-3-4-xl, .pull-3-4-xl, .push-1-5-xl, .pull-1-5-xl, .push-2-5-xl, .pull-2-5-xl, .push-3-5-xl, .pull-3-5-xl, .push-4-5-xl, .pull-4-5-xl 59 | - Version bump for style.scss, package.json and bower.json 60 | 61 | 62 | ## [3.0.1] - 2016-05-15 63 | ### Base V3.0.1 64 | - Minor tweak to readme 65 | - Version bump for style.scss, package.json and bower.json 66 | 67 | 68 | ## [3.0.0] - 2016-05-15 69 | ### Base V3.0.0 70 | - Refactored base to use normalize v4.1.1 71 | - Updated default jQuery version to 1.12.3 72 | - Added more variables for general hover and focus states, form elements and more 73 | - Updated default typography and headings 74 | - Updated favicons 75 | - Added new font-size helpers (.fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6) which are based off the h1 - h6 font sizes respectively 76 | - Added styleguide 77 | - Refactored grid to use new names ( .col-# [mobile first], .col-#-m [medium devices], .col-#-l [large devices], .col-#-xl [hd devices] ) 78 | - Added new grid columns (1-2, 1-3, 2-3, 1-4, 3-4, 1-5, 2-5, 3-5, 4-5) for all devices 79 | - Updated favicons 80 | - Refactored and cleaned up mixins file 81 | - Added gulp source maps for CSS 82 | - Added gulp plugin to base64 encode SVG images 83 | - Added clean task to gulpfile.js 84 | - Version bump package.json and bower.json 85 | - Updated travis.yml to use a more stable version of Node 86 | - Updated readme and changelog 87 | - Version bump for style.scss 88 | 89 | 90 | ## [2.8.3] - 2016-03-23 91 | ### Base V2.8.3 92 | - Refactored custom select to be more accessible (focus state) 93 | - Added new variables for field borders colours (standard and focus states) and new variable for field colour 94 | - Minor cleanup in gulpfile.js 95 | - Version bump package.json and bower.json 96 | - Version bump style.less/style.scss 97 | 98 | 99 | ## [2.8.2] - 2016-03-05 100 | ### Base V2.8.2 101 | - Updated package.json and published getbase to NPM package 102 | - Version bump package.json and bower.json 103 | - Version bump style.less/style.scss 104 | 105 | 106 | ## [2.8.1] - 2016-02-28 107 | ### Base V2.8.1 108 | - Added position helpers for tablet, desktop and HD devices 109 | - Version bump package.json and bower.json 110 | - Version bump style.less/style.scss 111 | 112 | 113 | ## [2.8.0] - 2016-02-02 114 | ### Base V2.8.0 115 | - Cleaned up duplicate variables in _variables.scss 116 | - Updated .travis.tml file to use Node 4 LTS 117 | - Added Autoprefixer to handle vendor prefixes 118 | - Cleaned up _mixins.less/_mixins.scss as Autoprefixer handles vendor prefixing 119 | - Cleaned up _animations.less/_animations.scss as Autoprefixer handles vendor prefixing 120 | - Updated .img-responsive helper to .img-fluid 121 | - Added new row helpers (.row-top-x and .row-bottom-x) 122 | - Added !default to all variables to support overrides (_variables.scss) 123 | - Version bump package.json and bower.json 124 | - Version bump style.less/style.scss 125 | - Minor update on .gitignore 126 | 127 | 128 | ## [2.7.2] - 2015-12-15 129 | ### Base V2.7.2 130 | - Added new variable for gutter spacing for mobile, tablet, desktop and HD 131 | - Minor update to .travis.yml file 132 | - Version bump package.json and bower.json 133 | - Version bump style.less/style.scss 134 | 135 | 136 | ## [2.7.1] - 2015-12-02 137 | ### Base V2.7.1 138 | - Added input[number] to _forms.less/_forms.scss 139 | - Removed Mozilla specific styling on input fields for Firefox 140 | - Minor update to .travis.yml file 141 | - Version bump package.json and bower.json 142 | - Version bump style.less/style.scss 143 | 144 | 145 | ## [2.7.0] - 2015-12-01 146 | ### Base V2.7.0 147 | - Fixed broken input[radio] and input[checkbox] styles 148 | - Version bump package.json and bower.json 149 | - Version bump style.less/style.scss 150 | 151 | 152 | ## [2.6.9] - 2015-11-30 153 | ### Base V2.6.9 154 | - Removed .input helper in _forms.less/_forms.scss as there is already a .field helper which does the same 155 | - Removed iOS styling on all input fields excluding input checkbox and radio 156 | - Version bump package.json and bower.json 157 | - Version bump style.less/style.scss 158 | 159 | 160 | ## [2.6.8] - 2015-11-20 161 | ### Base V2.6.8 162 | - Added .flex helper in _helpers.less/_helpers.scss 163 | - Added basic styling for `select` elements to be consistent with other form elements in _forms.less/_forms.scss 164 | - Updated .svg-fill mixin to cater for no fill scenario (_mixins.less) 165 | - Version bump package.json and bower.json 166 | - Version bump style.less/style.scss 167 | 168 | 169 | ## [2.6.7] - 2015-11-18 170 | ### Base V2.6.7 171 | - Added float helpers for tablet, desktop and HD devices in _helpers.less/_helpers.scss 172 | - Removed _minimal-grid.less (general house cleaning) 173 | - Version bump package.json and bower.json 174 | - Version bump style.less/style.scss 175 | 176 | 177 | ## [2.6.6] - 2015-11-13 178 | ### Base V2.6.6 179 | - Updated font-weight variables to memorable names in _variables.less/_variables.scss 180 | - Updated .font-weight helpers to memorable names in _helpers.less/_helpers.scss 181 | - Version bump package.json and bower.json 182 | - Version bump style.less/style.scss 183 | 184 | 185 | ## [2.6.5] - 2015-11-12 186 | ### Base V2.6.5 187 | - Added flexbox helpers to _helpers.less/_helpers.scss 188 | - Version bump package.json and bower.json 189 | - Version bump style.less/style.scss 190 | 191 | 192 | ## [2.6.4] - 2015-11-09 193 | ### Base V2.6.4 194 | - Updated .no-select placement and removed misleading comment in _helpers.less/_helpers.scss 195 | - Version bump package.json and bower.json 196 | - Version bump style.less/style.scss 197 | 198 | 199 | ## [2.6.3] - 2015-11-09 200 | ### Base V2.6.3 201 | - Updated grid reset helpers .no-col-tablet, .no-col-desktop, .no-col-hd, .no-col-print within _helpers.less/_helpers.scss 202 | - Added new reset helper for select boxes (.no-select) 203 | - Version bump package.json and bower.json 204 | - Version bump style.less/style.scss 205 | 206 | 207 | ## [2.6.2] - 2015-11-08 208 | ### Base V2.6.2 209 | - Minor typo fix on _animations.less/_animations.scss 210 | - Moved .no-push, .no-pull helpers into _helpers.less/_helpers.scss 211 | - Added .no-push-print, .no-pull-print into _helpers.less/_helpers.scss 212 | - Added grid reset helpers .col-none-tablet, .col-none-desktop, .col-none-hd, .col-none-print within _helpers.less/_helpers.scss 213 | - Version bump package.json and bower.json 214 | - Version bump style.less/style.scss 215 | 216 | 217 | ## [2.6.1] - 2015-10-23 218 | ### Base V2.6.1 219 | - Minor update on GulpJS file to cater for sub directories for build and watch tasks 220 | - Version bump package.json 221 | - Version bump style.less/style.scss 222 | 223 | 224 | ## [2.6.0] - 2015-10-23 225 | ### Base V2.6.0 226 | - Updated readme.markdown 227 | - Updated favicons 228 | - Updated Google Analytics snippet 229 | - Added bower.json file 230 | - Minor tweak on .travis build script 231 | - Version bump package.json 232 | - Version bump style.less/style.scss 233 | 234 | 235 | ## [2.5.5] - 2015-10-21 236 | ### Base V2.5.5 237 | - Updated naming conventions for print helpers 238 | - Moved print helpers within _helpers.less/_helpers.scss 239 | - Added new print helpers for text alignment and display types 240 | - Version bump package.json 241 | - Version bump style.less/style.scss 242 | 243 | 244 | ## [2.5.4] - 2015-10-21 245 | ### Base V2.5.4 246 | - Updated display type helpers naming to be more consistent (tablet, desktop and HD) 247 | - Added .fixed position helper to _helpers.less/_helpers.scss 248 | - Version bump package.json 249 | - Version bump style.less/style.scss 250 | 251 | 252 | ## [2.5.3] - 2015-10-19 253 | ### Base V2.5.3 254 | - Fixed broken .svg-fill mixin in _mixins.less 255 | - Version bump package.json 256 | - Version bump style.less/style.scss 257 | 258 | 259 | ## [2.5.2] - 2015-10-18 260 | ### Base V2.5.2 261 | - Added .fixed and .img-responsive helpers to _helpers.less/_helpers.scss 262 | - Added watch for HTML changes in the GulpJS config for browserSync 263 | - Version bump package.json 264 | - Version bump style.less/style.scss 265 | 266 | 267 | ## [2.5.1] - 2015-10-16 268 | ### Base V2.5.1 269 | - Added `input[password]` to _forms.less/_forms.scss 270 | - Moved _helpers.less/_helpers.scss after the _grid includes 271 | - Version bump package.json 272 | - Version bump style.less/style.scss 273 | 274 | 275 | ## [2.5.0] - 2015-10-15 276 | ### Base V2.5.0 277 | - Major updates on variable names for tablet, desktop and hd containers + breakpoints (_variables.less/_variables.scss) 278 | - Major updates on column names, push and pull classes for tablet, desktop + hd (_grid.less/_grid.scss) 279 | - Moved helpers from _grid.less/_grid.scss to _helpers.less/_helpers.scss 280 | - Deleted _minimial-grid.less/_minimial-grid.scss 281 | - Updated _helpers file with new tablet, desktop and hd helpers (fixes bug #51) 282 | - Version bump package.json 283 | - Version bump style.less/style.scss 284 | 285 | 286 | ## [2.4.2] - 2015-10-14 287 | ### Base V2.4.2 288 | - Added `dist` folder 289 | - Updated GulpJS file to distribute updated files (ready for production) to a `dist` folder 290 | - Added Gulp task (movecss) to move compiled CSS into the `dist` folder 291 | - Updated Gulp build task 292 | - Minor updates on index.html: removed .no-js class and added reference to default.js (thanks to Michał Roszka for raising bug #50) 293 | - Version bump package.json 294 | - Version bump style.less/style.scss 295 | 296 | 297 | ## [2.4.1] - 2015-09-25 298 | ### Base V2.4.1 299 | - Updated GulpJS file to include JS minification 300 | - Added compiled JS files 301 | - Added minified images 302 | - Version bump package.json 303 | - Version bump style.less/style.scss 304 | 305 | 306 | ## [2.4.0] - 2015-09-25 307 | ### Base V2.4.0 308 | - Updated GulpJS file to include browserSync (live reload), image compression and an option to embed scripts, CSS or images inline 309 | - Added `src` folder 310 | - Moved LESS/SCSS, JS, images and index.html into `src` folder 311 | - Added compiled LESS/SCSS file (style.css) 312 | - Added compiled index.html file 313 | - Version bump package.json 314 | - Version bump style.less/style.scss 315 | 316 | 317 | ## [2.3.7] - 2015-09-01 318 | ### Base V2.3.7 319 | - Removed input specific on placeholders in _forms.less/_forms.scss 320 | - Version bump package.json 321 | - Version bump style.less/style.scss 322 | 323 | 324 | ## [2.3.6] - 2015-08-19 325 | ### Base V2.3.6 326 | - Added input[type=date] in _forms.less/_forms.scss 327 | - Added new variable @base-placeholder-color for forms in _variables.less/_variables.scss 328 | - Added styles for default placeholder colour in _forms.less/_forms.scss 329 | - Version bump package.json 330 | - Version bump style.less/style.scss 331 | 332 | 333 | ## [2.3.5] - 2015-08-01 334 | ### Base V2.3.5 335 | - Fixed :active state on custom buttons in _assets.less/_assets.scss 336 | - Version bump package.json 337 | - Version bump style.less/style.scss 338 | - Added minor comment to gulpfile.js 339 | 340 | 341 | ## [2.3.4] - 2015-07-15 342 | ### Base V2.3.4 343 | - Added display helpers for _print.less/_print.scss 344 | - Version bump package.json 345 | - Version bump style.less/style.scss 346 | 347 | 348 | ## [2.3.3] - 2015-07-13 349 | ### Base V2.3.3 350 | - Updated input[type=phone] to input[type=tel] in _forms.less/_forms.scss 351 | - Version bump package.json 352 | - Version bump style.less/style.scss 353 | 354 | 355 | ## [2.3.2] - 2015-07-13 356 | ### Base V2.3.2 357 | - Updated tablet @media breakpoint 358 | - Version bump package.json 359 | - Version bump style.less/style.scss 360 | 361 | 362 | ## [2.3.1] - 2015-07-13 363 | ### Base V2.3.1 364 | - Fixed custom select (.select) issue in IE9+ 365 | - Version bump package.json 366 | - Version bump style.less/style.scss 367 | 368 | 369 | ## [2.3.0] - 2015-07-12 370 | ### Base V2.3.0 371 | - Moved custom buttons and custom select from _helpers.less/_helpers.scss into _assets.less/_assets.scss 372 | - Version bump package.json 373 | - Version bump style.less/style.scss 374 | - Updated index.html template 375 | - Removed ie.min.js and modernizr.min.js 376 | - Updated to latest jQuery 377 | - Minor updates to the changelog.markdown 378 | 379 | 380 | ## [2.2.0] - 2015-07-10 381 | ### Base V2.2.0 382 | - Added SCSS Support! 383 | - Updated Gulpfile to support SCSS compiling 384 | - Minor updates on package.json 385 | - Minor syntax updates on _mixins.less 386 | - Minor version bump the style.less file 387 | - Minor updates to changelog 388 | 389 | 390 | ## [2.1.3] - 2015-07-07 391 | ### Base V2.1.3 392 | - Added .svg-fill() mixin for applying a custom fill colour to SVG images (embeds images within CSS too!) - See: 393 | http://zslabs.com/articles/svg-background-fill/#update-2 394 | - Minor version bump the style.less file 395 | 396 | 397 | ## [2.1.2] - 2015-06-12 398 | ### Base V2.1.2 399 | - Added container-full for tablet, desktop and HD (_grid.less and _minimal-grid.less) 400 | - Updated container widths for desktop and HD responsive breakpoints 401 | - Minor version bump the style.less file 402 | 403 | 404 | ## [2.1.1] - 2015-06-10 405 | ### Base V2.1.1 406 | - Added transition delay mixin 407 | - Minor version bump the style.less file 408 | 409 | 410 | ## [2.1.0] - 2015-06-05 411 | ### Base V2.1.0 412 | - Added transition mixin 413 | - Added default font family to headings 414 | - Updated variables to include font family for blockquotes 415 | - Added default blockquote font family from variable 416 | - Updated _animations.less 417 | - Minor version bump the style.less file 418 | 419 | 420 | ## [2.0.9] - 2015-06-03 421 | ### Base V2.0.9 422 | - Updated minimal grid 423 | - Changed default grid from minimal to full featured grid 424 | - Minor version bump the style.less file 425 | 426 | 427 | ## [2.0.8] - 2015-06-02 428 | ### Base V2.0.8 429 | - Added push and pull resets for tablet, desktop and hd devices 430 | - Minor version bump the style.less file 431 | 432 | 433 | ## [2.0.7] - 2015-05-27 434 | ### Base V2.0.7 435 | - Added minimal grid version 436 | - Minor updates to readme.markdown and package.json (links) 437 | - Minor version bump the style.less file 438 | 439 | 440 | ## [2.0.6] - 2015-05-21 441 | ### Base V2.0.6 442 | - Cleaned up animations 443 | - Minor version bump the style.less file 444 | 445 | 446 | ## [2.0.5] - 2015-04-18 447 | ### Base V2.0.5 448 | - Added animation helper 449 | - Added more zoom animations 450 | - Added new .none helper (display: none;) 451 | - Minor version bump the style.less file 452 | 453 | 454 | ## [2.0.4] - 2015-04-17 455 | ### Base V2.0.4 456 | - Added animation-delay mixin 457 | - Removed default font of 'Montserrat' in _variables.less 458 | - Minor version bump the style.less file 459 | 460 | 461 | ## [2.0.3] - 2015-04-17 462 | ### Base V2.0.3 463 | - Added animation mixins 464 | - Added animations (thanks to [animate.css](http://daneden.github.io/animate.css/) by Daniel Eden) 465 | - animations/_bounce.less 466 | - animations/_fade.less 467 | - animations/_flip.less 468 | - animations/_zoom.less 469 | - Added animation mixin 470 | - Added animation helper for infinite loops 471 | - Minor updates on readme 472 | - Added changelog.markdown 473 | - Removed .htaccess file 474 | - Updated package.json to include a newer version of LESS (v3) 475 | - Updated .gitignore to ignore node_modules 476 | - Minor version bump the style.less file 477 | 478 | 479 | ## [2.0.2] - 2015-03-27 480 | ### Base V2.0.2 481 | - Minor updates on readme 482 | - Minor version bump the LESS file 483 | - Updated package.json with latest dependencies 484 | 485 | 486 | ## [2.0.1] - 2015-03-27 487 | ### Base V2.0.1 488 | - Added .travis.yml file for build tests 489 | - Added build test to gulp file 490 | - Updated readme with links to the old Base (v1) and added travis build 491 | - Minor version bump the LESS file 492 | 493 | 494 | ## [2.0.0] - 2015-03-25 495 | ### Base V2.0.0 496 | - Re-wrote grid to be mobile-first and added HD viewport 497 | - Dropped support for IE7 498 | - Added gulpfile.js for compiling LESS 499 | - Minor updates on Favicons 500 | - Updated index.html template with latest jQuery -------------------------------------------------------------------------------- /src/scss/base/_helpers.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base – Helpers 3 | // ========================================================================== 4 | 5 | // General Resets 6 | .no-margin { margin: 0; } 7 | .no-padding { padding: 0; } 8 | .no-float { float: none; } 9 | .no-background { background: transparent; } 10 | .no-border { border: 0; } 11 | .no-select { 12 | -webkit-user-select: none; 13 | -moz-user-select: none; 14 | -ms-user-select: none; 15 | user-select: none; 16 | cursor: default; 17 | } 18 | 19 | // Font Weights 20 | .font-100 { font-weight: 100; } 21 | .font-200 { font-weight: 200; } 22 | .font-300 { font-weight: 300; } 23 | .font-400 { font-weight: 400; } 24 | .font-500 { font-weight: 500; } 25 | .font-600 { font-weight: 600; } 26 | .font-700 { font-weight: 700; } 27 | .font-800 { font-weight: 800; } 28 | .font-900 { font-weight: 900; } 29 | 30 | // Font Styles 31 | .font-normal { font-style: normal; } 32 | .font-italic { font-style: italic; } 33 | 34 | // Text Modifications 35 | .uppercase { text-transform: uppercase; } 36 | .lowercase { text-transform: lowercase; } 37 | .capitalize { text-transform: capitalize; } 38 | 39 | // Text Alignments 40 | .text-left { text-align: left; } 41 | .text-right { text-align: right; } 42 | .text-center { text-align: center; } 43 | .text-justify { text-align: justify; } 44 | 45 | // Positions 46 | .relative { position: relative; } 47 | .absolute { position: absolute; } 48 | .static { position: static; } 49 | .fixed { position: fixed; } 50 | 51 | // Display Types 52 | .none { display: none; } 53 | .block { display: block; } 54 | .inline-block { display: inline-block; } 55 | .inline { display: inline; } 56 | 57 | // Flex Types 58 | .flex { display: flex; } 59 | .flex-row { flex-direction: row; } 60 | .flex-column { flex-direction: column; } 61 | .flex-space-around { justify-content: space-around; } 62 | .flex-space-between { justify-content: space-between; } 63 | .flex-start { justify-content: flex-start; } 64 | .flex-center { justify-content: center; } 65 | .flex-end { justify-content: flex-end; } 66 | .flex-wrap { flex-wrap: wrap; } 67 | .flex-nowrap { flex-wrap: nowrap; } 68 | 69 | // Floats 70 | .left { float: left; } 71 | .right { float: right; } 72 | 73 | // Alignment 74 | .center { 75 | float: none; 76 | margin-left: auto; 77 | margin-right: auto; 78 | } 79 | 80 | // Padding Helpers 81 | .pad-top-5 { padding-top: 5px; } 82 | .pad-top-10 { padding-top: 10px; } 83 | .pad-top-15 { padding-top: 15px; } 84 | .pad-top-20 { padding-top: 20px; } 85 | .pad-top-25 { padding-top: 25px; } 86 | .pad-top-30 { padding-top: 30px; } 87 | .pad-top-35 { padding-top: 35px; } 88 | .pad-top-40 { padding-top: 40px; } 89 | .pad-top-45 { padding-top: 45px; } 90 | .pad-top-50 { padding-top: 50px; } 91 | .pad-top-55 { padding-top: 55px; } 92 | .pad-top-60 { padding-top: 60px; } 93 | .pad-bottom-5 { padding-bottom: 5px; } 94 | .pad-bottom-10 { padding-bottom: 10px; } 95 | .pad-bottom-15 { padding-bottom: 15px; } 96 | .pad-bottom-20 { padding-bottom: 20px; } 97 | .pad-bottom-25 { padding-bottom: 25px; } 98 | .pad-bottom-30 { padding-bottom: 30px; } 99 | .pad-bottom-35 { padding-bottom: 35px; } 100 | .pad-bottom-40 { padding-bottom: 40px; } 101 | .pad-bottom-45 { padding-bottom: 45px; } 102 | .pad-bottom-50 { padding-bottom: 50px; } 103 | .pad-bottom-55 { padding-bottom: 55px; } 104 | .pad-bottom-60 { padding-bottom: 60px; } 105 | .pad-5 { padding: 5px; } 106 | .pad-10 { padding: 10px; } 107 | .pad-15 { padding: 15px; } 108 | .pad-20 { padding: 20px; } 109 | .pad-25 { padding: 25px; } 110 | .pad-30 { padding: 30px; } 111 | .pad-35 { padding: 35px; } 112 | .pad-40 { padding: 40px; } 113 | .pad-45 { padding: 45px; } 114 | .pad-50 { padding: 50px; } 115 | .pad-55 { padding: 55px; } 116 | .pad-60 { padding: 60px; } 117 | 118 | // Hide only visually, but have it available for screenreaders: : h5bp.com/v 119 | .sr { 120 | border: 0; 121 | clip: rect(0 0 0 0); 122 | height: 1px; 123 | margin: -1px; 124 | overflow: hidden; 125 | padding: 0; 126 | position: absolute; 127 | width: 1px; 128 | } 129 | 130 | // Lists 131 | .list-unstyled { 132 | list-style: none; 133 | margin: 0; 134 | padding: 0; 135 | li { 136 | margin: 0; 137 | padding: 0; 138 | } 139 | } 140 | .list-inline { 141 | list-style: none; 142 | margin: 0; 143 | padding: 0; 144 | li { 145 | margin: 0; 146 | padding: 0; 147 | display: inline-block; 148 | } 149 | } 150 | 151 | // Images 152 | .img-fluid { max-width: 100%; } 153 | 154 | // Form 155 | .field { width: 100%; } 156 | 157 | // Grouped Form Fields 158 | .form-group { 159 | overflow: hidden; 160 | label { 161 | display: inline-block; 162 | padding-top: 8px; 163 | } 164 | } 165 | 166 | // Disable Element 167 | .disabled, [disabled] { 168 | pointer-events: none; 169 | cursor: not-allowed; 170 | opacity: .5; 171 | } 172 | 173 | // Checkbox and Radio 174 | .checkbox, 175 | .radio { 176 | display: inline-block; 177 | position: relative; 178 | label { 179 | padding-left: 20px; 180 | padding-top: 0; 181 | display: inline-block; 182 | } 183 | input[type="checkbox"], 184 | input[type="radio"] { 185 | position: absolute; 186 | top: 4px; 187 | left: 0; 188 | } 189 | } 190 | 191 | // Pretty Select 192 | .select { 193 | position: relative; 194 | display: block; 195 | &:before { 196 | content: ""; 197 | border: 6px solid transparent; 198 | border-top-color: #676767; 199 | top: 50%; 200 | right: 10px; 201 | margin-top: -3px; 202 | pointer-events: none; 203 | position: absolute; 204 | } 205 | select { 206 | -webkit-appearance: none; 207 | -moz-appearance: none; 208 | height: $base-select-box-height; 209 | width: 100%; 210 | padding: 0 10px; 211 | line-height: normal; 212 | border: 1px solid $base-input-border-color; 213 | background: $base-input-background-color; 214 | display: block; 215 | } 216 | select::-ms-expand { 217 | display: none; 218 | } 219 | select:focus { border-color: $base-input-border-focus-color; } 220 | select:-moz-focusring { 221 | color: transparent; 222 | text-shadow: 0 0 0 $base-input-color; 223 | border-color: $base-input-border-focus-color; 224 | } 225 | } 226 | 227 | // Animations 228 | .animation { @include animation(1s); } 229 | .animation-infinite { 230 | -webkit-animation-iteration-count: infinite; 231 | animation-iteration-count: infinite; 232 | } 233 | 234 | // Tablet Helpers 235 | @include breakpoint(m) { 236 | 237 | // General Resets 238 | .no-float-m { float: none; } 239 | .no-padding-m { padding: 0; } 240 | .no-margin-m { margin: 0; } 241 | 242 | // Positions 243 | .relative-m { position: relative; } 244 | .absolute-m { position: absolute; } 245 | .static-m { position: static; } 246 | .fixed-m { position: fixed; } 247 | 248 | // Display Types 249 | .none-m { display: none; } 250 | .block-m { display: block; } 251 | .inline-block-m { display: inline-block; } 252 | .inline-m { display: inline; } 253 | 254 | // Flex Types 255 | .flex-m { display: flex; } 256 | .flex-row-m { flex-direction: row; } 257 | .flex-column-m { flex-direction: column; } 258 | .flex-space-around-m { justify-content: space-around; } 259 | .flex-space-between-m { justify-content: space-between; } 260 | .flex-start-m { justify-content: flex-start; } 261 | .flex-center-m { justify-content: center; } 262 | .flex-end-m { justify-content: flex-end; } 263 | .flex-wrap-m { flex-wrap: wrap; } 264 | .flex-nowrap-m { flex-wrap: nowrap; } 265 | 266 | // Floats 267 | .left-m { float: left; } 268 | .right-m { float: right; } 269 | 270 | // Alignment 271 | .center-m { 272 | float: none; 273 | margin-left: auto; 274 | margin-right: auto; 275 | } 276 | 277 | // Text Alignments 278 | .text-left-m { text-align: left; } 279 | .text-right-m { text-align: right; } 280 | .text-center-m { text-align: center; } 281 | .text-justify-m { text-align: justify; } 282 | 283 | // Grid Resets 284 | .no-col-m { 285 | width: auto; 286 | float: none; 287 | } 288 | .no-push-m, .no-pull-m { left: 0; } 289 | 290 | // Padding Helpers 291 | .pad-top-0-m { padding-top: 0; } 292 | .pad-top-5-m { padding-top: 5px; } 293 | .pad-top-10-m { padding-top: 10px; } 294 | .pad-top-15-m { padding-top: 15px; } 295 | .pad-top-20-m { padding-top: 20px; } 296 | .pad-top-25-m { padding-top: 25px; } 297 | .pad-top-30-m { padding-top: 30px; } 298 | .pad-top-35-m { padding-top: 35px; } 299 | .pad-top-40-m { padding-top: 40px; } 300 | .pad-top-45-m { padding-top: 45px; } 301 | .pad-top-50-m { padding-top: 50px; } 302 | .pad-top-55-m { padding-top: 55px; } 303 | .pad-top-60-m { padding-top: 60px; } 304 | .pad-bottom-0-m { padding-bottom: 0; } 305 | .pad-bottom-5-m { padding-bottom: 5px; } 306 | .pad-bottom-10-m { padding-bottom: 10px; } 307 | .pad-bottom-15-m { padding-bottom: 15px; } 308 | .pad-bottom-20-m { padding-bottom: 20px; } 309 | .pad-bottom-25-m { padding-bottom: 25px; } 310 | .pad-bottom-30-m { padding-bottom: 30px; } 311 | .pad-bottom-35-m { padding-bottom: 35px; } 312 | .pad-bottom-40-m { padding-bottom: 40px; } 313 | .pad-bottom-45-m { padding-bottom: 45px; } 314 | .pad-bottom-50-m { padding-bottom: 50px; } 315 | .pad-bottom-55-m { padding-bottom: 55px; } 316 | .pad-bottom-60-m { padding-bottom: 60px; } 317 | .pad-0-m { padding: 0; } 318 | .pad-5-m { padding: 5px; } 319 | .pad-10-m { padding: 10px; } 320 | .pad-15-m { padding: 15px; } 321 | .pad-20-m { padding: 20px; } 322 | .pad-25-m { padding: 25px; } 323 | .pad-30-m { padding: 30px; } 324 | .pad-35-m { padding: 35px; } 325 | .pad-40-m { padding: 40px; } 326 | .pad-45-m { padding: 45px; } 327 | .pad-50-m { padding: 50px; } 328 | .pad-55-m { padding: 55px; } 329 | .pad-60-m { padding: 60px; } 330 | } 331 | 332 | // Desktop Helpers 333 | @include breakpoint(l) { 334 | 335 | // General Resets 336 | .no-float-l { float: none; } 337 | .no-padding-l { padding: 0; } 338 | .no-margin-l { margin: 0; } 339 | 340 | // Positions 341 | .relative-l { position: relative; } 342 | .absolute-l { position: absolute; } 343 | .static-l { position: static; } 344 | .fixed-l { position: fixed; } 345 | 346 | // Display Types 347 | .none-l { display: none; } 348 | .block-l { display: block; } 349 | .inline-block-l { display: inline-block; } 350 | .inline-l { display: inline; } 351 | 352 | // Flex Types 353 | .flex-l { display: flex; } 354 | .flex-row-l { flex-direction: row; } 355 | .flex-column-l { flex-direction: column; } 356 | .flex-space-around-l { justify-content: space-around; } 357 | .flex-space-between-l { justify-content: space-between; } 358 | .flex-start-l { justify-content: flex-start; } 359 | .flex-center-l { justify-content: center; } 360 | .flex-end-l { justify-content: flex-end; } 361 | .flex-wrap-l { flex-wrap: wrap; } 362 | .flex-nowrap-l { flex-wrap: nowrap; } 363 | 364 | // Floats 365 | .left-l { float: left; } 366 | .right-l { float: right; } 367 | 368 | // Alignment 369 | .center-l { 370 | float: none; 371 | margin-left: auto; 372 | margin-right: auto; 373 | } 374 | 375 | // Text Alignments 376 | .text-left-l { text-align: left; } 377 | .text-right-l { text-align: right; } 378 | .text-center-l { text-align: center; } 379 | .text-justify-l { text-align: justify; } 380 | 381 | // Grid Resets 382 | .no-col-l { 383 | width: auto; 384 | float: none; 385 | } 386 | .no-push-l, .no-pull-l { left: 0; } 387 | 388 | // Padding Helpers 389 | .pad-top-0-l { padding-top: 0; } 390 | .pad-top-5-l { padding-top: 5px; } 391 | .pad-top-10-l { padding-top: 10px; } 392 | .pad-top-15-l { padding-top: 15px; } 393 | .pad-top-20-l { padding-top: 20px; } 394 | .pad-top-25-l { padding-top: 25px; } 395 | .pad-top-30-l { padding-top: 30px; } 396 | .pad-top-35-l { padding-top: 35px; } 397 | .pad-top-40-l { padding-top: 40px; } 398 | .pad-top-45-l { padding-top: 45px; } 399 | .pad-top-50-l { padding-top: 50px; } 400 | .pad-top-55-l { padding-top: 55px; } 401 | .pad-top-60-l { padding-top: 60px; } 402 | .pad-bottom-0-l { padding-bottom: 0; } 403 | .pad-bottom-5-l { padding-bottom: 5px; } 404 | .pad-bottom-10-l { padding-bottom: 10px; } 405 | .pad-bottom-15-l { padding-bottom: 15px; } 406 | .pad-bottom-20-l { padding-bottom: 20px; } 407 | .pad-bottom-25-l { padding-bottom: 25px; } 408 | .pad-bottom-30-l { padding-bottom: 30px; } 409 | .pad-bottom-35-l { padding-bottom: 35px; } 410 | .pad-bottom-40-l { padding-bottom: 40px; } 411 | .pad-bottom-45-l { padding-bottom: 45px; } 412 | .pad-bottom-50-l { padding-bottom: 50px; } 413 | .pad-bottom-55-l { padding-bottom: 55px; } 414 | .pad-bottom-60-l { padding-bottom: 60px; } 415 | .pad-0-l { padding: 0; } 416 | .pad-5-l { padding: 5px; } 417 | .pad-10-l { padding: 10px; } 418 | .pad-15-l { padding: 15px; } 419 | .pad-20-l { padding: 20px; } 420 | .pad-25-l { padding: 25px; } 421 | .pad-30-l { padding: 30px; } 422 | .pad-35-l { padding: 35px; } 423 | .pad-40-l { padding: 40px; } 424 | .pad-45-l { padding: 45px; } 425 | .pad-50-l { padding: 50px; } 426 | .pad-55-l { padding: 55px; } 427 | .pad-60-l { padding: 60px; } 428 | } 429 | 430 | // HD Helpers 431 | @include breakpoint(xl) { 432 | 433 | // General Resets 434 | .no-float-xl { float: none; } 435 | .no-padding-xl { padding: 0; } 436 | .no-margin-xl { margin: 0; } 437 | 438 | // Positions 439 | .relative-xl { position: relative; } 440 | .absolute-xl { position: absolute; } 441 | .static-xl { position: static; } 442 | .fixed-xl { position: fixed; } 443 | 444 | // Display Types 445 | .none-xl { display: none; } 446 | .block-xl { display: block; } 447 | .inline-block-xl { display: inline-block; } 448 | .inline-xl { display: inline; } 449 | 450 | // Flex Types 451 | .flex-xl { display: flex; } 452 | .flex-row-xl { flex-direction: row; } 453 | .flex-column-xl { flex-direction: column; } 454 | .flex-space-around-xl { justify-content: space-around; } 455 | .flex-space-between-xl { justify-content: space-between; } 456 | .flex-start-xl { justify-content: flex-start; } 457 | .flex-center-xl { justify-content: center; } 458 | .flex-end-xl { justify-content: flex-end; } 459 | .flex-wrap-xl { flex-wrap: wrap; } 460 | .flex-nowrap-xl { flex-wrap: nowrap; } 461 | 462 | // Floats 463 | .left-xl { float: left; } 464 | .right-xl { float: right; } 465 | 466 | // Alignment 467 | .center-xl { 468 | float: none; 469 | margin-left: auto; 470 | margin-right: auto; 471 | } 472 | 473 | // Text Alignments 474 | .text-left-xl { text-align: left; } 475 | .text-right-xl { text-align: right; } 476 | .text-center-xl { text-align: center; } 477 | .text-justify-xl { text-align: justify; } 478 | 479 | // Grid Resets 480 | .no-col-xl { 481 | width: auto; 482 | float: none; 483 | } 484 | .no-push-xl, .no-pull-xl { left: 0; } 485 | 486 | // Padding Helpers 487 | .pad-top-0-xl { padding-top: 0; } 488 | .pad-top-5-xl { padding-top: 5px; } 489 | .pad-top-10-xl { padding-top: 10px; } 490 | .pad-top-15-xl { padding-top: 15px; } 491 | .pad-top-20-xl { padding-top: 20px; } 492 | .pad-top-25-xl { padding-top: 25px; } 493 | .pad-top-30-xl { padding-top: 30px; } 494 | .pad-top-35-xl { padding-top: 35px; } 495 | .pad-top-40-xl { padding-top: 40px; } 496 | .pad-top-45-xl { padding-top: 45px; } 497 | .pad-top-50-xl { padding-top: 50px; } 498 | .pad-top-55-xl { padding-top: 55px; } 499 | .pad-top-60-xl { padding-top: 60px; } 500 | .pad-bottom-0-xl { padding-bottom: 0; } 501 | .pad-bottom-5-xl { padding-bottom: 5px; } 502 | .pad-bottom-10-xl { padding-bottom: 10px; } 503 | .pad-bottom-15-xl { padding-bottom: 15px; } 504 | .pad-bottom-20-xl { padding-bottom: 20px; } 505 | .pad-bottom-25-xl { padding-bottom: 25px; } 506 | .pad-bottom-30-xl { padding-bottom: 30px; } 507 | .pad-bottom-35-xl { padding-bottom: 35px; } 508 | .pad-bottom-40-xl { padding-bottom: 40px; } 509 | .pad-bottom-45-xl { padding-bottom: 45px; } 510 | .pad-bottom-50-xl { padding-bottom: 50px; } 511 | .pad-bottom-55-xl { padding-bottom: 55px; } 512 | .pad-bottom-60-xl { padding-bottom: 60px; } 513 | .pad-0-xl { padding: 0; } 514 | .pad-5-xl { padding: 5px; } 515 | .pad-10-xl { padding: 10px; } 516 | .pad-15-xl { padding: 15px; } 517 | .pad-20-xl { padding: 20px; } 518 | .pad-25-xl { padding: 25px; } 519 | .pad-30-xl { padding: 30px; } 520 | .pad-35-xl { padding: 35px; } 521 | .pad-40-xl { padding: 40px; } 522 | .pad-45-xl { padding: 45px; } 523 | .pad-50-xl { padding: 50px; } 524 | .pad-55-xl { padding: 55px; } 525 | .pad-60-xl { padding: 60px; } 526 | } 527 | 528 | // Print Helpers 529 | @media print { 530 | 531 | // General Resets 532 | .no-float-print { float: none; } 533 | .no-padding-print { padding: 0; } 534 | .no-margin-print { margin: 0; } 535 | 536 | // Display Types 537 | .none-print { display: none; } 538 | .block-print { display: block; } 539 | .inline-block-print { display: inline-block; } 540 | .inline-print { display: inline; } 541 | 542 | // Text Alignments 543 | .text-left-print { text-align: left; } 544 | .text-right-print { text-align: right; } 545 | .text-center-print { text-align: center; } 546 | .text-justify-print { text-align: justify; } 547 | 548 | // Grid Resets 549 | .no-col-print { 550 | width: auto; 551 | float: none; 552 | } 553 | .no-push-print, .no-pull-print { left: 0; } 554 | 555 | // Padding Helpers 556 | .pad-top-0-print { padding-top: 0; } 557 | .pad-top-5-print { padding-top: 5px; } 558 | .pad-top-10-print { padding-top: 10px; } 559 | .pad-top-15-print { padding-top: 15px; } 560 | .pad-top-20-print { padding-top: 20px; } 561 | .pad-top-25-print { padding-top: 25px; } 562 | .pad-top-30-print { padding-top: 30px; } 563 | .pad-top-35-print { padding-top: 35px; } 564 | .pad-top-40-print { padding-top: 40px; } 565 | .pad-top-45-print { padding-top: 45px; } 566 | .pad-top-50-print { padding-top: 50px; } 567 | .pad-top-55-print { padding-top: 55px; } 568 | .pad-top-60-print { padding-top: 60px; } 569 | .pad-bottom-0-print { padding-bottom: 0; } 570 | .pad-bottom-5-print { padding-bottom: 5px; } 571 | .pad-bottom-10-print { padding-bottom: 10px; } 572 | .pad-bottom-15-print { padding-bottom: 15px; } 573 | .pad-bottom-20-print { padding-bottom: 20px; } 574 | .pad-bottom-25-print { padding-bottom: 25px; } 575 | .pad-bottom-30-print { padding-bottom: 30px; } 576 | .pad-bottom-35-print { padding-bottom: 35px; } 577 | .pad-bottom-40-print { padding-bottom: 40px; } 578 | .pad-bottom-45-print { padding-bottom: 45px; } 579 | .pad-bottom-50-print { padding-bottom: 50px; } 580 | .pad-bottom-55-print { padding-bottom: 55px; } 581 | .pad-bottom-60-print { padding-bottom: 60px; } 582 | .pad-0-print { padding: 0; } 583 | .pad-5-print { padding: 5px; } 584 | .pad-10-print { padding: 10px; } 585 | .pad-15-print { padding: 15px; } 586 | .pad-20-print { padding: 20px; } 587 | .pad-25-print { padding: 25px; } 588 | .pad-30-print { padding: 30px; } 589 | .pad-35-print { padding: 35px; } 590 | .pad-40-print { padding: 40px; } 591 | .pad-45-print { padding: 45px; } 592 | .pad-50-print { padding: 50px; } 593 | .pad-55-print { padding: 55px; } 594 | .pad-60-print { padding: 60px; } 595 | } -------------------------------------------------------------------------------- /dist/css/styles.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | 3 | // Base Stylesheet - http://getbase.org 4 | // Author: Matthew Hartman - http://www.matthewhartman.com.au/ 5 | // Version: 3.1.5 - Last Updated: July 02, 2016 6 | 7 | ========================================================================== */ 8 | *, *:before, *:after { 9 | box-sizing: border-box; } 10 | 11 | html { 12 | font-family: sans-serif; 13 | -ms-text-size-adjust: 100%; 14 | -webkit-text-size-adjust: 100%; } 15 | 16 | html, button, input, select, textarea { 17 | font-family: inherit; } 18 | 19 | article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { 20 | display: block; } 21 | 22 | body, form, fieldset, legend, input, select, textarea, button { 23 | margin: 0; } 24 | 25 | audio:not([controls]) { 26 | display: none; 27 | height: 0; } 28 | 29 | audio, canvas, progress, video { 30 | display: inline-block; } 31 | 32 | progress { 33 | vertical-align: baseline; } 34 | 35 | [hidden], template { 36 | display: none; } 37 | 38 | img { 39 | border-style: none; } 40 | 41 | svg:not(:root) { 42 | overflow: hidden; } 43 | 44 | body { 45 | font-family: sans-serif; 46 | font-size: 16px; 47 | font-size: 1rem; 48 | line-height: 22px; 49 | line-height: 1.375rem; 50 | color: #000; 51 | font-weight: 400; 52 | background: #fff; } 53 | 54 | p { 55 | margin: 0 0 20px 0; } 56 | 57 | a { 58 | color: #000; 59 | text-decoration: underline; 60 | background-color: transparent; 61 | -webkit-text-decoration-skip: objects; } 62 | a:active, a:hover { 63 | color: #000; 64 | outline-width: 0; 65 | text-decoration: none; } 66 | 67 | h1, h2, h3, h4, h5, h6 { 68 | font-family: sans-serif; 69 | margin: 0; } 70 | 71 | h1, .fs-1 { 72 | font-size: 32px; 73 | font-size: 2rem; 74 | line-height: 38px; 75 | line-height: 2.375rem; } 76 | 77 | h2, .fs-2 { 78 | font-size: 26px; 79 | font-size: 1.625rem; 80 | line-height: 32px; 81 | line-height: 2rem; } 82 | 83 | h3, .fs-3 { 84 | font-size: 22px; 85 | font-size: 1.375rem; 86 | line-height: 28px; 87 | line-height: 1.75rem; } 88 | 89 | h4, .fs-4 { 90 | font-size: 18px; 91 | font-size: 1.125rem; 92 | line-height: 24px; 93 | line-height: 1.5rem; } 94 | 95 | h5, .fs-5 { 96 | font-size: 16px; 97 | font-size: 1rem; 98 | line-height: 22px; 99 | line-height: 1.375rem; } 100 | 101 | h6, .fs-6 { 102 | font-size: 14px; 103 | font-size: 0.875rem; 104 | line-height: 20px; 105 | line-height: 1.25rem; } 106 | 107 | h1 { 108 | margin-bottom: .5em; 109 | color: #000; 110 | font-weight: 700; } 111 | 112 | h2 { 113 | margin-bottom: .2em; 114 | color: #000; 115 | font-weight: 700; } 116 | 117 | h3 { 118 | margin-bottom: .2em; 119 | color: #000; 120 | font-weight: 700; } 121 | 122 | h4 { 123 | margin-bottom: .2em; 124 | color: #000; 125 | font-weight: 700; } 126 | 127 | h5 { 128 | margin-bottom: .1em; 129 | color: #000; 130 | font-weight: 700; } 131 | 132 | h6 { 133 | margin-bottom: .1em; 134 | color: #000; 135 | font-weight: 700; } 136 | 137 | b, strong, .strong { 138 | font-weight: 700; } 139 | 140 | em, .em { 141 | font-style: italic; } 142 | 143 | abbr[title], .abbr[title] { 144 | border-bottom: none; 145 | text-decoration: underline; 146 | text-decoration: underline dotted; } 147 | 148 | dfn { 149 | font-style: italic; } 150 | 151 | small, .small { 152 | font-size: 13px; 153 | font-size: 0.8125rem; 154 | line-height: 16px; 155 | line-height: 1rem; } 156 | 157 | mark, .mark { 158 | background-color: #ff0; 159 | color: #000; } 160 | 161 | sub, .sub, sup, .sup { 162 | font-size: 75%; 163 | line-height: 0; 164 | position: relative; 165 | vertical-align: baseline; } 166 | 167 | sub, .sub { 168 | bottom: -0.25em; } 169 | 170 | sup, .sup { 171 | top: -0.5em; } 172 | 173 | del, .del { 174 | text-decoration: line-through; } 175 | 176 | figure { 177 | margin: 1em 40px; } 178 | 179 | hr, .hr { 180 | box-sizing: content-box; 181 | height: 1px; 182 | background: #eee; 183 | border: 0; 184 | margin-top: 20px; 185 | margin-bottom: 20px; } 186 | 187 | ul, ol { 188 | margin: 20px 0; 189 | padding: 0 0 0 40px; } 190 | 191 | dl:before, dl:after { 192 | content: " "; 193 | display: table; } 194 | 195 | dl:after { 196 | clear: both; } 197 | 198 | dl dt { 199 | float: left; 200 | width: 25%; 201 | display: block; 202 | font-weight: 400; } 203 | 204 | dl dd { 205 | overflow: hidden; 206 | display: block; } 207 | 208 | blockquote, 209 | .blockquote { 210 | font-family: sans-serif; 211 | font-weight: 400; 212 | font-style: italic; 213 | margin: 20px 0; } 214 | blockquote p, 215 | .blockquote p { 216 | font-size: 22px; 217 | font-size: 1.375rem; 218 | line-height: 28px; 219 | line-height: 1.75rem; 220 | margin-bottom: 20px; } 221 | blockquote cite, 222 | .blockquote cite { 223 | font-size: 13px; 224 | font-size: 0.8125rem; 225 | line-height: 19px; 226 | line-height: 1.1875rem; 227 | font-weight: 700; 228 | font-style: normal; } 229 | 230 | caption { 231 | font-size: inherit; 232 | line-height: normal; 233 | font-weight: 700; 234 | text-align: left; 235 | padding: 10px; 236 | border-bottom: 1px solid #d7d7d7; } 237 | 238 | table { 239 | font-size: 14px; 240 | font-size: 0.875rem; 241 | border-collapse: collapse; 242 | border-spacing: 0; 243 | width: 100%; 244 | margin: 0; 245 | text-align: left; } 246 | table thead td, 247 | table thead th, 248 | table tbody td, 249 | table tbody th, 250 | table tfoot td, 251 | table tfoot th { 252 | color: #585858; 253 | padding: 10px; 254 | border-bottom: 1px solid #e9e9e9; } 255 | 256 | code, kbd, pre, samp { 257 | font-size: 13px; 258 | font-size: 0.8125rem; 259 | line-height: 18px; 260 | line-height: 1.125rem; 261 | word-wrap: break-word; 262 | font-family: monospace, monospace; 263 | color: #000; 264 | background-color: transparent; 265 | font-weight: normal; 266 | padding: 0; 267 | white-space: pre-wrap; } 268 | 269 | pre { 270 | padding: 10px; 271 | overflow: auto; 272 | border: 1px solid #d7d7d7; } 273 | 274 | fieldset { 275 | border: 1px solid #c0c0c0; 276 | margin: 0 2px; 277 | padding: 0.35em 0.625em 0.75em; } 278 | 279 | legend { 280 | box-sizing: border-box; 281 | color: inherit; 282 | display: table; 283 | max-width: 100%; 284 | padding: 0; 285 | white-space: normal; } 286 | 287 | label, 288 | button, 289 | input, 290 | optgroup, 291 | select, 292 | textarea { 293 | color: #000; 294 | font: inherit; 295 | margin: 0; } 296 | 297 | [type="text"], 298 | [type="email"], 299 | [type="password"], 300 | [type="tel"], 301 | [type="number"], 302 | [type="date"] { 303 | height: 36px; 304 | padding: 10px; 305 | background-color: #fff; 306 | border: 1px solid #ccc; 307 | -webkit-appearance: none; 308 | -moz-appearance: textfield; 309 | border-radius: 0; } 310 | [type="text"]:focus, 311 | [type="email"]:focus, 312 | [type="password"]:focus, 313 | [type="tel"]:focus, 314 | [type="number"]:focus, 315 | [type="date"]:focus { 316 | background-color: #fff; 317 | border-color: #f7c723; 318 | outline: 0; } 319 | 320 | [type="number"]::-webkit-inner-spin-button, 321 | [type="number"]::-webkit-outer-spin-button { 322 | height: auto; } 323 | 324 | [type="date"]::-webkit-inner-spin-button { 325 | display: none; 326 | -webkit-appearance: none; } 327 | 328 | [type="checkbox"], 329 | [type="radio"] { 330 | box-sizing: border-box; 331 | padding: 0; } 332 | 333 | [type="number"]::-webkit-inner-spin-button, 334 | [type="number"]::-webkit-outer-spin-button { 335 | height: auto; } 336 | 337 | [type="search"] { 338 | -webkit-appearance: textfield; 339 | outline-offset: -2px; } 340 | 341 | [type="search"]::-webkit-search-cancel-button, 342 | [type="search"]::-webkit-search-decoration { 343 | -webkit-appearance: none; } 344 | 345 | textarea { 346 | padding: 10px; 347 | background-color: #fff; 348 | border: 1px solid #ccc; 349 | overflow: auto; 350 | border-radius: 0; } 351 | textarea:focus { 352 | background-color: #fff; 353 | border-color: #f7c723; 354 | outline: 0; } 355 | 356 | select { 357 | text-transform: none; 358 | height: 36px; 359 | padding: 0 10px; 360 | background-color: #fff; 361 | border: 1px solid #ccc; } 362 | select:focus { 363 | background-color: #fff; 364 | border-color: #f7c723; 365 | outline: 0; } 366 | 367 | optgroup { 368 | font-weight: 700; } 369 | 370 | button { 371 | border-radius: 0; 372 | overflow: visible; 373 | text-transform: none; 374 | cursor: pointer; } 375 | 376 | button, 377 | html [type="button"], 378 | [type="reset"], 379 | [type="submit"] { 380 | -webkit-appearance: button; 381 | border-radius: 0; } 382 | 383 | button::-moz-focus-inner, 384 | [type="button"]::-moz-focus-inner, 385 | [type="reset"]::-moz-focus-inner, 386 | [type="submit"]::-moz-focus-inner { 387 | border-style: none; 388 | padding: 0; } 389 | 390 | button:-moz-focusring, 391 | [type="button"]:-moz-focusring, 392 | [type="reset"]:-moz-focusring, 393 | [type="submit"]:-moz-focusring { 394 | outline: 1px dotted ButtonText; } 395 | 396 | button[disabled], 397 | html input[disabled] { 398 | cursor: not-allowed; } 399 | 400 | input::-webkit-input-placeholder { 401 | color: #999; } 402 | 403 | input:-moz-placeholder { 404 | color: #999; } 405 | 406 | input::-moz-placeholder { 407 | color: #999; } 408 | 409 | input:-ms-input-placeholder { 410 | color: #999; } 411 | 412 | .button { 413 | cursor: pointer; 414 | border: 1px solid #d7d7d7; 415 | background-color: #f3f3f3; 416 | line-height: normal; 417 | padding: 10px 20px; 418 | text-decoration: none; 419 | color: #363636; 420 | display: inline-block; 421 | -webkit-transition: all 0.3s; 422 | transition: all 0.3s; } 423 | .button:hover, .button:active { 424 | text-decoration: none; } 425 | .button:hover { 426 | background: #f9f9f9; } 427 | 428 | .button-link { 429 | color: #000; 430 | text-decoration: underline; 431 | border: 0; 432 | background: transparent; 433 | padding: 0; } 434 | .button-link:hover { 435 | text-decoration: none; } 436 | .button-link:active { 437 | outline: 0; } 438 | 439 | .clear:before, .clear:after { 440 | content: " "; 441 | display: table; } 442 | 443 | .clear:after { 444 | clear: both; } 445 | 446 | .row:before, .row:after { 447 | content: ""; 448 | display: table; } 449 | 450 | .row:after { 451 | clear: both; } 452 | 453 | .row { 454 | position: relative; 455 | margin-left: -15px; 456 | margin-right: -15px; } 457 | 458 | @media only screen and (min-width: 740px) { 459 | .row-m { 460 | position: relative; 461 | margin-left: -15px; 462 | margin-right: -15px; } 463 | .row-m:before, .row-m:after { 464 | content: ""; 465 | display: table; } 466 | .row-m:after { 467 | clear: both; } 468 | .clear-m:before, .clear-m:after { 469 | content: ""; 470 | display: table; } 471 | .clear-m:after { 472 | clear: both; } } 473 | 474 | @media only screen and (min-width: 980px) { 475 | .row-l { 476 | position: relative; 477 | margin-left: -15px; 478 | margin-right: -15px; } 479 | .row-l:before, .row-l:after { 480 | content: ""; 481 | display: table; } 482 | .row-l:after { 483 | clear: both; } 484 | .clear-l:before, .clear-l:after { 485 | content: ""; 486 | display: table; } 487 | .clear-l:after { 488 | clear: both; } } 489 | 490 | @media only screen and (min-width: 1140px) { 491 | .row-xl { 492 | position: relative; 493 | margin-left: -15px; 494 | margin-right: -15px; } 495 | .row-xl:before, .row-xl:after { 496 | content: ""; 497 | display: table; } 498 | .row-xl:after { 499 | clear: both; } 500 | .clear-xl:before, .clear-xl:after { 501 | content: ""; 502 | display: table; } 503 | .clear-xl:after { 504 | clear: both; } } 505 | 506 | .container { 507 | padding-left: 15px; 508 | padding-right: 15px; 509 | margin-left: auto; 510 | margin-right: auto; } 511 | 512 | .container-full { 513 | padding-left: 0; 514 | padding-right: 0; 515 | margin-left: auto; 516 | margin-right: auto; } 517 | 518 | @media only screen and (min-width: 740px) { 519 | .container, .container-full { 520 | width: 720px; } 521 | .container-m { 522 | width: 720px; 523 | padding-left: 15px; 524 | padding-right: 15px; 525 | margin-left: auto; 526 | margin-right: auto; } 527 | .container-full-m { 528 | width: 720px; 529 | margin-left: auto; 530 | margin-right: auto; 531 | padding-left: 0; 532 | padding-right: 0; } } 533 | 534 | @media only screen and (min-width: 980px) { 535 | .container, .container-full { 536 | width: 960px; } 537 | .container-l { 538 | width: 960px; 539 | padding-left: 15px; 540 | padding-right: 15px; 541 | margin-left: auto; 542 | margin-right: auto; } 543 | .container-full-l { 544 | width: 960px; 545 | margin-left: auto; 546 | margin-right: auto; 547 | padding-left: 0; 548 | padding-right: 0; } } 549 | 550 | @media only screen and (min-width: 1140px) { 551 | .container, .container-full { 552 | width: 1120px; } 553 | .container-xl { 554 | width: 1120px; 555 | padding-left: 15px; 556 | padding-right: 15px; 557 | margin-left: auto; 558 | margin-right: auto; } 559 | .container-full-xl { 560 | width: 1120px; 561 | margin-left: auto; 562 | margin-right: auto; 563 | padding-left: 0; 564 | padding-right: 0; } } 565 | 566 | .col-1, 567 | .col-2, 568 | .col-3, 569 | .col-4, 570 | .col-5, 571 | .col-6, 572 | .col-7, 573 | .col-8, 574 | .col-9, 575 | .col-10, 576 | .col-11, 577 | .col-12, 578 | .col-1-2, 579 | .col-1-3, 580 | .col-2-3, 581 | .col-1-4, 582 | .col-3-4, 583 | .col-1-5, 584 | .col-2-5, 585 | .col-3-5, 586 | .col-4-5 { 587 | padding-left: 15px; 588 | padding-right: 15px; 589 | position: relative; 590 | float: left; } 591 | 592 | .col-1 { 593 | width: 8.33333%; } 594 | 595 | .col-2 { 596 | width: 16.66667%; } 597 | 598 | .col-3 { 599 | width: 25%; } 600 | 601 | .col-4 { 602 | width: 33.33333%; } 603 | 604 | .col-5 { 605 | width: 41.66667%; } 606 | 607 | .col-6 { 608 | width: 50%; } 609 | 610 | .col-7 { 611 | width: 58.33333%; } 612 | 613 | .col-8 { 614 | width: 66.66667%; } 615 | 616 | .col-9 { 617 | width: 75%; } 618 | 619 | .col-10 { 620 | width: 83.33333%; } 621 | 622 | .col-11 { 623 | width: 91.66667%; } 624 | 625 | .col-12 { 626 | width: 100%; } 627 | 628 | .col-1-2 { 629 | width: 50%; } 630 | 631 | .col-1-3 { 632 | width: 33.33333%; } 633 | 634 | .col-2-3 { 635 | width: 66.66667%; } 636 | 637 | .col-1-4 { 638 | width: 25%; } 639 | 640 | .col-3-4 { 641 | width: 75%; } 642 | 643 | .col-1-5 { 644 | width: 20%; } 645 | 646 | .col-2-5 { 647 | width: 40%; } 648 | 649 | .col-3-5 { 650 | width: 60%; } 651 | 652 | .col-4-5 { 653 | width: 80%; } 654 | 655 | .col-full { 656 | width: 100%; } 657 | 658 | .push-1 { 659 | left: 8.33333%; } 660 | 661 | .push-2 { 662 | left: 16.66667%; } 663 | 664 | .push-3 { 665 | left: 25%; } 666 | 667 | .push-4 { 668 | left: 33.33333%; } 669 | 670 | .push-5 { 671 | left: 41.66667%; } 672 | 673 | .push-6 { 674 | left: 50%; } 675 | 676 | .push-7 { 677 | left: 58.33333%; } 678 | 679 | .push-8 { 680 | left: 66.66667%; } 681 | 682 | .push-9 { 683 | left: 75%; } 684 | 685 | .push-10 { 686 | left: 83.33333%; } 687 | 688 | .push-11 { 689 | left: 91.66667%; } 690 | 691 | .push-1-2 { 692 | left: 50%; } 693 | 694 | .push-1-3 { 695 | left: 33.33333%; } 696 | 697 | .push-2-3 { 698 | left: 66.66667%; } 699 | 700 | .push-1-4 { 701 | left: 25%; } 702 | 703 | .push-3-4 { 704 | left: 75%; } 705 | 706 | .push-1-5 { 707 | left: 20%; } 708 | 709 | .push-2-5 { 710 | left: 40%; } 711 | 712 | .push-3-5 { 713 | left: 60%; } 714 | 715 | .push-4-5 { 716 | left: 80%; } 717 | 718 | .pull-1 { 719 | left: -8.33333%; } 720 | 721 | .pull-2 { 722 | left: -16.66667%; } 723 | 724 | .pull-3 { 725 | left: -25%; } 726 | 727 | .pull-4 { 728 | left: -33.33333%; } 729 | 730 | .pull-5 { 731 | left: -41.66667%; } 732 | 733 | .pull-6 { 734 | left: -50%; } 735 | 736 | .pull-7 { 737 | left: -58.33333%; } 738 | 739 | .pull-8 { 740 | left: -66.66667%; } 741 | 742 | .pull-9 { 743 | left: -75%; } 744 | 745 | .pull-10 { 746 | left: -83.33333%; } 747 | 748 | .pull-11 { 749 | left: -91.66667%; } 750 | 751 | .pull-1-2 { 752 | left: -50%; } 753 | 754 | .pull-1-3 { 755 | left: -33.33333%; } 756 | 757 | .pull-2-3 { 758 | left: -66.66667%; } 759 | 760 | .pull-1-4 { 761 | left: -25%; } 762 | 763 | .pull-3-4 { 764 | left: -75%; } 765 | 766 | .pull-1-5 { 767 | left: -20%; } 768 | 769 | .pull-2-5 { 770 | left: -40%; } 771 | 772 | .pull-3-5 { 773 | left: -60%; } 774 | 775 | .pull-4-5 { 776 | left: -80%; } 777 | 778 | @media only screen and (min-width: 740px) { 779 | .col-1-m, 780 | .col-2-m, 781 | .col-3-m, 782 | .col-4-m, 783 | .col-5-m, 784 | .col-6-m, 785 | .col-7-m, 786 | .col-8-m, 787 | .col-9-m, 788 | .col-10-m, 789 | .col-11-m, 790 | .col-12-m, 791 | .col-1-2-m, 792 | .col-1-3-m, 793 | .col-2-3-m, 794 | .col-1-4-m, 795 | .col-3-4-m, 796 | .col-1-5-m, 797 | .col-2-5-m, 798 | .col-3-5-m, 799 | .col-4-5-m { 800 | padding-left: 15px; 801 | padding-right: 15px; 802 | position: relative; 803 | float: left; } 804 | .col-1-m { 805 | width: 8.33333%; } 806 | .col-2-m { 807 | width: 16.66667%; } 808 | .col-3-m { 809 | width: 25%; } 810 | .col-4-m { 811 | width: 33.33333%; } 812 | .col-5-m { 813 | width: 41.66667%; } 814 | .col-6-m { 815 | width: 50%; } 816 | .col-7-m { 817 | width: 58.33333%; } 818 | .col-8-m { 819 | width: 66.66667%; } 820 | .col-9-m { 821 | width: 75%; } 822 | .col-10-m { 823 | width: 83.33333%; } 824 | .col-11-m { 825 | width: 91.66667%; } 826 | .col-12-m { 827 | width: 100%; } 828 | .col-1-2-m { 829 | width: 50%; } 830 | .col-1-3-m { 831 | width: 33.33333%; } 832 | .col-2-3-m { 833 | width: 66.66667%; } 834 | .col-1-4-m { 835 | width: 25%; } 836 | .col-3-4-m { 837 | width: 75%; } 838 | .col-1-5-m { 839 | width: 20%; } 840 | .col-2-5-m { 841 | width: 40%; } 842 | .col-3-5-m { 843 | width: 60%; } 844 | .col-4-5-m { 845 | width: 80%; } 846 | .col-full-m { 847 | width: 100%; } 848 | .push-1-m { 849 | left: 8.33333%; } 850 | .push-2-m { 851 | left: 16.66667%; } 852 | .push-3-m { 853 | left: 25%; } 854 | .push-4-m { 855 | left: 33.33333%; } 856 | .push-5-m { 857 | left: 41.66667%; } 858 | .push-6-m { 859 | left: 50%; } 860 | .push-7-m { 861 | left: 58.33333%; } 862 | .push-8-m { 863 | left: 66.66667%; } 864 | .push-9-m { 865 | left: 75%; } 866 | .push-10-m { 867 | left: 83.33333%; } 868 | .push-11-m { 869 | left: 91.66667%; } 870 | .push-1-2-m { 871 | left: 50%; } 872 | .push-1-3-m { 873 | left: 33.33333%; } 874 | .push-2-3-m { 875 | left: 66.66667%; } 876 | .push-1-4-m { 877 | left: 25%; } 878 | .push-3-4-m { 879 | left: 75%; } 880 | .push-1-5-m { 881 | left: 20%; } 882 | .push-2-5-m { 883 | left: 40%; } 884 | .push-3-5-m { 885 | left: 60%; } 886 | .push-4-5-m { 887 | left: 80%; } 888 | .pull-1-m { 889 | left: -8.33333%; } 890 | .pull-2-m { 891 | left: -16.66667%; } 892 | .pull-3-m { 893 | left: -25%; } 894 | .pull-4-m { 895 | left: -33.33333%; } 896 | .pull-5-m { 897 | left: -41.66667%; } 898 | .pull-6-m { 899 | left: -50%; } 900 | .pull-7-m { 901 | left: -58.33333%; } 902 | .pull-8-m { 903 | left: -66.66667%; } 904 | .pull-9-m { 905 | left: -75%; } 906 | .pull-10-m { 907 | left: -83.33333%; } 908 | .pull-11-m { 909 | left: -91.66667%; } 910 | .pull-1-2-m { 911 | left: -50%; } 912 | .pull-1-3-m { 913 | left: -33.33333%; } 914 | .pull-2-3-m { 915 | left: -66.66667%; } 916 | .pull-1-4-m { 917 | left: -25%; } 918 | .pull-3-4-m { 919 | left: -75%; } 920 | .pull-1-5-m { 921 | left: -20%; } 922 | .pull-2-5-m { 923 | left: -40%; } 924 | .pull-3-5-m { 925 | left: -60%; } 926 | .pull-4-5-m { 927 | left: -80%; } } 928 | 929 | @media only screen and (min-width: 980px) { 930 | .col-1-l, 931 | .col-2-l, 932 | .col-3-l, 933 | .col-4-l, 934 | .col-5-l, 935 | .col-6-l, 936 | .col-7-l, 937 | .col-8-l, 938 | .col-9-l, 939 | .col-10-l, 940 | .col-11-l, 941 | .col-12-l, 942 | .col-1-2-l, 943 | .col-1-3-l, 944 | .col-2-3-l, 945 | .col-1-4-l, 946 | .col-3-4-l, 947 | .col-1-5-l, 948 | .col-2-5-l, 949 | .col-3-5-l, 950 | .col-4-5-l { 951 | padding-left: 15px; 952 | padding-right: 15px; 953 | position: relative; 954 | float: left; } 955 | .col-1-l { 956 | width: 8.33333%; } 957 | .col-2-l { 958 | width: 16.66667%; } 959 | .col-3-l { 960 | width: 25%; } 961 | .col-4-l { 962 | width: 33.33333%; } 963 | .col-5-l { 964 | width: 41.66667%; } 965 | .col-6-l { 966 | width: 50%; } 967 | .col-7-l { 968 | width: 58.33333%; } 969 | .col-8-l { 970 | width: 66.66667%; } 971 | .col-9-l { 972 | width: 75%; } 973 | .col-10-l { 974 | width: 83.33333%; } 975 | .col-11-l { 976 | width: 91.66667%; } 977 | .col-12-l { 978 | width: 100%; } 979 | .col-1-2-l { 980 | width: 50%; } 981 | .col-1-3-l { 982 | width: 33.33333%; } 983 | .col-2-3-l { 984 | width: 66.66667%; } 985 | .col-1-4-l { 986 | width: 25%; } 987 | .col-3-4-l { 988 | width: 75%; } 989 | .col-1-5-l { 990 | width: 20%; } 991 | .col-2-5-l { 992 | width: 40%; } 993 | .col-3-5-l { 994 | width: 60%; } 995 | .col-4-5-l { 996 | width: 80%; } 997 | .col-full-l { 998 | width: 100%; } 999 | .push-1-l { 1000 | left: 8.33333%; } 1001 | .push-2-l { 1002 | left: 16.66667%; } 1003 | .push-3-l { 1004 | left: 25%; } 1005 | .push-4-l { 1006 | left: 33.33333%; } 1007 | .push-5-l { 1008 | left: 41.66667%; } 1009 | .push-6-l { 1010 | left: 50%; } 1011 | .push-7-l { 1012 | left: 58.33333%; } 1013 | .push-8-l { 1014 | left: 66.66667%; } 1015 | .push-9-l { 1016 | left: 75%; } 1017 | .push-10-l { 1018 | left: 83.33333%; } 1019 | .push-11-l { 1020 | left: 91.66667%; } 1021 | .push-1-2-l { 1022 | left: 50%; } 1023 | .push-1-3-l { 1024 | left: 33.33333%; } 1025 | .push-2-3-l { 1026 | left: 66.66667%; } 1027 | .push-1-4-l { 1028 | left: 25%; } 1029 | .push-3-4-l { 1030 | left: 75%; } 1031 | .push-1-5-l { 1032 | left: 20%; } 1033 | .push-2-5-l { 1034 | left: 40%; } 1035 | .push-3-5-l { 1036 | left: 60%; } 1037 | .push-4-5-l { 1038 | left: 80%; } 1039 | .pull-1-l { 1040 | left: -8.33333%; } 1041 | .pull-2-l { 1042 | left: -16.66667%; } 1043 | .pull-3-l { 1044 | left: -25%; } 1045 | .pull-4-l { 1046 | left: -33.33333%; } 1047 | .pull-5-l { 1048 | left: -41.66667%; } 1049 | .pull-6-l { 1050 | left: -50%; } 1051 | .pull-7-l { 1052 | left: -58.33333%; } 1053 | .pull-8-l { 1054 | left: -66.66667%; } 1055 | .pull-9-l { 1056 | left: -75%; } 1057 | .pull-10-l { 1058 | left: -83.33333%; } 1059 | .pull-11-l { 1060 | left: -91.66667%; } 1061 | .pull-1-2-l { 1062 | left: -50%; } 1063 | .pull-1-3-l { 1064 | left: -33.33333%; } 1065 | .pull-2-3-l { 1066 | left: -66.66667%; } 1067 | .pull-1-4-l { 1068 | left: -25%; } 1069 | .pull-3-4-l { 1070 | left: -75%; } 1071 | .pull-1-5-l { 1072 | left: -20%; } 1073 | .pull-2-5-l { 1074 | left: -40%; } 1075 | .pull-3-5-l { 1076 | left: -60%; } 1077 | .pull-4-5-l { 1078 | left: -80%; } } 1079 | 1080 | @media only screen and (min-width: 1140px) { 1081 | .col-1-xl, 1082 | .col-2-xl, 1083 | .col-3-xl, 1084 | .col-4-xl, 1085 | .col-5-xl, 1086 | .col-6-xl, 1087 | .col-7-xl, 1088 | .col-8-xl, 1089 | .col-9-xl, 1090 | .col-10-xl, 1091 | .col-11-xl, 1092 | .col-12-xl, 1093 | .col-1-2-xl, 1094 | .col-1-3-xl, 1095 | .col-2-3-xl, 1096 | .col-1-4-xl, 1097 | .col-3-4-xl, 1098 | .col-1-5-xl, 1099 | .col-2-5-xl, 1100 | .col-3-5-xl, 1101 | .col-4-5-xl { 1102 | padding-left: 15px; 1103 | padding-right: 15px; 1104 | position: relative; 1105 | float: left; } 1106 | .col-1-xl { 1107 | width: 8.33333%; } 1108 | .col-2-xl { 1109 | width: 16.66667%; } 1110 | .col-3-xl { 1111 | width: 25%; } 1112 | .col-4-xl { 1113 | width: 33.33333%; } 1114 | .col-5-xl { 1115 | width: 41.66667%; } 1116 | .col-6-xl { 1117 | width: 50%; } 1118 | .col-7-xl { 1119 | width: 58.33333%; } 1120 | .col-8-xl { 1121 | width: 66.66667%; } 1122 | .col-9-xl { 1123 | width: 75%; } 1124 | .col-10-xl { 1125 | width: 83.33333%; } 1126 | .col-11-xl { 1127 | width: 91.66667%; } 1128 | .col-12-xl { 1129 | width: 100%; } 1130 | .col-1-2-xl { 1131 | width: 50%; } 1132 | .col-1-3-xl { 1133 | width: 33.33333%; } 1134 | .col-2-3-xl { 1135 | width: 66.66667%; } 1136 | .col-1-4-xl { 1137 | width: 25%; } 1138 | .col-3-4-xl { 1139 | width: 75%; } 1140 | .col-1-5-xl { 1141 | width: 20%; } 1142 | .col-2-5-xl { 1143 | width: 40%; } 1144 | .col-3-5-xl { 1145 | width: 60%; } 1146 | .col-4-5-xl { 1147 | width: 80%; } 1148 | .col-full-xl { 1149 | width: 100%; } 1150 | .push-1-xl { 1151 | left: 8.33333%; } 1152 | .push-2-xl { 1153 | left: 16.66667%; } 1154 | .push-3-xl { 1155 | left: 25%; } 1156 | .push-4-xl { 1157 | left: 33.33333%; } 1158 | .push-5-xl { 1159 | left: 41.66667%; } 1160 | .push-6-xl { 1161 | left: 50%; } 1162 | .push-7-xl { 1163 | left: 58.33333%; } 1164 | .push-8-xl { 1165 | left: 66.66667%; } 1166 | .push-9-xl { 1167 | left: 75%; } 1168 | .push-10-xl { 1169 | left: 83.33333%; } 1170 | .push-11-xl { 1171 | left: 91.66667%; } 1172 | .push-1-2-xl { 1173 | left: 50%; } 1174 | .push-1-3-xl { 1175 | left: 33.33333%; } 1176 | .push-2-3-xl { 1177 | left: 66.66667%; } 1178 | .push-1-4-xl { 1179 | left: 25%; } 1180 | .push-3-4-xl { 1181 | left: 75%; } 1182 | .push-1-5-xl { 1183 | left: 20%; } 1184 | .push-2-5-xl { 1185 | left: 40%; } 1186 | .push-3-5-xl { 1187 | left: 60%; } 1188 | .push-4-5-xl { 1189 | left: 80%; } 1190 | .pull-1-xl { 1191 | left: -8.33333%; } 1192 | .pull-2-xl { 1193 | left: -16.66667%; } 1194 | .pull-3-xl { 1195 | left: -25%; } 1196 | .pull-4-xl { 1197 | left: -33.33333%; } 1198 | .pull-5-xl { 1199 | left: -41.66667%; } 1200 | .pull-6-xl { 1201 | left: -50%; } 1202 | .pull-7-xl { 1203 | left: -58.33333%; } 1204 | .pull-8-xl { 1205 | left: -66.66667%; } 1206 | .pull-9-xl { 1207 | left: -75%; } 1208 | .pull-10-xl { 1209 | left: -83.33333%; } 1210 | .pull-11-xl { 1211 | left: -91.66667%; } 1212 | .pull-1-2-xl { 1213 | left: -50%; } 1214 | .pull-1-3-xl { 1215 | left: -33.33333%; } 1216 | .pull-2-3-xl { 1217 | left: -66.66667%; } 1218 | .pull-1-4-xl { 1219 | left: -25%; } 1220 | .pull-3-4-xl { 1221 | left: -75%; } 1222 | .pull-1-5-xl { 1223 | left: -20%; } 1224 | .pull-2-5-xl { 1225 | left: -40%; } 1226 | .pull-3-5-xl { 1227 | left: -60%; } 1228 | .pull-4-5-xl { 1229 | left: -80%; } } 1230 | 1231 | @-webkit-keyframes fadeIn { 1232 | 0% { 1233 | opacity: 0; } 1234 | 100% { 1235 | opacity: 1; } } 1236 | 1237 | @keyframes fadeIn { 1238 | 0% { 1239 | opacity: 0; } 1240 | 100% { 1241 | opacity: 1; } } 1242 | 1243 | .fade-in { 1244 | -webkit-animation-name: fadeIn; 1245 | animation-name: fadeIn; } 1246 | 1247 | @-webkit-keyframes fadeInDown { 1248 | 0% { 1249 | opacity: 0; 1250 | -webkit-transform: translate3d(0, -30px, 0); 1251 | transform: translate3d(0, -30px, 0); } 1252 | 100% { 1253 | opacity: 1; 1254 | -webkit-transform: none; 1255 | transform: none; } } 1256 | 1257 | @keyframes fadeInDown { 1258 | 0% { 1259 | opacity: 0; 1260 | -webkit-transform: translate3d(0, -30px, 0); 1261 | transform: translate3d(0, -30px, 0); } 1262 | 100% { 1263 | opacity: 1; 1264 | -webkit-transform: none; 1265 | transform: none; } } 1266 | 1267 | .fade-in-down { 1268 | -webkit-animation-name: fadeInDown; 1269 | animation-name: fadeInDown; } 1270 | 1271 | @-webkit-keyframes fadeInDownBig { 1272 | 0% { 1273 | opacity: 0; 1274 | -webkit-transform: translate3d(0, -100%, 0); 1275 | transform: translate3d(0, -100%, 0); } 1276 | 100% { 1277 | opacity: 1; 1278 | -webkit-transform: none; 1279 | transform: none; } } 1280 | 1281 | @keyframes fadeInDownBig { 1282 | 0% { 1283 | opacity: 0; 1284 | -webkit-transform: translate3d(0, -100%, 0); 1285 | transform: translate3d(0, -100%, 0); } 1286 | 100% { 1287 | opacity: 1; 1288 | -webkit-transform: none; 1289 | transform: none; } } 1290 | 1291 | .fade-in-down-big { 1292 | -webkit-animation-name: fadeInDownBig; 1293 | animation-name: fadeInDownBig; } 1294 | 1295 | @-webkit-keyframes fadeInLeft { 1296 | 0% { 1297 | opacity: 0; 1298 | -webkit-transform: translate3d(-30px, 0, 0); 1299 | transform: translate3d(-30px, 0, 0); } 1300 | 100% { 1301 | opacity: 1; 1302 | -webkit-transform: none; 1303 | transform: none; } } 1304 | 1305 | @keyframes fadeInLeft { 1306 | 0% { 1307 | opacity: 0; 1308 | -webkit-transform: translate3d(-30px, 0, 0); 1309 | transform: translate3d(-30px, 0, 0); } 1310 | 100% { 1311 | opacity: 1; 1312 | -webkit-transform: none; 1313 | transform: none; } } 1314 | 1315 | .fade-in-left { 1316 | -webkit-animation-name: fadeInLeft; 1317 | animation-name: fadeInLeft; } 1318 | 1319 | @-webkit-keyframes fadeInLeftBig { 1320 | 0% { 1321 | opacity: 0; 1322 | -webkit-transform: translate3d(-100%, 0, 0); 1323 | transform: translate3d(-100%, 0, 0); } 1324 | 100% { 1325 | opacity: 1; 1326 | -webkit-transform: none; 1327 | transform: none; } } 1328 | 1329 | @keyframes fadeInLeftBig { 1330 | 0% { 1331 | opacity: 0; 1332 | -webkit-transform: translate3d(-100%, 0, 0); 1333 | transform: translate3d(-100%, 0, 0); } 1334 | 100% { 1335 | opacity: 1; 1336 | -webkit-transform: none; 1337 | transform: none; } } 1338 | 1339 | .fade-in-left-big { 1340 | -webkit-animation-name: fadeInLeftBig; 1341 | animation-name: fadeInLeftBig; } 1342 | 1343 | @-webkit-keyframes fadeInRight { 1344 | 0% { 1345 | opacity: 0; 1346 | -webkit-transform: translate3d(30px, 0, 0); 1347 | transform: translate3d(30px, 0, 0); } 1348 | 100% { 1349 | opacity: 1; 1350 | -webkit-transform: none; 1351 | transform: none; } } 1352 | 1353 | @keyframes fadeInRight { 1354 | 0% { 1355 | opacity: 0; 1356 | -webkit-transform: translate3d(30px, 0, 0); 1357 | transform: translate3d(30px, 0, 0); } 1358 | 100% { 1359 | opacity: 1; 1360 | -webkit-transform: none; 1361 | transform: none; } } 1362 | 1363 | .fade-in-right { 1364 | -webkit-animation-name: fadeInRight; 1365 | animation-name: fadeInRight; } 1366 | 1367 | @-webkit-keyframes fadeInRightBig { 1368 | 0% { 1369 | opacity: 0; 1370 | -webkit-transform: translate3d(100%, 0, 0); 1371 | transform: translate3d(100%, 0, 0); } 1372 | 100% { 1373 | opacity: 1; 1374 | -webkit-transform: none; 1375 | transform: none; } } 1376 | 1377 | @keyframes fadeInRightBig { 1378 | 0% { 1379 | opacity: 0; 1380 | -webkit-transform: translate3d(100%, 0, 0); 1381 | transform: translate3d(100%, 0, 0); } 1382 | 100% { 1383 | opacity: 1; 1384 | -webkit-transform: none; 1385 | transform: none; } } 1386 | 1387 | .fade-in-right-big { 1388 | -webkit-animation-name: fadeInRightBig; 1389 | animation-name: fadeInRightBig; } 1390 | 1391 | @-webkit-keyframes fadeInUp { 1392 | 0% { 1393 | opacity: 0; 1394 | -webkit-transform: translate3d(0, 30px, 0); 1395 | transform: translate3d(0, 30px, 0); } 1396 | 100% { 1397 | opacity: 1; 1398 | -webkit-transform: none; 1399 | transform: none; } } 1400 | 1401 | @keyframes fadeInUp { 1402 | 0% { 1403 | opacity: 0; 1404 | -webkit-transform: translate3d(0, 30px, 0); 1405 | transform: translate3d(0, 30px, 0); } 1406 | 100% { 1407 | opacity: 1; 1408 | -webkit-transform: none; 1409 | transform: none; } } 1410 | 1411 | .fade-in-up { 1412 | -webkit-animation-name: fadeInUp; 1413 | animation-name: fadeInUp; } 1414 | 1415 | @-webkit-keyframes fadeInUpBig { 1416 | 0% { 1417 | opacity: 0; 1418 | -webkit-transform: translate3d(0, 100%, 0); 1419 | transform: translate3d(0, 100%, 0); } 1420 | 100% { 1421 | opacity: 1; 1422 | -webkit-transform: none; 1423 | transform: none; } } 1424 | 1425 | @keyframes fadeInUpBig { 1426 | 0% { 1427 | opacity: 0; 1428 | -webkit-transform: translate3d(0, 100%, 0); 1429 | transform: translate3d(0, 100%, 0); } 1430 | 100% { 1431 | opacity: 1; 1432 | -webkit-transform: none; 1433 | transform: none; } } 1434 | 1435 | .fade-in-up-big { 1436 | -webkit-animation-name: fadeInUpBig; 1437 | animation-name: fadeInUpBig; } 1438 | 1439 | @media print { 1440 | *, 1441 | *:before, 1442 | *:after { 1443 | background: transparent; 1444 | color: #000; 1445 | box-shadow: none; 1446 | text-shadow: none; } 1447 | a, a:visited { 1448 | text-decoration: underline; } 1449 | a[href]:after { 1450 | content: " (" attr(href) ")"; } 1451 | a[href^="#"]:after, a[href^="javascript:"]:after { 1452 | content: ""; } 1453 | pre, blockquote { 1454 | page-break-inside: avoid; } 1455 | thead { 1456 | display: table-header-group; } 1457 | tr { 1458 | page-break-inside: avoid; } 1459 | img { 1460 | page-break-inside: avoid; 1461 | max-width: 100%; } 1462 | p, h2, h3 { 1463 | orphans: 3; 1464 | widows: 3; } 1465 | h2, h3 { 1466 | page-break-after: avoid; } 1467 | abbr[title]:after { 1468 | content: " (" attr(title) ")"; } } 1469 | 1470 | .no-margin { 1471 | margin: 0; } 1472 | 1473 | .no-padding { 1474 | padding: 0; } 1475 | 1476 | .no-float { 1477 | float: none; } 1478 | 1479 | .no-background { 1480 | background: transparent; } 1481 | 1482 | .no-border { 1483 | border: 0; } 1484 | 1485 | .no-select { 1486 | -webkit-user-select: none; 1487 | -moz-user-select: none; 1488 | -ms-user-select: none; 1489 | user-select: none; 1490 | cursor: default; } 1491 | 1492 | .font-100 { 1493 | font-weight: 100; } 1494 | 1495 | .font-200 { 1496 | font-weight: 200; } 1497 | 1498 | .font-300 { 1499 | font-weight: 300; } 1500 | 1501 | .font-400 { 1502 | font-weight: 400; } 1503 | 1504 | .font-500 { 1505 | font-weight: 500; } 1506 | 1507 | .font-600 { 1508 | font-weight: 600; } 1509 | 1510 | .font-700 { 1511 | font-weight: 700; } 1512 | 1513 | .font-800 { 1514 | font-weight: 800; } 1515 | 1516 | .font-900 { 1517 | font-weight: 900; } 1518 | 1519 | .font-normal { 1520 | font-style: normal; } 1521 | 1522 | .font-italic { 1523 | font-style: italic; } 1524 | 1525 | .uppercase { 1526 | text-transform: uppercase; } 1527 | 1528 | .lowercase { 1529 | text-transform: lowercase; } 1530 | 1531 | .capitalize { 1532 | text-transform: capitalize; } 1533 | 1534 | .text-left { 1535 | text-align: left; } 1536 | 1537 | .text-right { 1538 | text-align: right; } 1539 | 1540 | .text-center { 1541 | text-align: center; } 1542 | 1543 | .text-justify { 1544 | text-align: justify; } 1545 | 1546 | .relative { 1547 | position: relative; } 1548 | 1549 | .absolute { 1550 | position: absolute; } 1551 | 1552 | .static { 1553 | position: static; } 1554 | 1555 | .fixed { 1556 | position: fixed; } 1557 | 1558 | .none { 1559 | display: none; } 1560 | 1561 | .block { 1562 | display: block; } 1563 | 1564 | .inline-block { 1565 | display: inline-block; } 1566 | 1567 | .inline { 1568 | display: inline; } 1569 | 1570 | .flex { 1571 | display: -webkit-box; 1572 | display: -ms-flexbox; 1573 | display: flex; } 1574 | 1575 | .flex-row { 1576 | -webkit-box-orient: horizontal; 1577 | -webkit-box-direction: normal; 1578 | -ms-flex-direction: row; 1579 | flex-direction: row; } 1580 | 1581 | .flex-column { 1582 | -webkit-box-orient: vertical; 1583 | -webkit-box-direction: normal; 1584 | -ms-flex-direction: column; 1585 | flex-direction: column; } 1586 | 1587 | .flex-space-around { 1588 | -ms-flex-pack: distribute; 1589 | justify-content: space-around; } 1590 | 1591 | .flex-space-between { 1592 | -webkit-box-pack: justify; 1593 | -ms-flex-pack: justify; 1594 | justify-content: space-between; } 1595 | 1596 | .flex-start { 1597 | -webkit-box-pack: start; 1598 | -ms-flex-pack: start; 1599 | justify-content: flex-start; } 1600 | 1601 | .flex-center { 1602 | -webkit-box-pack: center; 1603 | -ms-flex-pack: center; 1604 | justify-content: center; } 1605 | 1606 | .flex-end { 1607 | -webkit-box-pack: end; 1608 | -ms-flex-pack: end; 1609 | justify-content: flex-end; } 1610 | 1611 | .flex-wrap { 1612 | -ms-flex-wrap: wrap; 1613 | flex-wrap: wrap; } 1614 | 1615 | .flex-nowrap { 1616 | -ms-flex-wrap: nowrap; 1617 | flex-wrap: nowrap; } 1618 | 1619 | .left { 1620 | float: left; } 1621 | 1622 | .right { 1623 | float: right; } 1624 | 1625 | .center { 1626 | float: none; 1627 | margin-left: auto; 1628 | margin-right: auto; } 1629 | 1630 | .pad-top-5 { 1631 | padding-top: 5px; } 1632 | 1633 | .pad-top-10 { 1634 | padding-top: 10px; } 1635 | 1636 | .pad-top-15 { 1637 | padding-top: 15px; } 1638 | 1639 | .pad-top-20 { 1640 | padding-top: 20px; } 1641 | 1642 | .pad-top-25 { 1643 | padding-top: 25px; } 1644 | 1645 | .pad-top-30 { 1646 | padding-top: 30px; } 1647 | 1648 | .pad-top-35 { 1649 | padding-top: 35px; } 1650 | 1651 | .pad-top-40 { 1652 | padding-top: 40px; } 1653 | 1654 | .pad-top-45 { 1655 | padding-top: 45px; } 1656 | 1657 | .pad-top-50 { 1658 | padding-top: 50px; } 1659 | 1660 | .pad-top-55 { 1661 | padding-top: 55px; } 1662 | 1663 | .pad-top-60 { 1664 | padding-top: 60px; } 1665 | 1666 | .pad-bottom-5 { 1667 | padding-bottom: 5px; } 1668 | 1669 | .pad-bottom-10 { 1670 | padding-bottom: 10px; } 1671 | 1672 | .pad-bottom-15 { 1673 | padding-bottom: 15px; } 1674 | 1675 | .pad-bottom-20 { 1676 | padding-bottom: 20px; } 1677 | 1678 | .pad-bottom-25 { 1679 | padding-bottom: 25px; } 1680 | 1681 | .pad-bottom-30 { 1682 | padding-bottom: 30px; } 1683 | 1684 | .pad-bottom-35 { 1685 | padding-bottom: 35px; } 1686 | 1687 | .pad-bottom-40 { 1688 | padding-bottom: 40px; } 1689 | 1690 | .pad-bottom-45 { 1691 | padding-bottom: 45px; } 1692 | 1693 | .pad-bottom-50 { 1694 | padding-bottom: 50px; } 1695 | 1696 | .pad-bottom-55 { 1697 | padding-bottom: 55px; } 1698 | 1699 | .pad-bottom-60 { 1700 | padding-bottom: 60px; } 1701 | 1702 | .pad-5 { 1703 | padding: 5px; } 1704 | 1705 | .pad-10 { 1706 | padding: 10px; } 1707 | 1708 | .pad-15 { 1709 | padding: 15px; } 1710 | 1711 | .pad-20 { 1712 | padding: 20px; } 1713 | 1714 | .pad-25 { 1715 | padding: 25px; } 1716 | 1717 | .pad-30 { 1718 | padding: 30px; } 1719 | 1720 | .pad-35 { 1721 | padding: 35px; } 1722 | 1723 | .pad-40 { 1724 | padding: 40px; } 1725 | 1726 | .pad-45 { 1727 | padding: 45px; } 1728 | 1729 | .pad-50 { 1730 | padding: 50px; } 1731 | 1732 | .pad-55 { 1733 | padding: 55px; } 1734 | 1735 | .pad-60 { 1736 | padding: 60px; } 1737 | 1738 | .sr { 1739 | border: 0; 1740 | clip: rect(0 0 0 0); 1741 | height: 1px; 1742 | margin: -1px; 1743 | overflow: hidden; 1744 | padding: 0; 1745 | position: absolute; 1746 | width: 1px; } 1747 | 1748 | .list-unstyled { 1749 | list-style: none; 1750 | margin: 0; 1751 | padding: 0; } 1752 | .list-unstyled li { 1753 | margin: 0; 1754 | padding: 0; } 1755 | 1756 | .list-inline { 1757 | list-style: none; 1758 | margin: 0; 1759 | padding: 0; } 1760 | .list-inline li { 1761 | margin: 0; 1762 | padding: 0; 1763 | display: inline-block; } 1764 | 1765 | .img-fluid { 1766 | max-width: 100%; } 1767 | 1768 | .field { 1769 | width: 100%; } 1770 | 1771 | .form-group { 1772 | overflow: hidden; } 1773 | .form-group label { 1774 | display: inline-block; 1775 | padding-top: 8px; } 1776 | 1777 | .disabled, [disabled] { 1778 | pointer-events: none; 1779 | cursor: not-allowed; 1780 | opacity: .5; } 1781 | 1782 | .checkbox, 1783 | .radio { 1784 | display: inline-block; 1785 | position: relative; } 1786 | .checkbox label, 1787 | .radio label { 1788 | padding-left: 20px; 1789 | padding-top: 0; 1790 | display: inline-block; } 1791 | .checkbox input[type="checkbox"], 1792 | .checkbox input[type="radio"], 1793 | .radio input[type="checkbox"], 1794 | .radio input[type="radio"] { 1795 | position: absolute; 1796 | top: 4px; 1797 | left: 0; } 1798 | 1799 | .select { 1800 | position: relative; 1801 | display: block; } 1802 | .select:before { 1803 | content: ""; 1804 | border: 6px solid transparent; 1805 | border-top-color: #676767; 1806 | top: 50%; 1807 | right: 10px; 1808 | margin-top: -3px; 1809 | pointer-events: none; 1810 | position: absolute; } 1811 | .select select { 1812 | -webkit-appearance: none; 1813 | -moz-appearance: none; 1814 | height: 36px; 1815 | width: 100%; 1816 | padding: 0 10px; 1817 | line-height: normal; 1818 | border: 1px solid #ccc; 1819 | background: #fff; 1820 | display: block; } 1821 | .select select::-ms-expand { 1822 | display: none; } 1823 | .select select:focus { 1824 | border-color: #f7c723; } 1825 | .select select:-moz-focusring { 1826 | color: transparent; 1827 | text-shadow: 0 0 0 #000; 1828 | border-color: #f7c723; } 1829 | 1830 | .animation { 1831 | -webkit-animation-duration: 1s; 1832 | animation-duration: 1s; 1833 | -webkit-animation-fill-mode: both; 1834 | animation-fill-mode: both; } 1835 | 1836 | .animation-infinite { 1837 | -webkit-animation-iteration-count: infinite; 1838 | animation-iteration-count: infinite; } 1839 | 1840 | @media only screen and (min-width: 740px) { 1841 | .no-float-m { 1842 | float: none; } 1843 | .no-padding-m { 1844 | padding: 0; } 1845 | .no-margin-m { 1846 | margin: 0; } 1847 | .relative-m { 1848 | position: relative; } 1849 | .absolute-m { 1850 | position: absolute; } 1851 | .static-m { 1852 | position: static; } 1853 | .fixed-m { 1854 | position: fixed; } 1855 | .none-m { 1856 | display: none; } 1857 | .block-m { 1858 | display: block; } 1859 | .inline-block-m { 1860 | display: inline-block; } 1861 | .inline-m { 1862 | display: inline; } 1863 | .flex-m { 1864 | display: -webkit-box; 1865 | display: -ms-flexbox; 1866 | display: flex; } 1867 | .flex-row-m { 1868 | -webkit-box-orient: horizontal; 1869 | -webkit-box-direction: normal; 1870 | -ms-flex-direction: row; 1871 | flex-direction: row; } 1872 | .flex-column-m { 1873 | -webkit-box-orient: vertical; 1874 | -webkit-box-direction: normal; 1875 | -ms-flex-direction: column; 1876 | flex-direction: column; } 1877 | .flex-space-around-m { 1878 | -ms-flex-pack: distribute; 1879 | justify-content: space-around; } 1880 | .flex-space-between-m { 1881 | -webkit-box-pack: justify; 1882 | -ms-flex-pack: justify; 1883 | justify-content: space-between; } 1884 | .flex-start-m { 1885 | -webkit-box-pack: start; 1886 | -ms-flex-pack: start; 1887 | justify-content: flex-start; } 1888 | .flex-center-m { 1889 | -webkit-box-pack: center; 1890 | -ms-flex-pack: center; 1891 | justify-content: center; } 1892 | .flex-end-m { 1893 | -webkit-box-pack: end; 1894 | -ms-flex-pack: end; 1895 | justify-content: flex-end; } 1896 | .flex-wrap-m { 1897 | -ms-flex-wrap: wrap; 1898 | flex-wrap: wrap; } 1899 | .flex-nowrap-m { 1900 | -ms-flex-wrap: nowrap; 1901 | flex-wrap: nowrap; } 1902 | .left-m { 1903 | float: left; } 1904 | .right-m { 1905 | float: right; } 1906 | .center-m { 1907 | float: none; 1908 | margin-left: auto; 1909 | margin-right: auto; } 1910 | .text-left-m { 1911 | text-align: left; } 1912 | .text-right-m { 1913 | text-align: right; } 1914 | .text-center-m { 1915 | text-align: center; } 1916 | .text-justify-m { 1917 | text-align: justify; } 1918 | .no-col-m { 1919 | width: auto; 1920 | float: none; } 1921 | .no-push-m, .no-pull-m { 1922 | left: 0; } 1923 | .pad-top-0-m { 1924 | padding-top: 0; } 1925 | .pad-top-5-m { 1926 | padding-top: 5px; } 1927 | .pad-top-10-m { 1928 | padding-top: 10px; } 1929 | .pad-top-15-m { 1930 | padding-top: 15px; } 1931 | .pad-top-20-m { 1932 | padding-top: 20px; } 1933 | .pad-top-25-m { 1934 | padding-top: 25px; } 1935 | .pad-top-30-m { 1936 | padding-top: 30px; } 1937 | .pad-top-35-m { 1938 | padding-top: 35px; } 1939 | .pad-top-40-m { 1940 | padding-top: 40px; } 1941 | .pad-top-45-m { 1942 | padding-top: 45px; } 1943 | .pad-top-50-m { 1944 | padding-top: 50px; } 1945 | .pad-top-55-m { 1946 | padding-top: 55px; } 1947 | .pad-top-60-m { 1948 | padding-top: 60px; } 1949 | .pad-bottom-0-m { 1950 | padding-bottom: 0; } 1951 | .pad-bottom-5-m { 1952 | padding-bottom: 5px; } 1953 | .pad-bottom-10-m { 1954 | padding-bottom: 10px; } 1955 | .pad-bottom-15-m { 1956 | padding-bottom: 15px; } 1957 | .pad-bottom-20-m { 1958 | padding-bottom: 20px; } 1959 | .pad-bottom-25-m { 1960 | padding-bottom: 25px; } 1961 | .pad-bottom-30-m { 1962 | padding-bottom: 30px; } 1963 | .pad-bottom-35-m { 1964 | padding-bottom: 35px; } 1965 | .pad-bottom-40-m { 1966 | padding-bottom: 40px; } 1967 | .pad-bottom-45-m { 1968 | padding-bottom: 45px; } 1969 | .pad-bottom-50-m { 1970 | padding-bottom: 50px; } 1971 | .pad-bottom-55-m { 1972 | padding-bottom: 55px; } 1973 | .pad-bottom-60-m { 1974 | padding-bottom: 60px; } 1975 | .pad-0-m { 1976 | padding: 0; } 1977 | .pad-5-m { 1978 | padding: 5px; } 1979 | .pad-10-m { 1980 | padding: 10px; } 1981 | .pad-15-m { 1982 | padding: 15px; } 1983 | .pad-20-m { 1984 | padding: 20px; } 1985 | .pad-25-m { 1986 | padding: 25px; } 1987 | .pad-30-m { 1988 | padding: 30px; } 1989 | .pad-35-m { 1990 | padding: 35px; } 1991 | .pad-40-m { 1992 | padding: 40px; } 1993 | .pad-45-m { 1994 | padding: 45px; } 1995 | .pad-50-m { 1996 | padding: 50px; } 1997 | .pad-55-m { 1998 | padding: 55px; } 1999 | .pad-60-m { 2000 | padding: 60px; } } 2001 | 2002 | @media only screen and (min-width: 980px) { 2003 | .no-float-l { 2004 | float: none; } 2005 | .no-padding-l { 2006 | padding: 0; } 2007 | .no-margin-l { 2008 | margin: 0; } 2009 | .relative-l { 2010 | position: relative; } 2011 | .absolute-l { 2012 | position: absolute; } 2013 | .static-l { 2014 | position: static; } 2015 | .fixed-l { 2016 | position: fixed; } 2017 | .none-l { 2018 | display: none; } 2019 | .block-l { 2020 | display: block; } 2021 | .inline-block-l { 2022 | display: inline-block; } 2023 | .inline-l { 2024 | display: inline; } 2025 | .flex-l { 2026 | display: -webkit-box; 2027 | display: -ms-flexbox; 2028 | display: flex; } 2029 | .flex-row-l { 2030 | -webkit-box-orient: horizontal; 2031 | -webkit-box-direction: normal; 2032 | -ms-flex-direction: row; 2033 | flex-direction: row; } 2034 | .flex-column-l { 2035 | -webkit-box-orient: vertical; 2036 | -webkit-box-direction: normal; 2037 | -ms-flex-direction: column; 2038 | flex-direction: column; } 2039 | .flex-space-around-l { 2040 | -ms-flex-pack: distribute; 2041 | justify-content: space-around; } 2042 | .flex-space-between-l { 2043 | -webkit-box-pack: justify; 2044 | -ms-flex-pack: justify; 2045 | justify-content: space-between; } 2046 | .flex-start-l { 2047 | -webkit-box-pack: start; 2048 | -ms-flex-pack: start; 2049 | justify-content: flex-start; } 2050 | .flex-center-l { 2051 | -webkit-box-pack: center; 2052 | -ms-flex-pack: center; 2053 | justify-content: center; } 2054 | .flex-end-l { 2055 | -webkit-box-pack: end; 2056 | -ms-flex-pack: end; 2057 | justify-content: flex-end; } 2058 | .flex-wrap-l { 2059 | -ms-flex-wrap: wrap; 2060 | flex-wrap: wrap; } 2061 | .flex-nowrap-l { 2062 | -ms-flex-wrap: nowrap; 2063 | flex-wrap: nowrap; } 2064 | .left-l { 2065 | float: left; } 2066 | .right-l { 2067 | float: right; } 2068 | .center-l { 2069 | float: none; 2070 | margin-left: auto; 2071 | margin-right: auto; } 2072 | .text-left-l { 2073 | text-align: left; } 2074 | .text-right-l { 2075 | text-align: right; } 2076 | .text-center-l { 2077 | text-align: center; } 2078 | .text-justify-l { 2079 | text-align: justify; } 2080 | .no-col-l { 2081 | width: auto; 2082 | float: none; } 2083 | .no-push-l, .no-pull-l { 2084 | left: 0; } 2085 | .pad-top-0-l { 2086 | padding-top: 0; } 2087 | .pad-top-5-l { 2088 | padding-top: 5px; } 2089 | .pad-top-10-l { 2090 | padding-top: 10px; } 2091 | .pad-top-15-l { 2092 | padding-top: 15px; } 2093 | .pad-top-20-l { 2094 | padding-top: 20px; } 2095 | .pad-top-25-l { 2096 | padding-top: 25px; } 2097 | .pad-top-30-l { 2098 | padding-top: 30px; } 2099 | .pad-top-35-l { 2100 | padding-top: 35px; } 2101 | .pad-top-40-l { 2102 | padding-top: 40px; } 2103 | .pad-top-45-l { 2104 | padding-top: 45px; } 2105 | .pad-top-50-l { 2106 | padding-top: 50px; } 2107 | .pad-top-55-l { 2108 | padding-top: 55px; } 2109 | .pad-top-60-l { 2110 | padding-top: 60px; } 2111 | .pad-bottom-0-l { 2112 | padding-bottom: 0; } 2113 | .pad-bottom-5-l { 2114 | padding-bottom: 5px; } 2115 | .pad-bottom-10-l { 2116 | padding-bottom: 10px; } 2117 | .pad-bottom-15-l { 2118 | padding-bottom: 15px; } 2119 | .pad-bottom-20-l { 2120 | padding-bottom: 20px; } 2121 | .pad-bottom-25-l { 2122 | padding-bottom: 25px; } 2123 | .pad-bottom-30-l { 2124 | padding-bottom: 30px; } 2125 | .pad-bottom-35-l { 2126 | padding-bottom: 35px; } 2127 | .pad-bottom-40-l { 2128 | padding-bottom: 40px; } 2129 | .pad-bottom-45-l { 2130 | padding-bottom: 45px; } 2131 | .pad-bottom-50-l { 2132 | padding-bottom: 50px; } 2133 | .pad-bottom-55-l { 2134 | padding-bottom: 55px; } 2135 | .pad-bottom-60-l { 2136 | padding-bottom: 60px; } 2137 | .pad-0-l { 2138 | padding: 0; } 2139 | .pad-5-l { 2140 | padding: 5px; } 2141 | .pad-10-l { 2142 | padding: 10px; } 2143 | .pad-15-l { 2144 | padding: 15px; } 2145 | .pad-20-l { 2146 | padding: 20px; } 2147 | .pad-25-l { 2148 | padding: 25px; } 2149 | .pad-30-l { 2150 | padding: 30px; } 2151 | .pad-35-l { 2152 | padding: 35px; } 2153 | .pad-40-l { 2154 | padding: 40px; } 2155 | .pad-45-l { 2156 | padding: 45px; } 2157 | .pad-50-l { 2158 | padding: 50px; } 2159 | .pad-55-l { 2160 | padding: 55px; } 2161 | .pad-60-l { 2162 | padding: 60px; } } 2163 | 2164 | @media only screen and (min-width: 1140px) { 2165 | .no-float-xl { 2166 | float: none; } 2167 | .no-padding-xl { 2168 | padding: 0; } 2169 | .no-margin-xl { 2170 | margin: 0; } 2171 | .relative-xl { 2172 | position: relative; } 2173 | .absolute-xl { 2174 | position: absolute; } 2175 | .static-xl { 2176 | position: static; } 2177 | .fixed-xl { 2178 | position: fixed; } 2179 | .none-xl { 2180 | display: none; } 2181 | .block-xl { 2182 | display: block; } 2183 | .inline-block-xl { 2184 | display: inline-block; } 2185 | .inline-xl { 2186 | display: inline; } 2187 | .flex-xl { 2188 | display: -webkit-box; 2189 | display: -ms-flexbox; 2190 | display: flex; } 2191 | .flex-row-xl { 2192 | -webkit-box-orient: horizontal; 2193 | -webkit-box-direction: normal; 2194 | -ms-flex-direction: row; 2195 | flex-direction: row; } 2196 | .flex-column-xl { 2197 | -webkit-box-orient: vertical; 2198 | -webkit-box-direction: normal; 2199 | -ms-flex-direction: column; 2200 | flex-direction: column; } 2201 | .flex-space-around-xl { 2202 | -ms-flex-pack: distribute; 2203 | justify-content: space-around; } 2204 | .flex-space-between-xl { 2205 | -webkit-box-pack: justify; 2206 | -ms-flex-pack: justify; 2207 | justify-content: space-between; } 2208 | .flex-start-xl { 2209 | -webkit-box-pack: start; 2210 | -ms-flex-pack: start; 2211 | justify-content: flex-start; } 2212 | .flex-center-xl { 2213 | -webkit-box-pack: center; 2214 | -ms-flex-pack: center; 2215 | justify-content: center; } 2216 | .flex-end-xl { 2217 | -webkit-box-pack: end; 2218 | -ms-flex-pack: end; 2219 | justify-content: flex-end; } 2220 | .flex-wrap-xl { 2221 | -ms-flex-wrap: wrap; 2222 | flex-wrap: wrap; } 2223 | .flex-nowrap-xl { 2224 | -ms-flex-wrap: nowrap; 2225 | flex-wrap: nowrap; } 2226 | .left-xl { 2227 | float: left; } 2228 | .right-xl { 2229 | float: right; } 2230 | .center-xl { 2231 | float: none; 2232 | margin-left: auto; 2233 | margin-right: auto; } 2234 | .text-left-xl { 2235 | text-align: left; } 2236 | .text-right-xl { 2237 | text-align: right; } 2238 | .text-center-xl { 2239 | text-align: center; } 2240 | .text-justify-xl { 2241 | text-align: justify; } 2242 | .no-col-xl { 2243 | width: auto; 2244 | float: none; } 2245 | .no-push-xl, .no-pull-xl { 2246 | left: 0; } 2247 | .pad-top-0-xl { 2248 | padding-top: 0; } 2249 | .pad-top-5-xl { 2250 | padding-top: 5px; } 2251 | .pad-top-10-xl { 2252 | padding-top: 10px; } 2253 | .pad-top-15-xl { 2254 | padding-top: 15px; } 2255 | .pad-top-20-xl { 2256 | padding-top: 20px; } 2257 | .pad-top-25-xl { 2258 | padding-top: 25px; } 2259 | .pad-top-30-xl { 2260 | padding-top: 30px; } 2261 | .pad-top-35-xl { 2262 | padding-top: 35px; } 2263 | .pad-top-40-xl { 2264 | padding-top: 40px; } 2265 | .pad-top-45-xl { 2266 | padding-top: 45px; } 2267 | .pad-top-50-xl { 2268 | padding-top: 50px; } 2269 | .pad-top-55-xl { 2270 | padding-top: 55px; } 2271 | .pad-top-60-xl { 2272 | padding-top: 60px; } 2273 | .pad-bottom-0-xl { 2274 | padding-bottom: 0; } 2275 | .pad-bottom-5-xl { 2276 | padding-bottom: 5px; } 2277 | .pad-bottom-10-xl { 2278 | padding-bottom: 10px; } 2279 | .pad-bottom-15-xl { 2280 | padding-bottom: 15px; } 2281 | .pad-bottom-20-xl { 2282 | padding-bottom: 20px; } 2283 | .pad-bottom-25-xl { 2284 | padding-bottom: 25px; } 2285 | .pad-bottom-30-xl { 2286 | padding-bottom: 30px; } 2287 | .pad-bottom-35-xl { 2288 | padding-bottom: 35px; } 2289 | .pad-bottom-40-xl { 2290 | padding-bottom: 40px; } 2291 | .pad-bottom-45-xl { 2292 | padding-bottom: 45px; } 2293 | .pad-bottom-50-xl { 2294 | padding-bottom: 50px; } 2295 | .pad-bottom-55-xl { 2296 | padding-bottom: 55px; } 2297 | .pad-bottom-60-xl { 2298 | padding-bottom: 60px; } 2299 | .pad-0-xl { 2300 | padding: 0; } 2301 | .pad-5-xl { 2302 | padding: 5px; } 2303 | .pad-10-xl { 2304 | padding: 10px; } 2305 | .pad-15-xl { 2306 | padding: 15px; } 2307 | .pad-20-xl { 2308 | padding: 20px; } 2309 | .pad-25-xl { 2310 | padding: 25px; } 2311 | .pad-30-xl { 2312 | padding: 30px; } 2313 | .pad-35-xl { 2314 | padding: 35px; } 2315 | .pad-40-xl { 2316 | padding: 40px; } 2317 | .pad-45-xl { 2318 | padding: 45px; } 2319 | .pad-50-xl { 2320 | padding: 50px; } 2321 | .pad-55-xl { 2322 | padding: 55px; } 2323 | .pad-60-xl { 2324 | padding: 60px; } } 2325 | 2326 | @media print { 2327 | .no-float-print { 2328 | float: none; } 2329 | .no-padding-print { 2330 | padding: 0; } 2331 | .no-margin-print { 2332 | margin: 0; } 2333 | .none-print { 2334 | display: none; } 2335 | .block-print { 2336 | display: block; } 2337 | .inline-block-print { 2338 | display: inline-block; } 2339 | .inline-print { 2340 | display: inline; } 2341 | .text-left-print { 2342 | text-align: left; } 2343 | .text-right-print { 2344 | text-align: right; } 2345 | .text-center-print { 2346 | text-align: center; } 2347 | .text-justify-print { 2348 | text-align: justify; } 2349 | .no-col-print { 2350 | width: auto; 2351 | float: none; } 2352 | .no-push-print, .no-pull-print { 2353 | left: 0; } 2354 | .pad-top-0-print { 2355 | padding-top: 0; } 2356 | .pad-top-5-print { 2357 | padding-top: 5px; } 2358 | .pad-top-10-print { 2359 | padding-top: 10px; } 2360 | .pad-top-15-print { 2361 | padding-top: 15px; } 2362 | .pad-top-20-print { 2363 | padding-top: 20px; } 2364 | .pad-top-25-print { 2365 | padding-top: 25px; } 2366 | .pad-top-30-print { 2367 | padding-top: 30px; } 2368 | .pad-top-35-print { 2369 | padding-top: 35px; } 2370 | .pad-top-40-print { 2371 | padding-top: 40px; } 2372 | .pad-top-45-print { 2373 | padding-top: 45px; } 2374 | .pad-top-50-print { 2375 | padding-top: 50px; } 2376 | .pad-top-55-print { 2377 | padding-top: 55px; } 2378 | .pad-top-60-print { 2379 | padding-top: 60px; } 2380 | .pad-bottom-0-print { 2381 | padding-bottom: 0; } 2382 | .pad-bottom-5-print { 2383 | padding-bottom: 5px; } 2384 | .pad-bottom-10-print { 2385 | padding-bottom: 10px; } 2386 | .pad-bottom-15-print { 2387 | padding-bottom: 15px; } 2388 | .pad-bottom-20-print { 2389 | padding-bottom: 20px; } 2390 | .pad-bottom-25-print { 2391 | padding-bottom: 25px; } 2392 | .pad-bottom-30-print { 2393 | padding-bottom: 30px; } 2394 | .pad-bottom-35-print { 2395 | padding-bottom: 35px; } 2396 | .pad-bottom-40-print { 2397 | padding-bottom: 40px; } 2398 | .pad-bottom-45-print { 2399 | padding-bottom: 45px; } 2400 | .pad-bottom-50-print { 2401 | padding-bottom: 50px; } 2402 | .pad-bottom-55-print { 2403 | padding-bottom: 55px; } 2404 | .pad-bottom-60-print { 2405 | padding-bottom: 60px; } 2406 | .pad-0-print { 2407 | padding: 0; } 2408 | .pad-5-print { 2409 | padding: 5px; } 2410 | .pad-10-print { 2411 | padding: 10px; } 2412 | .pad-15-print { 2413 | padding: 15px; } 2414 | .pad-20-print { 2415 | padding: 20px; } 2416 | .pad-25-print { 2417 | padding: 25px; } 2418 | .pad-30-print { 2419 | padding: 30px; } 2420 | .pad-35-print { 2421 | padding: 35px; } 2422 | .pad-40-print { 2423 | padding: 40px; } 2424 | .pad-45-print { 2425 | padding: 45px; } 2426 | .pad-50-print { 2427 | padding: 50px; } 2428 | .pad-55-print { 2429 | padding: 55px; } 2430 | .pad-60-print { 2431 | padding: 60px; } } 2432 | 2433 | /*# sourceMappingURL=styles.css.map */ 2434 | -------------------------------------------------------------------------------- /src/css/styles.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | 3 | // Base Stylesheet - http://getbase.org 4 | // Author: Matthew Hartman - http://www.matthewhartman.com.au/ 5 | // Version: 3.1.5 - Last Updated: July 02, 2016 6 | 7 | ========================================================================== */ 8 | *, *:before, *:after { 9 | box-sizing: border-box; } 10 | 11 | html { 12 | font-family: sans-serif; 13 | -ms-text-size-adjust: 100%; 14 | -webkit-text-size-adjust: 100%; } 15 | 16 | html, button, input, select, textarea { 17 | font-family: inherit; } 18 | 19 | article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { 20 | display: block; } 21 | 22 | body, form, fieldset, legend, input, select, textarea, button { 23 | margin: 0; } 24 | 25 | audio:not([controls]) { 26 | display: none; 27 | height: 0; } 28 | 29 | audio, canvas, progress, video { 30 | display: inline-block; } 31 | 32 | progress { 33 | vertical-align: baseline; } 34 | 35 | [hidden], template { 36 | display: none; } 37 | 38 | img { 39 | border-style: none; } 40 | 41 | svg:not(:root) { 42 | overflow: hidden; } 43 | 44 | body { 45 | font-family: sans-serif; 46 | font-size: 16px; 47 | font-size: 1rem; 48 | line-height: 22px; 49 | line-height: 1.375rem; 50 | color: #000; 51 | font-weight: 400; 52 | background: #fff; } 53 | 54 | p { 55 | margin: 0 0 20px 0; } 56 | 57 | a { 58 | color: #000; 59 | text-decoration: underline; 60 | background-color: transparent; 61 | -webkit-text-decoration-skip: objects; } 62 | a:active, a:hover { 63 | color: #000; 64 | outline-width: 0; 65 | text-decoration: none; } 66 | 67 | h1, h2, h3, h4, h5, h6 { 68 | font-family: sans-serif; 69 | margin: 0; } 70 | 71 | h1, .fs-1 { 72 | font-size: 32px; 73 | font-size: 2rem; 74 | line-height: 38px; 75 | line-height: 2.375rem; } 76 | 77 | h2, .fs-2 { 78 | font-size: 26px; 79 | font-size: 1.625rem; 80 | line-height: 32px; 81 | line-height: 2rem; } 82 | 83 | h3, .fs-3 { 84 | font-size: 22px; 85 | font-size: 1.375rem; 86 | line-height: 28px; 87 | line-height: 1.75rem; } 88 | 89 | h4, .fs-4 { 90 | font-size: 18px; 91 | font-size: 1.125rem; 92 | line-height: 24px; 93 | line-height: 1.5rem; } 94 | 95 | h5, .fs-5 { 96 | font-size: 16px; 97 | font-size: 1rem; 98 | line-height: 22px; 99 | line-height: 1.375rem; } 100 | 101 | h6, .fs-6 { 102 | font-size: 14px; 103 | font-size: 0.875rem; 104 | line-height: 20px; 105 | line-height: 1.25rem; } 106 | 107 | h1 { 108 | margin-bottom: .5em; 109 | color: #000; 110 | font-weight: 700; } 111 | 112 | h2 { 113 | margin-bottom: .2em; 114 | color: #000; 115 | font-weight: 700; } 116 | 117 | h3 { 118 | margin-bottom: .2em; 119 | color: #000; 120 | font-weight: 700; } 121 | 122 | h4 { 123 | margin-bottom: .2em; 124 | color: #000; 125 | font-weight: 700; } 126 | 127 | h5 { 128 | margin-bottom: .1em; 129 | color: #000; 130 | font-weight: 700; } 131 | 132 | h6 { 133 | margin-bottom: .1em; 134 | color: #000; 135 | font-weight: 700; } 136 | 137 | b, strong, .strong { 138 | font-weight: 700; } 139 | 140 | em, .em { 141 | font-style: italic; } 142 | 143 | abbr[title], .abbr[title] { 144 | border-bottom: none; 145 | text-decoration: underline; 146 | text-decoration: underline dotted; } 147 | 148 | dfn { 149 | font-style: italic; } 150 | 151 | small, .small { 152 | font-size: 13px; 153 | font-size: 0.8125rem; 154 | line-height: 16px; 155 | line-height: 1rem; } 156 | 157 | mark, .mark { 158 | background-color: #ff0; 159 | color: #000; } 160 | 161 | sub, .sub, sup, .sup { 162 | font-size: 75%; 163 | line-height: 0; 164 | position: relative; 165 | vertical-align: baseline; } 166 | 167 | sub, .sub { 168 | bottom: -0.25em; } 169 | 170 | sup, .sup { 171 | top: -0.5em; } 172 | 173 | del, .del { 174 | text-decoration: line-through; } 175 | 176 | figure { 177 | margin: 1em 40px; } 178 | 179 | hr, .hr { 180 | box-sizing: content-box; 181 | height: 1px; 182 | background: #eee; 183 | border: 0; 184 | margin-top: 20px; 185 | margin-bottom: 20px; } 186 | 187 | ul, ol { 188 | margin: 20px 0; 189 | padding: 0 0 0 40px; } 190 | 191 | dl:before, dl:after { 192 | content: " "; 193 | display: table; } 194 | 195 | dl:after { 196 | clear: both; } 197 | 198 | dl dt { 199 | float: left; 200 | width: 25%; 201 | display: block; 202 | font-weight: 400; } 203 | 204 | dl dd { 205 | overflow: hidden; 206 | display: block; } 207 | 208 | blockquote, 209 | .blockquote { 210 | font-family: sans-serif; 211 | font-weight: 400; 212 | font-style: italic; 213 | margin: 20px 0; } 214 | blockquote p, 215 | .blockquote p { 216 | font-size: 22px; 217 | font-size: 1.375rem; 218 | line-height: 28px; 219 | line-height: 1.75rem; 220 | margin-bottom: 20px; } 221 | blockquote cite, 222 | .blockquote cite { 223 | font-size: 13px; 224 | font-size: 0.8125rem; 225 | line-height: 19px; 226 | line-height: 1.1875rem; 227 | font-weight: 700; 228 | font-style: normal; } 229 | 230 | caption { 231 | font-size: inherit; 232 | line-height: normal; 233 | font-weight: 700; 234 | text-align: left; 235 | padding: 10px; 236 | border-bottom: 1px solid #d7d7d7; } 237 | 238 | table { 239 | font-size: 14px; 240 | font-size: 0.875rem; 241 | border-collapse: collapse; 242 | border-spacing: 0; 243 | width: 100%; 244 | margin: 0; 245 | text-align: left; } 246 | table thead td, 247 | table thead th, 248 | table tbody td, 249 | table tbody th, 250 | table tfoot td, 251 | table tfoot th { 252 | color: #585858; 253 | padding: 10px; 254 | border-bottom: 1px solid #e9e9e9; } 255 | 256 | code, kbd, pre, samp { 257 | font-size: 13px; 258 | font-size: 0.8125rem; 259 | line-height: 18px; 260 | line-height: 1.125rem; 261 | word-wrap: break-word; 262 | font-family: monospace, monospace; 263 | color: #000; 264 | background-color: transparent; 265 | font-weight: normal; 266 | padding: 0; 267 | white-space: pre-wrap; } 268 | 269 | pre { 270 | padding: 10px; 271 | overflow: auto; 272 | border: 1px solid #d7d7d7; } 273 | 274 | fieldset { 275 | border: 1px solid #c0c0c0; 276 | margin: 0 2px; 277 | padding: 0.35em 0.625em 0.75em; } 278 | 279 | legend { 280 | box-sizing: border-box; 281 | color: inherit; 282 | display: table; 283 | max-width: 100%; 284 | padding: 0; 285 | white-space: normal; } 286 | 287 | label, 288 | button, 289 | input, 290 | optgroup, 291 | select, 292 | textarea { 293 | color: #000; 294 | font: inherit; 295 | margin: 0; } 296 | 297 | [type="text"], 298 | [type="email"], 299 | [type="password"], 300 | [type="tel"], 301 | [type="number"], 302 | [type="date"] { 303 | height: 36px; 304 | padding: 10px; 305 | background-color: #fff; 306 | border: 1px solid #ccc; 307 | -webkit-appearance: none; 308 | -moz-appearance: textfield; 309 | border-radius: 0; } 310 | [type="text"]:focus, 311 | [type="email"]:focus, 312 | [type="password"]:focus, 313 | [type="tel"]:focus, 314 | [type="number"]:focus, 315 | [type="date"]:focus { 316 | background-color: #fff; 317 | border-color: #f7c723; 318 | outline: 0; } 319 | 320 | [type="number"]::-webkit-inner-spin-button, 321 | [type="number"]::-webkit-outer-spin-button { 322 | height: auto; } 323 | 324 | [type="date"]::-webkit-inner-spin-button { 325 | display: none; 326 | -webkit-appearance: none; } 327 | 328 | [type="checkbox"], 329 | [type="radio"] { 330 | box-sizing: border-box; 331 | padding: 0; } 332 | 333 | [type="number"]::-webkit-inner-spin-button, 334 | [type="number"]::-webkit-outer-spin-button { 335 | height: auto; } 336 | 337 | [type="search"] { 338 | -webkit-appearance: textfield; 339 | outline-offset: -2px; } 340 | 341 | [type="search"]::-webkit-search-cancel-button, 342 | [type="search"]::-webkit-search-decoration { 343 | -webkit-appearance: none; } 344 | 345 | textarea { 346 | padding: 10px; 347 | background-color: #fff; 348 | border: 1px solid #ccc; 349 | overflow: auto; 350 | border-radius: 0; } 351 | textarea:focus { 352 | background-color: #fff; 353 | border-color: #f7c723; 354 | outline: 0; } 355 | 356 | select { 357 | text-transform: none; 358 | height: 36px; 359 | padding: 0 10px; 360 | background-color: #fff; 361 | border: 1px solid #ccc; } 362 | select:focus { 363 | background-color: #fff; 364 | border-color: #f7c723; 365 | outline: 0; } 366 | 367 | optgroup { 368 | font-weight: 700; } 369 | 370 | button { 371 | border-radius: 0; 372 | overflow: visible; 373 | text-transform: none; 374 | cursor: pointer; } 375 | 376 | button, 377 | html [type="button"], 378 | [type="reset"], 379 | [type="submit"] { 380 | -webkit-appearance: button; 381 | border-radius: 0; } 382 | 383 | button::-moz-focus-inner, 384 | [type="button"]::-moz-focus-inner, 385 | [type="reset"]::-moz-focus-inner, 386 | [type="submit"]::-moz-focus-inner { 387 | border-style: none; 388 | padding: 0; } 389 | 390 | button:-moz-focusring, 391 | [type="button"]:-moz-focusring, 392 | [type="reset"]:-moz-focusring, 393 | [type="submit"]:-moz-focusring { 394 | outline: 1px dotted ButtonText; } 395 | 396 | button[disabled], 397 | html input[disabled] { 398 | cursor: not-allowed; } 399 | 400 | input::-webkit-input-placeholder { 401 | color: #999; } 402 | 403 | input:-moz-placeholder { 404 | color: #999; } 405 | 406 | input::-moz-placeholder { 407 | color: #999; } 408 | 409 | input:-ms-input-placeholder { 410 | color: #999; } 411 | 412 | .button { 413 | cursor: pointer; 414 | border: 1px solid #d7d7d7; 415 | background-color: #f3f3f3; 416 | line-height: normal; 417 | padding: 10px 20px; 418 | text-decoration: none; 419 | color: #363636; 420 | display: inline-block; 421 | -webkit-transition: all 0.3s; 422 | transition: all 0.3s; } 423 | .button:hover, .button:active { 424 | text-decoration: none; } 425 | .button:hover { 426 | background: #f9f9f9; } 427 | 428 | .button-link { 429 | color: #000; 430 | text-decoration: underline; 431 | border: 0; 432 | background: transparent; 433 | padding: 0; } 434 | .button-link:hover { 435 | text-decoration: none; } 436 | .button-link:active { 437 | outline: 0; } 438 | 439 | .clear:before, .clear:after { 440 | content: " "; 441 | display: table; } 442 | 443 | .clear:after { 444 | clear: both; } 445 | 446 | .row:before, .row:after { 447 | content: ""; 448 | display: table; } 449 | 450 | .row:after { 451 | clear: both; } 452 | 453 | .row { 454 | position: relative; 455 | margin-left: -15px; 456 | margin-right: -15px; } 457 | 458 | @media only screen and (min-width: 740px) { 459 | .row-m { 460 | position: relative; 461 | margin-left: -15px; 462 | margin-right: -15px; } 463 | .row-m:before, .row-m:after { 464 | content: ""; 465 | display: table; } 466 | .row-m:after { 467 | clear: both; } 468 | .clear-m:before, .clear-m:after { 469 | content: ""; 470 | display: table; } 471 | .clear-m:after { 472 | clear: both; } } 473 | 474 | @media only screen and (min-width: 980px) { 475 | .row-l { 476 | position: relative; 477 | margin-left: -15px; 478 | margin-right: -15px; } 479 | .row-l:before, .row-l:after { 480 | content: ""; 481 | display: table; } 482 | .row-l:after { 483 | clear: both; } 484 | .clear-l:before, .clear-l:after { 485 | content: ""; 486 | display: table; } 487 | .clear-l:after { 488 | clear: both; } } 489 | 490 | @media only screen and (min-width: 1140px) { 491 | .row-xl { 492 | position: relative; 493 | margin-left: -15px; 494 | margin-right: -15px; } 495 | .row-xl:before, .row-xl:after { 496 | content: ""; 497 | display: table; } 498 | .row-xl:after { 499 | clear: both; } 500 | .clear-xl:before, .clear-xl:after { 501 | content: ""; 502 | display: table; } 503 | .clear-xl:after { 504 | clear: both; } } 505 | 506 | .container { 507 | padding-left: 15px; 508 | padding-right: 15px; 509 | margin-left: auto; 510 | margin-right: auto; } 511 | 512 | .container-full { 513 | padding-left: 0; 514 | padding-right: 0; 515 | margin-left: auto; 516 | margin-right: auto; } 517 | 518 | @media only screen and (min-width: 740px) { 519 | .container, .container-full { 520 | width: 720px; } 521 | .container-m { 522 | width: 720px; 523 | padding-left: 15px; 524 | padding-right: 15px; 525 | margin-left: auto; 526 | margin-right: auto; } 527 | .container-full-m { 528 | width: 720px; 529 | margin-left: auto; 530 | margin-right: auto; 531 | padding-left: 0; 532 | padding-right: 0; } } 533 | 534 | @media only screen and (min-width: 980px) { 535 | .container, .container-full { 536 | width: 960px; } 537 | .container-l { 538 | width: 960px; 539 | padding-left: 15px; 540 | padding-right: 15px; 541 | margin-left: auto; 542 | margin-right: auto; } 543 | .container-full-l { 544 | width: 960px; 545 | margin-left: auto; 546 | margin-right: auto; 547 | padding-left: 0; 548 | padding-right: 0; } } 549 | 550 | @media only screen and (min-width: 1140px) { 551 | .container, .container-full { 552 | width: 1120px; } 553 | .container-xl { 554 | width: 1120px; 555 | padding-left: 15px; 556 | padding-right: 15px; 557 | margin-left: auto; 558 | margin-right: auto; } 559 | .container-full-xl { 560 | width: 1120px; 561 | margin-left: auto; 562 | margin-right: auto; 563 | padding-left: 0; 564 | padding-right: 0; } } 565 | 566 | .col-1, 567 | .col-2, 568 | .col-3, 569 | .col-4, 570 | .col-5, 571 | .col-6, 572 | .col-7, 573 | .col-8, 574 | .col-9, 575 | .col-10, 576 | .col-11, 577 | .col-12, 578 | .col-1-2, 579 | .col-1-3, 580 | .col-2-3, 581 | .col-1-4, 582 | .col-3-4, 583 | .col-1-5, 584 | .col-2-5, 585 | .col-3-5, 586 | .col-4-5 { 587 | padding-left: 15px; 588 | padding-right: 15px; 589 | position: relative; 590 | float: left; } 591 | 592 | .col-1 { 593 | width: 8.33333%; } 594 | 595 | .col-2 { 596 | width: 16.66667%; } 597 | 598 | .col-3 { 599 | width: 25%; } 600 | 601 | .col-4 { 602 | width: 33.33333%; } 603 | 604 | .col-5 { 605 | width: 41.66667%; } 606 | 607 | .col-6 { 608 | width: 50%; } 609 | 610 | .col-7 { 611 | width: 58.33333%; } 612 | 613 | .col-8 { 614 | width: 66.66667%; } 615 | 616 | .col-9 { 617 | width: 75%; } 618 | 619 | .col-10 { 620 | width: 83.33333%; } 621 | 622 | .col-11 { 623 | width: 91.66667%; } 624 | 625 | .col-12 { 626 | width: 100%; } 627 | 628 | .col-1-2 { 629 | width: 50%; } 630 | 631 | .col-1-3 { 632 | width: 33.33333%; } 633 | 634 | .col-2-3 { 635 | width: 66.66667%; } 636 | 637 | .col-1-4 { 638 | width: 25%; } 639 | 640 | .col-3-4 { 641 | width: 75%; } 642 | 643 | .col-1-5 { 644 | width: 20%; } 645 | 646 | .col-2-5 { 647 | width: 40%; } 648 | 649 | .col-3-5 { 650 | width: 60%; } 651 | 652 | .col-4-5 { 653 | width: 80%; } 654 | 655 | .col-full { 656 | width: 100%; } 657 | 658 | .push-1 { 659 | left: 8.33333%; } 660 | 661 | .push-2 { 662 | left: 16.66667%; } 663 | 664 | .push-3 { 665 | left: 25%; } 666 | 667 | .push-4 { 668 | left: 33.33333%; } 669 | 670 | .push-5 { 671 | left: 41.66667%; } 672 | 673 | .push-6 { 674 | left: 50%; } 675 | 676 | .push-7 { 677 | left: 58.33333%; } 678 | 679 | .push-8 { 680 | left: 66.66667%; } 681 | 682 | .push-9 { 683 | left: 75%; } 684 | 685 | .push-10 { 686 | left: 83.33333%; } 687 | 688 | .push-11 { 689 | left: 91.66667%; } 690 | 691 | .push-1-2 { 692 | left: 50%; } 693 | 694 | .push-1-3 { 695 | left: 33.33333%; } 696 | 697 | .push-2-3 { 698 | left: 66.66667%; } 699 | 700 | .push-1-4 { 701 | left: 25%; } 702 | 703 | .push-3-4 { 704 | left: 75%; } 705 | 706 | .push-1-5 { 707 | left: 20%; } 708 | 709 | .push-2-5 { 710 | left: 40%; } 711 | 712 | .push-3-5 { 713 | left: 60%; } 714 | 715 | .push-4-5 { 716 | left: 80%; } 717 | 718 | .pull-1 { 719 | left: -8.33333%; } 720 | 721 | .pull-2 { 722 | left: -16.66667%; } 723 | 724 | .pull-3 { 725 | left: -25%; } 726 | 727 | .pull-4 { 728 | left: -33.33333%; } 729 | 730 | .pull-5 { 731 | left: -41.66667%; } 732 | 733 | .pull-6 { 734 | left: -50%; } 735 | 736 | .pull-7 { 737 | left: -58.33333%; } 738 | 739 | .pull-8 { 740 | left: -66.66667%; } 741 | 742 | .pull-9 { 743 | left: -75%; } 744 | 745 | .pull-10 { 746 | left: -83.33333%; } 747 | 748 | .pull-11 { 749 | left: -91.66667%; } 750 | 751 | .pull-1-2 { 752 | left: -50%; } 753 | 754 | .pull-1-3 { 755 | left: -33.33333%; } 756 | 757 | .pull-2-3 { 758 | left: -66.66667%; } 759 | 760 | .pull-1-4 { 761 | left: -25%; } 762 | 763 | .pull-3-4 { 764 | left: -75%; } 765 | 766 | .pull-1-5 { 767 | left: -20%; } 768 | 769 | .pull-2-5 { 770 | left: -40%; } 771 | 772 | .pull-3-5 { 773 | left: -60%; } 774 | 775 | .pull-4-5 { 776 | left: -80%; } 777 | 778 | @media only screen and (min-width: 740px) { 779 | .col-1-m, 780 | .col-2-m, 781 | .col-3-m, 782 | .col-4-m, 783 | .col-5-m, 784 | .col-6-m, 785 | .col-7-m, 786 | .col-8-m, 787 | .col-9-m, 788 | .col-10-m, 789 | .col-11-m, 790 | .col-12-m, 791 | .col-1-2-m, 792 | .col-1-3-m, 793 | .col-2-3-m, 794 | .col-1-4-m, 795 | .col-3-4-m, 796 | .col-1-5-m, 797 | .col-2-5-m, 798 | .col-3-5-m, 799 | .col-4-5-m { 800 | padding-left: 15px; 801 | padding-right: 15px; 802 | position: relative; 803 | float: left; } 804 | .col-1-m { 805 | width: 8.33333%; } 806 | .col-2-m { 807 | width: 16.66667%; } 808 | .col-3-m { 809 | width: 25%; } 810 | .col-4-m { 811 | width: 33.33333%; } 812 | .col-5-m { 813 | width: 41.66667%; } 814 | .col-6-m { 815 | width: 50%; } 816 | .col-7-m { 817 | width: 58.33333%; } 818 | .col-8-m { 819 | width: 66.66667%; } 820 | .col-9-m { 821 | width: 75%; } 822 | .col-10-m { 823 | width: 83.33333%; } 824 | .col-11-m { 825 | width: 91.66667%; } 826 | .col-12-m { 827 | width: 100%; } 828 | .col-1-2-m { 829 | width: 50%; } 830 | .col-1-3-m { 831 | width: 33.33333%; } 832 | .col-2-3-m { 833 | width: 66.66667%; } 834 | .col-1-4-m { 835 | width: 25%; } 836 | .col-3-4-m { 837 | width: 75%; } 838 | .col-1-5-m { 839 | width: 20%; } 840 | .col-2-5-m { 841 | width: 40%; } 842 | .col-3-5-m { 843 | width: 60%; } 844 | .col-4-5-m { 845 | width: 80%; } 846 | .col-full-m { 847 | width: 100%; } 848 | .push-1-m { 849 | left: 8.33333%; } 850 | .push-2-m { 851 | left: 16.66667%; } 852 | .push-3-m { 853 | left: 25%; } 854 | .push-4-m { 855 | left: 33.33333%; } 856 | .push-5-m { 857 | left: 41.66667%; } 858 | .push-6-m { 859 | left: 50%; } 860 | .push-7-m { 861 | left: 58.33333%; } 862 | .push-8-m { 863 | left: 66.66667%; } 864 | .push-9-m { 865 | left: 75%; } 866 | .push-10-m { 867 | left: 83.33333%; } 868 | .push-11-m { 869 | left: 91.66667%; } 870 | .push-1-2-m { 871 | left: 50%; } 872 | .push-1-3-m { 873 | left: 33.33333%; } 874 | .push-2-3-m { 875 | left: 66.66667%; } 876 | .push-1-4-m { 877 | left: 25%; } 878 | .push-3-4-m { 879 | left: 75%; } 880 | .push-1-5-m { 881 | left: 20%; } 882 | .push-2-5-m { 883 | left: 40%; } 884 | .push-3-5-m { 885 | left: 60%; } 886 | .push-4-5-m { 887 | left: 80%; } 888 | .pull-1-m { 889 | left: -8.33333%; } 890 | .pull-2-m { 891 | left: -16.66667%; } 892 | .pull-3-m { 893 | left: -25%; } 894 | .pull-4-m { 895 | left: -33.33333%; } 896 | .pull-5-m { 897 | left: -41.66667%; } 898 | .pull-6-m { 899 | left: -50%; } 900 | .pull-7-m { 901 | left: -58.33333%; } 902 | .pull-8-m { 903 | left: -66.66667%; } 904 | .pull-9-m { 905 | left: -75%; } 906 | .pull-10-m { 907 | left: -83.33333%; } 908 | .pull-11-m { 909 | left: -91.66667%; } 910 | .pull-1-2-m { 911 | left: -50%; } 912 | .pull-1-3-m { 913 | left: -33.33333%; } 914 | .pull-2-3-m { 915 | left: -66.66667%; } 916 | .pull-1-4-m { 917 | left: -25%; } 918 | .pull-3-4-m { 919 | left: -75%; } 920 | .pull-1-5-m { 921 | left: -20%; } 922 | .pull-2-5-m { 923 | left: -40%; } 924 | .pull-3-5-m { 925 | left: -60%; } 926 | .pull-4-5-m { 927 | left: -80%; } } 928 | 929 | @media only screen and (min-width: 980px) { 930 | .col-1-l, 931 | .col-2-l, 932 | .col-3-l, 933 | .col-4-l, 934 | .col-5-l, 935 | .col-6-l, 936 | .col-7-l, 937 | .col-8-l, 938 | .col-9-l, 939 | .col-10-l, 940 | .col-11-l, 941 | .col-12-l, 942 | .col-1-2-l, 943 | .col-1-3-l, 944 | .col-2-3-l, 945 | .col-1-4-l, 946 | .col-3-4-l, 947 | .col-1-5-l, 948 | .col-2-5-l, 949 | .col-3-5-l, 950 | .col-4-5-l { 951 | padding-left: 15px; 952 | padding-right: 15px; 953 | position: relative; 954 | float: left; } 955 | .col-1-l { 956 | width: 8.33333%; } 957 | .col-2-l { 958 | width: 16.66667%; } 959 | .col-3-l { 960 | width: 25%; } 961 | .col-4-l { 962 | width: 33.33333%; } 963 | .col-5-l { 964 | width: 41.66667%; } 965 | .col-6-l { 966 | width: 50%; } 967 | .col-7-l { 968 | width: 58.33333%; } 969 | .col-8-l { 970 | width: 66.66667%; } 971 | .col-9-l { 972 | width: 75%; } 973 | .col-10-l { 974 | width: 83.33333%; } 975 | .col-11-l { 976 | width: 91.66667%; } 977 | .col-12-l { 978 | width: 100%; } 979 | .col-1-2-l { 980 | width: 50%; } 981 | .col-1-3-l { 982 | width: 33.33333%; } 983 | .col-2-3-l { 984 | width: 66.66667%; } 985 | .col-1-4-l { 986 | width: 25%; } 987 | .col-3-4-l { 988 | width: 75%; } 989 | .col-1-5-l { 990 | width: 20%; } 991 | .col-2-5-l { 992 | width: 40%; } 993 | .col-3-5-l { 994 | width: 60%; } 995 | .col-4-5-l { 996 | width: 80%; } 997 | .col-full-l { 998 | width: 100%; } 999 | .push-1-l { 1000 | left: 8.33333%; } 1001 | .push-2-l { 1002 | left: 16.66667%; } 1003 | .push-3-l { 1004 | left: 25%; } 1005 | .push-4-l { 1006 | left: 33.33333%; } 1007 | .push-5-l { 1008 | left: 41.66667%; } 1009 | .push-6-l { 1010 | left: 50%; } 1011 | .push-7-l { 1012 | left: 58.33333%; } 1013 | .push-8-l { 1014 | left: 66.66667%; } 1015 | .push-9-l { 1016 | left: 75%; } 1017 | .push-10-l { 1018 | left: 83.33333%; } 1019 | .push-11-l { 1020 | left: 91.66667%; } 1021 | .push-1-2-l { 1022 | left: 50%; } 1023 | .push-1-3-l { 1024 | left: 33.33333%; } 1025 | .push-2-3-l { 1026 | left: 66.66667%; } 1027 | .push-1-4-l { 1028 | left: 25%; } 1029 | .push-3-4-l { 1030 | left: 75%; } 1031 | .push-1-5-l { 1032 | left: 20%; } 1033 | .push-2-5-l { 1034 | left: 40%; } 1035 | .push-3-5-l { 1036 | left: 60%; } 1037 | .push-4-5-l { 1038 | left: 80%; } 1039 | .pull-1-l { 1040 | left: -8.33333%; } 1041 | .pull-2-l { 1042 | left: -16.66667%; } 1043 | .pull-3-l { 1044 | left: -25%; } 1045 | .pull-4-l { 1046 | left: -33.33333%; } 1047 | .pull-5-l { 1048 | left: -41.66667%; } 1049 | .pull-6-l { 1050 | left: -50%; } 1051 | .pull-7-l { 1052 | left: -58.33333%; } 1053 | .pull-8-l { 1054 | left: -66.66667%; } 1055 | .pull-9-l { 1056 | left: -75%; } 1057 | .pull-10-l { 1058 | left: -83.33333%; } 1059 | .pull-11-l { 1060 | left: -91.66667%; } 1061 | .pull-1-2-l { 1062 | left: -50%; } 1063 | .pull-1-3-l { 1064 | left: -33.33333%; } 1065 | .pull-2-3-l { 1066 | left: -66.66667%; } 1067 | .pull-1-4-l { 1068 | left: -25%; } 1069 | .pull-3-4-l { 1070 | left: -75%; } 1071 | .pull-1-5-l { 1072 | left: -20%; } 1073 | .pull-2-5-l { 1074 | left: -40%; } 1075 | .pull-3-5-l { 1076 | left: -60%; } 1077 | .pull-4-5-l { 1078 | left: -80%; } } 1079 | 1080 | @media only screen and (min-width: 1140px) { 1081 | .col-1-xl, 1082 | .col-2-xl, 1083 | .col-3-xl, 1084 | .col-4-xl, 1085 | .col-5-xl, 1086 | .col-6-xl, 1087 | .col-7-xl, 1088 | .col-8-xl, 1089 | .col-9-xl, 1090 | .col-10-xl, 1091 | .col-11-xl, 1092 | .col-12-xl, 1093 | .col-1-2-xl, 1094 | .col-1-3-xl, 1095 | .col-2-3-xl, 1096 | .col-1-4-xl, 1097 | .col-3-4-xl, 1098 | .col-1-5-xl, 1099 | .col-2-5-xl, 1100 | .col-3-5-xl, 1101 | .col-4-5-xl { 1102 | padding-left: 15px; 1103 | padding-right: 15px; 1104 | position: relative; 1105 | float: left; } 1106 | .col-1-xl { 1107 | width: 8.33333%; } 1108 | .col-2-xl { 1109 | width: 16.66667%; } 1110 | .col-3-xl { 1111 | width: 25%; } 1112 | .col-4-xl { 1113 | width: 33.33333%; } 1114 | .col-5-xl { 1115 | width: 41.66667%; } 1116 | .col-6-xl { 1117 | width: 50%; } 1118 | .col-7-xl { 1119 | width: 58.33333%; } 1120 | .col-8-xl { 1121 | width: 66.66667%; } 1122 | .col-9-xl { 1123 | width: 75%; } 1124 | .col-10-xl { 1125 | width: 83.33333%; } 1126 | .col-11-xl { 1127 | width: 91.66667%; } 1128 | .col-12-xl { 1129 | width: 100%; } 1130 | .col-1-2-xl { 1131 | width: 50%; } 1132 | .col-1-3-xl { 1133 | width: 33.33333%; } 1134 | .col-2-3-xl { 1135 | width: 66.66667%; } 1136 | .col-1-4-xl { 1137 | width: 25%; } 1138 | .col-3-4-xl { 1139 | width: 75%; } 1140 | .col-1-5-xl { 1141 | width: 20%; } 1142 | .col-2-5-xl { 1143 | width: 40%; } 1144 | .col-3-5-xl { 1145 | width: 60%; } 1146 | .col-4-5-xl { 1147 | width: 80%; } 1148 | .col-full-xl { 1149 | width: 100%; } 1150 | .push-1-xl { 1151 | left: 8.33333%; } 1152 | .push-2-xl { 1153 | left: 16.66667%; } 1154 | .push-3-xl { 1155 | left: 25%; } 1156 | .push-4-xl { 1157 | left: 33.33333%; } 1158 | .push-5-xl { 1159 | left: 41.66667%; } 1160 | .push-6-xl { 1161 | left: 50%; } 1162 | .push-7-xl { 1163 | left: 58.33333%; } 1164 | .push-8-xl { 1165 | left: 66.66667%; } 1166 | .push-9-xl { 1167 | left: 75%; } 1168 | .push-10-xl { 1169 | left: 83.33333%; } 1170 | .push-11-xl { 1171 | left: 91.66667%; } 1172 | .push-1-2-xl { 1173 | left: 50%; } 1174 | .push-1-3-xl { 1175 | left: 33.33333%; } 1176 | .push-2-3-xl { 1177 | left: 66.66667%; } 1178 | .push-1-4-xl { 1179 | left: 25%; } 1180 | .push-3-4-xl { 1181 | left: 75%; } 1182 | .push-1-5-xl { 1183 | left: 20%; } 1184 | .push-2-5-xl { 1185 | left: 40%; } 1186 | .push-3-5-xl { 1187 | left: 60%; } 1188 | .push-4-5-xl { 1189 | left: 80%; } 1190 | .pull-1-xl { 1191 | left: -8.33333%; } 1192 | .pull-2-xl { 1193 | left: -16.66667%; } 1194 | .pull-3-xl { 1195 | left: -25%; } 1196 | .pull-4-xl { 1197 | left: -33.33333%; } 1198 | .pull-5-xl { 1199 | left: -41.66667%; } 1200 | .pull-6-xl { 1201 | left: -50%; } 1202 | .pull-7-xl { 1203 | left: -58.33333%; } 1204 | .pull-8-xl { 1205 | left: -66.66667%; } 1206 | .pull-9-xl { 1207 | left: -75%; } 1208 | .pull-10-xl { 1209 | left: -83.33333%; } 1210 | .pull-11-xl { 1211 | left: -91.66667%; } 1212 | .pull-1-2-xl { 1213 | left: -50%; } 1214 | .pull-1-3-xl { 1215 | left: -33.33333%; } 1216 | .pull-2-3-xl { 1217 | left: -66.66667%; } 1218 | .pull-1-4-xl { 1219 | left: -25%; } 1220 | .pull-3-4-xl { 1221 | left: -75%; } 1222 | .pull-1-5-xl { 1223 | left: -20%; } 1224 | .pull-2-5-xl { 1225 | left: -40%; } 1226 | .pull-3-5-xl { 1227 | left: -60%; } 1228 | .pull-4-5-xl { 1229 | left: -80%; } } 1230 | 1231 | @-webkit-keyframes fadeIn { 1232 | 0% { 1233 | opacity: 0; } 1234 | 100% { 1235 | opacity: 1; } } 1236 | 1237 | @keyframes fadeIn { 1238 | 0% { 1239 | opacity: 0; } 1240 | 100% { 1241 | opacity: 1; } } 1242 | 1243 | .fade-in { 1244 | -webkit-animation-name: fadeIn; 1245 | animation-name: fadeIn; } 1246 | 1247 | @-webkit-keyframes fadeInDown { 1248 | 0% { 1249 | opacity: 0; 1250 | -webkit-transform: translate3d(0, -30px, 0); 1251 | transform: translate3d(0, -30px, 0); } 1252 | 100% { 1253 | opacity: 1; 1254 | -webkit-transform: none; 1255 | transform: none; } } 1256 | 1257 | @keyframes fadeInDown { 1258 | 0% { 1259 | opacity: 0; 1260 | -webkit-transform: translate3d(0, -30px, 0); 1261 | transform: translate3d(0, -30px, 0); } 1262 | 100% { 1263 | opacity: 1; 1264 | -webkit-transform: none; 1265 | transform: none; } } 1266 | 1267 | .fade-in-down { 1268 | -webkit-animation-name: fadeInDown; 1269 | animation-name: fadeInDown; } 1270 | 1271 | @-webkit-keyframes fadeInDownBig { 1272 | 0% { 1273 | opacity: 0; 1274 | -webkit-transform: translate3d(0, -100%, 0); 1275 | transform: translate3d(0, -100%, 0); } 1276 | 100% { 1277 | opacity: 1; 1278 | -webkit-transform: none; 1279 | transform: none; } } 1280 | 1281 | @keyframes fadeInDownBig { 1282 | 0% { 1283 | opacity: 0; 1284 | -webkit-transform: translate3d(0, -100%, 0); 1285 | transform: translate3d(0, -100%, 0); } 1286 | 100% { 1287 | opacity: 1; 1288 | -webkit-transform: none; 1289 | transform: none; } } 1290 | 1291 | .fade-in-down-big { 1292 | -webkit-animation-name: fadeInDownBig; 1293 | animation-name: fadeInDownBig; } 1294 | 1295 | @-webkit-keyframes fadeInLeft { 1296 | 0% { 1297 | opacity: 0; 1298 | -webkit-transform: translate3d(-30px, 0, 0); 1299 | transform: translate3d(-30px, 0, 0); } 1300 | 100% { 1301 | opacity: 1; 1302 | -webkit-transform: none; 1303 | transform: none; } } 1304 | 1305 | @keyframes fadeInLeft { 1306 | 0% { 1307 | opacity: 0; 1308 | -webkit-transform: translate3d(-30px, 0, 0); 1309 | transform: translate3d(-30px, 0, 0); } 1310 | 100% { 1311 | opacity: 1; 1312 | -webkit-transform: none; 1313 | transform: none; } } 1314 | 1315 | .fade-in-left { 1316 | -webkit-animation-name: fadeInLeft; 1317 | animation-name: fadeInLeft; } 1318 | 1319 | @-webkit-keyframes fadeInLeftBig { 1320 | 0% { 1321 | opacity: 0; 1322 | -webkit-transform: translate3d(-100%, 0, 0); 1323 | transform: translate3d(-100%, 0, 0); } 1324 | 100% { 1325 | opacity: 1; 1326 | -webkit-transform: none; 1327 | transform: none; } } 1328 | 1329 | @keyframes fadeInLeftBig { 1330 | 0% { 1331 | opacity: 0; 1332 | -webkit-transform: translate3d(-100%, 0, 0); 1333 | transform: translate3d(-100%, 0, 0); } 1334 | 100% { 1335 | opacity: 1; 1336 | -webkit-transform: none; 1337 | transform: none; } } 1338 | 1339 | .fade-in-left-big { 1340 | -webkit-animation-name: fadeInLeftBig; 1341 | animation-name: fadeInLeftBig; } 1342 | 1343 | @-webkit-keyframes fadeInRight { 1344 | 0% { 1345 | opacity: 0; 1346 | -webkit-transform: translate3d(30px, 0, 0); 1347 | transform: translate3d(30px, 0, 0); } 1348 | 100% { 1349 | opacity: 1; 1350 | -webkit-transform: none; 1351 | transform: none; } } 1352 | 1353 | @keyframes fadeInRight { 1354 | 0% { 1355 | opacity: 0; 1356 | -webkit-transform: translate3d(30px, 0, 0); 1357 | transform: translate3d(30px, 0, 0); } 1358 | 100% { 1359 | opacity: 1; 1360 | -webkit-transform: none; 1361 | transform: none; } } 1362 | 1363 | .fade-in-right { 1364 | -webkit-animation-name: fadeInRight; 1365 | animation-name: fadeInRight; } 1366 | 1367 | @-webkit-keyframes fadeInRightBig { 1368 | 0% { 1369 | opacity: 0; 1370 | -webkit-transform: translate3d(100%, 0, 0); 1371 | transform: translate3d(100%, 0, 0); } 1372 | 100% { 1373 | opacity: 1; 1374 | -webkit-transform: none; 1375 | transform: none; } } 1376 | 1377 | @keyframes fadeInRightBig { 1378 | 0% { 1379 | opacity: 0; 1380 | -webkit-transform: translate3d(100%, 0, 0); 1381 | transform: translate3d(100%, 0, 0); } 1382 | 100% { 1383 | opacity: 1; 1384 | -webkit-transform: none; 1385 | transform: none; } } 1386 | 1387 | .fade-in-right-big { 1388 | -webkit-animation-name: fadeInRightBig; 1389 | animation-name: fadeInRightBig; } 1390 | 1391 | @-webkit-keyframes fadeInUp { 1392 | 0% { 1393 | opacity: 0; 1394 | -webkit-transform: translate3d(0, 30px, 0); 1395 | transform: translate3d(0, 30px, 0); } 1396 | 100% { 1397 | opacity: 1; 1398 | -webkit-transform: none; 1399 | transform: none; } } 1400 | 1401 | @keyframes fadeInUp { 1402 | 0% { 1403 | opacity: 0; 1404 | -webkit-transform: translate3d(0, 30px, 0); 1405 | transform: translate3d(0, 30px, 0); } 1406 | 100% { 1407 | opacity: 1; 1408 | -webkit-transform: none; 1409 | transform: none; } } 1410 | 1411 | .fade-in-up { 1412 | -webkit-animation-name: fadeInUp; 1413 | animation-name: fadeInUp; } 1414 | 1415 | @-webkit-keyframes fadeInUpBig { 1416 | 0% { 1417 | opacity: 0; 1418 | -webkit-transform: translate3d(0, 100%, 0); 1419 | transform: translate3d(0, 100%, 0); } 1420 | 100% { 1421 | opacity: 1; 1422 | -webkit-transform: none; 1423 | transform: none; } } 1424 | 1425 | @keyframes fadeInUpBig { 1426 | 0% { 1427 | opacity: 0; 1428 | -webkit-transform: translate3d(0, 100%, 0); 1429 | transform: translate3d(0, 100%, 0); } 1430 | 100% { 1431 | opacity: 1; 1432 | -webkit-transform: none; 1433 | transform: none; } } 1434 | 1435 | .fade-in-up-big { 1436 | -webkit-animation-name: fadeInUpBig; 1437 | animation-name: fadeInUpBig; } 1438 | 1439 | @media print { 1440 | *, 1441 | *:before, 1442 | *:after { 1443 | background: transparent; 1444 | color: #000; 1445 | box-shadow: none; 1446 | text-shadow: none; } 1447 | a, a:visited { 1448 | text-decoration: underline; } 1449 | a[href]:after { 1450 | content: " (" attr(href) ")"; } 1451 | a[href^="#"]:after, a[href^="javascript:"]:after { 1452 | content: ""; } 1453 | pre, blockquote { 1454 | page-break-inside: avoid; } 1455 | thead { 1456 | display: table-header-group; } 1457 | tr { 1458 | page-break-inside: avoid; } 1459 | img { 1460 | page-break-inside: avoid; 1461 | max-width: 100%; } 1462 | p, h2, h3 { 1463 | orphans: 3; 1464 | widows: 3; } 1465 | h2, h3 { 1466 | page-break-after: avoid; } 1467 | abbr[title]:after { 1468 | content: " (" attr(title) ")"; } } 1469 | 1470 | .no-margin { 1471 | margin: 0; } 1472 | 1473 | .no-padding { 1474 | padding: 0; } 1475 | 1476 | .no-float { 1477 | float: none; } 1478 | 1479 | .no-background { 1480 | background: transparent; } 1481 | 1482 | .no-border { 1483 | border: 0; } 1484 | 1485 | .no-select { 1486 | -webkit-user-select: none; 1487 | -moz-user-select: none; 1488 | -ms-user-select: none; 1489 | user-select: none; 1490 | cursor: default; } 1491 | 1492 | .font-100 { 1493 | font-weight: 100; } 1494 | 1495 | .font-200 { 1496 | font-weight: 200; } 1497 | 1498 | .font-300 { 1499 | font-weight: 300; } 1500 | 1501 | .font-400 { 1502 | font-weight: 400; } 1503 | 1504 | .font-500 { 1505 | font-weight: 500; } 1506 | 1507 | .font-600 { 1508 | font-weight: 600; } 1509 | 1510 | .font-700 { 1511 | font-weight: 700; } 1512 | 1513 | .font-800 { 1514 | font-weight: 800; } 1515 | 1516 | .font-900 { 1517 | font-weight: 900; } 1518 | 1519 | .font-normal { 1520 | font-style: normal; } 1521 | 1522 | .font-italic { 1523 | font-style: italic; } 1524 | 1525 | .uppercase { 1526 | text-transform: uppercase; } 1527 | 1528 | .lowercase { 1529 | text-transform: lowercase; } 1530 | 1531 | .capitalize { 1532 | text-transform: capitalize; } 1533 | 1534 | .text-left { 1535 | text-align: left; } 1536 | 1537 | .text-right { 1538 | text-align: right; } 1539 | 1540 | .text-center { 1541 | text-align: center; } 1542 | 1543 | .text-justify { 1544 | text-align: justify; } 1545 | 1546 | .relative { 1547 | position: relative; } 1548 | 1549 | .absolute { 1550 | position: absolute; } 1551 | 1552 | .static { 1553 | position: static; } 1554 | 1555 | .fixed { 1556 | position: fixed; } 1557 | 1558 | .none { 1559 | display: none; } 1560 | 1561 | .block { 1562 | display: block; } 1563 | 1564 | .inline-block { 1565 | display: inline-block; } 1566 | 1567 | .inline { 1568 | display: inline; } 1569 | 1570 | .flex { 1571 | display: -webkit-box; 1572 | display: -ms-flexbox; 1573 | display: flex; } 1574 | 1575 | .flex-row { 1576 | -webkit-box-orient: horizontal; 1577 | -webkit-box-direction: normal; 1578 | -ms-flex-direction: row; 1579 | flex-direction: row; } 1580 | 1581 | .flex-column { 1582 | -webkit-box-orient: vertical; 1583 | -webkit-box-direction: normal; 1584 | -ms-flex-direction: column; 1585 | flex-direction: column; } 1586 | 1587 | .flex-space-around { 1588 | -ms-flex-pack: distribute; 1589 | justify-content: space-around; } 1590 | 1591 | .flex-space-between { 1592 | -webkit-box-pack: justify; 1593 | -ms-flex-pack: justify; 1594 | justify-content: space-between; } 1595 | 1596 | .flex-start { 1597 | -webkit-box-pack: start; 1598 | -ms-flex-pack: start; 1599 | justify-content: flex-start; } 1600 | 1601 | .flex-center { 1602 | -webkit-box-pack: center; 1603 | -ms-flex-pack: center; 1604 | justify-content: center; } 1605 | 1606 | .flex-end { 1607 | -webkit-box-pack: end; 1608 | -ms-flex-pack: end; 1609 | justify-content: flex-end; } 1610 | 1611 | .flex-wrap { 1612 | -ms-flex-wrap: wrap; 1613 | flex-wrap: wrap; } 1614 | 1615 | .flex-nowrap { 1616 | -ms-flex-wrap: nowrap; 1617 | flex-wrap: nowrap; } 1618 | 1619 | .left { 1620 | float: left; } 1621 | 1622 | .right { 1623 | float: right; } 1624 | 1625 | .center { 1626 | float: none; 1627 | margin-left: auto; 1628 | margin-right: auto; } 1629 | 1630 | .pad-top-5 { 1631 | padding-top: 5px; } 1632 | 1633 | .pad-top-10 { 1634 | padding-top: 10px; } 1635 | 1636 | .pad-top-15 { 1637 | padding-top: 15px; } 1638 | 1639 | .pad-top-20 { 1640 | padding-top: 20px; } 1641 | 1642 | .pad-top-25 { 1643 | padding-top: 25px; } 1644 | 1645 | .pad-top-30 { 1646 | padding-top: 30px; } 1647 | 1648 | .pad-top-35 { 1649 | padding-top: 35px; } 1650 | 1651 | .pad-top-40 { 1652 | padding-top: 40px; } 1653 | 1654 | .pad-top-45 { 1655 | padding-top: 45px; } 1656 | 1657 | .pad-top-50 { 1658 | padding-top: 50px; } 1659 | 1660 | .pad-top-55 { 1661 | padding-top: 55px; } 1662 | 1663 | .pad-top-60 { 1664 | padding-top: 60px; } 1665 | 1666 | .pad-bottom-5 { 1667 | padding-bottom: 5px; } 1668 | 1669 | .pad-bottom-10 { 1670 | padding-bottom: 10px; } 1671 | 1672 | .pad-bottom-15 { 1673 | padding-bottom: 15px; } 1674 | 1675 | .pad-bottom-20 { 1676 | padding-bottom: 20px; } 1677 | 1678 | .pad-bottom-25 { 1679 | padding-bottom: 25px; } 1680 | 1681 | .pad-bottom-30 { 1682 | padding-bottom: 30px; } 1683 | 1684 | .pad-bottom-35 { 1685 | padding-bottom: 35px; } 1686 | 1687 | .pad-bottom-40 { 1688 | padding-bottom: 40px; } 1689 | 1690 | .pad-bottom-45 { 1691 | padding-bottom: 45px; } 1692 | 1693 | .pad-bottom-50 { 1694 | padding-bottom: 50px; } 1695 | 1696 | .pad-bottom-55 { 1697 | padding-bottom: 55px; } 1698 | 1699 | .pad-bottom-60 { 1700 | padding-bottom: 60px; } 1701 | 1702 | .pad-5 { 1703 | padding: 5px; } 1704 | 1705 | .pad-10 { 1706 | padding: 10px; } 1707 | 1708 | .pad-15 { 1709 | padding: 15px; } 1710 | 1711 | .pad-20 { 1712 | padding: 20px; } 1713 | 1714 | .pad-25 { 1715 | padding: 25px; } 1716 | 1717 | .pad-30 { 1718 | padding: 30px; } 1719 | 1720 | .pad-35 { 1721 | padding: 35px; } 1722 | 1723 | .pad-40 { 1724 | padding: 40px; } 1725 | 1726 | .pad-45 { 1727 | padding: 45px; } 1728 | 1729 | .pad-50 { 1730 | padding: 50px; } 1731 | 1732 | .pad-55 { 1733 | padding: 55px; } 1734 | 1735 | .pad-60 { 1736 | padding: 60px; } 1737 | 1738 | .sr { 1739 | border: 0; 1740 | clip: rect(0 0 0 0); 1741 | height: 1px; 1742 | margin: -1px; 1743 | overflow: hidden; 1744 | padding: 0; 1745 | position: absolute; 1746 | width: 1px; } 1747 | 1748 | .list-unstyled { 1749 | list-style: none; 1750 | margin: 0; 1751 | padding: 0; } 1752 | .list-unstyled li { 1753 | margin: 0; 1754 | padding: 0; } 1755 | 1756 | .list-inline { 1757 | list-style: none; 1758 | margin: 0; 1759 | padding: 0; } 1760 | .list-inline li { 1761 | margin: 0; 1762 | padding: 0; 1763 | display: inline-block; } 1764 | 1765 | .img-fluid { 1766 | max-width: 100%; } 1767 | 1768 | .field { 1769 | width: 100%; } 1770 | 1771 | .form-group { 1772 | overflow: hidden; } 1773 | .form-group label { 1774 | display: inline-block; 1775 | padding-top: 8px; } 1776 | 1777 | .disabled, [disabled] { 1778 | pointer-events: none; 1779 | cursor: not-allowed; 1780 | opacity: .5; } 1781 | 1782 | .checkbox, 1783 | .radio { 1784 | display: inline-block; 1785 | position: relative; } 1786 | .checkbox label, 1787 | .radio label { 1788 | padding-left: 20px; 1789 | padding-top: 0; 1790 | display: inline-block; } 1791 | .checkbox input[type="checkbox"], 1792 | .checkbox input[type="radio"], 1793 | .radio input[type="checkbox"], 1794 | .radio input[type="radio"] { 1795 | position: absolute; 1796 | top: 4px; 1797 | left: 0; } 1798 | 1799 | .select { 1800 | position: relative; 1801 | display: block; } 1802 | .select:before { 1803 | content: ""; 1804 | border: 6px solid transparent; 1805 | border-top-color: #676767; 1806 | top: 50%; 1807 | right: 10px; 1808 | margin-top: -3px; 1809 | pointer-events: none; 1810 | position: absolute; } 1811 | .select select { 1812 | -webkit-appearance: none; 1813 | -moz-appearance: none; 1814 | height: 36px; 1815 | width: 100%; 1816 | padding: 0 10px; 1817 | line-height: normal; 1818 | border: 1px solid #ccc; 1819 | background: #fff; 1820 | display: block; } 1821 | .select select::-ms-expand { 1822 | display: none; } 1823 | .select select:focus { 1824 | border-color: #f7c723; } 1825 | .select select:-moz-focusring { 1826 | color: transparent; 1827 | text-shadow: 0 0 0 #000; 1828 | border-color: #f7c723; } 1829 | 1830 | .animation { 1831 | -webkit-animation-duration: 1s; 1832 | animation-duration: 1s; 1833 | -webkit-animation-fill-mode: both; 1834 | animation-fill-mode: both; } 1835 | 1836 | .animation-infinite { 1837 | -webkit-animation-iteration-count: infinite; 1838 | animation-iteration-count: infinite; } 1839 | 1840 | @media only screen and (min-width: 740px) { 1841 | .no-float-m { 1842 | float: none; } 1843 | .no-padding-m { 1844 | padding: 0; } 1845 | .no-margin-m { 1846 | margin: 0; } 1847 | .relative-m { 1848 | position: relative; } 1849 | .absolute-m { 1850 | position: absolute; } 1851 | .static-m { 1852 | position: static; } 1853 | .fixed-m { 1854 | position: fixed; } 1855 | .none-m { 1856 | display: none; } 1857 | .block-m { 1858 | display: block; } 1859 | .inline-block-m { 1860 | display: inline-block; } 1861 | .inline-m { 1862 | display: inline; } 1863 | .flex-m { 1864 | display: -webkit-box; 1865 | display: -ms-flexbox; 1866 | display: flex; } 1867 | .flex-row-m { 1868 | -webkit-box-orient: horizontal; 1869 | -webkit-box-direction: normal; 1870 | -ms-flex-direction: row; 1871 | flex-direction: row; } 1872 | .flex-column-m { 1873 | -webkit-box-orient: vertical; 1874 | -webkit-box-direction: normal; 1875 | -ms-flex-direction: column; 1876 | flex-direction: column; } 1877 | .flex-space-around-m { 1878 | -ms-flex-pack: distribute; 1879 | justify-content: space-around; } 1880 | .flex-space-between-m { 1881 | -webkit-box-pack: justify; 1882 | -ms-flex-pack: justify; 1883 | justify-content: space-between; } 1884 | .flex-start-m { 1885 | -webkit-box-pack: start; 1886 | -ms-flex-pack: start; 1887 | justify-content: flex-start; } 1888 | .flex-center-m { 1889 | -webkit-box-pack: center; 1890 | -ms-flex-pack: center; 1891 | justify-content: center; } 1892 | .flex-end-m { 1893 | -webkit-box-pack: end; 1894 | -ms-flex-pack: end; 1895 | justify-content: flex-end; } 1896 | .flex-wrap-m { 1897 | -ms-flex-wrap: wrap; 1898 | flex-wrap: wrap; } 1899 | .flex-nowrap-m { 1900 | -ms-flex-wrap: nowrap; 1901 | flex-wrap: nowrap; } 1902 | .left-m { 1903 | float: left; } 1904 | .right-m { 1905 | float: right; } 1906 | .center-m { 1907 | float: none; 1908 | margin-left: auto; 1909 | margin-right: auto; } 1910 | .text-left-m { 1911 | text-align: left; } 1912 | .text-right-m { 1913 | text-align: right; } 1914 | .text-center-m { 1915 | text-align: center; } 1916 | .text-justify-m { 1917 | text-align: justify; } 1918 | .no-col-m { 1919 | width: auto; 1920 | float: none; } 1921 | .no-push-m, .no-pull-m { 1922 | left: 0; } 1923 | .pad-top-0-m { 1924 | padding-top: 0; } 1925 | .pad-top-5-m { 1926 | padding-top: 5px; } 1927 | .pad-top-10-m { 1928 | padding-top: 10px; } 1929 | .pad-top-15-m { 1930 | padding-top: 15px; } 1931 | .pad-top-20-m { 1932 | padding-top: 20px; } 1933 | .pad-top-25-m { 1934 | padding-top: 25px; } 1935 | .pad-top-30-m { 1936 | padding-top: 30px; } 1937 | .pad-top-35-m { 1938 | padding-top: 35px; } 1939 | .pad-top-40-m { 1940 | padding-top: 40px; } 1941 | .pad-top-45-m { 1942 | padding-top: 45px; } 1943 | .pad-top-50-m { 1944 | padding-top: 50px; } 1945 | .pad-top-55-m { 1946 | padding-top: 55px; } 1947 | .pad-top-60-m { 1948 | padding-top: 60px; } 1949 | .pad-bottom-0-m { 1950 | padding-bottom: 0; } 1951 | .pad-bottom-5-m { 1952 | padding-bottom: 5px; } 1953 | .pad-bottom-10-m { 1954 | padding-bottom: 10px; } 1955 | .pad-bottom-15-m { 1956 | padding-bottom: 15px; } 1957 | .pad-bottom-20-m { 1958 | padding-bottom: 20px; } 1959 | .pad-bottom-25-m { 1960 | padding-bottom: 25px; } 1961 | .pad-bottom-30-m { 1962 | padding-bottom: 30px; } 1963 | .pad-bottom-35-m { 1964 | padding-bottom: 35px; } 1965 | .pad-bottom-40-m { 1966 | padding-bottom: 40px; } 1967 | .pad-bottom-45-m { 1968 | padding-bottom: 45px; } 1969 | .pad-bottom-50-m { 1970 | padding-bottom: 50px; } 1971 | .pad-bottom-55-m { 1972 | padding-bottom: 55px; } 1973 | .pad-bottom-60-m { 1974 | padding-bottom: 60px; } 1975 | .pad-0-m { 1976 | padding: 0; } 1977 | .pad-5-m { 1978 | padding: 5px; } 1979 | .pad-10-m { 1980 | padding: 10px; } 1981 | .pad-15-m { 1982 | padding: 15px; } 1983 | .pad-20-m { 1984 | padding: 20px; } 1985 | .pad-25-m { 1986 | padding: 25px; } 1987 | .pad-30-m { 1988 | padding: 30px; } 1989 | .pad-35-m { 1990 | padding: 35px; } 1991 | .pad-40-m { 1992 | padding: 40px; } 1993 | .pad-45-m { 1994 | padding: 45px; } 1995 | .pad-50-m { 1996 | padding: 50px; } 1997 | .pad-55-m { 1998 | padding: 55px; } 1999 | .pad-60-m { 2000 | padding: 60px; } } 2001 | 2002 | @media only screen and (min-width: 980px) { 2003 | .no-float-l { 2004 | float: none; } 2005 | .no-padding-l { 2006 | padding: 0; } 2007 | .no-margin-l { 2008 | margin: 0; } 2009 | .relative-l { 2010 | position: relative; } 2011 | .absolute-l { 2012 | position: absolute; } 2013 | .static-l { 2014 | position: static; } 2015 | .fixed-l { 2016 | position: fixed; } 2017 | .none-l { 2018 | display: none; } 2019 | .block-l { 2020 | display: block; } 2021 | .inline-block-l { 2022 | display: inline-block; } 2023 | .inline-l { 2024 | display: inline; } 2025 | .flex-l { 2026 | display: -webkit-box; 2027 | display: -ms-flexbox; 2028 | display: flex; } 2029 | .flex-row-l { 2030 | -webkit-box-orient: horizontal; 2031 | -webkit-box-direction: normal; 2032 | -ms-flex-direction: row; 2033 | flex-direction: row; } 2034 | .flex-column-l { 2035 | -webkit-box-orient: vertical; 2036 | -webkit-box-direction: normal; 2037 | -ms-flex-direction: column; 2038 | flex-direction: column; } 2039 | .flex-space-around-l { 2040 | -ms-flex-pack: distribute; 2041 | justify-content: space-around; } 2042 | .flex-space-between-l { 2043 | -webkit-box-pack: justify; 2044 | -ms-flex-pack: justify; 2045 | justify-content: space-between; } 2046 | .flex-start-l { 2047 | -webkit-box-pack: start; 2048 | -ms-flex-pack: start; 2049 | justify-content: flex-start; } 2050 | .flex-center-l { 2051 | -webkit-box-pack: center; 2052 | -ms-flex-pack: center; 2053 | justify-content: center; } 2054 | .flex-end-l { 2055 | -webkit-box-pack: end; 2056 | -ms-flex-pack: end; 2057 | justify-content: flex-end; } 2058 | .flex-wrap-l { 2059 | -ms-flex-wrap: wrap; 2060 | flex-wrap: wrap; } 2061 | .flex-nowrap-l { 2062 | -ms-flex-wrap: nowrap; 2063 | flex-wrap: nowrap; } 2064 | .left-l { 2065 | float: left; } 2066 | .right-l { 2067 | float: right; } 2068 | .center-l { 2069 | float: none; 2070 | margin-left: auto; 2071 | margin-right: auto; } 2072 | .text-left-l { 2073 | text-align: left; } 2074 | .text-right-l { 2075 | text-align: right; } 2076 | .text-center-l { 2077 | text-align: center; } 2078 | .text-justify-l { 2079 | text-align: justify; } 2080 | .no-col-l { 2081 | width: auto; 2082 | float: none; } 2083 | .no-push-l, .no-pull-l { 2084 | left: 0; } 2085 | .pad-top-0-l { 2086 | padding-top: 0; } 2087 | .pad-top-5-l { 2088 | padding-top: 5px; } 2089 | .pad-top-10-l { 2090 | padding-top: 10px; } 2091 | .pad-top-15-l { 2092 | padding-top: 15px; } 2093 | .pad-top-20-l { 2094 | padding-top: 20px; } 2095 | .pad-top-25-l { 2096 | padding-top: 25px; } 2097 | .pad-top-30-l { 2098 | padding-top: 30px; } 2099 | .pad-top-35-l { 2100 | padding-top: 35px; } 2101 | .pad-top-40-l { 2102 | padding-top: 40px; } 2103 | .pad-top-45-l { 2104 | padding-top: 45px; } 2105 | .pad-top-50-l { 2106 | padding-top: 50px; } 2107 | .pad-top-55-l { 2108 | padding-top: 55px; } 2109 | .pad-top-60-l { 2110 | padding-top: 60px; } 2111 | .pad-bottom-0-l { 2112 | padding-bottom: 0; } 2113 | .pad-bottom-5-l { 2114 | padding-bottom: 5px; } 2115 | .pad-bottom-10-l { 2116 | padding-bottom: 10px; } 2117 | .pad-bottom-15-l { 2118 | padding-bottom: 15px; } 2119 | .pad-bottom-20-l { 2120 | padding-bottom: 20px; } 2121 | .pad-bottom-25-l { 2122 | padding-bottom: 25px; } 2123 | .pad-bottom-30-l { 2124 | padding-bottom: 30px; } 2125 | .pad-bottom-35-l { 2126 | padding-bottom: 35px; } 2127 | .pad-bottom-40-l { 2128 | padding-bottom: 40px; } 2129 | .pad-bottom-45-l { 2130 | padding-bottom: 45px; } 2131 | .pad-bottom-50-l { 2132 | padding-bottom: 50px; } 2133 | .pad-bottom-55-l { 2134 | padding-bottom: 55px; } 2135 | .pad-bottom-60-l { 2136 | padding-bottom: 60px; } 2137 | .pad-0-l { 2138 | padding: 0; } 2139 | .pad-5-l { 2140 | padding: 5px; } 2141 | .pad-10-l { 2142 | padding: 10px; } 2143 | .pad-15-l { 2144 | padding: 15px; } 2145 | .pad-20-l { 2146 | padding: 20px; } 2147 | .pad-25-l { 2148 | padding: 25px; } 2149 | .pad-30-l { 2150 | padding: 30px; } 2151 | .pad-35-l { 2152 | padding: 35px; } 2153 | .pad-40-l { 2154 | padding: 40px; } 2155 | .pad-45-l { 2156 | padding: 45px; } 2157 | .pad-50-l { 2158 | padding: 50px; } 2159 | .pad-55-l { 2160 | padding: 55px; } 2161 | .pad-60-l { 2162 | padding: 60px; } } 2163 | 2164 | @media only screen and (min-width: 1140px) { 2165 | .no-float-xl { 2166 | float: none; } 2167 | .no-padding-xl { 2168 | padding: 0; } 2169 | .no-margin-xl { 2170 | margin: 0; } 2171 | .relative-xl { 2172 | position: relative; } 2173 | .absolute-xl { 2174 | position: absolute; } 2175 | .static-xl { 2176 | position: static; } 2177 | .fixed-xl { 2178 | position: fixed; } 2179 | .none-xl { 2180 | display: none; } 2181 | .block-xl { 2182 | display: block; } 2183 | .inline-block-xl { 2184 | display: inline-block; } 2185 | .inline-xl { 2186 | display: inline; } 2187 | .flex-xl { 2188 | display: -webkit-box; 2189 | display: -ms-flexbox; 2190 | display: flex; } 2191 | .flex-row-xl { 2192 | -webkit-box-orient: horizontal; 2193 | -webkit-box-direction: normal; 2194 | -ms-flex-direction: row; 2195 | flex-direction: row; } 2196 | .flex-column-xl { 2197 | -webkit-box-orient: vertical; 2198 | -webkit-box-direction: normal; 2199 | -ms-flex-direction: column; 2200 | flex-direction: column; } 2201 | .flex-space-around-xl { 2202 | -ms-flex-pack: distribute; 2203 | justify-content: space-around; } 2204 | .flex-space-between-xl { 2205 | -webkit-box-pack: justify; 2206 | -ms-flex-pack: justify; 2207 | justify-content: space-between; } 2208 | .flex-start-xl { 2209 | -webkit-box-pack: start; 2210 | -ms-flex-pack: start; 2211 | justify-content: flex-start; } 2212 | .flex-center-xl { 2213 | -webkit-box-pack: center; 2214 | -ms-flex-pack: center; 2215 | justify-content: center; } 2216 | .flex-end-xl { 2217 | -webkit-box-pack: end; 2218 | -ms-flex-pack: end; 2219 | justify-content: flex-end; } 2220 | .flex-wrap-xl { 2221 | -ms-flex-wrap: wrap; 2222 | flex-wrap: wrap; } 2223 | .flex-nowrap-xl { 2224 | -ms-flex-wrap: nowrap; 2225 | flex-wrap: nowrap; } 2226 | .left-xl { 2227 | float: left; } 2228 | .right-xl { 2229 | float: right; } 2230 | .center-xl { 2231 | float: none; 2232 | margin-left: auto; 2233 | margin-right: auto; } 2234 | .text-left-xl { 2235 | text-align: left; } 2236 | .text-right-xl { 2237 | text-align: right; } 2238 | .text-center-xl { 2239 | text-align: center; } 2240 | .text-justify-xl { 2241 | text-align: justify; } 2242 | .no-col-xl { 2243 | width: auto; 2244 | float: none; } 2245 | .no-push-xl, .no-pull-xl { 2246 | left: 0; } 2247 | .pad-top-0-xl { 2248 | padding-top: 0; } 2249 | .pad-top-5-xl { 2250 | padding-top: 5px; } 2251 | .pad-top-10-xl { 2252 | padding-top: 10px; } 2253 | .pad-top-15-xl { 2254 | padding-top: 15px; } 2255 | .pad-top-20-xl { 2256 | padding-top: 20px; } 2257 | .pad-top-25-xl { 2258 | padding-top: 25px; } 2259 | .pad-top-30-xl { 2260 | padding-top: 30px; } 2261 | .pad-top-35-xl { 2262 | padding-top: 35px; } 2263 | .pad-top-40-xl { 2264 | padding-top: 40px; } 2265 | .pad-top-45-xl { 2266 | padding-top: 45px; } 2267 | .pad-top-50-xl { 2268 | padding-top: 50px; } 2269 | .pad-top-55-xl { 2270 | padding-top: 55px; } 2271 | .pad-top-60-xl { 2272 | padding-top: 60px; } 2273 | .pad-bottom-0-xl { 2274 | padding-bottom: 0; } 2275 | .pad-bottom-5-xl { 2276 | padding-bottom: 5px; } 2277 | .pad-bottom-10-xl { 2278 | padding-bottom: 10px; } 2279 | .pad-bottom-15-xl { 2280 | padding-bottom: 15px; } 2281 | .pad-bottom-20-xl { 2282 | padding-bottom: 20px; } 2283 | .pad-bottom-25-xl { 2284 | padding-bottom: 25px; } 2285 | .pad-bottom-30-xl { 2286 | padding-bottom: 30px; } 2287 | .pad-bottom-35-xl { 2288 | padding-bottom: 35px; } 2289 | .pad-bottom-40-xl { 2290 | padding-bottom: 40px; } 2291 | .pad-bottom-45-xl { 2292 | padding-bottom: 45px; } 2293 | .pad-bottom-50-xl { 2294 | padding-bottom: 50px; } 2295 | .pad-bottom-55-xl { 2296 | padding-bottom: 55px; } 2297 | .pad-bottom-60-xl { 2298 | padding-bottom: 60px; } 2299 | .pad-0-xl { 2300 | padding: 0; } 2301 | .pad-5-xl { 2302 | padding: 5px; } 2303 | .pad-10-xl { 2304 | padding: 10px; } 2305 | .pad-15-xl { 2306 | padding: 15px; } 2307 | .pad-20-xl { 2308 | padding: 20px; } 2309 | .pad-25-xl { 2310 | padding: 25px; } 2311 | .pad-30-xl { 2312 | padding: 30px; } 2313 | .pad-35-xl { 2314 | padding: 35px; } 2315 | .pad-40-xl { 2316 | padding: 40px; } 2317 | .pad-45-xl { 2318 | padding: 45px; } 2319 | .pad-50-xl { 2320 | padding: 50px; } 2321 | .pad-55-xl { 2322 | padding: 55px; } 2323 | .pad-60-xl { 2324 | padding: 60px; } } 2325 | 2326 | @media print { 2327 | .no-float-print { 2328 | float: none; } 2329 | .no-padding-print { 2330 | padding: 0; } 2331 | .no-margin-print { 2332 | margin: 0; } 2333 | .none-print { 2334 | display: none; } 2335 | .block-print { 2336 | display: block; } 2337 | .inline-block-print { 2338 | display: inline-block; } 2339 | .inline-print { 2340 | display: inline; } 2341 | .text-left-print { 2342 | text-align: left; } 2343 | .text-right-print { 2344 | text-align: right; } 2345 | .text-center-print { 2346 | text-align: center; } 2347 | .text-justify-print { 2348 | text-align: justify; } 2349 | .no-col-print { 2350 | width: auto; 2351 | float: none; } 2352 | .no-push-print, .no-pull-print { 2353 | left: 0; } 2354 | .pad-top-0-print { 2355 | padding-top: 0; } 2356 | .pad-top-5-print { 2357 | padding-top: 5px; } 2358 | .pad-top-10-print { 2359 | padding-top: 10px; } 2360 | .pad-top-15-print { 2361 | padding-top: 15px; } 2362 | .pad-top-20-print { 2363 | padding-top: 20px; } 2364 | .pad-top-25-print { 2365 | padding-top: 25px; } 2366 | .pad-top-30-print { 2367 | padding-top: 30px; } 2368 | .pad-top-35-print { 2369 | padding-top: 35px; } 2370 | .pad-top-40-print { 2371 | padding-top: 40px; } 2372 | .pad-top-45-print { 2373 | padding-top: 45px; } 2374 | .pad-top-50-print { 2375 | padding-top: 50px; } 2376 | .pad-top-55-print { 2377 | padding-top: 55px; } 2378 | .pad-top-60-print { 2379 | padding-top: 60px; } 2380 | .pad-bottom-0-print { 2381 | padding-bottom: 0; } 2382 | .pad-bottom-5-print { 2383 | padding-bottom: 5px; } 2384 | .pad-bottom-10-print { 2385 | padding-bottom: 10px; } 2386 | .pad-bottom-15-print { 2387 | padding-bottom: 15px; } 2388 | .pad-bottom-20-print { 2389 | padding-bottom: 20px; } 2390 | .pad-bottom-25-print { 2391 | padding-bottom: 25px; } 2392 | .pad-bottom-30-print { 2393 | padding-bottom: 30px; } 2394 | .pad-bottom-35-print { 2395 | padding-bottom: 35px; } 2396 | .pad-bottom-40-print { 2397 | padding-bottom: 40px; } 2398 | .pad-bottom-45-print { 2399 | padding-bottom: 45px; } 2400 | .pad-bottom-50-print { 2401 | padding-bottom: 50px; } 2402 | .pad-bottom-55-print { 2403 | padding-bottom: 55px; } 2404 | .pad-bottom-60-print { 2405 | padding-bottom: 60px; } 2406 | .pad-0-print { 2407 | padding: 0; } 2408 | .pad-5-print { 2409 | padding: 5px; } 2410 | .pad-10-print { 2411 | padding: 10px; } 2412 | .pad-15-print { 2413 | padding: 15px; } 2414 | .pad-20-print { 2415 | padding: 20px; } 2416 | .pad-25-print { 2417 | padding: 25px; } 2418 | .pad-30-print { 2419 | padding: 30px; } 2420 | .pad-35-print { 2421 | padding: 35px; } 2422 | .pad-40-print { 2423 | padding: 40px; } 2424 | .pad-45-print { 2425 | padding: 45px; } 2426 | .pad-50-print { 2427 | padding: 50px; } 2428 | .pad-55-print { 2429 | padding: 55px; } 2430 | .pad-60-print { 2431 | padding: 60px; } } 2432 | 2433 | /*# sourceMappingURL=styles.css.map */ 2434 | --------------------------------------------------------------------------------