@charset "UTF-8"; /* ========================================================================== Components ========================================================================== */ /* Fixes an issue where Ruby locale is not set properly*/ /* See https://github.com/sass-mq/sass-mq/pull/10*/ /*/ Base font size on the `` element*/ /*/ @type Number (unit)*/ /*/ Responsive mode*/ /*/*/ /*/ Set to `false` to enable support for browsers that do not support @media queries,*/ /*/ (IE <= 8, Firefox <= 3, Opera <= 9)*/ /*/*/ /*/ You could create a stylesheet served exclusively to older browsers,*/ /*/ where @media queries are rasterized*/ /*/*/ /*/ @example scss*/ /*/ // old-ie.scss*/ /*/ $mq-responsive: false;*/ /*/ @import 'main'; // @media queries in this file will be rasterized up to $mq-static-breakpoint*/ /*/ // larger breakpoints will be ignored*/ /*/*/ /*/ @type Boolean*/ /*/ @link https://github.com/sass-mq/sass-mq#responsive-mode-off Disabled responsive mode documentation*/ /*/ Breakpoint list*/ /*/*/ /*/ Name your breakpoints in a way that creates a ubiquitous language*/ /*/ across team members. It will improve communication between*/ /*/ stakeholders, designers, developers, and testers.*/ /*/*/ /*/ @type Map*/ /*/ @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint Full documentation and examples*/ /*/ Static breakpoint (for fixed-width layouts)*/ /*/*/ /*/ Define the breakpoint from $mq-breakpoints that should*/ /*/ be used as the target width for the fixed-width layout*/ /*/ (i.e. when $mq-responsive is set to 'false') in a old-ie.scss*/ /*/*/ /*/ @example scss*/ /*/ // tablet-only.scss*/ /*/ //*/ /*/ // Ignore all styles above tablet breakpoint,*/ /*/ // and fix the styles (e.g. layout) at tablet width*/ /*/ $mq-responsive: false;*/ /*/ $mq-static-breakpoint: tablet;*/ /*/ @import 'main'; // @media queries in this file will be rasterized up to tablet*/ /*/ // larger breakpoints will be ignored*/ /*/*/ /*/ @type String*/ /*/ @link https://github.com/sass-mq/sass-mq#adding-custom-breakpoints Full documentation and examples*/ /*/ Show breakpoints in the top right corner*/ /*/*/ /*/ If you want to display the currently active breakpoint in the top*/ /*/ right corner of your site during development, add the breakpoints*/ /*/ to this list, ordered by width, e.g. (mobile, tablet, desktop).*/ /*/*/ /*/ @type map*/ /*/ Customize the media type (e.g. `@media screen` or `@media print`)*/ /*/ By default sass-mq uses an "all" media type (`@media all and …`)*/ /*/*/ /*/ @type String*/ /*/ @link https://github.com/sass-mq/sass-mq#changing-media-type Full documentation and examples*/ /*/ Convert pixels to ems*/ /*/*/ /*/ @param {Number} $px - value to convert*/ /*/ @param {Number} $base-font-size ($mq-base-font-size) - `` font size*/ /*/*/ /*/ @example scss*/ /*/ $font-size-in-ems: mq-px2em(16px);*/ /*/ p { font-size: mq-px2em(16px); }*/ /*/*/ /*/ @requires $mq-base-font-size*/ /*/ @returns {Number}*/ /*/ Get a breakpoint's width*/ /*/*/ /*/ @param {String} $name - Name of the breakpoint. One of $mq-breakpoints*/ /*/*/ /*/ @example scss*/ /*/ $tablet-width: mq-get-breakpoint-width(tablet);*/ /*/ @media (min-width: mq-get-breakpoint-width(desktop)) {}*/ /*/*/ /*/ @requires {Variable} $mq-breakpoints*/ /*/*/ /*/ @returns {Number} Value in pixels*/ /*/ Media Query mixin*/ /*/*/ /*/ @param {String | Boolean} $from (false) - One of $mq-breakpoints*/ /*/ @param {String | Boolean} $until (false) - One of $mq-breakpoints*/ /*/ @param {String | Boolean} $and (false) - Additional media query parameters*/ /*/ @param {String} $media-type ($mq-media-type) - Media type: screen, print…*/ /*/*/ /*/ @ignore Undocumented API, for advanced use only:*/ /*/ @ignore @param {Map} $breakpoints ($mq-breakpoints)*/ /*/ @ignore @param {String} $static-breakpoint ($mq-static-breakpoint)*/ /*/*/ /*/ @content styling rules, wrapped into a @media query when $responsive is true*/ /*/*/ /*/ @requires {Variable} $mq-media-type*/ /*/ @requires {Variable} $mq-breakpoints*/ /*/ @requires {Variable} $mq-static-breakpoint*/ /*/ @requires {function} mq-px2em*/ /*/ @requires {function} mq-get-breakpoint-width*/ /*/*/ /*/ @link https://github.com/sass-mq/sass-mq#responsive-mode-on-default Full documentation and examples*/ /*/*/ /*/ @example scss*/ /*/ .element {*/ /*/ @include mq($from: mobile) {*/ /*/ color: red;*/ /*/ }*/ /*/ @include mq($until: tablet) {*/ /*/ color: blue;*/ /*/ }*/ /*/ @include mq(mobile, tablet) {*/ /*/ color: green;*/ /*/ }*/ /*/ @include mq($from: tablet, $and: '(orientation: landscape)') {*/ /*/ color: teal;*/ /*/ }*/ /*/ @include mq(950px) {*/ /*/ color: hotpink;*/ /*/ }*/ /*/ @include mq(tablet, $media-type: screen) {*/ /*/ color: hotpink;*/ /*/ }*/ /*/ // Advanced use:*/ /*/ $my-breakpoints: (L: 900px, XL: 1200px);*/ /*/ @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {*/ /*/ color: hotpink;*/ /*/ }*/ /*/ }*/ /*/ Add a breakpoint*/ /*/*/ /*/ @param {String} $name - Name of the breakpoint*/ /*/ @param {Number} $width - Width of the breakpoint*/ /*/*/ /*/ @requires {Variable} $mq-breakpoints*/ /*/*/ /*/ @example scss*/ /*/ @include mq-add-breakpoint(tvscreen, 1920px);*/ /*/ @include mq(tvscreen) {}*/ /*/ Show the active breakpoint in the top right corner of the viewport*/ /*/ @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint*/ /*/*/ /*/ @param {List} $show-breakpoints ($mq-show-breakpoints) - List of breakpoints to show in the top right corner*/ /*/ @param {Map} $breakpoints ($mq-breakpoints) - Breakpoint names and sizes*/ /*/*/ /*/ @requires {Variable} $mq-breakpoints*/ /*/ @requires {Variable} $mq-show-breakpoints*/ /*/*/ /*/ @example scss*/ /*/ // Show breakpoints using global settings*/ /*/ @include mq-show-breakpoints;*/ /*/*/ /*/ // Show breakpoints using custom settings*/ /*/ @include mq-show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px));*/ @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700"); @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); .grid { display: grid; grid-gap: 20px; } .grid--site-layout { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%; grid-gap: 0; } .grid--one { grid-template-columns: 1fr; } .grid--two { grid-template-columns: 1fr; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 48em) { .grid--two { grid-template-columns: repeat(2, 1fr); } } .grid--three { grid-template-columns: 1fr; grid-gap: 10px; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 41.25em) { .grid--three { grid-template-columns: repeat(3, 1fr); } } .grid--four { grid-template-columns: 1fr; grid-gap: 10px; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 48em) { .grid--four { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64em) { .grid--four { grid-template-columns: repeat(4, 1fr); } } .grid--five { grid-template-columns: 1fr; grid-gap: 10px; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 48em) { .grid--five { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64em) { .grid--five { grid-template-columns: repeat(5, 1fr); } } .grid--six { grid-template-columns: 1fr; grid-gap: 10px; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 30em) { .grid--six { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 48em) { .grid--six { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 64em) { .grid--six { grid-template-columns: repeat(6, 1fr); } } /*IE 11*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .grid { display: flex; flex-direction: column; } .grid--layout { min-height: 100%; display: flex; flex-direction: column; align-items: stretch; } .grid--layout main { flex-grow: 1; } .grid--layout header, .grid--layout footer { flex-shrink: 0; } .grid--two { flex-wrap: wrap; flex-direction: row; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } } @media screen and (-ms-high-contrast: active) and (min-width: 30em), (-ms-high-contrast: none) and (min-width: 30em) { .grid--two .card { flex: 0 0 48%; margin: 1%; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .grid--three { flex-wrap: wrap; flex-direction: row; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } } @media screen and (-ms-high-contrast: active) and (min-width: 41.25em), (-ms-high-contrast: none) and (min-width: 41.25em) { .grid--three .card { flex: 0 0 32%; margin: 1% .5%; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .grid--four { flex-wrap: wrap; flex-direction: row; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } } @media screen and (-ms-high-contrast: active) and (min-width: 30em), (-ms-high-contrast: none) and (min-width: 30em) { .grid--four .card { flex: 0 0 49%; margin: 1% .5%; } } @media screen and (-ms-high-contrast: active) and (min-width: 48em), (-ms-high-contrast: none) and (min-width: 48em) { .grid--four .card { flex: 0 0 24%; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .grid--five { flex-wrap: wrap; flex-direction: row; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } } @media screen and (-ms-high-contrast: active) and (min-width: 48em), (-ms-high-contrast: none) and (min-width: 48em) { .grid--five .card { flex: 0 0 49%; margin: 1% .5%; } } @media screen and (-ms-high-contrast: active) and (min-width: 64em), (-ms-high-contrast: none) and (min-width: 64em) { .grid--five .card { flex: 0 0 19%; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .grid--six { flex-wrap: wrap; flex-direction: row; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } } @media screen and (-ms-high-contrast: active) and (min-width: 30em), (-ms-high-contrast: none) and (min-width: 30em) { .grid--six .card { flex: 0 0 49%; margin: 1% .5%; } } @media screen and (-ms-high-contrast: active) and (min-width: 48em), (-ms-high-contrast: none) and (min-width: 48em) { .grid--six .card { flex: 0 0 32%; } } @media screen and (-ms-high-contrast: active) and (min-width: 64em), (-ms-high-contrast: none) and (min-width: 64em) { .grid--six .card { flex: 0 0 15.5%; } } /*PLACEHOLDERS use ''@extend %placeholder' in css above all other styles in the class*/ .breadcrumb, .menu__list, .side-menu__list, .submenu__list, .more-menu__list, .pagination__list, .progress-bar__list, .social__list { margin: 0; padding: 0; list-style: none; } /* ========================================================================== Variables and mixins ========================================================================== */ /* ========================================================================== Breakpoints ========================================================================== */ /* Add breakpoints and tweakpoints here*/ /* To add custom breakpoints directly inside of a component,*/ /* see https://github.com/guardian/sass-mq#adding-custom-breakpoints*/ /* Name your breakpoints in a way that creates a ubiquitous language*/ /* across team members. It will improve communication between*/ /* stakeholders, designers, developers, and testers.*/ /* Show the current breakpoint in the top right corner of the viewport:*/ /* see https://github.com/guardian/sass-mq#seeing-the-currently-active-breakpoint*/ /* Uncomment to activate during development*/ /*$mq-show-breakpoints: (mobile, mobileLandscape, phablet, tablet, desktop, wide);*/ /* ========================================================================== Colours ========================================================================== */ /*blue*/ /*red*/ /*green*/ /*blue*/ /*red*/ /*green light*/ /*UI colours*/ /*Greyscale colours*/ /*blue*/ /*green*/ /*red*/ /*grey medium*/ /*grey darkest*/ /*blue*/ /*purple*/ /*red*/ /*green*/ /*cyan*/ /*grey light*/ /*grey dark*/ /*pale blue*/ /*pale yellow*/ /*pale red*/ /*pale green*/ /*pale cyan*/ /*grey light*/ /*grey*/ /* ========================================================================== BUTTONS ========================================================================== */ /* ========================================================================== ANIMATION ========================================================================== */ /* ========================================================================== MISC ========================================================================== */ /* ========================================================================== Fonts ========================================================================== */ /* PROJECT PATHS */ /*$project-path: '/project';*/ /* USE EXAMPLE: background: url('../images/sprites.png') -459px -396px no-repeat; */ /* ========================================================================== Base ========================================================================== */ body, html { width: 100%; height: 100%; } body { margin: 0; padding: 0; text-align: center; height: 100%; color: #333333; font-family: "Roboto", Helvetica, Arial, sans-serif; background-color: #e2e9ea; } a { color: #333333; text-decoration: none; transition: all 0.5s ease; } * { box-sizing: border-box; } img { max-width: 100%; height: auto; } legend { display: none; } fieldset { border: 0; padding: 0; margin: 0; } h2, h3, h4, h5, h6 { margin: 0 0 20px; } p { margin: 0 0 20px; } /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */ /* 1 */ figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { display: none; } /* Links ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: 0; /* 1 */ text-decoration: underline; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** * 1. Change font properties to `inherit` in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } /** * Restore the font weight unset by the previous rule. */ optgroup { font-weight: bold; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type='checkbox'], [type='radio'] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration { -webkit-appearance: none; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: .54; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* ========================================================================== Layout ========================================================================== */ .header { position: fixed; width: 100%; z-index: 100; min-height: 50px; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 64em) { .header { position: relative; min-height: 60px; } } .header__wrapper { position: relative; display: flex; flex-direction: column; background: #ffffff; } .header__row { display: none; width: 100%; max-width: 1180px; margin: 0 auto; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 64em) { .header__row { display: flex; } } .header__row--user-menu { background: #f5f5f5; max-width: 100%; } .header__row--main-menu { border-bottom: 1px solid #e2e9ea; max-width: 100%; } .header__row--mobile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 64em) { .header__row--mobile { display: none; } } .header__column { flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: center; padding: 10px; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 85.375em) { .header__column { padding: 10px 0; } } .logo { padding: 10px 20px; } .logo__desktop { display: none; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 64em) { .logo__desktop { display: block; } } .logo__mobile { padding: 5px 10px; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 64em) { .logo__mobile { display: none; } } .footer { border-top: 1px solid #bdbdbd; width: 100%; font-size: .875rem; } .footer__wrapper { width: 100%; max-width: 1180px; margin: 0 auto; } .footer__row { display: flex; flex-direction: column; width: 100%; padding: 10px; border-bottom: 1px solid #f5f5f5; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } .footer__row:first-child { background: #f5f5f5; } .footer__row:last-child { border: 0; } @media (min-width: 48em) { .footer__row { flex-direction: row; } } @media (min-width: 85.375em) { .footer__row { padding: 10px 0; } } .footer__list { margin: 0; padding: 0; list-style: none; display: flex; } .footer__list-item { margin-right: 10px; } .footer__list-item:last-child { margin-right: 0; } .footer a:hover { text-decoration: underline; } .site-container { width: 100%; background-color: #ffffff; position: relative; } .site-container--template { padding: 10px; } .page-content { padding: 10px; flex: 1 1 auto; margin: 0 20px; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 48em) { .page-content { padding: 20px; } } .main--page-layout { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0 auto; background: #f4f5f5; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 48em) { .main--page-layout { flex-direction: row; } } .hidden { /*hidden but accesible*/ position: absolute !important; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 0; overflow: hidden; opacity: 0; } .item-heading { display: inline-block; width: 100%; text-align: left; margin: 0 0 30px; padding-bottom: 5px; border-bottom: 1px solid #bdbdbd; } .group-heading { display: inline-block; width: 100%; text-align: left; margin: 0 0 10px; font-weight: 400; padding-bottom: 5px; border-bottom: 1px solid #bdbdbd; } .note { display: inline-block; width: 100%; text-align: left; margin: 0 0 30px; font-size: .875rem; line-height: 1.75em; } .component-wrapper { width: 100%; max-width: 760px; margin: 20px auto; padding: 30px; background-color: #ffffff; text-align: left; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 48em) { .component-wrapper { padding: 50px; } } .component-wrapper--full-width { max-width: 100%; } pre { width: 100%; margin: 10px auto; padding: 20px; background-color: #f4f5f5; border: 1px solid #bdbdbd; text-align: left; overflow: scroll; font-size: .75rem; word-break: normal; word-wrap: normal; color: #9e9e9e; } pre .tag { color: #03a9f4; } pre .class { color: #f44336; } pre .text { color: #000000; } /* ========================================================================== Vendor ========================================================================== */ /*@import 'sass/vendor/_jcf';*/ /* ========================================================================== Module ========================================================================== */ .alert { width: 100%; padding: 20px; margin: 10px 0; border-radius: 5px; border-width: 1px; border-style: solid; position: relative; font-size: .875rem; font-weight: 400; } .alert { border-color: #e2e9ea; } .alert--primary { color: #033247; background-color: #b3e5fc; border-color: #82d4fa; } .alert--secondary { color: #5e5400; background-color: #fff9c4; border-color: #fff491; } .alert--success { color: #173218; background-color: #c8e6c9; border-color: #a5d6a7; } .alert--warning { color: #67000a; background-color: #ffcdd2; border-color: #ff9aa4; } .alert--info { color: #105962; background-color: #b2ebf2; border-color: #86e0eb; } .alert--light { color: #3c3c3c; background-color: #eeeeee; border-color: #d5d5d5; } .alert--dark { color: #1a1a1a; background-color: #cccccc; border-color: #b3b3b3; } .alert--dismissable { padding-right: 50px; } .alert--dismissable button { position: absolute; top: 15px; right: 10px; } .alert--icon { padding-left: 40px; } .alert--icon i { position: absolute; top: 15px; left: 12px; color: #f44336; } .alert p:last-of-type { margin-bottom: 0; } .avatar { position: relative; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: #e2e9ea; display: flex; justify-content: center; align-items: center; } .avatar--med { width: 100px; height: 100px; } .avatar--small { width: 50px; height: 50px; } .avatar--x-small { width: 30px; height: 30px; } .avatar__icon { width: 100%; height: 100%; opacity: .2; } .avatar__image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .badge { display: inline-block; width: auto; font-weight: 300; font-size: .75rem; padding: 5px 7px; line-height: 1em; white-space: nowrap; border-radius: 3px; border-width: 1px; border-style: solid; } .badge { letter-spacing: 0.03rem; transition: all 0.5s ease; border-color: #bdbdbd; } .badge i { font-size: .875rem; } .badge--primary { color: #ffffff; background-color: #03a9f4; border-color: #03a9f4; } .badge--secondary { color: #ffffff; background-color: #9c27b0; border-color: #9c27b0; } .badge--success { color: #ffffff; background-color: #4caf50; border-color: #4caf50; } .badge--alert { color: #ffffff; background-color: #f44336; border-color: #f44336; } .badge--info { color: #ffffff; background-color: #00bcd4; border-color: #00bcd4; } .badge--light { color: #616161; background-color: #eeeeee; border-color: #eeeeee; } .badge--dark { color: #ffffff; background-color: #666666; border-color: #666666; } .badge--pill { border-radius: 15px; padding: 5px 10px; } .badge--icon-text { position: relative; padding-left: 22px; /*for 12px icon*/ } .badge--icon-text i { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); } .badge--round { padding: 5px; border-radius: 12px; min-width: 24px; text-align: center; height: 24px; line-height: 14px; position: relative; } .badge--round i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .badge--image-overlay { position: absolute; bottom: 10px; right: 10px; } a.badge:hover { background-color: #e2e9ea; } a.badge--primary:hover { background-color: #0286c2; border-color: #0286c2; } a.badge--secondary:hover { background-color: #771e86; border-color: #771e86; } a.badge--success:hover { background-color: #3d8b40; border-color: #3d8b40; } a.badge--alert:hover { background-color: #ea1c0d; border-color: #ea1c0d; } a.badge--info:hover { background-color: #008fa1; border-color: #008fa1; } a.badge--light:hover { background-color: #d5d5d5; border-color: #d5d5d5; } a.badge--dark:hover { background-color: #4d4d4d; border-color: #4d4d4d; } a.badge span { opacity: .8; transition: all 0.5s ease; } a.badge:hover span { opacity: 1; } .breadcrumb { display: flex; align-content: center; width: 100%; margin: 20px 0; color: #bdbdbd; font-size: .875rem; } .breadcrumb__item { margin: 0 10px 0 0; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .breadcrumb__item:after { content: ">"; margin-left: 10px; } .breadcrumb__item:last-of-type { margin: 0; } .breadcrumb__item:last-of-type:after { content: ''; margin: 0; } .breadcrumb__item:last-of-type a { color: #9e9e9e; } .button { border: 0; cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; line-height: 1em; white-space: nowrap; min-width: 120px; } .button.button--outline, .button--cta.button--outline, .button--alert.button--outline, .button--light.button--outline, .button--dark.button--outline { background: none; border-width: 2px; border-style: solid; box-shadow: none; } .icon-button { border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .6; transition: all 0.5s ease; background: none; } .icon-button:hover { opacity: 1; } .icon-button--round { background-color: #03a9f4; color: #ffffff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); width: 36px; height: 36px; border-radius: 18px; opacity: 1; } .icon-button--round:hover { box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.5); transform: scale(0.9); } .icon-button--menu { transition: none; margin-left: 10px; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } .icon-button--menu.open { opacity: 1; } @media (min-width: 64em) { .icon-button--menu { display: none; } } .icon-button--side-menu { display: block; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 48em) { .icon-button--side-menu { display: none; } } .icon-button--user { color: #000000; } .icon-button--user i { font-size: 2rem; } .button { background-color: #03a9f4; color: #ffffff; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03rem; height: 40px; padding: 5px 20px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); transition: background-color 0.5s ease; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 41.25em) { .button { max-width: 160px; } } .button:hover { background-color: #0286c2; box-shadow: none; } .button.button--outline { border-color: #03a9f4; color: #03a9f4; } .button.button--outline:hover { background: #03a9f4; color: #ffffff; } .button--rounded { border-radius: 20px; } .button--cta { background-color: #4caf50; } .button--cta:hover { background-color: #3d8b40; } .button--cta.button--outline { border-color: #4caf50; color: #4caf50; } .button--cta.button--outline:hover { background: #4caf50; color: #ffffff; } .button--alert { background-color: #f44336; } .button--alert:hover { background-color: #d2190b; } .button--alert.button--outline { border-color: #f44336; color: #f44336; } .button--alert.button--outline:hover { background: #f44336; color: #ffffff; } .button--light { background-color: #999999; } .button--light:hover { background-color: gray; } .button--light.button--outline { border-color: #999999; color: #999999; } .button--light.button--outline:hover { background: #999999; color: #ffffff; } .button--dark { background-color: #444444; } .button--dark:hover { background-color: #2b2b2b; } .button--dark.button--outline { border-color: #444444; color: #444444; } .button--dark.button--outline:hover { background: #444444; color: #ffffff; } .button--disabled { opacity: .4; cursor: auto; box-shadow: none; background-color: #999999; color: #000000; } .button--disabled:hover { background-color: #999999; } .button--icon { padding: 5px 30px; width: auto; position: relative; } .button--icon i { font-size: 1rem; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); } .button--small { height: 26px; font-size: 0.625rem; padding: 3px 10px; width: auto; min-width: auto; max-width: auto; } .button--plain { padding: 5px; min-width: 70px; background-color: #f4f5f5; border: 1px solid #bdbdbd; font-size: .813rem; height: 30px; color: #424242; text-transform: none; letter-spacing: 0; box-shadow: none; border-radius: 3px; } .button--plain:hover { background-color: #bdbdbd; } .button--full-width { width: 100%; min-width: 100%; max-width: 100%; } .button--back { background: none; border-radius: 0; height: auto; padding: 0; box-shadow: none; text-transform: none; color: #333333; font-size: .875rem; justify-content: flex-start; letter-spacing: normal; transition: all 0.5s ease; } .button--back i { margin-left: 0; margin-right: 5px; opacity: .6; } .button--back:hover { background: none; } .button--back:hover i { margin-left: -1px; margin-right: 6px; opacity: 1; } .button--link { background: none; border-radius: 0; height: auto; padding: 0 0 3px; box-shadow: none; color: #03a9f4; width: auto; border-bottom: 1px solid transparent; display: inline-block; font-weight: 500; } .button--link:hover { background: none; border-color: #03a9f4; } .card__title { margin: 0 0 20px; font-size: 1.5rem; font-weight: 400; letter-spacing: .025em; } .card { width: 100%; max-width: 760px; background-color: #ffffff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; margin: 0 auto; } .card__content { padding: 20px; text-align: left; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 48em) { .card__content { padding: 30px; } } @media (min-width: 85.375em) { .card__content { padding: 50px; } } .card__content p { line-height: 1.5em; margin: 0 0 30px; } .card__content p:last-of-type { margin: 0; } .card__content p a { color: #03a9f4; } .card__content p a:hover { border-color: #03a9f4; } .card__title--header { margin: 0; } .card__title--with-badge { display: flex; align-items: center; justify-content: space-between; } .card__title a { color: #333333; } .card__title a:hover { border-color: #616161; } .card__image { line-height: 0; } .card__image--with-badge { position: relative; } .card__image img { width: 100%; } .card__image a { border: 0; } .card__footer { margin-top: auto; padding: 20px; text-align: left; background-color: #f4f5f5; display: flex; /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 48em) { .card__footer { padding: 20px 50px; } } .card__header { padding: 20px; text-align: left; background-color: #f4f5f5; display: flex; } .card__header--with-badge { justify-content: space-between; align-items: center; } .card__image + .card__content { /*If there is an image before content*/ /* From: this breakpoint (inclusive)*/ /* Until: that breakpoint (exclusive)*/ /* Responsive support is disabled, rasterize the output outside @media blocks*/ /* The browser will rely on the cascade itself.*/ /* Remove unnecessary media query prefix 'all and '*/ } @media (min-width: 48em) { .card__image + .card__content { padding-top: 30px; } } .card__title + .author { /*If author comes after title*/ margin-top: -15px; } .author--card + .date { /*If date comes after author*/ margin-top: -15px; } p { line-height: 1.5em; margin: 0 0 30px; font-weight: 400; } .modal p { color: #616161; } .modal p:last-of-type { margin: 0; } .form-radio { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: flex; justify-content: center; align-items: center; position: relative; background-color: #e2e9ea; color: #9e9e9e; height: 20px; width: 20px; border: 0; border-radius: 20px; cursor: pointer; margin-right: 7px; outline: none; overflow: hidden; transition: all 0.5s ease; } .form-radio:checked::before { content: ''; width: 10px; height: 10px; border-radius: 5px; background-color: #9e9e9e; } .form-radio:hover { background-color: #bdbdbd; } .form-radio:checked { background-color: #e2e9ea; } .form-checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; position: relative; background-color: #e2e9ea; color: #616161; height: 20px; width: 20px; border: 0; border-radius: 3px; cursor: pointer; margin-right: 7px; outline: none; transition: all 0.5s ease; } .form-checkbox:checked::before { position: absolute; font: 600 13px/1 Arial, Helvetica, sans-serif; left: 6px; top: 2px; content: '\02143'; transform: rotate(40deg); } .form-checkbox:hover { background-color: #bdbdbd; } .form-checkbox:checked { background-color: #e2e9ea; } input, label, select, textarea { font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: .875rem; } input, textarea { border: 1px solid #bdbdbd; padding: 10px; width: 100%; } select { font-size: .875rem; border: 0; border-radius: 0; border-bottom: 1px solid #bdbdbd; background: none; padding: 5px 30px 5px 0; height: 30px; /* Removes the default