@charset "UTF-8";
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/**
* Style Guide
* @group settings 0 Settings
* @group components 1 Components
* @group modules 2 Modules
*
* Global styles which are included in all pages
*/
/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
@import url(baron.css);
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0; }
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1, .h1 {
font-size: 2em;
margin: 0.67em 0; }
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
figcaption,
figure {
display: block; }
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px; }
/**
* 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 */ }
/**
* Add the correct display in IE.
*/
main {
display: block; }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/* 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 */ }
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */ }
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit; }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder; }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic; }
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000; }
/**
* 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: -0.25em; }
sup {
top: -0.5em; }
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block; }
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none; }
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden; }
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */ }
/**
* Show the overflow in IE.
*/
button {
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 */ }
button,
[type="button"],
[type="reset"],
[type="submit"] {
/**
* Remove the inner border and padding in Firefox.
*/
/**
* Restore the focus styles unset by the previous rule.
*/ }
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**
* Show the overflow in Edge.
*/
input {
overflow: visible; }
/**
* 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 macOS.
*/ }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 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 */ }
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
color: inherit;
/* 2 */
white-space: normal;
/* 1 */ }
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */ }
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto; }
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE, and Firefox.
*/
details {
display: block; }
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item; }
/*
* Add the correct display in IE 9-.
*/
menu {
display: block; }
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block; }
/**
* Add the correct display in IE.
*/
template {
display: none; }
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none; }
/*
* Styles, which don't generate any output and can be safely imported from
* all root level stylesheets
*/
/*
* Paths
*/
/**
* Animation & transition settings
*/
/*
* Color Palette
*/
/*
* Form color palette
*/
/*
* Footer color palette
*/
/*
* Settings for the `` element
*/
/*
* Text
*
* Settings for text, fonts, sizes
*/
/**
* Text sizes
*
* Resolution specific font sizes, line height, etc.
* All styles cascade up
*
* For each style is generated "%text--size-NAME" placeholder selector
* Each style can also be used included using mixin "@include text--size(NAME);"
*
* See extends/_text-styles.scss
*/
/**
* Link styles
*
* Settings for the anchor elements
* For each link style is generated "%link--style-NAME" placeholder selector
*
* See extends/_links.scss
*
* @demo
* @extend %link--style-heading;
*/
/**
* Grid
*
* Grid system settings
* All resolution styles cascade up from mobile to desktop
*
* @demo
* ...
* ...
*/
/**
* For each grid container is generated ".container--NAME" classname, except
* for "default", for which ".container" classname is generated
*
* @demo
*
*
*/
/**
* Spacing
*
* Settings for spacing between most of the elements
*
* @demo
* @include margins($spacing);
* @include margins($spacing-medium);
*/
/**
* Breakpoints for devices / orientations / screens
* Following already are default values, uncomment if needed
*/
/**
* Minimal body width
*/
/**
* Returns nth property from css property list
*
* @property {map} $list List
* @property {number} $index Item index
*/
/**
* In each $list pair of $breakpoint: $value replaces all values with 'inherit'
* except for one in $index position
*
* @code
* $spacer: (xs: 10px 11px 12px 13px, md: 20px 0);
* $spacer-top-only: pick-css-nth($spacer, 1); // => (xs: 10px inherit inherit inherit, md: 20px inherit inherit inherit)
* $spacer-bottom-only: pick-css-nth($spacer, 3); // => (xs: inherit inherit 12px inherit, md: inherit inherit 20px inherit)
*/
/**
* @function map-deep-get Deep get for sass maps
* @author https://css-tricks.com/snippets/sass/deep-getset-maps/
* @description
* Returns deeply nested property from a map
*
* $paddings: map-deep-get($grid-containers, default, paddings, xs);
*/
/**
* Mixin for object-fit plugin
*
* @see https://github.com/bfred-it/object-fit-images
* @see components/_background.scss
* @example
* @include object-fit(contain);
* @include object-fit(cover, top);
*/
/**
* Converts SVG into data url so that this SVG could be used as a
* background image
*
* @demo
* background-image: svg-to-data-url('');
*/
/**
* Selectors to target specific browsers without affecting specificity or
* limiting use in media queries
*
* Pros:
* - Works with media queries
*
* Conts:
* - Can't be used with @extend as that will invalidate other selectors
*
* See http://browserstrangeness.bitbucket.org/css_hacks.html
*/
/**
* Target Internet Explorer, but not Edge
*
* @demo
* div {
* @include browser-ie () {
* // ...
* }
* }
*/
/**
* Target Edge
*/
/**
* Target Firefox
*/
/**
* Target Safari
*/
/**
* Target all WebKit browsers
*/
/**
* Breakpoints for devices / orientations / screens
*
* @code
* @include media-breakpoint (lg-up) {
* // ...
* }
*/
/**
* Returns if media query name is valid and values exist
*/
/**
* Output content in a media query
*
* @code
* .icon {
* @include media-breakpoint (sm-down) {
* // ...
* }
* }
*/
/**
* Output content in retina display media query
*
* @code
* .icon {
* @include media-retina () {
* // ...
* }
* }
*/
/**
* Output content in non-retina display media query
*
* @code
* .icon {
* @include media-non-retina () {
* // ...
* }
* }
*/
/**
* Image rendering quality
* In Chrome background image quality is not the best when using background-size
*/
/**
* @function placeholder Set input placeholder styles
* @demo
* input {
* @include placeholder () {
* color: #000;
* }
* }
*/
/**
* Margins mixin
*/
/**
* In each $list pair of $breakpoint: $value replaces all values with 'inherit'
* except for one in $index position
*
* @demo
* @include padding(inherit 20px);
*
* @demo
* @include padding((
* xs: inherit 20px,
* md: inherit 40px
* ));
*/
/*
* Grid generator mixins
*/
/**
* Mixin to generate grid container classnames
*
* @property {map} $containers Containers
* @property {number?} $gutter Gutter between grid columns
*/
/**
* Mixins to generate content for grid container classname
*
* @property {map} $container Container
* @property {map} $container.max-width List of max-widths
* @property {map} $container.paddings List of paddings
* @property {number?} $gutter Gutter between grid columns
*/
/**
* Mixin to generate column classnames for each resolutions
*
* @property {number} $columns Number of columns
* @property {list} $breakpoints Responsive breakpoints
*/
/**
* Mixin to generate column paddings for each resolutions
*
* @property {number} $columns Number of columns
* @property {list} $breakpoints Responsive breakpoints
* @property {number?} $gutter Gutter between columns
*/
/*
* 1. Fix for IE where paddings are not taken into account even with box-sizing
* 2. Fix for Firefox
*/
/*
* Button normal state style mixin
*
* Sets styles to button normal state
* 1. We overwrite disabled state too because if classname is used, then :hover, :active will take precedent
*/
/*
* Button hover state style mixin
*
* Sets styles to button hover, focused states
*/
/*
* Button active state style mixin
*
* Sets styles to active state
*/
/*
* Button hover + active state style mixin
*
* Sets styles to button active, hover, focused states
*/
/*
* Active button state style mixin
*
* Sets styles to button active, hover, focused states
*/
/*
* Button disabled state style mixin
*/
/*
* Button style
*
* Sets hover, active, focus, disabled styles
*/
/*
* Button size
*
* Sets different size for different breakpoints
*/
/*
* Square button modifier mixin
*/
/*
* Text size
*
* Sets different size for different breakpoints
*/
/*
* Link normal state style mixin
*
* Sets styles to link normal state
*/
/*
* Link hover state style mixin
*
* Sets styles to link hover and focused states
*/
/*
* Link active state style mixin
*
* Sets styles to link active state
*/
/*
* Link hover and active state style mixin
*
* Sets styles to link hover, focused and active states
*/
/*
* Link disabled state style mixin
*
* Sets styles to link disabled state
*/
/*
* Image icon generator mixin
*/
/*
* Retina image for icon
*/
/**
* Animations
*
* Enables transition for all properties for elements
*
* @demo
* div { @extend %transition; }
*/
a,
button,
input[type="submit"], .icon, .animation--fade-in,
.animation--fade-out, .animation--popover-in,
.animation--popover-out, .animation--lightbox-in,
.animation--lightbox-out, .animation--lightbox-in .lightbox__overlay,
.animation--lightbox-out .lightbox__overlay, .animation--lightbox-in .lightbox__content,
.animation--lightbox-out .lightbox__content, .animation--height, .animation--product-appear, .btn--link .icon, .ui-footer .btn--link .icon, .btn--nav:before,
.btn--tab:before, .btn--nav .icon,
.btn--tab .icon, .btn--link-primary .icon, .ui-footer .btn--link-primary-inv .icon, .btn--link-text .icon, .btn--link-filter .icon, .btn--link-success .icon, .btn--dropdown .icon, .btn--dropdown-primary .icon, .ui-footer .btn--dropdown .icon, .btn--cart .btn__icon, .form-control--float .form-label, .form-control--number input,
.form-control--input input,
.form-control--textarea textarea,
.form-control--select select, .form-control-radio__icon,
.form-control-checkbox__icon, .form-control-radio--large .form-control-radio__icon:before, .form-control-checkbox__icon:before, .nice-select, .nice-select:after, .nice-select .list, .nice-select .option, .card--hover-zoom .card__image img, .card--hover-shadow, .baron__bar:before, .baron::before,
.baron::after, .dropdown__button:after, .product-list--horizontal .product__controls--hover, .product figure,
.product .product__info,
.product .product__overlay,
.product .price,
.product .meta-info, .product__background, .product__overlay, .embed-video:after, .search-form input, .nav-secondary, main:before, .subscribe__form {
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.25, 0.74, 0.22, 0.99); }
/**
* Layout component mixin and placeholder classname, which is above other components
*
* @demo
* .lightbox { @extend %layout-order-above-top; }
* .header { @extend %layout-order-top; }
*
* .lightbox { @include layout-order-above-top(); }
* .header { @include layout-order-top(); }
*/
.lightbox__content,
.popover, main.with-content-shadow--viewport:before, .back-to-top {}
.nice-select.open, .nice-select .list, .search, main:before {}
.popover{
z-index: 10;
}
/**
* Layout component mixin and placeholder classname which covers parent
*
* @demo
* .btn-large:before { @extend %layout-position-overlay; }
* .btn-small:before { @extend %layout-position-overlay-extended; }
*
* .btn-large:before { @include layout-position-overlay(); }
* .btn-small:before { @include layout-position-overlay-extended(); }
*/
.overlay, .btn__icon:after {
display: block;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px; }
.link--brand:before {
display: block;
position: absolute;
top: -15px;
right: -15px;
bottom: -15px;
left: -15px; }
.overflow-fix:after, .form-section:after, .nav-primary .container:after, .overflow-fix:before, .form-section:before, .nav-primary .container:before {
content: "";
display: block;
overflow: hidden;
position: relative;
padding-top: 1px;
margin-top: -1px; }
/**
* Text style mixin and placeholder classnames
*
* Used to keep all standard text and all headings consistent without code
* duplication / to improve maintainability
*
* See settings/_text.scss
*
* @demo
* body { @extend %text--default; }
* h1 { @extend %text--heading; }
*
* body { @include text--default(); }
* h1 { @include text--heading(); }
*/
body,
input,
textarea,
button, select.form-control-select, .product__title, .price.price--small {
font-family: "Museo Sans Cyrl", Helvetica, Arial, sans-serif;
font-weight: 500;
letter-spacing: 0;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1;
font-kerning: normal;
text-transform: none;
color: #333333; }
small b, small strong, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, .text--heading, .text--small b, .text--small strong, .card__content__time, .search-form input, .in-cart-popover__info .added-confirmation, .text--content blockquote, .text--content ol > li:before {
font-weight: 900;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #333333; }
.ui-footer small b, small .ui-footer b, .ui-footer small strong, small .ui-footer strong, .ui-footer h1, .ui-footer .h1, .ui-footer h2, .ui-footer .h2, .ui-footer h3, .ui-footer .h3, .ui-footer h4, .ui-footer .h4, .ui-footer h5, .ui-footer .h5, .ui-footer .text--heading, .ui-footer .text--small b, .text--small .ui-footer b, .ui-footer .text--small strong, .text--small .ui-footer strong, .ui-footer .card__content__time .ui-footer .in-cart-popover__info .added-confirmation, .in-cart-popover__info .ui-footer .added-confirmation, .ui-footer .text--content blockquote, .text--content .ui-footer blockquote, .ui-footer .text--content ol > li:before, .text--content .ui-footer ol > li:before {
color: #ffffff; }
.text--smaller, .nice-select, .nice-select .current input, select.form-control-select, .badge--rounded, .badge--product span, .filters, .product nav a, .product-tags {
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap; }
h1, .h1, .form-section__heading:before {
text-transform: none; }
/**
* Text size / style mixin and placeholder classname generator
* For each style is generated "%text--size-NAME" placeholder selector
*
* See settings/_text.scss
*
* @demo
* .class { @extend %text--size-h1; }
*
* .class { @include text--size(h1); }
*
* .class {
* @include text--size((
* xs: ( 'font-size': 1.4rem, 'line-height': 24 / 14 * 1em )
* ));
* }
*/
body, .text--default, .product__title, .product__title--medium, .price.price--text, .header-top .tel, .text--content figure figcaption {
font-size: 1.4rem;
line-height: 1.42857em; }
small, .text--small, label.error,
div.error, .error-message, .badge--medium, .badge--small, .meta-info, .breadcrumbs, .header-top, .search-form input, .footer__copyright, .seo-text {
font-size: 1.2rem;
line-height: 1.33333em; }
.text--smaller, .nice-select, .nice-select .current input, select.form-control-select, .badge--rounded, .badge--product span, .filters, .product nav a, .product-tags {
font-size: 1rem;
line-height: 1.4em; }
.text--lead, .form-intro, .form-success, .product__title--large, .price.price--small, .in-cart-popover__info .added-confirmation, .text--content small {
font-size: 1.6rem;
line-height: 1.3125em; }
.text--large, .accordion__heading--style-secondary a, .text--content {
font-size: 1.8rem;
line-height: 1.66667em; }
h1, .h1, .form-section__heading:before {
font-size: 4rem;
line-height: 1.2em; }
h2, .h2, .price, .text--content h3, .text--content .h3 {
font-size: 2rem;
line-height: 1.2em; }
h3, .h3, .product__controls .price {
font-size: 1.6rem;
line-height: 1.125em; }
h4, .h4 {
font-size: 1.4rem;
line-height: 1.14286em; }
h5, .h5 {
font-size: 1.2rem;
line-height: 1.33333em; }
.text--h1-promo {
font-size: 5.4rem;
line-height: 1em;
letter-spacing: 0em;
text-transform: uppercase; }
.text--h2-promo {
font-size: 3.2rem;
line-height: 1em; }
.text--h3-promo {
font-size: 2.1rem;
line-height: 1.14286em; }
.text--h1-product, .card__content__time, .price.price--large, .text--content h2, .text--content .h2, .text--content blockquote, .text--content ol > li:before {
font-size: 3rem;
line-height: 1.2em;
text-transform: none; }
.price.price--larger {
font-size: 4rem;
line-height: 1.2em; }
.price.price--medium {
font-size: 2.4rem;
line-height: 1.16667em; }
.price.price--footer {
font-size: 3.6rem;
line-height: 0.83333em; }
.heading-tab {
font-size: 2rem;
line-height: 3.75em; }
.form-label, .form-control--number input,
.form-control--input input,
.form-control--textarea textarea,
.form-control--select select, .form-control__addon {
font-size: 1.6rem;
line-height: 1.625em; }
.form-control--input--small input,
.form-control--input--smaller input,
.form-control--number--smaller input {
font-size: 1.4rem;
line-height: 1.64286em; }
/**
* Link style mixin and placeholder classname generator
*
* For each link theme defined in settings/_colors.scss creates
* a %link--style-NAME placeholder classname
*
* See settings/_links.scss
*
* @demo
* a { @extend %link--style-default; }
* nav a { @extend %link--style-text; }
*
* a { @include link--style(default); }
* nav a { @include link--style(text); }
*/
a {
color: #306bf5; }
.has-hover a:focus, .has-hover a:hover {
color: #333333; }
a:active, a.is-active {
color: #333333; }
/* focus-visible */
a:focus-visible,
button:focus-visible,
.promo-sale .dropdown__menu a:focus-visible,
.ui-footer .dropdown__menu a:focus-visible{
box-shadow: 0 0 1px 1px #306bf5 inset;
}
.promo-sale a:focus-visible,
.ui-footer a:focus-visible {
box-shadow: 0 0 1px 1px #ffffff inset;
}
div[tabindex="0"]:focus-visible,
div[tabindex="-1"]:focus-visible,
h1[tabindex="0"]:focus-visible,
h2[tabindex="0"]:focus-visible,
h3[tabindex="0"]:focus-visible,
p[tabindex="0"]:focus-visible,
span[tabindex="0"]:focus-visible,
li[tabindex="0"]:focus-visible,
.form-control:has(input:focus-visible) > span{
outline: solid 1px #306bf5;
}
.ui-footer div[tabindex="0"]:focus-visible {
outline: solid 1px #ffffff;
}
td[tabindex="0"]:focus-visible,
th[tabindex="0"]:focus-visible {
outline: none;
box-shadow: 0 0 1px 1px #306bf5 inset;
}
.product__title a, .header-top .tel, .nav-secondary a {
color: #333333; }
.has-hover .product__title a:focus, .product__title .has-hover a:focus, .has-hover .header-top .tel:focus, .header-top .has-hover .tel:focus, .has-hover .nav-secondary a:focus, .nav-secondary .has-hover a:focus, .has-hover .product__title a:hover, .product__title .has-hover a:hover, .has-hover .header-top .tel:hover, .header-top .has-hover .tel:hover, .has-hover .nav-secondary a:hover, .nav-secondary .has-hover a:hover {
color: #306bf5; }
.product__title a:active, .header-top .tel:active, .nav-secondary a:active, .product__title a.is-active, .header-top .is-active.tel, .nav-secondary a.is-active {
color: #306bf5; }
.link--text-small, .filters--text a, .product nav a, .meta-info a, .breadcrumbs a, .header-top a {
color: #6F7780; }
.has-hover .link--text-small:focus, .has-hover .filters--text a:focus, .filters--text .has-hover a:focus, .has-hover .product nav a:focus, .product nav .has-hover a:focus, .has-hover .meta-info a:focus, .meta-info .has-hover a:focus, .has-hover .breadcrumbs a:focus, .breadcrumbs .has-hover a:focus, .has-hover .header-top a:focus, .header-top .has-hover a:focus, .has-hover .link--text-small:hover, .has-hover .filters--text a:hover, .filters--text .has-hover a:hover, .has-hover .product nav a:hover, .product nav .has-hover a:hover, .has-hover .meta-info a:hover, .meta-info .has-hover a:hover, .has-hover .breadcrumbs a:hover, .breadcrumbs .has-hover a:hover, .has-hover .header-top a:hover, .header-top .has-hover a:hover {
color: #333333; }
.link--text-small:active, .filters--text a:active, .product nav a:active, .meta-info a:active, .breadcrumbs a:active, .header-top a:active, .is-active.link--text-small, .filters--text a.is-active, .product nav a.is-active, .meta-info a.is-active, .breadcrumbs a.is-active, .header-top a.is-active {
color: #333333; }
.dropdown__menu a {
color: #306bf5; }
.has-hover .dropdown__menu a:focus, .dropdown__menu .has-hover a:focus, .has-hover .dropdown__menu a:hover, .dropdown__menu .has-hover a:hover {
color: #333333; }
.dropdown__menu a:active, .dropdown__menu a.is-active {
color: #333333; }
.dropdown--text .dropdown__menu a {
color: #6F7780; }
.has-hover .dropdown--text .dropdown__menu a:focus, .dropdown--text .dropdown__menu .has-hover a:focus, .has-hover .dropdown--text .dropdown__menu a:hover, .dropdown--text .dropdown__menu .has-hover a:hover {
color: #306bf5; }
.dropdown--text .dropdown__menu a:active, .dropdown--text .dropdown__menu a.is-active {
color: #333333; }
.ui-footer a {
color: #ffffff; }
.has-hover .ui-footer a:focus, .ui-footer .has-hover a:focus, .has-hover .ui-footer a:hover, .ui-footer .has-hover a:hover {
color: #d6e2ff; }
.ui-footer a:active, .ui-footer a.is-active {
color: #d6e2ff; }
.footer__nav--secondary a {
color: #d6e2ff; }
.has-hover .footer__nav--secondary a:focus, .footer__nav--secondary .has-hover a:focus, .has-hover .footer__nav--secondary a:hover, .footer__nav--secondary .has-hover a:hover {
color: #ffffff; }
.footer__nav--secondary a:active, .footer__nav--secondary a.is-active {
color: #ffffff; }
.ui-white a {
color: #333333; }
.has-hover .ui-white a:focus, .ui-white .has-hover a:focus, .has-hover .ui-white a:hover, .ui-white .has-hover a:hover {
color: #333333; }
.ui-white a:active, .ui-white a.is-active {
color: #333333; }
/*
* Body styles
*/
html {
height: 100%;
overflow-x: hidden; }
body {
min-height: 100%;
background: #ffffff; }
html, body {
min-width: 1280px; }
/*
* 1. IE11 main element doesn't have default browser styles
*/
main {
display: block; }
/*
* Fix box sizing nightmare
*/
*, *:after, *:before {
box-sizing: border-box; }
/*
* Responsive Images
*/
figure {
margin: 0; }
img {
user-select: none; }
/**
* Move element out of viewport
*
* Move element outside the viewport while still allowing to interact
* using keyboard
*
* @demo
*
*/
.is-out-of-screen {
position: absolute !important;
left: -9000px;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
white-space: nowrap;
/* added line */
width: 1px; }
/**
* Invisible content
*
* Invisible content when JS is enabled
* Inteded to be used with JS animations, to prevent element from visually flashing during load
*
* @demo
* ...
*/
.js .is-invisible {
opacity: 0; }
/**
* Invisible overlay
*
* Makes element invisible and makes it cover whole container
* element
*
* @demo
* Click me
*/
.overlay {
background: #fff;
opacity: 0; }
/**
* Hide overflow, disable content scrolling
*
* @demo
* ...
*/
.disable-scrolling {
overflow: hidden !important; }
/**
* Fix container overflow background bug
*
* If in container is element which is moved out of this container using negative margin
* then there is an issue where container background is moved too.
* Adding "overflow-fix" classname to the container fixes it
*/
/**
* Hide overflow
*/
.overflow-hidden {
overflow: hidden; }
/**
* Element with relative position
*/
.position-relative {
position: relative; }
/**
* Themes
*/
.ui-footer {
background: #306bf5; }
.ui-gray {
background: #f7f9fc; }
.ui-white {
background: #ffffff; }
.ui-light {
background: #f5f7fa; }
/**
* Visibility animation
*
* Used by jquery.available.js to detect when element becomes
* visible, but to the DOM (eg. has width / height), not necessarily the user
*/
.animation-visible {
animation: animation-visible 0.1ms; }
@keyframes animation-visible {
0% {
opacity: 0; }
100% {
opacity: 1; } }
/**
* On touch enabled devices remove highlighting from elements which
* are clicked to simulate :hover interactions
*/
.js-touch-hover {
-webkit-tap-highlight-color: transparent; }
/*
* @TODO
* CUSTOM FONT FOR TESTING ONLY!!!!
* DO NOT USE THESE IN PRODUCTION, LICENSE AND OTHER FORMATS MUST BE ACQUIRED TO USE THIS FONT!!!
*/
/*
@font-face {
font-family: '...';
src: url('../fonts/....otf') format('opentype'), url('../fonts/....woff2') format('woff2');
font-weight: 200; // light / thin
font-style: normal;
}
@font-face {
font-family: '...';
src: url('../fonts/....otf') format('opentype'), url('../fonts/....woff2') format('woff2');
font-weight: 300; // book / demi
font-style: normal;
}
@font-face {
font-family: '...';
src: url('../fonts/....otf') format('opentype'), url('../fonts/....woff2') format('woff2');
font-weight: 400; // regular / normal
font-style: normal;
}
*/
@font-face {
font-family: 'Museo Sans Cyrl';
src: url("../fonts/museo-sans-cyrl-500.woff2") format("woff2"), url("../fonts/museo-sans-cyrl-500.woff") format("woff");
font-weight: 500;
font-style: normal; }
/*
@font-face {
font-family: '...';
src: url('../fonts/....otf') format('opentype'), url('../fonts/....woff2') format('woff2');
font-weight: 600; // semibold / demibold
font-style: normal;
}
*/
@font-face {
font-family: 'Museo Sans Cyrl';
src: url("../fonts/museo-sans-cyrl-700.woff2") format("woff2"), url("../fonts/museo-sans-cyrl-700.woff") format("woff");
font-weight: 700;
font-style: normal; }
@font-face {
font-family: 'Museo Sans Cyrl';
src: url("../fonts/museo-sans-cyrl-900.woff2") format("woff2"), url("../fonts/museo-sans-cyrl-900.woff") format("woff");
font-weight: 900;
font-style: normal; }
/**
* Text styles
*/
/**
* @name Default text and font styles
*
* See extends/_text-styles.scss
* See extends/_text-sizes.scss
* See settings/_text.scss
*
* @demo
* Heading 1
* Heading 2
* Heading 3
* Heading 4
* Heading 5
*
* Paragraph text
*
*
* Small paragraph text
*
*/
html {
font-size: 62.5%; }
b, strong {
font-weight: 700; }
sup {
font-weight: 500;
font-size: 70%;
top: -0.7em;
margin-left: 4px; }
/*
* Headings
*/
h1 sup, .h1 sup, h2 sup, .h2 sup, h3 sup, .h3 sup, h4 sup, .h4 sup, h5 sup, .h5 sup {
font-size: 60%; }
/*
* Margins and paddings
*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
margin-top: 2.6rem;
margin-bottom: 2.6rem; }
h1:first-child, .h1:first-child, h2:first-child, .h2:first-child, h3:first-child, .h3:first-child, h4:first-child, .h4:first-child, h5:first-child, .h5:first-child {
margin-top: 0; }
h1:last-child, .h1:last-child, h2:last-child, .h2:last-child, h3:last-child, .h3:last-child, h4:last-child, .h4:last-child, h5:last-child, .h5:last-child {
margin-bottom: 0; }
hr, p, blockquote, table, iframe, object, pre {
margin-top: 2.6rem;
margin-bottom: 2.6rem; }
hr:first-child, p:first-child, blockquote:first-child, table:first-child, iframe:first-child, object:first-child, pre:first-child {
margin-top: 0; }
hr:last-child, p:last-child, blockquote:last-child, table:last-child, iframe:last-child, object:last-child, pre:last-child {
margin-bottom: 0; }
/*
*
*/
table {
width: 100%; }
/**
* Link styles
*
* @demo
* Standard link
* Disabled state
*/
a {
text-decoration: none; }
/*
* Brand link
*/
.link--brand {
color: #6F7780;
position: relative;
opacity: 0.65; }
.link--brand:before {
content: "";
position: absolute; }
.has-hover .link--brand:focus, .has-hover .link--brand:hover, .link--brand:active, .link--brand.is-active {
opacity: 1; }
/*
* Cursors
*/
a,
button,
input[type="submit"] {
cursor: pointer; }
/*
* Link animations
*/
/*
* Focused state
*/
a:focus,
button:focus,
input[type="submit"]:focus {
outline: none; }
::-moz-focus-inner {
border: 0;
padding: 0; }
/*
* Disabled state
*/
.is-disabled,
:disabled,
[disabled] {
pointer-events: none; }
/*
* Link styles
*/
/**
* List styles
*
* By default none of the lists are styled
*/
ul,
ol {
list-style: none;
padding: 0;
margin: 0; }
/**
* List styles inside text block
*
* @demo
*
*
* - List item #1
* - List item #2
* - List item #3
*
*
Left aligned text
* Center aligned text
* Right aligned text
*/
.text--left {
text-align: left; }
.text--right {
text-align: right; }
.text--center {
text-align: center; }
/**
* Capitalize text
*
* @demo
* Lorem ipsum dolor sit amet
* Lorem ipsum dolor sit amet
*/
.text--capitalize {
text-transform: uppercase !important; }
.text--non-captialize {
text-transform: none !important; }
/**
* Prevent text wrapping
*
* @demo
*
* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
* pharetra sed erat convallis suscipit. Vestibulum at interdum neque.
*
*/
.text--nowrap {
white-space: nowrap !important; }
/**
* Truncate text adding dots at the end of the line if needed
*
* @demo
*
* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
* pharetra sed erat convallis suscipit. Vestibulum at interdum neque.
*
*/
.text--truncate {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important; }
/**
* Heading styles for elements
*
* @demo
* Looks like first level heading
*/
/**
* Text styles for elements
*
* @demo
* Lead intro text
*/
/**
* Heading font family
*
* @demo
* I look similar to heading
*/
/**
* Font size styles for elements
*
* @demo
* Small text size
* Small text size
*/
/**
* Text color styles for elements
*
* @demo
* Small text size
*/
.text--color-primary {
color: #306bf5; }
.text--color-secondary {
color: #ffd600; }
.text--color-text-small {
color: #6F7780; }
.ui-footer .text--color-text-small {
color: #d6e2ff; }
.text--color-heading {
color: #333333; }
.text--color-success {
color: #07a115; }
.text--color-error {
color: #de2152; }
.text--color-complementary {
color: #d7194e; }
.ui-footer {
color: #ffffff; }
/**
* Horizontal ruler
*
* @demo
*
*/
hr {
border: 0;
border-bottom: 1px solid #edeef0; }
/**
* SVG icon
*
* @demo
*
*/
.icon {
transition-property: color, transform, opacity;
display: inline-block;
transform: translateY(0); }
a .icon, button .icon, .btn .icon {
vertical-align: middle;
transition-property: transform, opacity;
pointer-events: none; }
a .icon:not(:last-child), button .icon:not(:last-child), .btn .icon:not(:last-child) {
margin-right: .9rem; }
a .icon:not(:first-child), button .icon:not(:first-child), .btn .icon:not(:first-child) {
margin-left: .9em; }
/**
* Icon inside the text block
*/
.text .icon {
vertical-align: middle;
position: relative;
top: -2px; }
.text .icon:not(:first-child) {
margin-left: .7rem; }
.text .icon:not(:last-child) {
margin-right: .7rem; }
/**
* Icon inside the button
*/
.btn .icon {
flex-shrink: 0;
margin-top: -4px; }
@-moz-document url-prefix() {
.btn .icon {
margin-top: -2px; } }
.btn--tiny .icon {
margin-top: -2px; }
.btn--smaller .icon {
margin-top: 0; }
/**
* Icon inside the button following the badge
*/
.btn .badge + .icon {
margin-left: 0; }
/**
* Specific icon adjustments
*/
.icon-arrow-down {
position: relative;
top: 1px; }
.icon-add-round-small {
position: relative;
top: 2px; }
.btn--primary .icon-arrow-down {
left: -9px; }
.btn--smaller .icon-arrow-down {
top: -1px; }
.btn .icon-subscribe, .btn
.icon-info-leasing {
margin-top: -2px; }
.icon-arrow-back-small {
position: relative;
top: 2px; }
.icon-thumbs-up {
position: relative;
top: -2px; }
.icon-thumbs-down {
position: relative;
top: 6px; }
.icon-card {
position: relative;
top: 3px; }
.icon-promo-star {
position: relative;
margin-top: -4px; }
.btn .icon-add-round {
margin-top: 0; }
.btn .icon-user-small {
margin-top: 0; }
/*
* Dropdown icon
*/
a .icon-dropdown a:not(:first-child), a
.icon-dropdown button:not(:first-child) {
margin-left: .4rem; }
.btn .icon-dropdown {
margin-top: 0; }
.is-active .icon-dropdown {
transform: translateY(-1px) rotate(180deg); }
/*
* Animations
*
* See javascripts/components/jquery.transition-sequences.js
*/
.animation--fade-in,
.animation--fade-out, .animation--popover-in,
.animation--popover-out, .animation--lightbox-in,
.animation--lightbox-out, .animation--lightbox-in .lightbox__overlay,
.animation--lightbox-out .lightbox__overlay, .animation--lightbox-in .lightbox__content,
.animation--lightbox-out .lightbox__content, .animation--height, .animation--product-appear {
pointer-events: none; }
/**
* Fade animation
*/
.animation--fade-in,
.animation--fade-out {
will-change: opacity; }
.animation--fade-in--inactive,
.animation--fade-out--active {
opacity: 0; }
/**
* Popover animation
*/
.animation--popover-in,
.animation--popover-out {
pointer-events: all;
transition-property: transform, opacity;
will-change: transform, opacity; }
.animation--popover-in--inactive,
.animation--popover-out--active {
opacity: 0;
transform: translateY(10px); }
/**
* Lightbox animation
*/
.animation--lightbox-in,
.animation--lightbox-out {
pointer-events: all;
transition-property: border-color;
border-color: rgba(255, 255, 255, 0); }
.animation--lightbox-in .lightbox__overlay,
.animation--lightbox-out .lightbox__overlay {
pointer-events: all;
transition-property: opacity;
will-change: opacity;
opacity: 0.5; }
.animation--lightbox-in .lightbox__content,
.animation--lightbox-out .lightbox__content {
pointer-events: all;
transition-property: transform, opacity;
will-change: opacity; }
.animation--lightbox-in--inactive,
.animation--lightbox-out--active {
border-color: transparent; }
.animation--lightbox-in--inactive .lightbox__overlay,
.animation--lightbox-out--active .lightbox__overlay {
opacity: 0; }
.animation--lightbox-in--inactive .lightbox__content,
.animation--lightbox-out--active .lightbox__content {
opacity: 0;
transform: scale(0.9); }
/**
* Height animation, height is not a static value
* but is based on element size
*/
.animation--height {
transition-property: height, opacity;
will-change: height, opacity;
overflow: hidden; }
/**
*
*/
.animation--product-appear {
transition-property: opacity, transform; }
.animation--product-appear--inactive {
opacity: 0;
transform: translateY(20px) scale(0.95); }
/**
* Buttons
*
* Creates a button. Can be used with either ``, `