/**
 * ui-kit-3d - Styleguide ‎Dassault Systèmes
 * @version v1.0.19
 */
@charset "UTF-8";
/* Spacing */
/* Font Size */
/* Basic colors*/
/* Main colors */
/* For text colours on light background */
/* For text colors on dark background */
/* Background */
/* Background */
/* Size */
/* Brand */
/*
---
name: Colors
foundations:
 - doc
 - doc/Colors
version: 1.1.0
tag:
 - Source approval done
 - DS approval pending
---

```html
<!-- no-code -->
	<ul>
		<li style="background: #000"> $black</li>
		<li style="background: #fff" class="is-dark"> $white</li>
		<li style="background: #56c65a"> $green</li>
		<li style="background: #ff9852"> $orange</li>
		<li style="background: #e63f41"> $red</li>
		<li style="background: #005386"> $blue-brand</li>
		<li style="background: #239de8"> $blue-action</li>
		<li style="background: #1d83c2"> $blue-action-hover</li>
    <li style="background: #f6f6f6" class="is-dark"> $light-background</li>
		<li style="background: #2a2a2a"> $dark-background</li>
	</ul>
```

Shades of black used for text colors on light background.
The $black-quinary is most used for background.

```html
<!-- no-code -->
	<ul>
		<li style="background: rgba(0,0,0,.8)"> $black-primary</li>
		<li style="background: rgba(0,0,0,.48)"> $black-secondary</li>
		<li style="background: rgba(0,0,0,.32)"> $black-tertiary</li>
		<li style="background: rgba(0,0,0,.16)"> $black-quaternary</li>
		<li style="background: rgba(0,0,0,.08)"> $black-quinary</li>
	</ul>
```

Shades of white used for text colors on dark background.
The $white-quinary is most used for background.

```html
<!-- no-code dark -->
	<ul>
		<li style="background: #fff" class="is-dark"> $white-primary</li>
		<li style="background: rgba(255,255,255,.64)" class="is-dark"> $white-secondary</li>
		<li style="background: rgba(255,255,255,.40)" class="is-dark"> $white-tertiary</li>
		<li style="background: rgba(255,255,255,.16)" class="is-dark"> $white-quaternary</li>
		<li style="background: rgba(255,255,255,.08)" class="is-dark"> $white-quinary</li>
	</ul>
```

#### Brand Colors

Catia

```html
<!-- no-code -->
	<ul>
		<li style="background: #292A7C"> map-get($catia, 500)</li>
		<li style="background: #1E1F5C"> map-get($catia, 600)</li>
		<li style="background: #191A4C"> map-get($catia, 800)</li>
    <li style="background: #15153F"> map-get($catia, 900)</li>
	</ul>
```

Delmia

```html
<!-- no-code -->
	<ul>
		<li style="background: #FFD600"> map-get($delmia, 500)</li>
		<li style="background: #DEB900"> map-get($delmia, 600)</li>
		<li style="background: #CFAC00"> map-get($delmia, 800)</li>
    <li style="background: #C2A200"> map-get($delmia, 900)</li>
	</ul>
```

Enovia

```html
<!-- no-code -->
	<ul>
		<li style="background: #ED7C13"> map-get($enovia, 500)</li>
		<li style="background: #CC6B10"> map-get($enovia, 600)</li>
		<li style="background: #BD630F"> map-get($enovia, 800)</li>
    <li style="background: #B05C0E"> map-get($enovia, 900)</li>
	</ul>
```

Exalead

```html
<!-- no-code -->
	<ul>
		<li style="background: #0081C5"> map-get($exalead, 500)</li>
		<li style="background: #006AA3"> map-get($exalead, 600)</li>
		<li style="background: #006094"> map-get($exalead, 800)</li>
    <li style="background: #005887"> map-get($exalead, 900)</li>
	</ul>
```

Geovia

```html
<!-- no-code -->
	<ul>
		<li style="background: #CB9604"> map-get($geovia, 500)</li>
		<li style="background: #AB7E03"> map-get($geovia, 600)</li>
		<li style="background: #9C7303"> map-get($geovia, 800)</li>
    <li style="background: #8F6902"> map-get($geovia, 900)</li>
	</ul>
```

Simulia

```html
<!-- no-code -->
	<ul>
		<li style="background: #00ABAA"> map-get($simulia, 500)</li>
		<li style="background: #008A8A"> map-get($simulia, 600)</li>
		<li style="background: #007A7A"> map-get($simulia, 800)</li>
    <li style="background: #006E6E"> map-get($simulia, 900)</li>
	</ul>
```

Solidworks

```html
<!-- no-code -->
	<ul>
		<li style="background: #E31818"> map-get($solidworks, 500)</li>
		<li style="background: #C21515"> map-get($solidworks, 600)</li>
		<li style="background: #B31313"> map-get($solidworks, 800)</li>
    <li style="background: #A61212"> map-get($solidworks, 900)</li>
	</ul>
```

3dvia

```html
<!-- no-code -->
	<ul>
		<li style="background: #88BD23"> map-get($_3dvia, 500)</li>
		<li style="background: #6F9C1D"> map-get($_3dvia, 600)</li>
		<li style="background: #648C1A"> map-get($_3dvia, 800)</li>
    <li style="background: #5B7F18"> map-get($_3dvia, 900)</li>
	</ul>
```

3dexcite

```html
<!-- no-code -->
	<ul>
    <li style="background: #000"> map-get($_3dexcite, 500)</li>
    <li style="background: #1f1f1f"> map-get($_3dexcite, 600)</li>
    <li style="background: #282828"> map-get($_3dexcite, 800)</li>
    <li style="background: #383838"> map-get($_3dexcite, 900)</li>
	</ul>
```

Corporate

```html
<!-- no-code -->
  <ul>
    <li style="background: #005386"> map-get($corporate, 500)</li>
    <li style="background: #003F66"> map-get($corporate, 600)</li>
    <li style="background: #003557"> map-get($corporate, 800)</li>
    <li style="background: #002D4A"> map-get($corporate, 900)</li>
  </ul>
```
*/
@font-face {
  font-family: 'icon';
  src: url("../fonts/3ds/ui-kit-icons.eot");
  src: url("../fonts/3ds/ui-kit-icons.eot") format("embedded-opentype"), url("../fonts/3ds/ui-kit-icons.ttf") format("truetype"), url("../fonts/3ds/ui-kit-icons.woff") format("woff"), url("../fonts/3ds/ui-kit-icons.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: '3ds';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-Regular-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-Regular-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-Regular-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-Regular-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-Regular-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-Regular-v2.svg#3dsregular") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: '3ds';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-Bold-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-Bold-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-Bold-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-Bold-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-Bold-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-Bold-v2.svg#3dsbold") format("svg");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: '3ds';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-Italic-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-Italic-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-Italic-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-Italic-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-Italic-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-Italic-v2.svg#3dsitalic") format("svg");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: '3ds';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-BoldItalic-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-BoldItalic-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-BoldItalic-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-BoldItalic-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-BoldItalic-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-BoldItalic-v2.svg#3dsboldItalic") format("svg");
  font-weight: 700;
  font-style: italic; }

@font-face {
  font-family: '3ds';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-Light-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-Light-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-Light-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-Light-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-Light-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-Light-v2.svg#3dslight") format("svg");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: '3ds';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-SemiBold-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-SemiBold-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-SemiBold-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-SemiBold-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-SemiBold-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-SemiBold-v2.svg#3dssemibold") format("svg");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: '3ds';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-SemiBoldItalic-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-SemiBoldItalic-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-SemiBoldItalic-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-SemiBoldItalic-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-SemiBoldItalic-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-SemiBoldItalic-v2.svg#3dssemiboldItalic") format("svg");
  font-weight: 600;
  font-style: italic; }

@font-face {
  font-family: '3ds';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLight-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLight-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLight-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLight-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLight-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLight-v2.svg#3dsextralight") format("svg");
  font-weight: 200;
  font-style: normal; }

@font-face {
  font-family: '3ds';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLightItalic-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLightItalic-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLightItalic-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLightItalic-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLightItalic-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-ExtraLightItalic-v2.svg#3dsextralightItalic") format("svg");
  font-weight: 200;
  font-style: italic; }

@font-face {
  font-family: '3dscondensed';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-CondensedRegular-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-CondensedRegular-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedRegular-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedRegular-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedRegular-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedRegular-v2.svg#3dscondensed") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: '3dscondensed';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-CondensedBold-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-CondensedBold-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedBold-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedBold-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedBold-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedBold-v2.svg#3dscondensed_bold") format("svg");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: '3dscondensed';
  src: url("https://ui.3ds.com/fonts/3ds/3ds-CondensedLight-v2.eot");
  src: url("https://ui.3ds.com/fonts/3ds/3ds-CondensedLight-v2.eot?#iefix") format("embedded-opentype"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedLight-v2.woff2") format("woff2"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedLight-v2.woff") format("woff"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedLight-v2.ttf") format("truetype"), url("https://ui.3ds.com/fonts/3ds/3ds-CondensedLight-v2.svg#3dscondensed_light") format("svg");
  font-weight: 300;
  font-style: normal; }

/*
If you are working from scratch on a new website, please remove the prefix .ds-ui-kit-scope
and uncomment the reset for the html and body tag.

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: $light-background;
  color: $black-primary;
  font-family: "3ds", arial, sans-serif;
  font-size: $fts-default;
  line-height: 1.6;
}
 */
body.ds-ui-kit-scope {
  overflow-x: hidden; }

.ds-ui-kit-scope {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: rgba(0, 0, 0, 0.8);
  font-family: '3ds', arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  /* font-sizing for content */
  /* soft reset */
  /* avoid top margins on first content element */
  /* avoid margins on nested elements */
  /* HTML5 tags */
  /* max values */
  /* you shall not pass */
  /* scripts */
  /* links */
  /* lists */ }
  .ds-ui-kit-scope *,
  .ds-ui-kit-scope *:after,
  .ds-ui-kit-scope *:before {
    box-sizing: border-box; }
  .ds-ui-kit-scope blockquote,
  .ds-ui-kit-scope caption,
  .ds-ui-kit-scope details,
  .ds-ui-kit-scope dl,
  .ds-ui-kit-scope figure,
  .ds-ui-kit-scope hgroup,
  .ds-ui-kit-scope label,
  .ds-ui-kit-scope ol,
  .ds-ui-kit-scope p,
  .ds-ui-kit-scope pre,
  .ds-ui-kit-scope td,
  .ds-ui-kit-scope textarea,
  .ds-ui-kit-scope th,
  .ds-ui-kit-scope ul {
    margin: 1.5em 0 0; }
  .ds-ui-kit-scope body,
  .ds-ui-kit-scope figure,
  .ds-ui-kit-scope html,
  .ds-ui-kit-scope label,
  .ds-ui-kit-scope textarea {
    margin: 0;
    padding: 0; }
  .ds-ui-kit-scope ol,
  .ds-ui-kit-scope ul {
    padding-left: 0; }
  .ds-ui-kit-scope code,
  .ds-ui-kit-scope pre,
  .ds-ui-kit-scope samp {
    white-space: pre-wrap;
    font-family: consolas, 'DejaVu Sans Mono', courier, monospace; }
  .ds-ui-kit-scope code {
    line-height: 1em; }
  .ds-ui-kit-scope table {
    margin-bottom: 1.5em; }
  .ds-ui-kit-scope blockquote:first-child,
  .ds-ui-kit-scope dl:first-child,
  .ds-ui-kit-scope h1:first-child,
  .ds-ui-kit-scope h2:first-child,
  .ds-ui-kit-scope h3:first-child,
  .ds-ui-kit-scope h4:first-child,
  .ds-ui-kit-scope h5:first-child,
  .ds-ui-kit-scope h6:first-child,
  .ds-ui-kit-scope ol:first-child,
  .ds-ui-kit-scope p:first-child,
  .ds-ui-kit-scope pre:first-child,
  .ds-ui-kit-scope ul:first-child {
    margin-top: 0; }
  .ds-ui-kit-scope li ol,
  .ds-ui-kit-scope li p,
  .ds-ui-kit-scope li ul {
    margin-top: 0;
    margin-bottom: 0; }
  .ds-ui-kit-scope article,
  .ds-ui-kit-scope aside,
  .ds-ui-kit-scope details,
  .ds-ui-kit-scope figcaption,
  .ds-ui-kit-scope figure,
  .ds-ui-kit-scope footer,
  .ds-ui-kit-scope header,
  .ds-ui-kit-scope hgroup,
  .ds-ui-kit-scope nav,
  .ds-ui-kit-scope section {
    display: block; }
  .ds-ui-kit-scope blockquote,
  .ds-ui-kit-scope code,
  .ds-ui-kit-scope img,
  .ds-ui-kit-scope input,
  .ds-ui-kit-scope pre,
  .ds-ui-kit-scope table,
  .ds-ui-kit-scope td,
  .ds-ui-kit-scope textarea,
  .ds-ui-kit-scope video {
    max-width: 100%; }
  .ds-ui-kit-scope img {
    height: auto; }
  .ds-ui-kit-scope code,
  .ds-ui-kit-scope div,
  .ds-ui-kit-scope h1,
  .ds-ui-kit-scope p,
  .ds-ui-kit-scope pre,
  .ds-ui-kit-scope samp,
  .ds-ui-kit-scope table,
  .ds-ui-kit-scope td,
  .ds-ui-kit-scope textarea,
  .ds-ui-kit-scope th {
    word-wrap: break-word;
    -webkit-hyphens: none;
       -moz-hyphens: none;
        -ms-hyphens: none;
            hyphens: none; }
  .ds-ui-kit-scope input,
  .ds-ui-kit-scope textarea,
  .ds-ui-kit-scope select {
    font-family: inherit; }
    .ds-ui-kit-scope input:disabled,
    .ds-ui-kit-scope textarea:disabled,
    .ds-ui-kit-scope select:disabled {
      cursor: not-allowed; }
  .ds-ui-kit-scope input[type='button'],
  .ds-ui-kit-scope input[type='submit'],
  .ds-ui-kit-scope input[type='reset'] {
    -webkit-appearance: none;
    font: inherit; }
  .ds-ui-kit-scope button {
    -webkit-appearance: none;
    background: none;
    border: 0;
    font: inherit; }
  .ds-ui-kit-scope img {
    vertical-align: middle; }
  .ds-ui-kit-scope a img {
    border: 0; }
  .ds-ui-kit-scope body > script {
    display: none !important; }
  .ds-ui-kit-scope p,
  .ds-ui-kit-scope ul {
    font-weight: 300; }
  .ds-ui-kit-scope a,
  .ds-ui-kit-scope .ds-link {
    text-decoration: none;
    color: #239de8;
    cursor: pointer; }
    .ds-ui-kit-scope a:hover, .ds-ui-kit-scope a:focus,
    .ds-ui-kit-scope .ds-link:hover,
    .ds-ui-kit-scope .ds-link:focus {
      color: #1d83c2;
      text-decoration: underline; }
  .ds-ui-kit-scope ul {
    list-style: none; }
  .ds-ui-kit-scope :focus {
    outline: 0 !important; }
  .ds-ui-kit-scope .clearfix:after {
    content: ' ';
    display: table;
    clear: both; }
  .ds-ui-kit-scope ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(0, 0, 0, 0.16); }
  .ds-ui-kit-scope ::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(0, 0, 0, 0.16); }
  .ds-ui-kit-scope :-ms-input-placeholder {
    /* IE!)+ */
    color: rgba(0, 0, 0, 0.16) !important; }
  .ds-ui-kit-scope ::-ms-input-placeholder {
    /* Edge */
    color: rgba(0, 0, 0, 0.16); }
  .ds-ui-kit-scope input::-webkit-contacts-auto-fill-button {
    position: absolute;
    right: 32px;
    top: 50%;
    margin-top: -6px;
    display: none;
    opacity: 0;
    visibility: hidden; }
  .ds-ui-kit-scope input::-webkit-date-and-time-value {
    margin: 0; }

.no-scroll {
  overflow-y: hidden; }

@media all and (min-width: 1041px) {
  .no-scroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%; } }

.ds-shake {
  -webkit-animation: shake 0.45s, cubic-bezier(0.25, 0.1, 0.25, 1) both;
          animation: shake 0.45s, cubic-bezier(0.25, 0.1, 0.25, 1) both;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px; }

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  33% {
    -webkit-transform: translate3d(6px, 0, 0);
            transform: translate3d(6px, 0, 0); }
  66% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@keyframes shake {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  33% {
    -webkit-transform: translate3d(6px, 0, 0);
            transform: translate3d(6px, 0, 0); }
  66% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

.ds-ui-kit-scope {
  /*
---
name: Responsive Grid
foundations:
 - doc
 - doc/Responsive Grid
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---

* 3DS Grids adapts to all screen sizes and help you achieve consistency across layout.
* The number of columns changes depending on the breakpoint. Therefore you can add a specific class for every breakpoint and change the number of columns you want to use.


* For example: `ds-col ds-col--xs-2 ds-col--md-2` defined 2 of 4 columns (50%) on mobile and then 2 of 8 columns (25%) on tablet.
* If you keep only `ds-col ds-col--xs-2` then your colums size will stay at 50% for all the breakpoints.

<table>
    <thead>
    <tr>
        <th></th>
        <th>
            Mobile<br>
            <small>0 > 720px</small>
        </th>
        <th>
            Tablet<br>
            <small>721px > 840px</small>
        </th>
        <th>
            Landscape/Desktop<br>
            <small>841px > 1040px</small>
        </th>
        <th>
            Desktop<br>
            <small>1041px > 1440px</small>
        </th>
        <th>
            Desktop large<br>
            <small>> 1441px</small>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th class="text-nowrap" scope="row">Class prefix</th>
        <td><code>.ds-col--xs-N</code></td>
        <td><code>.ds-col--md-N</code></td>
        <td><code>.ds-col--ld-N</code></td>
        <td><code>.ds-col--lg-N</code></td>
        <td><code>.ds-col--xl-N</code></td>
    </tr>
    <tr>
        <th class="text-nowrap" scope="row">Offsets</th>
        <td><code>-</code></td>
        <td><code>.ds-col--md-offset-N</code></td>
        <td><code>.ds-col--ld-offset-N</code></td>
        <td><code>.ds-col--lg-offset-N</code></td>
        <td><code>.ds-col--xl-offset-N</code></td>
    </tr>
    <tr>
        <th class="text-nowrap" scope="row">Number of columns</th>
        <td>4</td>
        <td>8</td>
        <td>10</td>
        <td>12</td>
        <td>16</td>
    </tr>
    <tr>
        <th class="text-nowrap" scope="row">Gutter width</th>
        <td>24</td>
        <td>32</td>
        <td>32</td>
        <td>32</td>
        <td>40</td>
    </tr>
    <tr>
        <th class="text-nowrap" scope="row">Container max width</th>
        <td>480px</td>
        <td>Fluid</td>
        <td>Fluid</td>
        <td>1280px</td>
        <td>1600px</td>
    </tr>
    </tbody>
</table>



#### Fluid grid
```html
<!-- demo -->
<a target="_blank" href="../../ui-kit/html/grid.html">See demo</a>
```

```html
<!-- no-preview -->
<div class="ds-container">
	<div class="ds-row">
		<div class="ds-col ds-col--xs-4 ">ds-col--xs-4</div>
	</div>
	<div class="ds-row">
		<div class="ds-col ds-col--xs-2 ds-col--md-2 ds-col--ld-3">ds-col--xs-2 ds-col--md-2 ds-col--ld-3</div>
		<div class="ds-col ds-col--xs-2 ds-col--md-6 ds-col--ld-7">ds-col--xs-2 ds-col--md-6 ds-col--ld-7</div>
	</div>
	<div class="ds-row">
		<div class="ds-col ds-col--xs-1 ds-col--md-2 ds-col--ld-2">ds-col--xs-1 ds-col--md-2 ds-col--ld-2</div>
		<div class="ds-col ds-col--xs-3 ds-col--md-4 ds-col--ld-6">ds-col--xs-3 ds-col--md-4 ds-col--ld-6</div>
		<div class="ds-col ds-col--xs-4 ds-col--md-2 ds-col--ld-2">ds-col--xs-4 ds-col--md-2 ds-col--ld-2</div>
	</div>
	<div class="ds-row">
		<div class="ds-col ds-col--xs-4 ds-col--md-2 ds-col--ld-5">ds-col--xs-4  ds-col--md-2 ds-col--ld-5</div>
		<div class="ds-col ds-col--xs-4 ds-col--md-2 ds-col--ld-5">ds-col--xs-4  ds-col--md-2 ds-col--ld-5</div>
		<div class="ds-col ds-col--xs-4 ds-col--md-2 ds-col--ld-5">ds-col--xs-4  ds-col--md-2 ds-col--ld-5</div>
		<div class="ds-col ds-col--xs-4 ds-col--md-2 ds-col--ld-5">ds-col--xs-4  ds-col--md-2 ds-col--ld-5</div>
	</div>
  <div class="ds-row">
    <div class="ds-col ds-col--xs-2 ds-col--ld-offset-2 ds-col--lg-offset-0 ds-col--xl-offset-4"><span>ds-col--xs-2 ds-col--ld-offset-2 ds-col--lg-offset-0 ds-col--xl-offset-4</span></div>
  </div>
</div>
```

#### Fixed grid

If you want to keep your grid with a fixed width, you can add the class `ds-container--fixed` to the grid container.

```html
<!-- demo -->
<a target="_blank" href="../../ui-kit/html/grid.html">See demo</a>
```

```html
<!-- no-preview -->
<div class="ds-container ds-container--fixed">
	****
</div>
```
*/
  /*
---
name: Typography
foundations:
 - doc
 - doc/Typography
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---

#### Heading

* If you are not using a default heading tag like h1, h2, etc.
* You can use an helper class ex: `ds-heading-1`.

```html
<h1>Heading h1</h1> <!-- or <p class="ds-heading-1">Heading h1</p> -->
<h2>Heading h2</h2> <!-- or <p class="ds-heading-2">Heading h2</p> -->
<h3>Heading h3</h3> <!-- or <p class="ds-heading-3">Heading h3</p> -->
<h4>Heading h4</h4> <!-- or <p class="ds-heading-4">Heading h4</p> -->
<h5>Heading h5</h5> <!-- or <p class="ds-heading-5">Heading h5</p> -->
```

#### Copy helper

By default copy font-size is 15px.
We added helper for larger and smaller copies.

```html
<p class="ds-copy-large">Large: Lorem Ipsum is simply dummy text of the printing<br>and typesetting industry.</p>
<p>Default: Lorem Ipsum is simply dummy text of the printing<br>and typesetting industry.</p>
<p class="ds-copy-small">Small: Lorem Ipsum is simply dummy text of the printing<br>and typesetting industry.</p>
<p class="ds-copy-caption">Caption: Lorem Ipsum is simply dummy text of the printing<br>and typesetting industry.</p>
```
*/
  /*
---
name: Icons
elements:
 - doc
 - doc/Icons
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---

#### Generating the font-icon via Icomoon
The font-icon is generated via Icomoon thanks to the following process.
1. Go on https://icomoon.io/app/#/select
2. Import the current font-icon by drag-and-drop the **selection.json** file in ** /src/fonts/3ds/ **
3. Import the new icon that you want to add to the collection. If you want to change an existing one, make sure that the new one has the same name and click on replace on the popup.
4. Generate the font clicking on **Generate Font F**. Make sur all your icons are selected (yellow border)
5. On the new page, click on Download (bottom right)
6. Unzip the file, open the folder and drag and drop the file selection.json in the folder ** /src/fonts/3ds/ **
7. Go to folder **fonts/** and drag and drop all the files in ** /src/fonts/3ds/ **

At that moment if you have only changed existing icon, just rebuild the ui-kit and your font will be ready.
If you have added some new icons, you have to add it to the project :

1. Open the file **icon.scss** in **src/sass/object**
2. Take inspiration on the previous icons and do the same for the new one.


#### Large icons

```html
<div class="ds-row">
  <div class="ds-col ds-col--lg-6">
    <ul>
      <li>
        <i class="ds-ico ds-ico-quote-sign"></i> quote-sign
      <li>
      <li>
        <i class="ds-ico ds-ico-play-big"></i> play-big
      <li>
      <li style="background:#666;">
        <i class="ds-ico ds-ico-play-big is-white"></i> play-big
      <li>
    </ul>
  </div>
</div>
```

#### Regular icons

```html
<div class="ds-row">
  <div class="ds-col ds-col--lg-6">
    <ul>
      <li>
        <i class="ds-ico ds-ico-burger-icon"></i> burger-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-clock-icon"></i> clock-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-close-icon"></i> close-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-down-chevron-icon"></i> down-chevron-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-heart-icon"></i> heart-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-language-icon"></i> language-icon
      <li>
    <li>
        <i class="ds-ico ds-ico-user-icon"></i> user-icon
      <li>
    </ul>
  </div>
  <div class="ds-col ds-col--lg-6">
    <ul>
      <li>
        <i class="ds-ico ds-ico-location-icon"></i> location-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-notif-icon"></i> notif-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-play-icon"></i> play-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-search-icon"></i> search-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-share-icon"></i> share-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-dots-icon"></i> dots-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-back-icon"></i> back-icon
      <li>
    </ul>
  </div>
</div>
```

#### Mini icons

```html
<div class="ds-row">
  <div class="ds-col ds-col--lg-6">
    <ul>
      <li>
        <i class="ds-ico ds-ico-back-mini"></i> back-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-breadcrumb-chevron-mini"></i> breadcrumb-chevron-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-calendar-mini"></i> calendar-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-check-mini"></i> check-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-chevron-mini"></i> chevron-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-clock-mini"></i> clock-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-close-mini"></i> close-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-cta-mini"></i> cta-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-diploma-mini"></i> diploma-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-download-mini"></i> download-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-dropdown-chevron-mini"></i> dropdown-chevron-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-duration-mini"></i> duration-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-external-link-mini"></i> external-link-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-file-mini"></i> file-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-filter-mini"></i> filter-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-get-location-mini"></i> get-location-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-heart-mini"></i> heart-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-information-mini"></i> information-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-linkedin-mini"></i> linkedin-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-weibo-mini"></i> weibo-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-xing-mini"></i> xing-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-rss-mini"></i> rss-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-location-mini"></i> location-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-login-mini"></i> login-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-logout-mini"></i> logout-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-mail-mini"></i> mail-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-offer-mini"></i> offer-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-language-mini"></i> language-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-youku-mini"></i> youku-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-phone-mini"></i> phone-mini
      </li>
    </ul>
  </div>
  <div class="ds-col ds-col--lg-6">
    <ul>
      <li>
        <i class="ds-ico ds-ico-play-mini"></i> play-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-plus-mini"></i> plus-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-profile-mini"></i> profile-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-search-mini"></i> search-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-see-all-mini"></i> see-all-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-share-mini"></i> share-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-sort-mini"></i> sort-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-suitcase-mini"></i> suitcase-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-upload-mini"></i> upload-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-youtube-mini"></i> youtube-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-accordeon-minus-mini"></i> accordeon-minus-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-accordeon-plus-mini"></i> accordeon-plus-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-bottom-chevron-mini"></i> bottom-chevron-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-instagram-mini"></i> instagram-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-left-chevron-mini"></i> left-chevron-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-right-chevron-mini"></i> right-chevron-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-right-mini"></i> right-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-top-chevron-mini"></i> top-chevron-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-top-mini"></i> top-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-bottom-mini"></i> bottom-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-facebook-mini"></i> facebook-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-twitter-mini"></i> twitter-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-pinterest-mini"></i> pinterest-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-vkontakte-mini"></i> vkontakte-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-swim-mini"></i> swim-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-wechat-mini"></i> wechat-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-dropdown-chevron-up-mini"></i> dropdown-chevron-up-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-form-error-mini"></i> form-error-mini
      </li>
      <li>
        <i class="ds-ico ds-ico-form-tooltip-mini"></i> form-tooltip-mini
      </li>
    </ul>
  </div>
</div>
```
*/
  /*
---
name: Buttons
elements:
 - doc
 - doc/Buttons
version: 1.1.0
tag:
 - Source approval done
 - DS approval pending
---

* There are four kind of buttons : Scream, Shout, Cheer, Murmur.

#### Scream

Regular Version
```html
<a class="ds-btn ds-btn--scream" href="#">Button</a>

<a class="ds-btn ds-btn--scream has-icon" href="#">
	<i class="ds-ico ds-ico-calendar-mini"></i>Button
</a>
```

Large Version
```html
<a class="ds-btn ds-btn--scream ds-btn--large" href="#">Button</a>

<a class="ds-btn ds-btn--scream ds-btn--large has-icon" href="#">
	<i class="ds-ico ds-ico-calendar-mini"></i>Button
</a>
```

Compact Version
```html
<a class="ds-btn ds-btn--scream ds-btn--compact" href="#">Button</a>

<a class="ds-btn ds-btn--scream ds-btn--compact has-icon" href="#">
	<i class="ds-ico ds-ico-calendar-mini"></i>Button
</a>
```

Disabled state
```html
<a class="ds-btn ds-btn--scream is-disabled" href="#">Button disabled</a>
```

Regular Extended
```html
<div class="preview ds-border" style="width:400px; height: 150px;">
	<a class="ds-btn ds-btn--scream ds-btn--extended" href="#">
		Button
	</a>

	 <a class="ds-btn ds-btn--scream has-icon ds-btn--extended" href="#">
	    <i class="ds-ico ds-ico-calendar-mini"></i>Button
    </a>

    <a class="ds-btn ds-btn--scream has-icon ds-btn--extended ds-btn--large" href="#">
	    <i class="ds-ico ds-ico-calendar-mini"></i>Button
    </a>
</div>
```

#### Shout

Regular Version
```html
<a class="ds-btn ds-btn--shout" href="#">Button</a>

<a class="ds-btn ds-btn--shout has-icon" href="#">
	<i class="ds-ico ds-ico-calendar-mini"></i>Button
</a>
```

Large Version
```html
<a class="ds-btn ds-btn--shout ds-btn--large" href="#">Button</a>

<a class="ds-btn ds-btn--shout ds-btn--large has-icon" href="#">
	<i class="ds-ico ds-ico-calendar-mini"></i>Button
</a>
```

Compact Version
```html
<a class="ds-btn ds-btn--shout ds-btn--compact" href="#">Button</a>

<a class="ds-btn ds-btn--shout ds-btn--compact has-icon" href="#">
	<i class="ds-ico ds-ico-calendar-mini"></i>Button
</a>
```

Regular on dark
```html
<!-- dark -->
<a class="ds-btn ds-btn--shout ds-btn--dark" href="#">Button</a>
```

#### Cheer

Regular
```html
<a class="ds-btn ds-btn--cheer" href="#">
	<i class="ds-ico ds-ico-chevron-mini"></i><span>Button</span>
</a>
```

Regular on dark
```html
<!-- dark -->
<a class="ds-btn ds-btn--cheer ds-btn--dark" href="#">
	<i class="ds-ico ds-ico-chevron-mini"></i><span>Button</span>
</a>
```

Compact
```html
<a class="ds-btn ds-btn--cheer ds-btn--compact" href="#">
	<i class="ds-ico ds-ico-chevron-mini"></i><span>Button</span>
</a>
```

Regular long label
```html
<div style="width:150px;">
<a class="ds-btn ds-btn--cheer" href="#">
	<i class="ds-ico ds-ico-chevron-mini"></i><span>Two lines Cheer Button</span>
</a>
</div>
```

#### Murmur

Regular
```html
<a class="ds-btn ds-btn--murmur" href="#"><i class="ds-ico ds-ico-chevron-mini"></i><span>Button</span></a>
```

Regular on dark
```html
<!-- dark -->
<a class="ds-btn ds-btn--murmur ds-btn--dark" href="#"><i class="ds-ico ds-ico-chevron-mini"></i><span>Button</span></a>
```

Regular on two lines
```html
<div style="width:150px;">
<a class="ds-btn ds-btn--murmur" href="#">
	<i class="ds-ico ds-ico-chevron-mini"></i><span>Two lines murmur button</span>
</a>
</div>
```

#### Inline link

```html
<a href="#" href="#">Simple link</a>
```
*/
  /** SIZE **/
  /** TYPE **/
  /** COLOR **/
  /*
---
name: Lists
elements:
 - doc
 - doc/Lists
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---

#### This is a default list
font-size 15px
line-height 24px
```html
<p style="font-size: 15px; line-height: 24px;">Quisque scelerisque lectus a metus imperdiet:</p>
<ul class="ds-lists">
  <li>Nunc porta vel lacus a euismod. Aliquam vitae</li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae
    <ul class="ds-lists">
      <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae</li>
      <li>Integer facilisis venenatis sapien</li>
    </ul>
  </li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae</li>
</ul>
```
font-size 15px
line-height 28px
```html
<p style="font-size: 15px; line-height: 28px;">Quisque scelerisque lectus a metus imperdiet:</p>
<ul class="ds-lists ds-lists--big-lh">
  <li>Nunc porta vel lacus a euismod. Aliquam vitae</li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae
    <ul class="ds-lists ds-lists--big-lh">
      <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae</li>
      <li>Integer facilisis venenatis sapien</li>
    </ul>
  </li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae</li>
</ul>
```
font-size 18px
line-height 28px
```html
<p style="font-size: 18px; line-height: 28px;">Quisque scelerisque lectus a metus imperdiet:</p>
<ul class="ds-lists ds-lists--big-ft">
  <li>Nunc porta vel lacus a euismod. Aliquam vitae</li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae
    <ul class="ds-lists ds-lists--big-ft">
      <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae</li>
      <li>Integer facilisis venenatis sapien</li>
    </ul>
  </li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae</li>
</ul>
```
font-size 18px
line-height 32px
```html
<p style="font-size: 18px; line-height: 32px;">Quisque scelerisque lectus a metus imperdiet:</p>
<ul class="ds-lists ds-lists--big-ft ds-lists--big-lh">
  <li>Vestibulum pharetra suscipit lacinia. Nunc ultrices eleifend arcu ac commodo. Mauris sapien mi, accumsan vitae malesuada sed.</li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae
    <ul class="ds-lists ds-lists--big-ft ds-lists--big-lh">
      <li>Nullam aliquam at arcu a accumsan.</li>
      <li>Estibulum sed metus mauris. Maecenas velit neque, fringilla eget nisl id, fermentum accumsan lorem. Pellentesque habitant.</li>
    </ul>
  </li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae</li>
</ul>
```
#### This is a counter list
font-size: 15px
line-height: 24px
```html
<ol class="ds-lists ds-lists--root">
  <li>Nunc porta vel lacus a euismod. Aliquam vitae</li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae
    <ol class="ds-lists">
      <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae</li>
      <li>Integer facilisis venenatis sapien
        <ol class="ds-lists">
          <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae</li>
          <li>Integer facilisis venenatis sapien
            <ol class="ds-lists">
              <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae</li>
              <li>Integer facilisis venenatis sapien
                <ol class="ds-lists">
                  <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae</li>
                  <li>Integer facilisis venenatis sapien</li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae</li>
</ol>
```

#### List on dark background
You should add the class `ds-lists--dark`
```html
<!-- dark -->
<ol class="ds-lists ds-lists--dark ds-lists--root">
  <li>Nunc porta vel lacus a euismod. Aliquam vitae</li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae
    <ol class="ds-lists">
      <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae</li>
      <li>Integer facilisis venenatis sapien
        <ol class="ds-lists">
          <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae</li>
          <li>Integer facilisis venenatis sapien
            <ol class="ds-lists">
              <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae</li>
              <li>Integer facilisis venenatis sapien
                <ol class="ds-lists">
                  <li>Nunc porta vel lacus a euismod. Aliquam vitae. Aliquam vitae Nunc porta vel lacus a euismod. Aliquam vitae</li>
                  <li>Integer facilisis venenatis sapien</li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Nunc porta vel lacus a euismod. Aliquam vitae</li>
</ol>
```

#### List in the context of Rich-Text editor.

All the content of Rich-Text must be put in a container called .ds-copy-text
<br/>
Works well with the default case (font-size: 15px,line-height: 24px)
```html
<div class="ds-copy-text">
  <p>In bibendum dolor ac arcu semper, sit amet luctus nulla rutrum.</p>
  <ol>
    <li>UL list</li>
    <li>Mauris mollis leo sed neque elementum, a rhoncus orci viverra
      <ul>
        <li>UL list</li>
        <li>Nulla iaculis accumsan elementum</li>
        <li>Mauris mollis leo sed neque elementum, a rhoncus orci viverra
          <ul>
            <li>UL list</li>
            <li>Nulla iaculis accumsan elementum</li>
            <li>Mauris mollis leo sed neque elementum, a rhoncus orci viverra</li>
          </ul>
        </li>
      </ul>
    </li>
  </ol>
</div>
```

#### List in the context of Rich-Text editor on dark background.

All the content of Rich-Text on black background must be put in a container called `.ds-copy-text ds-copy-text--dark`

```html
<!-- dark -->
<div class="ds-copy-text ds-copy-text--dark">
  <p>In bibendum dolor ac arcu semper, sit amet luctus nulla rutrum.</p>
  <ol>
    <li>UL list</li>
    <li>Mauris mollis leo sed neque elementum, a rhoncus orci viverra
      <ul>
        <li>UL list</li>
        <li>Nulla iaculis accumsan elementum</li>
        <li>Mauris mollis leo sed neque elementum, a rhoncus orci viverra
          <ul>
            <li>UL list</li>
            <li>Nulla iaculis accumsan elementum</li>
            <li>Mauris mollis leo sed neque elementum, a rhoncus orci viverra</li>
          </ul>
        </li>
      </ul>
    </li>
  </ol>
</div>
```

#### Demo page
```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/lists.html">See demo</a>
```


*/
  /** PART ABOUT THE VERTICAL AND HORIZONTAL SPACINGS OF THE LIST **/
  /** PART ABOUT THE LIST-ITEM **/
  /*
---
name: Tags
elements:
 - doc
 - doc/Tags
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---

#### Clickable on dark background

```html
<!-- dark -->
<a class="ds-tag ds-tag--click-dark" title="3D printing" href="#">3D printing</a>
```

#### clickable on light background

```html
<a class="ds-tag ds-tag--click-light" title="3D printing" href="#">3D printing</a>
```

#### Meta tag

```html
<span class="ds-tag-meta ds-tag-meta--blue" title="3D printing">3D printing</span>
<span class="ds-tag-meta ds-tag-meta--red" title="Live">Live</span>
<span class="ds-tag-meta" title="Exclusive">Exclusive</span>
```

#### Meta tag on dark background

```html
<!-- dark -->
<span class="ds-tag-meta ds-tag-meta--blue" title="3D printing">3D printing</span>
<span class="ds-tag-meta ds-tag-meta--red" title="Live">Live</span>
<span class="ds-tag-meta ds-tag-meta--white" title="Exclusive">Exclusive</span>
```

#### Meta tag with icon

```html
<span class="ds-tag-meta ds-tag-meta--blue" title="Exclusive">
  <i class="ds-ico ds-ico-check-mini"></i>Exclusive
</span>
<span class="ds-tag-meta ds-tag-meta--red" title="Exclusive">
  <i class="ds-ico ds-ico-check-mini"></i>Exclusive
</span>
<span class="ds-tag-meta" title="Exclusive">
  <i class="ds-ico ds-ico-check-mini"></i>Exclusive
</span>
```
*/
  /*
---
name: Shadow
foundations:
 - doc
 - doc/Shadow
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---

#### Shadow level 1

```html
<div class="ds-shadow-1" style="width: 50px; height: 50px"></div>
```

#### Shadow level 2

```html
<div class="ds-shadow-2" style="width: 50px; height: 50px"></div>
```

#### Shadow level 3

```html
<div class="ds-shadow-3" style="width: 50px; height: 50px"></div>
```

#### Shadow level 4

```html
<div class="ds-shadow-4" style="width: 50px; height: 50px"></div>
```


#### Text Shadow

```html
<div class="ds-text-shadow" >Text Shadow</div>
```
*/
  /*
---
name: Stroke
foundations:
 - doc
 - doc/Stroke
version: 1.1.0
tag:
 - Source approval done
 - DS approval pending
---

#### Stroke on light background

```html
<div class="ds-stroke-sep" style="width: 200px;"></div>
```

#### Stroke on dark background

```html
<!-- dark -->
<div class="ds-stroke-sep ds-stroke-sep--dark" style="width: 200px;"></div>
```

#### Stroke around a box on light theme

```html
<div class="ds-border" style="width: 200px; height: 300px; border-radius: 3%"></div>
```

#### Stroke around a box on dark theme

```html
<!-- dark -->
<div class="ds-border ds-border--dark" style="width: 200px; height: 300px; border-radius: 3%"></div>
```
*/
  /*
---
name: Quote
elements:
 - doc
 - doc/Quote
version: 1.1.0
tag:
 - Source approval done
 - DS approval pending
---

#### Quote Large

```html
<div class="ds-quote ds-quote--large">
  <div class="ds-container">
    <div class="ds-row">
      <div class="ds-col ds-col--center ds-col--xs-4 ds-col--md-6 ds-col--lg-10 ds-col--xl-14"><i class="ds-quote__icon ds-ico ds-ico-quote-sign"></i>
        <p class="ds-quote__text">
          3DEXPERIENCECity is a 3D collaborative environment that federates all city data from sensors and systems.
          Officials use it as a 'copckpit' to analyze and manage city services and resources,
          as well as to virtually simulate 'what if' scenarios to optimize domains such as infrastructure, logistics and security

        </p>
        <div class="ds-quote__author-wrapper">
          <div class="ds-quote__photo" style="background-image: url(../../aigis_assets/images/monica.png);"></div>
          <div class="ds-quote__signature">
            <div class="ds-quote__name">Monica Menghini</div>
            <div class="ds-quote__function">Executive Vice President, Chief Strategy Officer Dassault Systèmes</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

#### Large quote on dark background and without picture

```html
<!-- dark -->
<div class="ds-quote ds-quote--large ds-quote--dark">
  <div class="ds-container">
    <div class="ds-row">
      <div class="ds-col ds-col--center ds-col--xs-4 ds-col--md-6 ds-col--lg-10 ds-col--xl-14"><i class="ds-quote__icon ds-ico ds-ico-quote-sign"></i>
        <p class="ds-quote__text">
          3DEXPERIENCECity is a 3D collaborative environment that federates all city data from sensors and systems.
          Officials use it as a 'copckpit' to analyze and manage city services and resources,
          as well as to virtually simulate 'what if' scenarios to optimize domains such as infrastructure, logistics and security

        </p>
        <div class="ds-quote__author-wrapper">
          <div class="ds-quote__signature">
            <div class="ds-quote__name">Monica Menghini</div>
            <div class="ds-quote__function">Executive Vice President, Chief Strategy Officer Dassault Systèmes</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

#### Quote Compact

```html
<div class="ds-container" style="margin-top: 50px;">
  <div class="ds-row">
    <div class="ds-col l-md--8">
      <p style="font-size: 16px; line-height:32px;">
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
        Pellentesque volutpat lorem a risus aliquet auctor.
      </p>
      <div class="ds-quote ds-quote--compact">
        <i class="ds-quote__icon ds-ico ds-ico-quote-sign"></i>
        <p class="ds-quote__text">
          3DEXPERIENCECity is a 3D collaborative environment that federates all city data from sensors and systems.
          Officials use it as a 'copckpit' to analyze and manage city services and resources,
          as well as to virtually simulate 'what if' scenarios to optimize domains such as infrastructure, logistics and security
        </p>
        <div class="ds-quote__author-wrapper">
          <div class="ds-quote__photo" style="background-image: url(../../aigis_assets/images/monica.png);"></div>
          <div class="ds-quote__signature">
            <div class="ds-quote__name">Monica Menghini</div>
            <div class="ds-quote__function">Executive Vice President, Chief Strategy Officer Dassault Systèmes</div>
          </div>
        </div>
      </div>
      <p style="font-size: 16px; line-height:32px;">Morbi condimentum placerat luctus. Praesent eu rutrum sapien, sed tempor neque. Orci varius natoque penatibus.</p>
    </div>
  </div>
</div>
```

#### Quote Compact without picture


```html
<div class="ds-container" style="margin-top: 50px;">
  <div class="ds-row">
    <div class="ds-col l-md--8">
      <p style="font-size: 16px; line-height:32px;">
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br>
        Pellentesque volutpat lorem a risus aliquet auctor.
      </p>
      <div class="ds-quote ds-quote--compact">
        <i class="ds-quote__icon ds-ico ds-ico-quote-sign"></i>
        <p class="ds-quote__text">
          3DEXPERIENCECity is a 3D collaborative environment that federates all city data from sensors and systems.
          Officials use it as a 'copckpit' to analyze and manage city services and resources,
          as well as to virtually simulate 'what if' scenarios to optimize domains such as infrastructure, logistics and security
        </p>
        <div class="ds-quote__author-wrapper">
          <div class="ds-quote__signature">
            <div class="ds-quote__name">Monica Menghini</div>
            <div class="ds-quote__function">Executive Vice President, Chief Strategy Officer Dassault Systèmes</div>
          </div>
        </div>
      </div>
      <p style="font-size: 16px; line-height:32px;">Morbi condimentum placerat luctus. Praesent eu rutrum sapien, sed tempor neque. Orci varius natoque penatibus.</p>
    </div>
  </div>
</div>
```

#### Demo page
```html
<!-- demo-->
	<a href="../../ui-kit/html/quote.html">See Demo</a>
```

*/
  /**
---
name: People
elements:
 - doc
 - doc/People
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---

#### Default

```html
<div class="ds-people">
  <div class="ds-people__faces">
    <div class="ds-people__face" style="background-image: url('//dummyimage.com/24x24/999999/fff');"></div>
  </div>
  <div class="ds-people__infos">
    <div class="ds-people__name">Author name</div>
  </div>
</div>
```

#### Name and company

```html
<div class="ds-people ds-people--multiline">
  <div class="ds-people__faces">
    <div class="ds-people__face" style="background-image: url('//dummyimage.com/24x24/999999/fff');"></div>
  </div>
  <div class="ds-people__infos">
    <div class="ds-people__name">Author name</div>
    <div class="ds-people__company">Vice-President Design Experience</div>
  </div>
</div>
```

#### Multiple faces
```html
<div class="ds-people ">
  <div class="ds-people__faces">
    <div class="ds-people__face" style="background-image: url('//dummyimage.com/24x24/999999/fff');"></div>
    <div class="ds-people__face" style="background-image: url('//dummyimage.com/24x24/999999/fff');"></div>
    <div class="ds-people__face" style="background-image: url('//dummyimage.com/24x24/999999/fff');"></div>
  </div>
  <div class="ds-people__infos">
    <div class="ds-people__name">Monica and 3 others...</div>
  </div>
</div>
```

#### Compact

You just need to add the class `ds-people--compact`. Works with all the variation (normal, company name, multiple faces)


```html
<div class="ds-people ds-people--compact">
  <div class="ds-people__faces">
    <div class="ds-people__face" style="background-image: url('//dummyimage.com/24x24/999999/fff');"></div>
  </div>
  <div class="ds-people__infos">
    <div class="ds-people__name">Author name</div>
  </div>
</div>
```

#### Dark version

* You just need to add the class `ds-people--dark`. Works with all the variation (normal, company name, multiple faces)

```html
<!-- dark -->
<div class="ds-people ds-people--dark">
  <div class="ds-people__faces">
    <div class="ds-people__face" style="background-image: url('//dummyimage.com/24x24/999999/fff');"></div>
  </div>
  <div class="ds-people__infos">
    <div class="ds-people__name">Author name</div>
  </div>
</div>
```

 */
  /*
---
name: Tooltip
elements:
 - doc
 - doc/Tooltip
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---

```html
<div style="padding-top: 150px;text-align: right;">
  <div class="ds-tooltip">
    <i class="ds-ico ds-ico-information-mini"></i>
    <div class="ds-tooltip__content ds-border ds-shadow-3">
      <h5>What is a tooltip ?</h5>
      <p>Lorem ipsum dolor sit amet, consturict ab adipiscing elit. Suspendisse lacus neque.</p>
    </div>
  </div>
</div>
```

#### Javascript
```js
  @param {string} [selector='.ds-tooltip'] - Optional css selector
  var tooltip = new uikit.bundle.tooltip(selector);
```
*/
  /*
---
name: Text inputs
elements:
 - doc
 - doc/Text inputs
version: 1.3.0
tag:
 - Source approval done
 - DS approval pending
---

#### Default state
```html
<div class="ds-input">
  <input type="text" id="text1" placeholder="Placeholder">
  <label for="text1">Last name</label>
</div>

<div class="ds-input">
  <input type="text" value="Thibaut" id="text2" placeholder="Placeholder">
  <label  for="text2">Last name</label>
  <span class="ds-input__info">Additional information</span>
</div>
```

#### Error state
```html
<div class="ds-input">
  <input type="text" id="text4" class="has-error" placeholder="Placeholder">
  <label  for="text4">Last name</label>
  <span class="ds-input__info ds-input__error">This input is required</span>
  <i class="ds-ico ds-ico-form-error-mini"></i>
</div>
```

#### Disabled state
```html
<div class="ds-input clearfix">
  <input type="text" id="text3" disabled placeholder="Placeholder">
  <label  for="text3">Last name</label>
</div>
```

#### Textarea
```html
<div class="ds-input clearfix">
  <textarea id="area1" data-limit="120"></textarea>
  <label for="area1">Comment</label>
  <span class="ds-input__info ds-input__info--counter">120</span>
</div>
```

#### Error state
```html
<div class="ds-input">
  <textarea id="area1" data-limit="120" class="has-error">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </textarea>
  <label for="area1">Comment</label>
  <span class="ds-input__info ds-input__info--counter">120</span>
  <span class="ds-input__info ds-input__error">Message</span>
  <i class="ds-ico ds-ico-form-error-mini"></i>
</div>
```

#### With Tooltip

```html
<!-- visible -->
<div class="ds-input">
  <input type="text" id="text11">
  <label for="text11">Last name</label>
  <div class="ds-tooltip">
    <i class="ds-ico ds-ico-form-tooltip-mini"></i>
    <div class="ds-tooltip__content ds-border ds-shadow-3">
      <h5>What is a tooltip ?</h5>
      <p>Lorem ipsum dolor sit amet, consturict ab adipiscing elit. Suspendisse lacus neque.</p>
    </div>
  </div>
</div>

<div class="ds-input">
  <input type="text" id="text44" class="has-error">
  <label  for="text44">Last name</label>
  <span class="ds-input__info ds-input__error">This input is required</span>
  <i class="ds-ico ds-ico-form-error-mini"></i>
  <div class="ds-tooltip">
    <i class="ds-ico ds-ico-form-tooltip-mini"></i>
    <div class="ds-tooltip__content ds-border ds-shadow-3">
      <h5>What is a tooltip ?</h5>
      <p>Lorem ipsum dolor sit amet, consturict ab adipiscing elit. Suspendisse lacus neque.</p>
    </div>
  </div>
</div>
```

#### With inside CTA
```html
<!-- visible -->
<div class="ds-input">
  <input type="text" id="text11">
  <label for="text11">Email</label>
  <button type="submit" class="ds-input__icon-cta"><i class="ds-ico ds-ico-right-mini"></i></button>
</div>
<div class="ds-input">
  <input type="text" id="text11" value="test" class="has-error">
  <label for="text11">Email</label>
  <span class="ds-input__info ds-input__error">This input is required</span>
  <i class="ds-ico ds-ico-form-error-mini"></i>
</div>
<div class="ds-input">
  <input type="text" id="text11" value="test@gmail.com">
  <label for="text11">Email</label>
  <button type="submit" class="ds-input__icon-cta"><i class="ds-ico ds-ico-right-mini"></i></button>
</div>
```

#### Javascript
Initialization
```js
@param {nodeEl} [container=document] - Optional Container of inputs
var input = new uikit.bundle.input(container);
```

#### Search autocomplete

```html
<div class="ds-input ds-input--search ds-input--only js-ds-autocomplete">
  <input type="text" id="search1" name="query" placeholder="Search" data-url="">
</div>
```

#### Javascript
Initialization
```js
@param {string} [query='.js-ds-autocomplete input'] - Optional Css selector for an input element
var search = new uikit.bundle.search(container);
```

#### Demo page

```html
<!-- demo-->
<a target="_blank" href="../../../ui-kit/html/demo-tpl.html">See demo</a>
```
*/
  /*
---
name: Selection control
elements:
 - doc
 - doc/Selection control
version: 1.1.0
tag:
 - Source approval done
 - DS approval pending
---

#### Checkbox

```html
<div class="ds-checkbox">
  <input type="checkbox" id="input1">
  <label for="input1">Option</label>
</div>
<div class="ds-checkbox">
  <input type="checkbox" id="input2" checked>
  <label for="input2">Option</label>
</div>
```

#### Radio

```html
<div class="ds-radio">
  <input type="radio" id="input3" name="radioDemo">
  <label for="input3">Option</label>
</div>
<div class="ds-radio">
  <input type="radio" id="input4" name="radioDemo" checked>
  <label for="input4">Option</label>
</div>
```

#### Disabled state

```html
<div class="ds-checkbox">
  <input type="checkbox" id="input11" disabled>
  <label for="input11">Option</label>
</div>
<div class="ds-radio">
  <input type="radio" id="input44" name="radioDemo" disabled>
  <label for="input44">Option</label>
</div>
```

#### Example with long label

```html
<div class="ds-checkbox" style="width: 200px;">
  <input type="checkbox" id="input5" checked>
  <label for="input5">Option with very very long label</label>
</div>
<div class="ds-radio" style="width: 200px;">
  <input type="radio" id="input6" checked>
  <label for="input6">Option with very very long label</label>
</div>
```

#### Switch

```html
<div class="ds-switch">
  <input type="checkbox" id="input7">
  <label for="input7">Toggle off</label>
</div>
<div class="ds-switch">
  <input type="checkbox" id="input8" checked>
  <label for="input8">Toggle on</label>
</div>
```

#### Demo page

```html
<!-- demo-->
<a target="_blank" href="../../../ui-kit/html/demo-tpl.html">See demo</a>
```
*/
  /*
---
name: Select
elements:
 - doc
 - doc/Select
version: 1.2.0
tag:
 - Source approval done
 - DS approval pending
---

#### Select input

```html
<div class="ds-select">
  <select>
    <option value="" disabled selected>Placeholder</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
  </select>
</div>
```

#### Javascript
initialization
```js
@param {string} [query='.ds-select select'] - Optional Css selector for a select element
var Select = new uikit.bundle.select(query);
```

#### Multi select input

```html
<!-- visible -->
<div class="ds-select ds-select--checkbox" tabindex="0">
  <select name="option_select" placeholder="Placeholder" data-placeholder="Placeholder" multiple>
    <option value="option1">A Option 1</option>
    <option value="option2">B Option 2</option>
    <option value="option2alt">B Alt Option 2</option>
    <option value="option3">C Option 3</option>
    <option value="option4">D Option 4</option>
    <option value="option5">E Option 5</option>
    <option value="option6">F Option 6</option>
    <option value="option7">G Option 7</option>
    <option value="option8">H Option 8</option>
  </select>
</div>
```

#### Javascript
Initialization
```js
@param {nodeEl} element - Node element of a multi select
var multiSelect = new uikit.bundle.multiSelect(element);
```
Example
```js
var el = document.querySelector('.ds-select--checkbox');
var multiSelect = new uikit.bundle.multiSelect(el);
```

#### Demo page

```html
<!-- demo-->
<a target="_blank" href="../../../ui-kit/html/demo-tpl.html">See demo</a>
```
*/
  /*
---
name: Picker
elements:
 - doc
 - doc/Picker
version: 1.2.0
tag:
 - Source approval done
 - DS approval pending
---

#### Date picker

```html
<div class="ds-input">
  <input type="text" id="text1" placeholder="Placeholder" data-picker>
  <label for="text1">Date</label>
  <i class="ds-ico ds-ico-calendar-mini"></i>
</div>
```

#### Date range picker

Noted that we have an attribut `data-min-date="today"` to defined the minimum date allow.

```html
<div class="ds-picker-range">
  <div class="ds-input">
    <input type="text" id="text2" placeholder="Placeholder" data-picker-start data-min-date="today">
    <label for="text2">Start date</label>
    <i class="ds-ico ds-ico-calendar-mini"></i>
  </div>
  <div>
    <i class="ds-ico ds-ico-right-mini"></i>
  </div>
  <div class="ds-input">
    <input type="text" id="text3" placeholder="Placeholder" data-picker-end >
    <label for="text3">End date</label>
    <i class="ds-ico ds-ico-calendar-mini"></i>
  </div>
</div>
```

#### Javascript
Initialization of a picker component.
Will initialize all the input with the class `.ds-input input[data-picker]` or `.ds-picker-range` in a container element. By default the container is the document.
```js
@param {nodeEl} [container=document] - Optional Container of all kind of picker
var picker = new uikit.bundle.picker(container);
```

#### Demo page

```html
<!-- demo-->
<a target="_blank" href="../../../ui-kit/html/demo-tpl.html">See demo</a>
```
*/
  /*
        /*rtl:begin:ignore*/
  /*
        /*rtl:end:ignore*/
  /*
        /*rtl:begin:ignore*/
  /*
        /*rtl:end:ignore*/
  /* Override */
  /*
---
name: Slider
elements:
 - doc
 - doc/Slider
version: 1.2.0
tag:
 - Source approval done
 - DS approval pending
---


#### Default value and unsetted slider
```html
<div class="ds-slider" data-min="0" data-max="10">
  <label for="text1">Score</label>
  <div class="ds-input ds-input--only">
    <input type="text" id="text1">
  </div>
  <div class="ds-slider__wrapper"></div>
</div>
```

#### Slider with custom parameters
```html
<div class="ds-slider" data-min="20" data-max="100" data-start="40" data-step="10">
  <label for="text1">Score</label>
  <div class="ds-input ds-input--only">
    <input type="text" id="text1">
  </div>
  <div class="ds-slider__wrapper"></div>
</div>
```

#### Range slider
```html
<div class="ds-slider" data-min="20" data-max="100" data-start="40" data-end="60" data-step="10">
  <label for="text1">Score</label>
  <div class="ds-input ds-input--only">
    <input type="text" id="text1">
    <span>-</span>
    <input type="text" id="text2">
  </div>
  <div class="ds-slider__wrapper"></div>
</div>
```

#### Slider with custom format ($)
```html
<div class="ds-slider" data-min="20" data-max="100" data-start="40" data-step="2" data-format="$">
  <label for="text1">Score</label>
  <div class="ds-input ds-input--only">
    <input type="text" id="text1">
  </div>
  <div class="ds-slider__wrapper"></div>
</div>
```

#### Slider disabled
```html
<div class="ds-slider" data-min="20" data-max="100" data-start="20" data-step="10">
  <label for="text1">Score</label>
  <div class="ds-input ds-input--only">
    <input type="text" id="text1" disabled>
  </div>
  <div class="ds-slider__wrapper" disabled></div>
</div>
```
*/
  /* nouislider - 10.1.0 */
  /* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
  /* Painting and performance;
 * Browsers can paint handles in their own layer.
 */
  /* Slider size and handle placement;
 */
  /* Styling;
 */
  /* Handles and cursors;
 */
  /* Handle stripes;
 */
  /* Disabled state;
 */
  /* Base;
 *
 */
  /* Values;
 *
 */
  /* Markings;
 *
 */
  /* Horizontal layout;
 *
 */
  /* Vertical layout;
 *
 */
  /* Overide here */
  /*
---
name: Header - Global
blocks:
 - doc
 - doc/Header - Global
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---

#### How to use header
The header is a separate plugin, you will need to add it in your project if you want to use it.
```js
<script src="/ui-kit/js/uikit.header.js"></script>
```
```js
var Header = new uikit.header();
```

#### Header

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/header_global_menu.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/gmenu.html">See demo</a>
```

#### Header without navigation

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/header_without_navigation.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/gmenu-nonav.html">See demo</a>
```

*/
  /** NAVBAR **/
  /** SIDEMENU **/
  /** LIST IN SIDEBAR **/
  /** SUBMENU **/
  /*
---
name: Footer
blocks:
 - doc
 - doc/Footer
version: 2.0.0
tag:
 - Source approval done
 - DS approval pending
---

#### How to use the footer?
The footer is a separate plugin, you will need to add it in your project if you want to use it.
```js
<script src="/ui-kit/js/uikit.footer.js"></script>
```
```js
var Footer = new uikit.footer();
```

To see the source code for the HTML you must click to the link `See demo` and then use your developer tools to get the source.

#### Default white footer

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/default_white_footer.png" />
```

```html
<!-- demo -->
<a target="_blank" href="../../ui-kit/html/footer.html">See demo</a>
```

#### Footer without tag

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/footer-notag.html">See demo</a>
```

#### Legacy corporate footer

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/legacy_corporate_footer.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/footer-legacy.html">See demo</a>
```

#### Branded footer

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/branded_footer.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/footer-brand.html">See demo</a>
```

*/
  /*
---
name: Hero Banner
blocks:
 - doc
 - doc/Hero Banner
version: 1.2.0
tag:
 - Source approval done
 - DS approval pending
---

#### How to use banner
The banner is a separate plugin, you will need to add it in your project if you want to use it.
```js
<script src="/ui-kit/js/uikit.banner.js"></script>
```
```js
var Banner = new uikit.banner();
```

#### Editorial banner

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/editorial_banner.png" />
```

```html
<!-- no-preview -->
<section class="ds-banner ds-banner--editorial" style="background-image: url(../../aigis_assets/images/Banner-Visual.jpg);">
      <div class="ds-banner__shadow"></div>
      <div class="ds-banner__content">
        <div class="ds-container">
          <div class="ds-row">
            <div class="ds-col ds-col--center ds-col--md-8 ds-col--lg-10 ds-col--xl-12">
              <h1 class="ds-banner__title ds-text-shadow">Manufacturing in the Age of Experience</h1>
              <h2 class="ds-banner__subtitle ds-text-shadow">Agility is key for delivering customization</h2>
              <div class="action ds-banner__buttons"><a class="ds-btn ds-btn--large ds-btn--scream" href="https://www.youtube.com/watch?v=n5V11Abaii8">Discover the key</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="ds-banner__visual">
        <div class="ds-banner__indicator"><i class="ds-ico ds-ico-down-chevron-icon"></i></div>
      </div>
    </section>
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/banner-editorial.html">See demo</a>
```

#### Big banner

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/big_banner.png" />
```

```html
<!-- no-preview -->
<section class="ds-banner ds-banner--big" style="background-image: url(../../aigis_assets/images/Banner-Visual.jpg);">
  <div class="ds-banner__shadow"></div>
  <div class="ds-banner__content">
    <div class="ds-container">
      <div class="ds-row">
        <div class="ds-col ds-col--center ds-col--lg-10 ds-col--xl-12">
          <h1 class="ds-banner__title ds-text-shadow">Manufacturing in the Age of Experience</h1>
          <h2 class="ds-banner__subtitle ds-text-shadow">Agility is key for delivering customization</h2>
          <p class="ds-text-shadow">
            Personnalization is the hallmark of the experience economy. Today, consumers want high quality
            customized experiences. To deliver uniqueness quickly, companies must be agile. But complex
            manufacturing operations are notoriously unwieldy. What is the secret to making manufacturing nimble?
          </p>
          <div class="action ds-banner__buttons"><a class="ds-btn ds-btn--scream has-icon ds-btn--large" href="https://www.youtube.com/watch?v=n5V11Abaii8"><i class="ds-ico ds-ico-plus-mini"></i>Discover the key</a><a class="ds-btn ds-btn--cheer ds-btn--dark"><i class="ds-ico ds-ico-play-mini"></i><span>Watch the trailer</span></a></div>
        </div>
      </div>
    </div>
  </div>
</section>
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/banner-big.html">See demo</a>
```


#### Big banner with highlights

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/big_banner_with_highlights.png" />
```

```html
<!-- no-preview -->
<section class="ds-banner ds-banner--big ds-banner--with-highlights" style="background-image: url(../../aigis_assets/images/Banner-Visual.jpg);">
  <div class="ds-banner__shadow"></div>
  <div class="ds-banner__content">
    <div class="ds-container">
      <div class="ds-row">
        <div class="ds-col ds-col--center ds-col--lg-10 ds-col--xl-12">
          <h1 class="ds-banner__title ds-text-shadow">Manufacturing in the Age of Experience</h1>
          <h2 class="ds-banner__subtitle ds-text-shadow">Agility is key for delivering customization</h2>
          <p class="ds-text-shadow">
            Personnalization is the hallmark of the experience economy. Today, consumers want high quality
            customized experiences. To deliver uniqueness quickly, companies must be agile. But complex
            manufacturing operations are notoriously unwieldy. What is the secret to making manufacturing nimble?
          </p>
          <div class="action ds-banner__buttons"><a class="ds-btn ds-btn--scream has-icon ds-btn--large" href="https://www.youtube.com/watch?v=n5V11Abaii8"><i class="ds-ico ds-ico-plus-mini"></i>Discover the key</a><a class="ds-btn ds-btn--cheer ds-btn--dark">
              <i class="ds-ico ds-ico-play-mini"></i><span>Watch the trailer</span>
              </a></div>
        </div>
      </div>
    </div>
  </div>
</section>
<div class="ds-container ds-highlight--over-hero">
  <div class="ds-row ds-row--flush">
    <div class="ds-col ds-col--xs-4 ds-col--md-4">
      <div class="ds-highlight"><a class="ds-highlight__link" href="#"></a>
        <div class="ds-highlight__image" style="background-image: url(../../aigis_assets/images/catia-mechanical-shape-engineer-excellence.jpg);"></div>
        <div class="ds-highlight__shadow"></div>
        <div class="ds-highlight__subinfo">
          <div class="ds-highlight__meta"><span class="ds-tag-meta ds-tag-meta--red" title="Live">Live</span></div>
          <div class="ds-highlight__category">Event • Design in the age of Experience</div>
        </div>
        <p class="ds-highlight__title ds-text-shadow">Live - Tales of Transformation #1</p>
        <div class="ds-highlight__additionnal"><div class="ds-people ds-people--dark"> <div class="ds-people__faces"> <div class="ds-people__face" style="background-image: url(//dummyimage.com/24x24/999999/fff);"></div><div class="ds-people__face" style="background-image: url(//dummyimage.com/24x24/999999/fff);"></div></div><div class="ds-people__infos"> <div class="ds-people__name">Author name</div></div></div></div>
        <div class="ds-highlight__buttons-wrapper">
          <div class="ds-highlight__buttons">
            <div class="ds-highlight__cta"><a class="ds-btn ds-btn--murmur ds-btn--dark" href="#"><i class="ds-ico ds-ico-chevron-mini"></i><span>Watch now</span></a></div>
            <div class="ds-highlight__shout"><a class="ds-btn ds-btn--shout ds-btn--dark" href="#">Register</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="ds-col ds-col--xs-4 ds-col--md-4">
      <div class="ds-highlight"><a class="ds-highlight__link" href="#"></a>
        <div class="ds-highlight__image" style="background-image: url(../../aigis_assets/images/delmia-cnc-machining.jpg);"></div>
        <div class="ds-highlight__shadow"></div>
        <div class="ds-highlight__subinfo">
          <div class="ds-highlight__meta"><span class="ds-tag-meta ds-tag-meta--blue" title="Exclusive" >Exclusive</span></div>
          <div class="ds-highlight__category">IV WE • AEROSPACE &amp; DEFENSE</div>
        </div>
        <p class="ds-highlight__title ds-text-shadow">Chapter 3 - Clean skies</p>
        <div class="ds-highlight__additionnal"><div class="ds-people ds-people--dark"> <div class="ds-people__faces"> <div class="ds-people__face" style="background-image: url(//dummyimage.com/24x24/999999/fff);"></div><div class="ds-people__face" style="background-image: url(//dummyimage.com/24x24/999999/fff);"></div><div class="ds-people__face" style="background-image: url(//dummyimage.com/24x24/999999/fff);"></div></div><div class="ds-people__infos"> <div class="ds-people__name">Author name & 3 peoples...</div></div></div></div>
        <div class="ds-highlight__buttons-wrapper">
          <div class="ds-highlight__buttons">
            <div class="ds-highlight__cta"><a class="ds-btn ds-btn--murmur ds-btn--dark" href="#"><i class="ds-ico ds-ico-chevron-mini"></i><span>Discover the event</span></a></div>
            <div class="ds-highlight__shout"><a class="ds-btn ds-btn--shout ds-btn--dark" href="#">Register</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/banner-big-highlights.html">See demo</a>
```


#### Medium banner

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/medium_banner.png" />
```

```html
<!-- no-preview -->
<section class="ds-banner ds-banner--medium" style="background-image: url(../../aigis_assets/images/Banner-Visual.jpg);">
  <div class="ds-banner__shadow"></div>
  <div class="ds-banner__content">
    <div class="ds-container">
      <div class="ds-row">
        <div class="ds-col ds-col--center ds-col--md-8 ds-col--lg-10 ds-col--xl-12">
          <h1 class="ds-banner__title ds-text-shadow">Manufacturing in the Age of Experience</h1>
          <h2 class="ds-banner__subtitle ds-text-shadow">Agility is key for delivering customization</h2>
          <div class="action ds-banner__buttons"><a class="ds-btn ds-btn--scream has-icon" href="https://www.youtube.com/watch?v=n5V11Abaii8"><i class="ds-ico ds-ico-plus-mini"></i>Discover the key</a></div>
        </div>
      </div>
    </div>
  </div>
</section>
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/banner-medium.html">See demo</a>
```

#### Small banner

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/small_banner.png" />
```

```html
<!-- no-preview -->
<section class="ds-banner ds-banner--small" style="background-image: url(../../aigis_assets/images/Banner-Visual.jpg);">
  <div class="ds-banner__shadow"></div>
  <div class="ds-banner__content">
    <div class="ds-container">
      <div class="ds-row">
        <div class="ds-col ds-col--center ds-col--md-8 ds-col--lg-10 ds-col--xl-12">
          <h1 class="ds-banner__title ds-text-shadow">Manufacturing in the Age of Experience</h1>
        </div>
      </div>
    </div>
  </div>
</section>
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/banner-small.html">See demo</a>
```

#### X-Small banner

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/x_small_banner.png" />
```

```html
<!-- no-preview -->
<section class="ds-banner ds-banner--x-small" style="background-image: url(../../aigis_assets/images/Banner-Visual.jpg);">
  <div class="ds-banner__shadow"></div>
  <div class="ds-banner__content">
    <div class="ds-container">
      <div class="ds-row">
        <div class="ds-col ds-col--center ds-col--md-8 ds-col--lg-10 ds-col--xl-12">
          <h1 class="ds-banner__title ds-text-shadow">Manufacturing in the Age of Experience</h1>
        </div>
      </div>
    </div>
  </div>
</section>
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/banner-xsmall.html">See demo</a>
```

*/
  /*
---
name: Highlight
blocks:
 - doc
 - doc/Highlight
version: 1.1.0
tag:
 - Source approval done
 - DS approval pending
---

#### How to use highlight
The highlightis a separate plugin, you will need to add it in your project if you want to use it.
```js
<script src="/ui-kit/js/uikit.highlight.js"></script>
```
```js
@param {nodeEl} element - Node element of a highlight
var highlight = new uikit.bundle.highlight(element);
```
Example
```js
var el = document.querySelector('.ds-highglight');
var highlight = new uikit.bundle.highlight(el);
```


#### Highlight

You can add the class .ds-highlight--over-hero to make the whole object to go over the hero banner

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/highlight.png" />
```

```html
<!-- no-preview -->
<div class="ds-container">
  <div class="ds-row ds-row--flush">
    <div class="ds-col ds-col--xs-4 ds-col--md-4">
      <div class="ds-highlight"><a class="ds-highlight__link" href="#"></a>
        <div class="ds-highlight__image" style="background-image: url(../../aigis_assets/images/catia-mechanical-shape-engineer-excellence.jpg);"></div>
        <div class="ds-highlight__shadow"></div>
        <div class="ds-highlight__subinfo">
          <div class="ds-highlight__meta"><span class="ds-tag-meta ds-tag-meta--red" title="Live">Live</span></div>
          <div class="ds-highlight__category">Event • Design in the age of Experience</div>
        </div>
        <p class="ds-highlight__title ds-text-shadow">Live - Tales of Transformation #1</p>
        <div class="ds-highlight__additionnal"><div class="ds-people ds-people--dark"> <div class="ds-people__faces"> <div class="ds-people__face" style="background-image: url(//dummyimage.com/24x24/999999/fff);"></div><div class="ds-people__face" style="background-image: url(//dummyimage.com/24x24/999999/fff);"></div><div class="ds-people__face" style="background-image: url(//dummyimage.com/24x24/999999/fff);"></div></div><div class="ds-people__infos"> <div class="ds-people__name">Author name & 3 peoples...</div></div></div></div>
        <div class="ds-highlight__buttons-wrapper">
          <div class="ds-highlight__buttons">
            <div class="ds-highlight__cta"><a class="ds-btn ds-btn--murmur ds-btn--dark" href="#"><i class="ds-ico ds-ico-chevron-mini"></i><span>Watch now</span></a></div>
            <div class="ds-highlight__shout"><a class="ds-btn ds-btn--shout ds-btn--dark" href="#">Register</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="ds-col ds-col--xs-4 ds-col--md-4">
      <div class="ds-highlight"><a class="ds-highlight__link" href="#"></a>
        <div class="ds-highlight__image" style="background-image: url(../../aigis_assets/images/delmia-cnc-machining.jpg);"></div>
        <div class="ds-highlight__shadow"></div>
        <div class="ds-highlight__subinfo">
          <div class="ds-highlight__meta"><span class="ds-tag-meta ds-tag-meta--blue" title="Exclusive" >Exclusive</span></div>
          <div class="ds-highlight__category">IV WE • AEROSPACE &amp; DEFENSE</div>
        </div>
        <p class="ds-highlight__title ds-text-shadow">Chapter 3 - Clean skies</p>
        <div class="ds-highlight__additionnal"><span><i class="ds-ico ds-ico-location-mini is-inline"></i>Cambridge</span><span><i class="ds-ico ds-ico-suitcase-mini is-inline"></i>Intern</span></div>
        <div class="ds-highlight__buttons-wrapper">
          <div class="ds-highlight__buttons">
            <div class="ds-highlight__cta"><a class="ds-btn ds-btn--murmur ds-btn--dark" href="#"><i class="ds-ico ds-ico-chevron-mini"></i><span>Discover the event</span></a></div>
            <div class="ds-highlight__shout"><a class="ds-btn ds-btn--shout ds-btn--dark" href="#">Register</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/highlight.html">See demo</a>
```
*/
  /*
---
name: Sharing
elements:
 - doc
 - doc/Sharing
version: 1.2.0
tag:
 - Source approval done
 - DS approval pending
---

#### Basic Sharing from Left to Right

```html
<div class="ds-sharing" data-url="https://www.3ds.com/fr/" data-mail-subject="I wanted you to see this article" data-mail-body="Check out this article">
	<div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	<div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	<div class="ds-sharing__socials">
      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
  </div>
</div>
```

#### Basic Sharing from Right to Left

```html
<div class="ds-sharing" data-url="https://www.3ds.com/fr/" data-mail-subject="I wanted you to see this article" data-mail-body="Check out this article">
	<div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	<div class="ds-sharing__socials">
      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
  </div>
	<div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
</div>

```

#### Basic Sharing feft to Right Compact

```html
<div class="ds-sharing ds-sharing--compact" data-url="https://www.3ds.com/fr/" data-mail-subject="I wanted you to see this article" data-mail-body="Check out this article">
	<div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	<div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	<div class="ds-sharing__socials">
      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
  </div>
</div>

```

#### Basic Sharing on dark theme

```html
<!-- dark -->
<div class="ds-sharing ds-sharing--dark" data-url="https://www.3ds.com/fr/" data-mail-subject="I wanted you to see this article" data-mail-body="Check out this article">
	<div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	<div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	<div class="ds-sharing__socials">
      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
  </div>
</div>
```

#### Basic Sharing on Dark or light backgrounds (for cards)

```html
<div class="ds-sharing ds-sharing--card" data-url="https://www.3ds.com/fr/" data-mail-subject="I wanted you to see this article" data-mail-body="Check out this article">
	<div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	<div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	<div class="ds-sharing__socials">
      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
  </div>
</div>
```
```html
<!-- dark -->
<div class="ds-sharing ds-sharing--card" data-url="https://www.3ds.com/fr/" data-mail-subject="I wanted you to see this article" data-mail-body="Check out this article">
	<div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	<div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	<div class="ds-sharing__socials">
      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
  </div>
</div>
```

#### Sharing custom parameters


```html
<div class="ds-sharing" data-url="https://www.3ds.com/fr/" data-mail-subject="I wanted you to see this article" data-mail-subject="Check out this article">
	<div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	<div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	<div class="ds-sharing__socials">
      <div class="ds-btn ds-btn--scream js-sharing-fb" data-title="A title">
      	<i class="ds-ico ds-ico-facebook-mini"></i>
      </div>
      <div class="ds-btn ds-btn--scream js-sharing-vkontakte" >
      	<i class="ds-ico ds-ico-vkontakte-mini"></i>
      </div>
      <div class="ds-btn ds-btn--scream js-sharing-weibo" >
      	<i class="ds-ico ds-ico-weibo-mini"></i>
      </div>
      <div class="ds-btn ds-btn--scream js-sharing-xing" >
      	<i class="ds-ico ds-ico-xing-mini"></i>
      </div>
      <div class="ds-btn ds-btn--scream js-sharing-mail" >
      	<i class="ds-ico ds-ico-mail-mini"></i>
      </div>
  </div>
</div>
```

#### Javascript
Initialization
```js
@param {nodeEl} element - Node element of a share component
var Sharing = new uikit.bundle.share(element);
```
Example
```js
var el = document.querySelector('.ds-sharing');
var Sharing = new uikit.bundle.share(el);
```
*/
  /*
---
name: Cards
blocks:
 - doc
 - doc/Cards
version: 1.3.0
tag:
 - Source approval done
 - DS approval pending
---

#### Medium card (default)

```html
<article class="ds-card">
	<div class="ds-sharing ds-sharing--dark" data-url="https://www.3ds.com/fr/">
    <div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	    <div class="ds-sharing__socials">
	      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
	  </div>
	    <div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	</div>
	<a target="_self" href="#" itemprop="url">
		<div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/432x192/999999/fff)"></div>
		<div class="ds-card__wrapper">
			<span class="ds-card__category">CATIA • SOLUTION</span>
			<div class="ds-card__title" itemprop="headline">CNC Machining</div>
			<p itemprop="description">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp; machining times from roughing to finishing including non machined area detection and reworking, optimize cutter.</p>
		</div>
	</a>
	<div class="ds-card__links">
		<a class="ds-btn ds-btn--cheer" target="_self" href="catia-cnc-machining.html" itemprop="url">
			<i class="ds-ico ds-ico-chevron-mini"></i><span>Discover</span>
		</a>
	</div>
</article>
```

#### Medium card with two buttons (default)

```html
<article class="ds-card">
	<div class="ds-sharing ds-sharing--dark" data-url="https://www.3ds.com/fr/">
    <div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	    <div class="ds-sharing__socials">
	      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
	  </div>
	    <div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	</div>
	<a target="_self" href="#" itemprop="url">
		<div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/432x192/999999/fff)"></div>
		<div class="ds-card__wrapper">
			<span class="ds-card__category">CATIA • SOLUTION</span>
			<div class="ds-card__title" itemprop="headline">CNC Machining</div>
			<p itemprop="description">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp; machining times from roughing to finishing including non machined area detection and reworking, optimize cutter.</p>
		</div>
	</a>
	<div class="ds-card__links">
		<a class="ds-btn ds-btn--cheer" target="_self" href="catia-cnc-machining.html" itemprop="url">
			<i class="ds-ico ds-ico-chevron-mini"></i><span>Discover</span>
		</a>
		<a class="ds-btn ds-btn--cheer" target="_self" href="catia-cnc-machining.html" itemprop="url">
			<i class="ds-ico ds-ico-chevron-mini"></i><span>Discover</span>
		</a>
	</div>
</article>
```


#### Large card

```html
<article class="ds-card ds-card--large">
	<div class="ds-sharing ds-sharing--dark" data-url="https://www.3ds.com/fr/">
    <div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
    <div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	    <div class="ds-sharing__socials">
	      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
	  </div>

	</div>
	<a target="_self" href="#" itemprop="url">
		<div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/372x372/999999/fff)"></div>
		<div class="ds-card__wrapper">
			<span class="ds-card__category">CATIA • SOLUTION</span>
			<div class="ds-card__title" itemprop="headline">CNC Machining</div>
			<p itemprop="description">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp; machining times from roughing to finishing including non machined area detection and reworking, optimize cutter.</p>
		</div>
	</a>
	<div class="ds-card__links">
		<a class="ds-btn ds-btn--cheer" target="_self" href="catia-cnc-machining.html" itemprop="url">
			<i class="ds-ico ds-ico-chevron-mini"></i><span>Discover</span>
		</a>
	</div>
</article>
```

#### Small card

```html
<article class="ds-card ds-card--small ds-shadow-3">
	<a target="_self" href="#" itemprop="url">
		<div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/176x144/999999/fff)"></div>
		<div class="ds-card__wrapper">
			<span class="ds-card__category">CATIA • SOLUTION</span>
			<div class="ds-card__title" itemprop="headline">CNC Machining</div>
			<p itemprop="description">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp; machining times.</p>
		</div>
	</a>
</article>
```

#### Youtube card

```html
<article class="ds-card ds-card--video">
	<div class="ds-sharing ds-sharing--dark" data-url="https://www.3ds.com/fr/">
    <div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	    <div class="ds-sharing__socials">
	      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
	  </div>
	    <div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	</div>
  <a target="_blank" href="//www.youtube.com/watch?v=byHUwhRC644">
		<div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/432x432/999999/fff)"></div>
		<i class="ds-ico ds-ico-play-big is-white"></i>
    <div class="ds-card__wrapper">
      <span class="ds-card__category"><i class="ds-ico ds-ico-youtube-mini is-inline"></i>YOUTUBE</span>
      <div class="ds-card__title" itemprop="name">CLAAS advances innovation with the 3DEXPERIENCE® Pla...</div>
      <meta itemprop="duration" content="PT3M27S">
      <meta itemprop="embedURL" content="//www.youtube.com/embed/byHUwhRC644">
      <span>Duration 3min27</span>
    </div>
  </a>
  <div class="ds-card__links">
    <a class="ds-btn ds-btn--cheer" target="_blank" href="//www.youtube.com/watch?v=byHUwhRC644">
		<i class="ds-ico ds-ico-external-link-mini"></i><span>Watch on Youtube</span>
		</a>
  </div>
</article>
```

#### No image card (Ex: Job card )

```html
<article class="ds-card ds-card--noimage">
  <a target="_blank" href="#">
    <div class="ds-card__wrapper">
			<span class="ds-card__category">Careers • Software development</span>
			<div class="ds-card__title" itemprop="headline">Javascript Software development Biova</div>
			<p itemprop="description">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp; machining times.</p>
			<span><i class="ds-ico ds-ico-location-mini is-inline"></i>Cambridge</span>
			<span><i class="ds-ico ds-ico-suitcase-mini is-inline"></i>Intern</span>
    </div>
  </a>
  <div class="ds-card__links">
    <a class="ds-btn ds-btn--cheer">
			<i class="ds-ico ds-ico-chevron-mini"></i><span>Read opportunity</span>
		</a>
		<a class="ds-btn ds-btn--shout ds-btn--blue" href="#">Apply</a>
  </div>
</article>
```

#### Live card

```html
<article class="ds-card ds-card--live">
	<div class="ds-sharing ds-sharing--dark" data-url="https://www.3ds.com/fr/">
    <div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	    <div class="ds-sharing__socials">
	      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
	  </div>
	    <div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	</div>
  <a target="_blank" href="//www.youtube.com/watch?v=byHUwhRC644">
		<div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/432x192/999999/fff)"></div>
		<i class="ds-ico ds-ico-play-big is-white"></i>
		<span class="ds-tag-meta ds-tag-meta--red" title="Live">Live</span>
    <div class="ds-card__wrapper">
      <span class="ds-card__category">Event</span>
      <div class="ds-card__title" itemprop="name">CLAAS advances innovation with the 3DEXPERIENCE® Pla...</div>
			<p itemprop="description">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming...</p>
			<div class="ds-people ds-people--compact ds-people--multiline">
			  <div class="ds-people__faces">
			    <div class="ds-people__face" style="background-image: url('//dummyimage.com/24x24/999999/fff');"></div>
			  </div>
			  <div class="ds-people__infos">
			    <div class="ds-people__name">Author name</div>
			    <div class="ds-people__company">Company</div>
			  </div>
			</div>
    </div>
  </a>
  <div class="ds-card__links">
	<a class="ds-btn ds-btn--cheer" target="_self" href="catia-cnc-machining.html" itemprop="url">
		<i class="ds-ico ds-ico-chevron-mini"></i><span>Discover the session</span>
	</a>
  </div>
</article>
```

#### Live card

```html
<article class="ds-card ds-card--live">
	<div class="ds-sharing ds-sharing--dark" data-url="https://www.3ds.com/fr/">
    <div class="ds-btn ds-btn--scream has-icon ds-btn--compact ds-sharing__action"><i class="ds-ico ds-ico-share-mini"></i><span>Share</span></div>
	    <div class="ds-sharing__socials">
	      <div class="ds-btn ds-btn--scream js-sharing-fb"><i class="ds-ico ds-ico-facebook-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-twitter"><i class="ds-ico ds-ico-twitter-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-linkedin" ><i class="ds-ico ds-ico-linkedin-mini"></i></div>
	      <div class="ds-btn ds-btn--scream js-sharing-mail" ><i class="ds-ico ds-ico-mail-mini"></i></div>
	  </div>
	    <div class="ds-btn ds-btn--scream ds-sharing__close "><i class="ds-ico ds-ico-close-mini"></i></div>
	</div>
  <a target="_blank" href="//www.youtube.com/watch?v=byHUwhRC644">
		<div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/432x192/999999/fff)"></div>
		<i class="ds-ico ds-ico-play-big is-white"></i>
		<span class="ds-tag-meta ds-tag-meta--red" title="Live">Live</span>
    <div class="ds-card__wrapper">
      <span class="ds-card__category">Event</span>
      <div class="ds-card__title" itemprop="name">CLAAS advances innovation with the 3DEXPERIENCE® Pla...</div>
			<p itemprop="description">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming...</p>
			<div class="ds-people ds-people--compact ds-people--multiline">
			  <div class="ds-people__faces">
			    <div class="ds-people__face" style="background-image: url('//dummyimage.com/24x24/999999/fff');"></div>
			  </div>
			  <div class="ds-people__infos">
			    <div class="ds-people__name">Author name</div>
			    <div class="ds-people__company">Company</div>
			  </div>
			</div>
    </div>
  </a>
  <div class="ds-card__links">
	<a class="ds-btn ds-btn--cheer" target="_self" href="catia-cnc-machining.html" itemprop="url">
		<i class="ds-ico ds-ico-chevron-mini"></i><span>Discover the session</span>
	</a>
  </div>
</article>
```

#### Lines card

```html
<article class="ds-card ds-card--lines">
  <a target="_self" href="#" itemprop="url">
    <div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/372x372/999999/fff)">
    </div>
    <div class="ds-card__wrapper">
      <span class="ds-card__category">Compass Magazine</span>
      <div class="ds-card__title" itemprop="headline" data-title="From Automated to SMART">From Automated to SMART</div>
      <p itemprop="description" data-title="Despite being highly automated in many of their operations, most life sciences companies have not embraced smart manufacturing. Bridging this gap, experts say, will help life sciences companies control costs and be more responsive to patient needs.">Despite being highly automated in many of their operations, most life sciences companies have not embraced smart...</p>
      <span><i class="ds-ico ds-ico-location-mini is-inline"></i>Lorem ipsum</span>
      <span><i class="ds-ico ds-ico-calendar-mini is-inline"></i>Lorem ipsum</span>
    </div>
  </a>
</article>
```

#### Lines live card

```html
<article class="ds-card ds-card--lines">
  <a target="_self" href="#" itemprop="url">
    <div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/372x372/999999/fff)">
      <i class="ds-ico ds-ico-play-big is-white"></i>
    </div>
    <div class="ds-card__wrapper">
      <span class="ds-tag-meta ds-tag-meta--red" title="Live">Live</span>
      <span class="ds-card__category">Compass Magazine</span>
      <div class="ds-card__title" itemprop="headline" data-title="From Automated to SMART">From Automated to SMART</div>
      <p itemprop="description" data-title="Despite being highly automated in many of their operations, most life sciences companies have not embraced smart manufacturing. Bridging this gap, experts say, will help life sciences companies control costs and be more responsive to patient needs.">Despite being highly automated in many of their operations, most life sciences companies have not embraced smart...</p>
      <span><i class="ds-ico ds-ico-location-mini is-inline"></i>Lorem ipsum</span>
      <span><i class="ds-ico ds-ico-calendar-mini is-inline"></i>Lorem ipsum</span>
    </div>
  </a>
</article>
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/card.html">See demo</a>
```
*/
  /*Mini card experimentation. Must not be visible in the live documentation.*/
  /*
---
name: Breadcrumb
blocks:
 - doc
 - doc/Breadcrumb
version: 2.0.0
tag:
 - Source approval done
 - DS approval pending
---


#### How to use breadcrumb
The breadcrumb is a separate plugin, you will need to add it in your project if you want to use it. This plugin is only use by breadcrumb with a sub navigation.
```js
<script src="/ui-kit/js/uikit.breadcrumb.js"></script>
```
```js
var Breadcrumb = new uikit.breadcrumb();
```

#### Breadcrumb on light background when exactly three levels

```html
<div class="ds-container ds-breadcrumb-container" style="height: 120px">
  <div class="ds-row">
    <div class="ds-col ds-col--center ds-col--lg-12">
      <div class="ds-breadcrumb ds-breadcrumb--light">
        <ol class="ds-breadcrumb__ariane" itemscope itemtype="http://schema.org/BreadcrumbList">
          <li itemprop="itemListElement" itemscope
          itemtype="http://schema.org/ListItem">
            <a href="#" itemprop="item"><span itemprop="name">3DS</span></a>
            <meta itemprop="position" content="1" />
          </li>
          <li itemprop="itemListElement" itemscope
          itemtype="http://schema.org/ListItem">
            <a href="#" itemprop="item"><span itemprop="name">Trends</span></a>
            <meta itemprop="position" content="2" />
          </li>
          <li itemprop="itemListElement" itemscope
          itemtype="http://schema.org/ListItem">
            <a href="#" itemprop="item"><span itemprop="name">Manufacturing</span></a>
            <meta itemprop="position" content="3" />
          </li>
        </ol>
      </div>
    </div>
  </div>
</div>
<div class="ds-container ds-breadcrumb-container" style="height: 120px">
  <div class="ds-row">
    <div class="ds-col ds-col--center ds-col--lg-12">
      <div class="ds-breadcrumb ds-breadcrumb--light">
        <ol class="ds-breadcrumb__ariane" itemscope itemtype="http://schema.org/BreadcrumbList">
          <li itemprop="itemListElement" itemscope
          itemtype="http://schema.org/ListItem">
            <a href="#" itemprop="item"><span itemprop="name">3DS</span></a>
            <meta itemprop="position" content="1" />
          </li>
          <li itemprop="itemListElement" itemscope
          itemtype="http://schema.org/ListItem">
            <a href="#" itemprop="item"><span itemprop="name">Trends</span></a>
            <meta itemprop="position" content="2" />
          </li>
          <li itemprop="itemListElement" itemscope
          itemtype="http://schema.org/ListItem">
            <span itemprop="name">Manufacturing</span>
            <meta itemprop="position" content="3" />
          </li>
        </ol>
      </div>
    </div>
  </div>
</div>
```

#### Breadcrumb on light background when more than three levels

```html
<div class="ds-container ds-breadcrumb-container" style="height: 120px">
  <div class="ds-row">
    <div class="ds-col ds-col--center ds-col--lg-12">
      <div class="ds-breadcrumb ds-breadcrumb--light">
        <ol class="ds-breadcrumb__ariane" itemscope itemtype="http://schema.org/BreadcrumbList">
          <li class="js-breadcrumb-toggle"><a href="#"><i class="ds-ico ds-ico-dots-icon"></i></a></li>
          <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a href="#"><span itemprop="name">Trends</span></a>
            <meta itemprop="position" content="1" />
          </li>
          <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a href="#" itemprop="item"><span itemprop="name">Manufacturing</span></a>
            <meta itemprop="position" content="2" />
          </li>
        </ol>
        <div class="ds-breadcrumb__submenu js-breadcrumb-submenu">
          <ol><a href="#">
              <li>Solidworks</li></a><a href="#">
              <li>3DS</li></a></ol>
        </div>
      </div>
    </div>
  </div>
</div>
```
```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/breadcrumb.html">See demo</a>
```

#### Breadcrumb on dark background when more than three levels
```html
<!-- dark -->
<div class="ds-container ds-breadcrumb-container" style="height: 120px">
  <div class="ds-row">
    <div class="ds-col ds-col--center ds-col--lg-12">
      <div class="ds-breadcrumb ds-breadcrumb--dark">
        <ol class="ds-breadcrumb__ariane" itemscope itemtype="http://schema.org/BreadcrumbList">
          <li class="js-breadcrumb-toggle"><a href="#"><i class="ds-ico ds-ico-dots-icon"></i></a></li>
          <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a href="#"><span itemprop="name">Trends</span></a>
            <meta itemprop="position" content="1" />
          </li>
          <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a href="#" itemprop="item"><span itemprop="name">Manufacturing</span></a>
            <meta itemprop="position" content="2" />
          </li>
        </ol>
        <div class="ds-breadcrumb__submenu js-breadcrumb-submenu">
          <ol><a href="#">
              <li>Solidworks</li></a><a href="#">
              <li>3DS</li></a></ol>
        </div>
      </div>
    </div>
  </div>
</div>
```

*/
  /*
---
name: Video Player
blocks:
 - doc
 - doc/Video Player
version: 1.2.0
tag:
 - Source approval done
 - DS approval pending
---

With have two type of video player:
- **Inline** using the class `js-vplayer`
- **In a modal** using the class `js-video-modal` or `ds-card--video`

#### How to use video player
The video player is a separate plugin, you will need to add it in your project if you want to use it.
```js
<script src="/ui-kit/js/uikit.videoPlayer.js"></script>
```
```js
@param {nodeEl} [container=document] - Optional Container of all videos
var videoPlayer = new uikit.videoPlayer(container);
```

#### Inline player.
You must add the class `js-vplayer` to the container `ds-vplayer`.

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/normal_player.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/vplayer.html">See demo</a>
```

#### Card morph player.
All the card with the class `ds-card--video` will use the morph player.

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/card_morph_player.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/vplayer-card.html">See demo</a>
```

#### Link morph player.
You must add the class `js-video-modal` to a link if you want to open the video in a modal.

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/link_morph_player.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/vplayer-link.html">See demo</a>
```

#### Schema exemple
```json
<script type="application/ld+json"> {
"@context": "http://schema.org",
"@type": "VideoObject",
"name": "Video Demo",
"description": "A short description of your video, keep it at 140 characters just to be safe.",
"thumbnailUrl": "http://www.example.com/thumbnail.jpg",
"uploadDate": "2015-04-05T08:00:00+02:00",
"duration": "PT1M33S",
"contentUrl": "http://www.example.com/movie.mov",
"embedUrl": "http://www.example.com/embed?videoetc",
"interactionCount": "2347"
}
</script>
```

*/
  /*
---
name: Menu
blocks:
 - doc
 - doc/Menu
version: 1.2.0
tag:
 - Source approval done
 - DS approval pending
---

#### How to use menu
The local menu is a separate plugin, you will need to add it in your project if you want to use it.
```js
<script src="/ui-kit/js/uikit.menu.js"></script>
```
```js
var menu = new uikit.menu();
```

#### Local menu

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/local_menu.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/menu.html">See demo</a>
```


#### Local menu with logo and Transparent version

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/Local_menu_with_Logo and_transparent_version.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/menu-transparent.html">See demo</a>
```

#### Local white menu

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/local_white_menu.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/menu-white.html">See demo</a>
```

#### Local white menu and Transparent version

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/local_white_menu_and_transparent_version.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/menu-transparent-white.html">See demo</a>
```

#### Local menu without navigation

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/local_menu_without_navigation.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/menu-disabled.html">See demo</a>
```

#### Local branded menu

* Each brand have a specific class for theming. The best way to change the footer is to apply this class to the body. Or the parent if you don't have acces to the body.

The classes are: `ds-theme-catia`, `ds-theme-delmia`, `ds-theme-enovia`, `ds-theme-exalead`, `ds-theme-geovia`, `ds-theme-simulia`, `ds-theme-solidworks`, `ds-theme-3dexcite`, `ds-theme-3dvia`

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/local_branded_menu.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/menu-brand.html">See demo</a>
```
*/
  /*
---
name: Filters
blocks:
 - doc
 - doc/Filters
version: 1.4.0
tag:
 - Source approval done
 - DS approval pending
---

#### How to use filters
Filter is a separate plugin, you will need to add it in your project if you want to use it. Then you can use an helper to initialize all the filters or can just use the filter you need.
```js
<script src="/ui-kit/js/uikit.filter.js"></script>
```
```js
var filters = new uikit.filter.all(); // Initialize all filters

@param {nodeEl} el - Node element of a advanced filter
var advanced = new uikit.filter.advanced(el);

@param {nodeEl} el - Node element of a conversational filter
var conversational = new uikit.filter.conversational(el);

@param {nodeEl} el - Node element of a search filter
var search = new uikit.filter.search(el);
```

Example
```js
var filterEl = document.querySelector('.ds-filter')
var advanced = new uikit.filter.advanced(filterEl);

var conversationalEl = document.querySelector('.ds-filter-conversation .ds-filter-dropdown')
var conversational = new uikit.filter.conversational(conversationalEl);

var searchEl = document.querySelector('.ds-filter-search')
var search = new uikit.filter.search(searchEl);
```

#### Advanced filters

To see the source code for the HTML you must click to the link `See demo` and then use your developer tools to get the source.

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/advanced_filters.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/filter.html">See demo</a>
```

#### Conversational filters

```html
<!-- visible gray -->
<div class="ds-filter-conversation">
  I am interested in
  <div class="ds-filter-dropdown ds-filter-dropdown--radio is-active">
    <span class="ds-filter-dropdown__head">
      <span class="ds-filter-dropdown__label">Digital manufacturing</span>
    </span>
    <div class="ds-filter-dropdown__list ds-filter-conversation__list ds-shadow-3">
      <div>
        <div class="ds-checkbox">
          <input type="radio" id="input3aa" name="radioDemo" checked>
          <label for="input3aa">Everything</label>
        </div>
        <div class="ds-checkbox">
          <input type="radio" id="input3a" name="radioDemo">
          <label for="input3a">Option</label>
        </div>
        <div class="ds-checkbox">
          <input type="radio" id="input4b" name="radioDemo" >
          <label for="input4b">Digital manufacturing</label>
        </div>
        <div class="ds-checkbox">
          <input type="radio" id="input3" name="radioDemo">
          <label for="input3">Option 3</label>
        </div>
        <div class="ds-checkbox">
          <input type="radio" id="input4" name="radioDemo">
          <label for="input4">Option 4</label>
        </div>
        <div class="ds-checkbox">
          <input type="radio" id="input5" name="radioDemo">
          <label for="input5">Option 5</label>
        </div>
        <div class="ds-checkbox">
          <input type="radio" id="input6" name="radioDemo">
          <label for="input6">Option 6</label>
        </div>
        <div class="ds-checkbox">
          <input type="radio" id="input7" name="radioDemo">
          <label for="input7">Option 7</label>
        </div>
        <div class="ds-checkbox">
          <input type="radio" id="input8" name="radioDemo">
          <label for="input8">Option 8</label>
        </div>
      </div>
      <span class="ds-filter-conversation__arrow"></span>
    </div>
  </div>
  and I want to see some...
</div>
```

#### Tag based filters

```html
<ul class="ds-filter-tag">
  <li><a class="ds-tag ds-tag--click-light is-active" href="#">Everything </a></li>
  <li><a class="ds-tag ds-tag--click-light" href="#">Option 1</a></li>
  <li><a class="ds-tag ds-tag--click-light" href="#">Option 2</a></li>
  <li><a class="ds-tag ds-tag--click-light" href="#">Option 3</a></li>
  <li><a class="ds-tag ds-tag--click-light" href="#">Option 4</a></li>
  <li><a class="ds-tag ds-tag--click-light" href="#">Option 4</a></li>
  <li><a class="ds-tag ds-tag--click-light" href="#">Option 4</a></li>
  <li><a class="ds-tag ds-tag--click-light" href="#">Option 4</a></li>
</ul>
```

*/
  /*
---
name: Pagination
blocks:
 - doc
 - doc/Pagination
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---


#### Default Pagination

```html
<ul class="ds-pagination">
  <li><a class="is-active" href="#">1</a></li>
  <li class="is-hidden"><a href="#">2</a></li>
  <li class="is-hidden"><a href="#">3</a></li>
  <li>...</li>
  <li><a href="#">15</a></li>
  <li class="ds-pagination__next"><a href="#"><span>Next</span><i class="ds-ico ds-ico-right-mini"></i></a></li>
</ul>

<ul class="ds-pagination">
  <li class="ds-pagination__prev"><a href="#"><i class="ds-ico ds-ico-back-mini"></i><span>Previous</span></a></li>
  <li><a href="#">1</a></li>
  <li>...</li>
  <li class="is-hidden"><a href="#">3</a></li>
  <li><a class="is-active" href="#">4</a></li>
  <li class="is-hidden"><a href="#">5</a></li>
  <li>...</li>
  <li><a href="#">15</a></li>
  <li class="ds-pagination__next"><a href="#"><span>Next</span><i class="ds-ico ds-ico-right-mini"></i></a></li>
</ul>

<ul class="ds-pagination">
  <li class="ds-pagination__prev"><a href="#"><i class="ds-ico ds-ico-back-mini"></i><span>Previous</span></a></li>
  <li><a href="#">1</a></li>
  <li>...</li>
  <li class="is-hidden"><a href="#">13</a></li>
  <li class="is-hidden"><a href="#">14</a></li>
  <li><a class="is-active" href="#">15</a></li>
</ul>
```

#### Load more button

```html
<a class="ds-btn ds-btn--shout ds-btn--gray" href="#">See more related content</a>
```
*/
  /*
---
name: Loading
blocks:
 - doc
 - doc/Loading
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---

#### Card loading

```html
<article class="ds-card ds-card--loading">
	<div class="ds-card__thumbnail"></div>
	<div class="ds-card__wrapper">
		<p> </p>
		<h4> </h4>
		<p> </p>
		<p> </p>
		<p> </p>
	</div>
	<div class="ds-card__links">
		<span></span><p> </p>
	</div>
</article>
```

#### Asynchronous image loading

If you want to asynchronously load an image you just need to add the class `ds-lazy` to your element and define the a data-src attribut with the path to your image.
You can also use this technique to load a background image.
You can find the documentation about the plugin on [Github project](https://github.com/verlok/lazyload).

```html
<img class="ds-lazy"
     data-src="//dummyimage.com/432x192/999999/fff"
     width="432" height="192">
```

#### Asynchronous page loading

When you do an Ajax call, you need to add the class `is-visible` to the component loader to start the loading animation.
When the loading is finish you need to add the class `is-loaded`. And then you need to remove all the classes to hide the loader.

```html
<div class="ds-loader"><div></div></div>

Debug: <button onClick="document.querySelector('.ds-loader').className = 'ds-loader is-visible'" style="margin-top: 20px;">Start loading</button>
<button onClick="document.querySelector('.ds-loader').className = 'ds-loader is-visible is-loaded'; setTimeout(function(){document.querySelector('.ds-loader').className = 'ds-loader'}, 400)">Loading completed</button>
```
*/
  /*
---
name: Carousel
blocks:
 - doc
 - doc/Carousel
version: 1.1.0
tag:
 - Source approval done
 - DS approval pending
---


#### How to use the carousels?

The carousels use the javascript library [Swiper](http://idangero.us/swiper/). First you should include it in your project to use it. Be careful to specifically use the version 4.1.6.

```js
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.js"></script>
```

As it is an external library, the UI-Kit does not include anything about carousel excepted the CSS but we will provide you with some example.

Ex: A carousel with photos
```js
var carouselPhoto = new Swiper ('#demo1 .swiper-container--single', {
  pagination: {
    el: '.swiper-pagination',
    dynamicBullets: true
  },
  navigation: {
    nextEl: '#demo1 .swiper-button-next',
    prevEl: '#demo1 .swiper-button-prev',
  }
});
```

Ex: A carousel with cards
```js
var carouselCard = new Swiper ('#demo2 .swiper-container--card', {
  pagination: {
    el: '.swiper-pagination',
    dynamicBullets: true
  },
  navigation: {
    nextEl: '#demo2 .swiper-button-next',
    prevEl: '#demo2 .swiper-button-prev',
  },
  slidesPerView: 4,
  spaceBetween: 40,
  breakpoints: {
    720: {
        slidesPerView: 1,
        spaceBetween: 16,
    },
    1041: {
      slidesPerView: 2,
      spaceBetween: 32,
    },
    1441: {
      slidesPerView: 3,
      spaceBetween: 32,
    }
  }
});
```

Ex: A carousel with banners
```js
var carouselBanner = new Swiper ('#demo3 .swiper-container--banner', {
  pagination: {
    el: '.swiper-pagination'
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  paginationClickable: true,
  loop: true,
  autoplay: 4000,
  autoplayDisableOnInteraction: true
});
```

You should use a unique id or class as selector for each carousel.

#### Carousels

To see the source code for the HTML you must click to the link `See demo` and then use your developer tools to get the source.

```html
<!-- thumbnail -->
<img src="../../aigis_assets/images/screenshot/Carousel.png" />
```

```html
<!-- demo-->
<a target="_blank" href="../../ui-kit/html/carousel.html">See demo</a>
```

*/
  /**
 * Swiper 4..0-beta.4
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://www.idangero.us/swiper/
 *
 * Copyright 2014-2017 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: September 20, 2017
 */
  /* Auto Height */
  /* 3D Effects */
  /* IE10 Windows Phone 8 Fixes */
  /* Common Styles */
  /* Bullets */
  /* Progress */
  /* Scrollbar */
  /* Preloader */
  /* a11y */
  /* Overide here */ }
  .ds-ui-kit-scope .ds-container {
    width: 100%;
    max-width: 480px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 24px;
    padding-right: 24px; }
  .ds-ui-kit-scope .ds-container--carousel {
    padding-left: 14px;
    padding-right: 14px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
  .ds-ui-kit-scope .ds-row {
    margin-left: -24px; }
    .ds-ui-kit-scope .ds-row:after {
      display: table;
      clear: both;
      content: ''; }
  .ds-ui-kit-scope .ds-row--flush {
    margin-left: 0 !important; }
    .ds-ui-kit-scope .ds-row--flush .ds-col {
      padding-left: 0 !important; }
  .ds-ui-kit-scope .ds-col {
    position: relative;
    float: left;
    min-height: 1px;
    padding-left: 24px; }
  .ds-ui-kit-scope .ds-col--center {
    margin-left: auto;
    margin-right: auto;
    float: none; }
  .ds-ui-kit-scope .ds-col--revert {
    float: right; }
  .ds-ui-kit-scope .ds-col--xs-1 {
    width: 25%; }
  .ds-ui-kit-scope .ds-col--xs-2 {
    width: 50%; }
  .ds-ui-kit-scope .ds-col--xs-3 {
    width: 75%; }
  .ds-ui-kit-scope .ds-col--xs-4 {
    width: 100%; }
  @media (min-width: 721px) {
    .ds-ui-kit-scope .ds-container {
      max-width: 1280px;
      padding-left: 32px;
      padding-right: 32px; }
    .ds-ui-kit-scope .ds-container--carousel {
      padding-left: 22px;
      padding-right: 22px; }
    .ds-ui-kit-scope .ds-container--fixed {
      max-width: 720px; }
    .ds-ui-kit-scope .ds-row {
      margin-left: -32px; }
    .ds-ui-kit-scope .ds-col {
      padding-left: 32px; }
    .ds-ui-kit-scope .ds-col--md-1 {
      width: 12.5%; }
    .ds-ui-kit-scope .ds-col--md-offset-1 {
      margin-left: 12.5%; }
    .ds-ui-kit-scope .ds-col--md-2 {
      width: 25%; }
    .ds-ui-kit-scope .ds-col--md-offset-2 {
      margin-left: 25%; }
    .ds-ui-kit-scope .ds-col--md-3 {
      width: 37.5%; }
    .ds-ui-kit-scope .ds-col--md-offset-3 {
      margin-left: 37.5%; }
    .ds-ui-kit-scope .ds-col--md-4 {
      width: 50%; }
    .ds-ui-kit-scope .ds-col--md-offset-4 {
      margin-left: 50%; }
    .ds-ui-kit-scope .ds-col--md-5 {
      width: 62.5%; }
    .ds-ui-kit-scope .ds-col--md-offset-5 {
      margin-left: 62.5%; }
    .ds-ui-kit-scope .ds-col--md-6 {
      width: 75%; }
    .ds-ui-kit-scope .ds-col--md-offset-6 {
      margin-left: 75%; }
    .ds-ui-kit-scope .ds-col--md-7 {
      width: 87.5%; }
    .ds-ui-kit-scope .ds-col--md-offset-7 {
      margin-left: 87.5%; }
    .ds-ui-kit-scope .ds-col--md-8 {
      width: 100%; }
    .ds-ui-kit-scope .ds-col--md-offset-8 {
      margin-left: 100%; }
    .ds-ui-kit-scope .ds-col--md-offset-0 {
      margin-left: 0; } }
  @media (min-width: 841px) {
    .ds-ui-kit-scope .ds-container--fixed {
      max-width: 840px; }
    .ds-ui-kit-scope .ds-col--ld-1 {
      width: 10%; }
    .ds-ui-kit-scope .ds-col--ld-offset-1 {
      margin-left: 10%; }
    .ds-ui-kit-scope .ds-col--ld-2 {
      width: 20%; }
    .ds-ui-kit-scope .ds-col--ld-offset-2 {
      margin-left: 20%; }
    .ds-ui-kit-scope .ds-col--ld-3 {
      width: 30%; }
    .ds-ui-kit-scope .ds-col--ld-offset-3 {
      margin-left: 30%; }
    .ds-ui-kit-scope .ds-col--ld-4 {
      width: 40%; }
    .ds-ui-kit-scope .ds-col--ld-offset-4 {
      margin-left: 40%; }
    .ds-ui-kit-scope .ds-col--ld-5 {
      width: 50%; }
    .ds-ui-kit-scope .ds-col--ld-offset-5 {
      margin-left: 50%; }
    .ds-ui-kit-scope .ds-col--ld-6 {
      width: 60%; }
    .ds-ui-kit-scope .ds-col--ld-offset-6 {
      margin-left: 60%; }
    .ds-ui-kit-scope .ds-col--ld-7 {
      width: 70%; }
    .ds-ui-kit-scope .ds-col--ld-offset-7 {
      margin-left: 70%; }
    .ds-ui-kit-scope .ds-col--ld-8 {
      width: 80%; }
    .ds-ui-kit-scope .ds-col--ld-offset-8 {
      margin-left: 80%; }
    .ds-ui-kit-scope .ds-col--ld-9 {
      width: 90%; }
    .ds-ui-kit-scope .ds-col--ld-offset-9 {
      margin-left: 90%; }
    .ds-ui-kit-scope .ds-col--ld-10 {
      width: 100%; }
    .ds-ui-kit-scope .ds-col--ld-offset-10 {
      margin-left: 100%; }
    .ds-ui-kit-scope .ds-col--ld-offset-0 {
      margin-left: 0; } }
  @media (min-width: 1041px) {
    .ds-ui-kit-scope .ds-container--fixed {
      max-width: 1040px; }
    .ds-ui-kit-scope .ds-col--lg-1 {
      width: 8.33333%; }
    .ds-ui-kit-scope .ds-col--lg-offset-1 {
      margin-left: 8.33333%; }
    .ds-ui-kit-scope .ds-col--lg-2 {
      width: 16.66667%; }
    .ds-ui-kit-scope .ds-col--lg-offset-2 {
      margin-left: 16.66667%; }
    .ds-ui-kit-scope .ds-col--lg-3 {
      width: 25%; }
    .ds-ui-kit-scope .ds-col--lg-offset-3 {
      margin-left: 25%; }
    .ds-ui-kit-scope .ds-col--lg-4 {
      width: 33.33333%; }
    .ds-ui-kit-scope .ds-col--lg-offset-4 {
      margin-left: 33.33333%; }
    .ds-ui-kit-scope .ds-col--lg-5 {
      width: 41.66667%; }
    .ds-ui-kit-scope .ds-col--lg-offset-5 {
      margin-left: 41.66667%; }
    .ds-ui-kit-scope .ds-col--lg-6 {
      width: 50%; }
    .ds-ui-kit-scope .ds-col--lg-offset-6 {
      margin-left: 50%; }
    .ds-ui-kit-scope .ds-col--lg-7 {
      width: 58.33333%; }
    .ds-ui-kit-scope .ds-col--lg-offset-7 {
      margin-left: 58.33333%; }
    .ds-ui-kit-scope .ds-col--lg-8 {
      width: 66.66667%; }
    .ds-ui-kit-scope .ds-col--lg-offset-8 {
      margin-left: 66.66667%; }
    .ds-ui-kit-scope .ds-col--lg-9 {
      width: 75%; }
    .ds-ui-kit-scope .ds-col--lg-offset-9 {
      margin-left: 75%; }
    .ds-ui-kit-scope .ds-col--lg-10 {
      width: 83.33333%; }
    .ds-ui-kit-scope .ds-col--lg-offset-10 {
      margin-left: 83.33333%; }
    .ds-ui-kit-scope .ds-col--lg-11 {
      width: 91.66667%; }
    .ds-ui-kit-scope .ds-col--lg-offset-11 {
      margin-left: 91.66667%; }
    .ds-ui-kit-scope .ds-col--lg-12 {
      width: 100%; }
    .ds-ui-kit-scope .ds-col--lg-offset-12 {
      margin-left: 100%; }
    .ds-ui-kit-scope .ds-col--lg-offset-0 {
      margin-left: 0; } }
  @media (min-width: 1281px) {
    .ds-ui-kit-scope .ds-container--fixed {
      max-width: 1280px; } }
  @media (min-width: 1441px) {
    .ds-ui-kit-scope .ds-container {
      max-width: 1600px;
      padding-left: 40px;
      padding-right: 40px; }
    .ds-ui-kit-scope .ds-container--carousel {
      padding-left: 30px;
      padding-right: 30px; }
    .ds-ui-kit-scope .ds-container--fixed {
      max-width: 1440px; }
    .ds-ui-kit-scope .ds-row {
      margin-left: -40px; }
    .ds-ui-kit-scope .ds-col {
      padding-left: 40px; }
    .ds-ui-kit-scope .ds-col--xl-1 {
      width: 6.25%; }
    .ds-ui-kit-scope .ds-col--xl-offset-1 {
      margin-left: 6.25%; }
    .ds-ui-kit-scope .ds-col--xl-2 {
      width: 12.5%; }
    .ds-ui-kit-scope .ds-col--xl-offset-2 {
      margin-left: 12.5%; }
    .ds-ui-kit-scope .ds-col--xl-3 {
      width: 18.75%; }
    .ds-ui-kit-scope .ds-col--xl-offset-3 {
      margin-left: 18.75%; }
    .ds-ui-kit-scope .ds-col--xl-4 {
      width: 25%; }
    .ds-ui-kit-scope .ds-col--xl-offset-4 {
      margin-left: 25%; }
    .ds-ui-kit-scope .ds-col--xl-5 {
      width: 31.25%; }
    .ds-ui-kit-scope .ds-col--xl-offset-5 {
      margin-left: 31.25%; }
    .ds-ui-kit-scope .ds-col--xl-6 {
      width: 37.5%; }
    .ds-ui-kit-scope .ds-col--xl-offset-6 {
      margin-left: 37.5%; }
    .ds-ui-kit-scope .ds-col--xl-7 {
      width: 43.75%; }
    .ds-ui-kit-scope .ds-col--xl-offset-7 {
      margin-left: 43.75%; }
    .ds-ui-kit-scope .ds-col--xl-8 {
      width: 50%; }
    .ds-ui-kit-scope .ds-col--xl-offset-8 {
      margin-left: 50%; }
    .ds-ui-kit-scope .ds-col--xl-9 {
      width: 56.25%; }
    .ds-ui-kit-scope .ds-col--xl-offset-9 {
      margin-left: 56.25%; }
    .ds-ui-kit-scope .ds-col--xl-10 {
      width: 62.5%; }
    .ds-ui-kit-scope .ds-col--xl-offset-10 {
      margin-left: 62.5%; }
    .ds-ui-kit-scope .ds-col--xl-11 {
      width: 68.75%; }
    .ds-ui-kit-scope .ds-col--xl-offset-11 {
      margin-left: 68.75%; }
    .ds-ui-kit-scope .ds-col--xl-12 {
      width: 75%; }
    .ds-ui-kit-scope .ds-col--xl-offset-12 {
      margin-left: 75%; }
    .ds-ui-kit-scope .ds-col--xl-13 {
      width: 81.25%; }
    .ds-ui-kit-scope .ds-col--xl-offset-13 {
      margin-left: 81.25%; }
    .ds-ui-kit-scope .ds-col--xl-14 {
      width: 87.5%; }
    .ds-ui-kit-scope .ds-col--xl-offset-14 {
      margin-left: 87.5%; }
    .ds-ui-kit-scope .ds-col--xl-15 {
      width: 93.75%; }
    .ds-ui-kit-scope .ds-col--xl-offset-15 {
      margin-left: 93.75%; }
    .ds-ui-kit-scope .ds-col--xl-16 {
      width: 100%; }
    .ds-ui-kit-scope .ds-col--xl-offset-16 {
      margin-left: 100%; }
    .ds-ui-kit-scope .ds-col--xl-offset-0 {
      margin-left: 0; } }
  @media (min-width: 1601px) {
    .ds-ui-kit-scope .ds-container--fixed {
      max-width: 1600px; } }
  .ds-ui-kit-scope .ds-grid-debug {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    display: none; }
    .ds-ui-kit-scope .ds-grid-debug.visible {
      display: block;
      opacity: .4; }
    .ds-ui-kit-scope .ds-grid-debug .ds-container {
      height: 100%; }
    .ds-ui-kit-scope .ds-grid-debug .ds-row {
      height: 100%; }
    .ds-ui-kit-scope .ds-grid-debug .ds-col {
      height: 100%;
      background: rgba(27, 122, 181, 0.3); }
      .ds-ui-kit-scope .ds-grid-debug .ds-col div {
        height: 100%;
        background: rgba(27, 122, 181, 0.3); }
  @media (min-width: 480px) {
    .ds-ui-kit-scope .is-hidden-sm {
      display: none !important; } }
  @media (min-width: 721px) {
    .ds-ui-kit-scope .is-hidden-md {
      display: none !important; } }
  @media (min-width: 841px) {
    .ds-ui-kit-scope .is-hidden-ld {
      display: none !important; } }
  @media (min-width: 1041px) {
    .ds-ui-kit-scope .is-hidden-lg {
      display: none !important; } }
  @media (min-width: 1441px) {
    .ds-ui-kit-scope .is-hidden-xl {
      display: none !important; } }
  .ds-ui-kit-scope .ds-heading-1,
  .ds-ui-kit-scope h1 {
    font-size: 55px;
    line-height: 64px;
    font-weight: 400; }
  .ds-ui-kit-scope .ds-heading-2,
  .ds-ui-kit-scope h2 {
    font-size: 44px;
    line-height: 48px;
    font-weight: 400; }
  .ds-ui-kit-scope .ds-heading-3,
  .ds-ui-kit-scope h3 {
    font-size: 32px;
    line-height: 36px;
    font-weight: 400; }
  .ds-ui-kit-scope .ds-heading-4,
  .ds-ui-kit-scope h4 {
    font-size: 26px;
    line-height: 32px;
    font-weight: 400; }
  .ds-ui-kit-scope .ds-heading-5,
  .ds-ui-kit-scope h5 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 400; }
  .ds-ui-kit-scope .ds-copy-large {
    font-size: 18px; }
  .ds-ui-kit-scope .ds-copy-small {
    font-size: 13px;
    font-weight: 400; }
  .ds-ui-kit-scope .ds-copy-caption {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 400; }
  .ds-ui-kit-scope i.ds-ico {
    display: inline-block;
    vertical-align: middle;
    font: normal normal normal 14px/1 'icon';
    font-size: 16px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .3s ease;
    text-align: center;
    /* Default size for regular icons */
    /* Custom size */ }
    .ds-ui-kit-scope i.ds-ico.is-inline {
      margin-right: 8px; }
    .ds-ui-kit-scope i.ds-ico:before {
      content: '\e915'; }
    .ds-ui-kit-scope i.ds-ico-burger-icon:before {
      content: '\e900'; }
    .ds-ui-kit-scope i.ds-ico-clock-icon:before {
      content: '\e901'; }
    .ds-ui-kit-scope i.ds-ico-close-icon:before {
      content: '\e902'; }
    .ds-ui-kit-scope i.ds-ico-down-chevron-icon:before {
      content: '\e903'; }
    .ds-ui-kit-scope i.ds-ico-heart-icon:before {
      content: '\e904'; }
    .ds-ui-kit-scope i.ds-ico-language-icon:before {
      content: '\e905'; }
    .ds-ui-kit-scope i.ds-ico-location-icon:before {
      content: '\e906'; }
    .ds-ui-kit-scope i.ds-ico-notif-icon:before {
      content: '\e907'; }
    .ds-ui-kit-scope i.ds-ico-play-icon:before {
      content: '\e908'; }
    .ds-ui-kit-scope i.ds-ico-search-icon:before {
      content: '\e909'; }
    .ds-ui-kit-scope i.ds-ico-share-icon:before {
      content: '\e90a'; }
    .ds-ui-kit-scope i.ds-ico-dots-icon:before {
      content: '\e92f'; }
    .ds-ui-kit-scope i.ds-ico-user-icon:before {
      content: '\e931'; }
    .ds-ui-kit-scope i.ds-ico-back-icon:before {
      content: '\e93f'; }
    .ds-ui-kit-scope i.ds-ico-back-mini:before {
      content: '\e90b'; }
    .ds-ui-kit-scope i.ds-ico-breadcrumb-chevron-mini:before {
      content: '\e90c'; }
    .ds-ui-kit-scope i.ds-ico-calendar-mini:before {
      content: '\e90d'; }
    .ds-ui-kit-scope i.ds-ico-check-mini:before {
      content: '\e90e'; }
    .ds-ui-kit-scope i.ds-ico-chevron-mini:before {
      content: '\e90f'; }
    .ds-ui-kit-scope i.ds-ico-clock-mini:before {
      content: '\e910'; }
    .ds-ui-kit-scope i.ds-ico-close-mini:before {
      content: '\e911'; }
    .ds-ui-kit-scope i.ds-ico-cta-mini:before {
      content: '\e912'; }
    .ds-ui-kit-scope i.ds-ico-diploma-mini:before {
      content: '\e913'; }
    .ds-ui-kit-scope i.ds-ico-download-mini:before {
      content: '\e914'; }
    .ds-ui-kit-scope i.ds-ico-dropdown-chevron-mini:before {
      content: '\e915'; }
    .ds-ui-kit-scope i.ds-ico-duration-mini:before {
      content: '\e916'; }
    .ds-ui-kit-scope i.ds-ico-external-link-mini:before {
      content: '\e917'; }
    .ds-ui-kit-scope i.ds-ico-facebook-mini:before {
      content: '\e918'; }
    .ds-ui-kit-scope i.ds-ico-xing-mini:before {
      content: '\e944'; }
    .ds-ui-kit-scope i.ds-ico-vkontakte-mini:before {
      content: '\e943'; }
    .ds-ui-kit-scope i.ds-ico-wechat-mini:before {
      content: '\e942'; }
    .ds-ui-kit-scope i.ds-ico-rss-mini:before {
      content: '\e945'; }
    .ds-ui-kit-scope i.ds-ico-swim-mini:before {
      content: '\e946'; }
    .ds-ui-kit-scope i.ds-ico-pinterest-mini:before {
      content: '\e940'; }
    .ds-ui-kit-scope i.ds-ico-weibo-mini:before {
      content: '\e941'; }
    .ds-ui-kit-scope i.ds-ico-file-mini:before {
      content: '\e919'; }
    .ds-ui-kit-scope i.ds-ico-filter-mini:before {
      content: '\e91a'; }
    .ds-ui-kit-scope i.ds-ico-get-location-mini:before {
      content: '\e91b'; }
    .ds-ui-kit-scope i.ds-ico-heart-mini:before {
      content: '\e91c'; }
    .ds-ui-kit-scope i.ds-ico-information-mini:before {
      content: '\e91d'; }
    .ds-ui-kit-scope i.ds-ico-linkedin-mini:before {
      content: '\e91e'; }
    .ds-ui-kit-scope i.ds-ico-location-mini:before {
      content: '\e91f'; }
    .ds-ui-kit-scope i.ds-ico-login-mini:before {
      content: '\e920'; }
    .ds-ui-kit-scope i.ds-ico-logout-mini:before {
      content: '\e94a'; }
    .ds-ui-kit-scope i.ds-ico-mail-mini:before {
      content: '\e921'; }
    .ds-ui-kit-scope i.ds-ico-offer-mini:before {
      content: '\e922'; }
    .ds-ui-kit-scope i.ds-ico-play-mini:before {
      content: '\e923'; }
    .ds-ui-kit-scope i.ds-ico-plus-mini:before {
      content: '\e924'; }
    .ds-ui-kit-scope i.ds-ico-profile-mini:before {
      content: '\e925'; }
    .ds-ui-kit-scope i.ds-ico-search-mini:before {
      content: '\e926'; }
    .ds-ui-kit-scope i.ds-ico-see-all-mini:before {
      content: '\e927'; }
    .ds-ui-kit-scope i.ds-ico-share-mini:before {
      content: '\e928'; }
    .ds-ui-kit-scope i.ds-ico-sort-mini:before {
      content: '\e929'; }
    .ds-ui-kit-scope i.ds-ico-suitcase-mini:before {
      content: '\e92a'; }
    .ds-ui-kit-scope i.ds-ico-twitter-mini:before {
      content: '\e92b'; }
    .ds-ui-kit-scope i.ds-ico-upload-mini:before {
      content: '\e92c'; }
    .ds-ui-kit-scope i.ds-ico-youtube-mini:before {
      content: '\e92d'; }
    .ds-ui-kit-scope i.ds-ico-accordeon-minus-mini:before {
      content: '\e930'; }
    .ds-ui-kit-scope i.ds-ico-accordeon-plus-mini:before {
      content: '\e93a'; }
    .ds-ui-kit-scope i.ds-ico-bottom-chevron-mini:before {
      content: '\e939'; }
    .ds-ui-kit-scope i.ds-ico-bottom-mini:before {
      content: '\e938'; }
    .ds-ui-kit-scope i.ds-ico-instagram-mini:before {
      content: '\e937'; }
    .ds-ui-kit-scope i.ds-ico-left-chevron-mini:before {
      content: '\e936'; }
    .ds-ui-kit-scope i.ds-ico-right-chevron-mini:before {
      content: '\e932'; }
    .ds-ui-kit-scope i.ds-ico-right-mini:before {
      content: '\e933'; }
    .ds-ui-kit-scope i.ds-ico-top-chevron-mini:before {
      content: '\e935'; }
    .ds-ui-kit-scope i.ds-ico-dropdown-chevron-up-mini:before {
      content: '\e93c'; }
    .ds-ui-kit-scope i.ds-ico-form-error-mini:before {
      content: '\e93d'; }
    .ds-ui-kit-scope i.ds-ico-form-tooltip-mini:before {
      content: '\e93e'; }
    .ds-ui-kit-scope i.ds-ico-top-mini:before {
      content: '\e934'; }
    .ds-ui-kit-scope i.ds-ico-language-mini:before {
      content: '\e93b'; }
    .ds-ui-kit-scope i.ds-ico-phone-mini:before {
      content: '\e947'; }
    .ds-ui-kit-scope i.ds-ico-youku-mini:before {
      content: '\e948'; }
    .ds-ui-kit-scope i.ds-ico-quote-sign:before {
      content: '\e92e'; }
    .ds-ui-kit-scope i.ds-ico-play-big {
      position: relative; }
      .ds-ui-kit-scope i.ds-ico-play-big:before {
        content: '\e949'; }
      .ds-ui-kit-scope i.ds-ico-play-big.is-white:after {
        content: '';
        width: 20px;
        height: 20px;
        display: block;
        background: rgba(0, 0, 0, 0.8);
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -10px 0 0 -10px;
        z-index: 1; }
      .ds-ui-kit-scope i.ds-ico-play-big.is-white:before {
        position: relative;
        z-index: 2;
        color: #fff; }
    .ds-ui-kit-scope i.ds-ico-burger-icon, .ds-ui-kit-scope i.ds-ico-clock-icon, .ds-ui-kit-scope i.ds-ico-close-icon, .ds-ui-kit-scope i.ds-ico-down-chevron-icon, .ds-ui-kit-scope i.ds-ico-heart-icon, .ds-ui-kit-scope i.ds-ico-language-icon, .ds-ui-kit-scope i.ds-ico-location-icon, .ds-ui-kit-scope i.ds-ico-notif-icon, .ds-ui-kit-scope i.ds-ico-play-icon, .ds-ui-kit-scope i.ds-ico-search-icon, .ds-ui-kit-scope i.ds-ico-dots-icon, .ds-ui-kit-scope i.ds-ico-user-icon, .ds-ui-kit-scope i.ds-ico-share-icon, .ds-ui-kit-scope i.ds-ico-back-icon {
      font-size: 32px; }
    .ds-ui-kit-scope i.ds-ico-quote-sign, .ds-ui-kit-scope i.ds-ico-play-big {
      font-size: 64px; }
  .ds-ui-kit-scope .ds-ico-round {
    display: inline-block;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    text-align: center;
    color: rgba(0, 0, 0, 0.48);
    background-color: rgba(0, 0, 0, 0.08); }
    .ds-ui-kit-scope .ds-ico-round i {
      margin-right: 0; }
  .ds-ui-kit-scope .ds-ico-round--small {
    width: 32px;
    height: 32px;
    line-height: 32px; }
  .ds-ui-kit-scope a.ds-ico-round {
    transition: all .3s ease; }
    .ds-ui-kit-scope a.ds-ico-round:hover {
      color: rgba(0, 0, 0, 0.8);
      background: rgba(0, 0, 0, 0.16); }
  .ds-ui-kit-scope .ds-btn {
    position: relative;
    display: inline-block;
    height: 40px;
    border-radius: 22px;
    border: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 41px;
    padding: 0 24px;
    transition: all .15s ease-out;
    cursor: pointer;
    text-decoration: none; }
    .ds-ui-kit-scope .ds-btn:hover, .ds-ui-kit-scope .ds-btn:focus {
      text-decoration: none; }
    .ds-ui-kit-scope .ds-btn i {
      margin-right: 8px;
      position: relative;
      top: -1px; }
    .ds-ui-kit-scope .ds-btn.has-icon {
      padding-left: 16px;
      padding-right: 20px; }
  .ds-ui-kit-scope .ds-btn--large {
    font-size: 18px;
    height: 56px;
    line-height: 58px;
    border-radius: 40px;
    padding-left: 40px;
    padding-right: 40px; }
    .ds-ui-kit-scope .ds-btn--large i {
      position: relative;
      top: -2px; }
    .ds-ui-kit-scope .ds-btn--large.has-icon {
      padding-left: 28px;
      padding-right: 28px; }
  .ds-ui-kit-scope .ds-btn--compact {
    height: 32px;
    line-height: 33px;
    border-radius: 100px;
    padding: 0 16px; }
    .ds-ui-kit-scope .ds-btn--compact i {
      margin-right: 4px; }
    .ds-ui-kit-scope .ds-btn--compact.has-icon {
      padding-left: 12px;
      padding-right: 12px; }
  .ds-ui-kit-scope .ds-btn--extended {
    width: 100%;
    text-align: center;
    padding: 0 24px;
    margin: 4px auto; }
    .ds-ui-kit-scope .ds-btn--extended.has-icon {
      padding: 0 24px; }
  .ds-ui-kit-scope .ds-btn--scream {
    color: #fff;
    background: #239de8; }
    .ds-ui-kit-scope .ds-btn--scream:hover, .ds-ui-kit-scope .ds-btn--scream:focus {
      color: #fff;
      background: #1d83c2; }
    .ds-ui-kit-scope .ds-btn--scream.is-disabled, .ds-ui-kit-scope .ds-btn--scream[disabled] {
      background-color: rgba(0, 0, 0, 0.08);
      color: rgba(0, 0, 0, 0.16);
      pointer-events: none; }
  .ds-ui-kit-scope .ds-btn--shout {
    line-height: 38px;
    color: #239de8;
    border: 2px solid #239de8; }
    .ds-ui-kit-scope .ds-btn--shout:hover, .ds-ui-kit-scope .ds-btn--shout:focus {
      color: #1d83c2;
      border-color: #1d83c2;
      background: rgba(35, 157, 232, 0.08); }
    .ds-ui-kit-scope .ds-btn--shout.ds-btn--large {
      line-height: 54px; }
    .ds-ui-kit-scope .ds-btn--shout.ds-btn--compact {
      line-height: 30px;
      font-size: 13px; }
    .ds-ui-kit-scope .ds-btn--shout.ds-btn--dark {
      color: #fff;
      border-color: #fff; }
      .ds-ui-kit-scope .ds-btn--shout.ds-btn--dark:hover, .ds-ui-kit-scope .ds-btn--shout.ds-btn--dark:focus {
        color: #fff;
        border-color: #fff;
        background: rgba(255, 255, 255, 0.08); }
  .ds-ui-kit-scope .ds-btn--cheer,
  .ds-ui-kit-scope .ds-btn--murmur {
    padding: 0;
    border-radius: 0;
    color: #239de8; }
    .ds-ui-kit-scope .ds-btn--cheer span,
    .ds-ui-kit-scope .ds-btn--murmur span {
      display: inline-block;
      vertical-align: middle;
      line-height: 15px; }
    .ds-ui-kit-scope .ds-btn--cheer i,
    .ds-ui-kit-scope .ds-btn--murmur i {
      position: absolute;
      top: 50%;
      left: 0;
      border-radius: 100%;
      text-align: center; }
    .ds-ui-kit-scope .ds-btn--cheer:hover, .ds-ui-kit-scope .ds-btn--cheer:focus,
    .ds-ui-kit-scope .ds-btn--murmur:hover,
    .ds-ui-kit-scope .ds-btn--murmur:focus {
      color: #1d83c2; }
    .ds-ui-kit-scope .ds-btn--cheer.ds-btn--dark:hover, .ds-ui-kit-scope .ds-btn--cheer.ds-btn--dark:focus,
    .ds-ui-kit-scope .ds-btn--murmur.ds-btn--dark:hover,
    .ds-ui-kit-scope .ds-btn--murmur.ds-btn--dark:focus {
      color: #fff; }
  .ds-ui-kit-scope .ds-btn--cheer {
    padding-left: 40px; }
    .ds-ui-kit-scope .ds-btn--cheer i {
      width: 32px;
      height: 32px;
      line-height: 28px;
      border: 2px solid #239de8;
      margin-top: -15px; }
    .ds-ui-kit-scope .ds-btn--cheer:hover, .ds-ui-kit-scope .ds-btn--cheer:focus {
      border-color: #1d83c2; }
      .ds-ui-kit-scope .ds-btn--cheer:hover i, .ds-ui-kit-scope .ds-btn--cheer:focus i {
        background: rgba(35, 157, 232, 0.08);
        border-color: #1d83c2; }
    .ds-ui-kit-scope .ds-btn--cheer.ds-btn--compact {
      padding-left: 32px; }
      .ds-ui-kit-scope .ds-btn--cheer.ds-btn--compact i {
        margin-right: 8px;
        margin-top: -11px;
        width: 24px;
        height: 24px;
        line-height: 20px; }
    .ds-ui-kit-scope .ds-btn--cheer.ds-btn--dark:hover i, .ds-ui-kit-scope .ds-btn--cheer.ds-btn--dark:focus i {
      border-color: #fff;
      background-color: rgba(255, 255, 255, 0.08); }
    .ds-ui-kit-scope .ds-btn--cheer .ds-ico-chevron-mini {
      padding-left: 0; }
  .ds-ui-kit-scope .ds-btn--murmur {
    padding-left: 24px; }
    .ds-ui-kit-scope .ds-btn--murmur i {
      border: 0;
      margin-top: -8px; }
    .ds-ui-kit-scope .ds-btn--murmur:hover span, .ds-ui-kit-scope .ds-btn--murmur:focus span {
      text-decoration: underline; }
  .ds-ui-kit-scope .ds-btn--blue {
    color: #239de8;
    border-color: #239de8; }
    .ds-ui-kit-scope .ds-btn--blue:hover, .ds-ui-kit-scope .ds-btn--blue:focus {
      color: #1d83c2;
      border-color: #1d83c2; }
  .ds-ui-kit-scope .ds-btn--blue.ds-btn--cheer:hover, .ds-ui-kit-scope .ds-btn--blue.ds-btn--cheer:focus {
    color: #1d83c2;
    border-color: #1d83c2; }
    .ds-ui-kit-scope .ds-btn--blue.ds-btn--cheer:hover i, .ds-ui-kit-scope .ds-btn--blue.ds-btn--cheer:focus i {
      background: rgba(35, 157, 232, 0.08); }
  .ds-ui-kit-scope .ds-btn--dark {
    color: #fff;
    border-color: #fff; }
    .ds-ui-kit-scope .ds-btn--dark i {
      border-color: #fff; }
  .ds-ui-kit-scope .ds-btn--gray.ds-btn--shout {
    color: rgba(0, 0, 0, 0.48);
    border-color: rgba(0, 0, 0, 0.16); }
    .ds-ui-kit-scope .ds-btn--gray.ds-btn--shout:hover, .ds-ui-kit-scope .ds-btn--gray.ds-btn--shout:focus {
      background-color: rgba(0, 0, 0, 0.08); }
  .ds-ui-kit-scope .ds-lists,
  .ds-ui-kit-scope .ds-copy-text ul,
  .ds-ui-kit-scope .ds-copy-text ol {
    padding: 0;
    margin: 0;
    margin-top: 12px;
    font-weight: 300; }
  .ds-ui-kit-scope .ds-copy-text ol > li > ul > li:before,
  .ds-ui-kit-scope ol.ds-lists > li > ul.ds-lists > li:before {
    left: 19px; }
  .ds-ui-kit-scope .ds-lists > li,
  .ds-ui-kit-scope .ds-copy-text ul > li,
  .ds-ui-kit-scope .ds-copy-text ol > li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 12px; }
  .ds-ui-kit-scope .ds-lists li:before,
  .ds-ui-kit-scope .ds-copy-text li:before {
    color: rgba(0, 0, 0, 0.32); }
  .ds-ui-kit-scope .ds-lists > li ul,
  .ds-ui-kit-scope .ds-copy-text ul > li ul,
  .ds-ui-kit-scope .ds-copy-text ol > li ul,
  .ds-ui-kit-scope .ds-lists > li ol,
  .ds-ui-kit-scope .ds-copy-text ul > li ol,
  .ds-ui-kit-scope .ds-copy-text ol > li ol {
    padding: 0; }
  .ds-ui-kit-scope .ds-lists > li ul > li,
  .ds-ui-kit-scope .ds-lists > li ol > li,
  .ds-ui-kit-scope .ds-copy-text ul > li ul > li,
  .ds-ui-kit-scope .ds-copy-text ol > li ul > li,
  .ds-ui-kit-scope .ds-copy-text ul > li ol > li,
  .ds-ui-kit-scope .ds-copy-text ol > li ol > li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 12px; }
    .ds-ui-kit-scope .ds-lists > li ul > li:first-child,
    .ds-ui-kit-scope .ds-lists > li ol > li:first-child,
    .ds-ui-kit-scope .ds-copy-text ul > li ul > li:first-child,
    .ds-ui-kit-scope .ds-copy-text ol > li ul > li:first-child,
    .ds-ui-kit-scope .ds-copy-text ul > li ol > li:first-child,
    .ds-ui-kit-scope .ds-copy-text ol > li ol > li:first-child {
      margin-top: 12px; }
  .ds-ui-kit-scope .ds-lists.ds-lists--big-lh li {
    line-height: 28px; }
  .ds-ui-kit-scope .ds-lists.ds-lists--big-ft li {
    line-height: 28px;
    font-size: 18px; }
  .ds-ui-kit-scope .ds-lists--big-ft.ds-lists--big-lh {
    margin-top: 16px; }
    .ds-ui-kit-scope .ds-lists--big-ft.ds-lists--big-lh li {
      line-height: 32px;
      margin-bottom: 16px; }
      .ds-ui-kit-scope .ds-lists--big-ft.ds-lists--big-lh li ul > li,
      .ds-ui-kit-scope .ds-lists--big-ft.ds-lists--big-lh li ol > li {
        margin-bottom: 16px; }
        .ds-ui-kit-scope .ds-lists--big-ft.ds-lists--big-lh li ul > li:first-child,
        .ds-ui-kit-scope .ds-lists--big-ft.ds-lists--big-lh li ol > li:first-child {
          margin-top: 16px; }
  .ds-ui-kit-scope ol.ds-lists,
  .ds-ui-kit-scope .ds-copy-text ol {
    counter-reset: ds-lists--counter; }
  .ds-ui-kit-scope ol.ds-lists > li,
  .ds-ui-kit-scope .ds-copy-text ol > li {
    list-style: none; }
  .ds-ui-kit-scope ol.ds-lists > li ul,
  .ds-ui-kit-scope .ds-copy-text ol > li ul {
    counter-reset: ds-lists--counter; }
  .ds-ui-kit-scope .ds-copy-text ul,
  .ds-ui-kit-scope ul.ds-lists {
    list-style-type: none; }
  .ds-ui-kit-scope .ds-copy-text ul > li:before,
  .ds-ui-kit-scope ul.ds-lists > li:before {
    content: ' ';
    position: absolute;
    left: 3px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.32);
    border-radius: 100%;
    width: 6px;
    height: 6px;
    margin: 0;
    top: 8px; }
  .ds-ui-kit-scope .ds-copy-text--dark ul > li:before,
  .ds-ui-kit-scope ul.ds-lists--dark > li:before {
    background: rgba(255, 255, 255, 0.4); }
  .ds-ui-kit-scope .ds-copy-text ul.ds-lists--big-lh > li:before,
  .ds-ui-kit-scope ul.ds-lists--big-lh > li:before,
  .ds-ui-kit-scope .ds-copy-text ul.ds-lists--big-ft > li:before,
  .ds-ui-kit-scope ul.ds-lists--big-ft > li:before {
    top: 10px; }
  .ds-ui-kit-scope .ds-copy-text ul.ds-lists--big-ft.ds-lists--big-lh > li:before,
  .ds-ui-kit-scope ul.ds-lists--big-ft.ds-lists--big-lh > li:before {
    top: 12px; }
  .ds-ui-kit-scope .ds-copy-text ul > li > ul,
  .ds-ui-kit-scope .ds-copy-text ol > li > ul,
  .ds-ui-kit-scope ul.ds-lists > li > ul.ds-lists,
  .ds-ui-kit-scope ol.ds-lists > li > ul.ds-lists {
    list-style-type: none; }
  .ds-ui-kit-scope .ds-copy-text ul > li > ul > li:before,
  .ds-ui-kit-scope ul.ds-lists > li > ul.ds-lists > li:before {
    content: ' ';
    background: url("../../icons/oval-empty.svg") center center no-repeat;
    background-size: cover;
    width: 6px;
    height: 6px;
    position: absolute;
    left: 19px;
    display: inline-block;
    margin: 0;
    top: 8px; }
  .ds-ui-kit-scope .ds-copy-text--dark ul > li > ul > li:before,
  .ds-ui-kit-scope ul.ds-lists--dark > li > ul.ds-lists > li:before {
    background-image: url("../../icons/oval-empty-white.svg"); }
  .ds-ui-kit-scope .ds-copy-text ul.ds-lists--big-lh > li > ul > li:before,
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-lh > li > ul > li:before,
  .ds-ui-kit-scope ul.ds-lists--big-lh > li > ul.ds-lists > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-lh > li > ul.ds-lists > li:before,
  .ds-ui-kit-scope .ds-copy-text ul.ds-lists--big-ft > li > ul > li:before,
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft > li > ul > li:before,
  .ds-ui-kit-scope ul.ds-lists--big-ft > li > ul.ds-lists > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft > li > ul.ds-lists > li:before {
    top: 10px; }
  .ds-ui-kit-scope .ds-copy-text ul.ds-lists--big-ft.ds-lists--big-lh > li > ul > li:before,
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft.ds-lists--big-lh > li > ul > li:before,
  .ds-ui-kit-scope ul.ds-lists--big-ft.ds-lists--big-lh > li > ul.ds-lists > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft.ds-lists--big-lh > li > ul.ds-lists > li:before {
    top: 12px; }
  .ds-ui-kit-scope .ds-copy-text ol > li:before,
  .ds-ui-kit-scope ol.ds-lists > li:before {
    content: counter(ds-lists--counter) ".";
    counter-increment: ds-lists--counter;
    position: absolute;
    font-weight: 400;
    left: -6px;
    white-space: nowrap;
    background: none;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    width: 34px;
    display: inline-block;
    text-align: right;
    top: 0; }
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-lh > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-lh > li:before,
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft > li:before {
    top: 0; }
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft.ds-lists--big-lh > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft.ds-lists--big-lh > li:before {
    top: 0; }
  .ds-ui-kit-scope .ds-copy-text ol > li > ol,
  .ds-ui-kit-scope ol.ds-lists > li > ol.ds-lists {
    list-style-type: lower-alpha;
    counter-reset: ds-lists--counter; }
  .ds-ui-kit-scope .ds-copy-text ol > li > ol > li:before,
  .ds-ui-kit-scope ol.ds-lists > li > ol.ds-lists > li:before {
    content: counter(ds-lists--counter, lower-alpha) ".";
    counter-increment: ds-lists--counter;
    position: absolute;
    font-weight: 400;
    left: -6px;
    white-space: nowrap;
    background: none;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    width: 34px;
    display: inline-block;
    text-align: right;
    top: 0; }
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-lh > li > ol > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-lh > li > ol.ds-lists > li:before,
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft > li > ol > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft > li > ol.ds-lists > li:before {
    top: 0; }
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft.ds-lists--big-lh > li > ol > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft.ds-lists--big-lh > li > ol.ds-lists > li:before {
    top: 0; }
  .ds-ui-kit-scope .ds-copy-text ol > li > ol > li > ol,
  .ds-ui-kit-scope ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists {
    list-style-type: none; }
  .ds-ui-kit-scope .ds-copy-text ol > li > ol > li > ol > li:before,
  .ds-ui-kit-scope .ds-copy-text ol > li > ol > li > ul > li:before,
  .ds-ui-kit-scope ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists > li:before,
  .ds-ui-kit-scope ol.ds-lists > li > ol.ds-lists > li > ul.ds-lists > li:before {
    content: ' ';
    position: absolute;
    left: 19px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.32);
    border-radius: 100%;
    width: 6px;
    height: 6px;
    margin: 0;
    top: 8px; }
  .ds-ui-kit-scope .ds-copy-text--dark ol > li > ol > li > ol > li:before,
  .ds-ui-kit-scope .ds-copy-text--dark ol > li > ol > li > ul > li:before,
  .ds-ui-kit-scope ol.ds-lists--dark > li > ol.ds-lists > li > ol.ds-lists > li:before,
  .ds-ui-kit-scope ol.ds-lists--dark > li > ol.ds-lists > li > ul.ds-lists > li:before {
    background: rgba(255, 255, 255, 0.4); }
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-lh > li > ol > li > ol > li:before,
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-lh > li > ol > li > ul > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-lh > li > ol.ds-lists > li > ol.ds-lists > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-lh > li > ol.ds-lists > li > ul.ds-lists > li:before,
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft > li > ol > li > ol > li:before,
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft > li > ol > li > ul > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft > li > ol.ds-lists > li > ol.ds-lists > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft > li > ol.ds-lists > li > ul.ds-lists > li:before {
    top: 10px; }
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft.ds-lists--big-lh > li > ol > li > ol > li:before,
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft.ds-lists--big-lh > li > ol > li > ul > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft > li > ol.ds-lists > li > ol.ds-lists > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft > li > ol.ds-lists > li > ul.ds-lists > li:before {
    top: 12px; }
  .ds-ui-kit-scope .ds-copy-text ol > li > ol > li > ol > li > ol,
  .ds-ui-kit-scope ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists {
    list-style-type: none; }
  .ds-ui-kit-scope .ds-copy-text ol > li > ol > li > ol > li > ol > li:before,
  .ds-ui-kit-scope ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists > li:before {
    content: ' ';
    background: url("../../icons/oval-empty.svg") center center no-repeat;
    background-size: cover;
    width: 6px;
    height: 6px;
    position: absolute;
    left: 19px;
    display: inline-block;
    margin: 0;
    top: 8px; }
  .ds-ui-kit-scope .ds-copy-text--dark ol > li > ol > li > ol > li > ol > li:before,
  .ds-ui-kit-scope .ds-lists--dark ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists > li:before,
  .ds-ui-kit-scope ol.ds-lists--dark > li > ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists > li:before {
    background-image: url("../../icons/oval-empty-white.svg"); }
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-lh > li > ol > li > ol > li > ol > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-lh > li > ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists > li:before,
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft > li > ol > li > ol > li > ol > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft > li > ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists > li:before {
    top: 10px; }
  .ds-ui-kit-scope .ds-copy-text ol.ds-lists--big-ft.ds-lists--big-lh > li > ol > li > ol > li > ol > li:before,
  .ds-ui-kit-scope ol.ds-lists--big-ft.ds-lists--big-lh > li > ol.ds-lists > li > ol.ds-lists > li > ol.ds-lists > li:before {
    top: 12px; }
  .ds-ui-kit-scope .ds-copy-text > ol > li:before,
  .ds-ui-kit-scope ol.ds-lists--root > li:before {
    left: -20px; }
  .ds-ui-kit-scope .ds-lists--dark,
  .ds-ui-kit-scope .ds-copy-text--dark {
    color: #fff; }
    .ds-ui-kit-scope .ds-lists--dark li:before,
    .ds-ui-kit-scope .ds-copy-text--dark li:before {
      color: rgba(255, 255, 255, 0.4); }
  .ds-ui-kit-scope .ds-tag {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-left: 16px;
    padding-right: 16px;
    margin-right: 12px;
    margin-bottom: 16px;
    height: 32px;
    line-height: 32px;
    font-size: 15px;
    font-weight: 400;
    transition: all .3s ease;
    text-decoration: none;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .ds-ui-kit-scope .ds-tag:hover {
      text-decoration: none; }
    .ds-ui-kit-scope .ds-tag.is-active, .ds-ui-kit-scope .ds-tag.is-active:hover {
      color: #fff;
      background: #239de8;
      cursor: default; }
  .ds-ui-kit-scope .ds-tag--click-light {
    color: rgba(0, 0, 0, 0.48);
    background: rgba(0, 0, 0, 0.08);
    border-radius: 100px; }
    .ds-ui-kit-scope .ds-tag--click-light:hover {
      color: rgba(0, 0, 0, 0.8);
      background: rgba(0, 0, 0, 0.16); }
  .ds-ui-kit-scope .ds-tag--click-dark {
    color: rgba(255, 255, 255, 0.64);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 100px; }
    .ds-ui-kit-scope .ds-tag--click-dark:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.16); }
  .ds-ui-kit-scope .ds-tag-meta {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 11px;
    border-radius: 3px;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 6px;
    margin-bottom: 16px;
    height: 24px;
    line-height: 25px;
    color: rgba(0, 0, 0, 0.48);
    background: rgba(0, 0, 0, 0.08);
    transition: color .3s ease;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .ds-ui-kit-scope .ds-tag-meta i {
      vertical-align: sub;
      margin-left: -4px;
      margin-right: 2px; }
  .ds-ui-kit-scope .ds-tag-meta--blue {
    color: #fff;
    background: #239de8; }
  .ds-ui-kit-scope .ds-tag-meta--red {
    color: #fff;
    background: #e63f41; }
  .ds-ui-kit-scope .ds-tag-meta--white {
    color: rgba(255, 255, 255, 0.64);
    background: rgba(255, 255, 255, 0.08); }
  .ds-ui-kit-scope .ds-shadow-1 {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14); }
  .ds-ui-kit-scope .ds-shadow-2 {
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12); }
  .ds-ui-kit-scope .ds-shadow-3 {
    box-shadow: 0 9px 12px 0 rgba(0, 0, 0, 0.1); }
  .ds-ui-kit-scope .ds-shadow-4 {
    box-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.08); }
  .ds-ui-kit-scope .ds-text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.32); }
  .ds-ui-kit-scope .ds-stroke-sep {
    background: rgba(0, 0, 0, 0.12);
    display: block;
    height: 1px;
    width: 100%; }
  .ds-ui-kit-scope .ds-stroke-sep--dark {
    background: rgba(255, 255, 255, 0.12); }
  .ds-ui-kit-scope .ds-border {
    border: 1px solid rgba(0, 0, 0, 0.12); }
  .ds-ui-kit-scope .ds-border--dark {
    border: 1px solid rgba(255, 255, 255, 0.12); }
  .ds-ui-kit-scope .ds-quote .ds-quote__icon {
    font-size: 34px;
    opacity: .2;
    margin-bottom: 57px; }
  .ds-ui-kit-scope .ds-quote .ds-quote__text {
    font-weight: 300;
    font-size: 22px;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.48);
    margin: 0 0 31px; }
  .ds-ui-kit-scope .ds-quote .ds-quote__photo {
    width: 80px;
    height: 80px;
    display: block;
    margin: auto;
    background-size: cover;
    border-radius: 100%;
    margin-bottom: 15px;
    margin-top: 46px; }
  .ds-ui-kit-scope .ds-quote .ds-quote__signature {
    color: rgba(0, 0, 0, 0.8);
    font-size: 15px;
    line-height: 24px; }
  .ds-ui-kit-scope .ds-quote .ds-quote__name {
    font-weight: 600; }
  .ds-ui-kit-scope .ds-quote .ds-quote__function {
    font-weight: 300; }
  .ds-ui-kit-scope .ds-quote--large {
    text-align: center;
    margin-top: 32px;
    margin-bottom: 32px; }
  .ds-ui-kit-scope .ds-quote--compact {
    margin-top: 32px;
    margin-bottom: 38px; }
    .ds-ui-kit-scope .ds-quote--compact .ds-col {
      padding-left: 0 !important;
      width: 100% !important; }
    .ds-ui-kit-scope .ds-quote--compact .ds-quote__text {
      position: relative;
      font-size: 18px;
      line-height: 32px;
      font-style: italic;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.8);
      margin-bottom: 26px; }
      .ds-ui-kit-scope .ds-quote--compact .ds-quote__text:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 4px;
        background: rgba(0, 0, 0, 0.16);
        left: -24px; }
    .ds-ui-kit-scope .ds-quote--compact .ds-quote__icon {
      display: none; }
    .ds-ui-kit-scope .ds-quote--compact .ds-quote__author-wrapper .ds-quote__photo {
      display: inline-block;
      vertical-align: middle;
      width: 32px;
      height: 32px;
      margin-bottom: 0;
      margin-right: 4px;
      margin-top: 0; }
    .ds-ui-kit-scope .ds-quote--compact .ds-quote__author-wrapper .ds-quote__signature {
      display: inline-block;
      vertical-align: middle;
      font-size: 13px;
      line-height: 16px;
      max-width: 85%; }
  .ds-ui-kit-scope .ds-quote--dark .ds-quote__icon {
    color: #fff; }
  .ds-ui-kit-scope .ds-quote--dark .ds-quote__text {
    color: rgba(255, 255, 255, 0.64); }
  .ds-ui-kit-scope .ds-quote--dark .ds-quote__signature {
    color: #fff; }
  .ds-ui-kit-scope .ds-quote--dark.ds-quote--compact .ds-quote__text {
    color: #fff; }
    .ds-ui-kit-scope .ds-quote--dark.ds-quote--compact .ds-quote__text:before {
      background: rgba(255, 255, 255, 0.16); }
  @media all and (min-width: 721px) {
    .ds-ui-kit-scope .ds-quote .ds-quote__icon {
      margin-bottom: 41px; }
    .ds-ui-kit-scope .ds-quote .ds-quote__photo {
      margin-bottom: 16px; }
    .ds-ui-kit-scope .ds-quote--large {
      margin-top: 32px;
      margin-bottom: 32px; }
    .ds-ui-kit-scope .ds-quote--compact .ds-quote__text:before {
      width: 2px; }
    .ds-ui-kit-scope .ds-quote--compact .ds-quote__signature {
      max-width: 100%; } }
  .ds-ui-kit-scope .ds-people {
    color: rgba(0, 0, 0, 0.48);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    .ds-ui-kit-scope .ds-people .ds-people__faces {
      display: inline-block;
      vertical-align: top;
      font-size: 0;
      margin-right: 6px;
      white-space: nowrap; }
    .ds-ui-kit-scope .ds-people .ds-people__face {
      display: inline-block;
      width: 24px;
      height: 24px;
      background-size: cover;
      border-radius: 100%;
      margin-left: -10px;
      border: 1px solid #fff; }
      .ds-ui-kit-scope .ds-people .ds-people__face:first-child {
        margin-left: inherit; }
    .ds-ui-kit-scope .ds-people .ds-people__infos {
      display: inline-block;
      font-weight: 400; }
    .ds-ui-kit-scope .ds-people .ds-people__name {
      font-size: 15px;
      line-height: 15px; }
    .ds-ui-kit-scope .ds-people .ds-people__company {
      font-size: 13px;
      line-height: 13px;
      font-weight: 400; }
      .ds-ui-kit-scope .ds-people .ds-people__company span {
        display: block; }
  .ds-ui-kit-scope .ds-people--compact .ds-people__name {
    font-size: 13px;
    line-height: 13px;
    font-weight: 600; }
  .ds-ui-kit-scope .ds-people--compact .ds-people__company {
    font-size: 11px;
    line-height: 11px;
    font-weight: 400; }
  .ds-ui-kit-scope .ds-people--compact .ds-people__infos {
    margin-top: 1px; }
  .ds-ui-kit-scope .ds-people--compact.ds-people--multiline .ds-people__infos {
    margin-top: 0; }
  .ds-ui-kit-scope .ds-people--dark {
    color: #fff; }
  .ds-ui-kit-scope .ds-people--multiline {
    -webkit-box-align: initial;
        -ms-flex-align: initial;
            align-items: initial; }
    .ds-ui-kit-scope .ds-people--multiline .ds-people__infos {
      margin-top: -2px; }
  .ds-ui-kit-scope .ds-tooltip {
    position: relative;
    display: inline;
    text-align: left; }
    .ds-ui-kit-scope .ds-tooltip.is-open .ds-tooltip__content {
      display: block; }
    .ds-ui-kit-scope .ds-tooltip i {
      cursor: pointer;
      color: rgba(0, 0, 0, 0.16); }
      .ds-ui-kit-scope .ds-tooltip i:hover {
        color: rgba(0, 0, 0, 0.32); }
  .ds-ui-kit-scope .ds-tooltip__content {
    display: none;
    position: absolute;
    bottom: 150%;
    right: -25px;
    width: 260px;
    padding: 16px;
    background-color: #fff;
    border-radius: 4px; }
    .ds-ui-kit-scope .ds-tooltip__content:after, .ds-ui-kit-scope .ds-tooltip__content:before {
      content: '';
      position: absolute;
      right: 25px;
      bottom: -12px;
      border: 6px solid transparent;
      border-top-color: #fff; }
    .ds-ui-kit-scope .ds-tooltip__content:before {
      border-top-color: rgba(0, 0, 0, 0.12);
      bottom: -13px; }
    .ds-ui-kit-scope .ds-tooltip__content h5 {
      font-size: 13px;
      line-height: 20px;
      margin-bottom: 0; }
    .ds-ui-kit-scope .ds-tooltip__content p {
      font-size: 11px;
      line-height: 16px;
      margin-top: 0; }
  .ds-ui-kit-scope .ds-input {
    position: relative;
    margin-bottom: 16px; }
    .ds-ui-kit-scope .ds-input label {
      position: absolute;
      top: 8px;
      left: 16px;
      color: rgba(0, 0, 0, 0.48);
      font-size: 11px;
      font-weight: 400;
      text-transform: uppercase;
      transition: all cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s;
      cursor: text;
      pointer-events: none; }
      .ds-ui-kit-scope .ds-input label:after {
        content: attr(data-label);
        color: rgba(0, 0, 0, 0.48);
        font-size: 15px;
        font-weight: 300;
        text-transform: none;
        position: absolute;
        width: 200%;
        left: 0;
        opacity: 0;
        transition: opacity cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s; }
    .ds-ui-kit-scope .ds-input input,
    .ds-ui-kit-scope .ds-input textarea {
      display: block;
      width: 100%;
      height: 56px;
      padding: 26px 32px 10px 15px;
      background-color: #fff;
      color: rgba(0, 0, 0, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 4px;
      font-size: 15px;
      font-weight: 300;
      -webkit-appearance: none; }
      .ds-ui-kit-scope .ds-input input:focus,
      .ds-ui-kit-scope .ds-input textarea:focus {
        border-color: #239de8; }
      .ds-ui-kit-scope .ds-input input:disabled,
      .ds-ui-kit-scope .ds-input textarea:disabled {
        background-color: rgba(0, 0, 0, 0.04); }
        .ds-ui-kit-scope .ds-input input:disabled ~ label,
        .ds-ui-kit-scope .ds-input textarea:disabled ~ label {
          color: rgba(0, 0, 0, 0.32); }
      .ds-ui-kit-scope .ds-input input::-ms-clear,
      .ds-ui-kit-scope .ds-input textarea::-ms-clear {
        display: none; }
      .ds-ui-kit-scope .ds-input input.has-error,
      .ds-ui-kit-scope .ds-input textarea.has-error {
        border-color: #e63f41; }
        .ds-ui-kit-scope .ds-input input.has-error ~ .ds-input__info,
        .ds-ui-kit-scope .ds-input textarea.has-error ~ .ds-input__info {
          color: #e63f41; }
        .ds-ui-kit-scope .ds-input input.has-error ~ .ds-tooltip,
        .ds-ui-kit-scope .ds-input textarea.has-error ~ .ds-tooltip {
          right: 38px; }
        .ds-ui-kit-scope .ds-input input.has-error ~ .ds-ico-form-error-mini,
        .ds-ui-kit-scope .ds-input textarea.has-error ~ .ds-ico-form-error-mini {
          display: block; }
        .ds-ui-kit-scope .ds-input input.has-error ~ .ds-input__icon-cta,
        .ds-ui-kit-scope .ds-input textarea.has-error ~ .ds-input__icon-cta {
          display: none; }
      .ds-ui-kit-scope .ds-input input.is-empty ~ label,
      .ds-ui-kit-scope .ds-input textarea.is-empty ~ label {
        -webkit-transform: translate(0, 8px);
            -ms-transform: translate(0, 8px);
                transform: translate(0, 8px);
        color: transparent; }
        .ds-ui-kit-scope .ds-input input.is-empty ~ label:after,
        .ds-ui-kit-scope .ds-input textarea.is-empty ~ label:after {
          opacity: 1; }
      .ds-ui-kit-scope .ds-input input.is-empty ~ .ds-input__icon-cta,
      .ds-ui-kit-scope .ds-input textarea.is-empty ~ .ds-input__icon-cta {
        pointer-events: none; }
      .ds-ui-kit-scope .ds-input input.is-empty:-webkit-autofill ~ label,
      .ds-ui-kit-scope .ds-input textarea.is-empty:-webkit-autofill ~ label {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
        color: rgba(0, 0, 0, 0.48); }
        .ds-ui-kit-scope .ds-input input.is-empty:-webkit-autofill ~ label:after,
        .ds-ui-kit-scope .ds-input textarea.is-empty:-webkit-autofill ~ label:after {
          opacity: 0; }
      .ds-ui-kit-scope .ds-input input.is-filed ~ .ds-input__icon-cta,
      .ds-ui-kit-scope .ds-input textarea.is-filed ~ .ds-input__icon-cta {
        color: #239de8; }
        .ds-ui-kit-scope .ds-input input.is-filed ~ .ds-input__icon-cta:focus,
        .ds-ui-kit-scope .ds-input textarea.is-filed ~ .ds-input__icon-cta:focus {
          background-color: #239de8;
          color: #fff; }
    .ds-ui-kit-scope .ds-input textarea {
      height: auto;
      min-height: 100px; }
      .ds-ui-kit-scope .ds-input textarea ~ label {
        background-color: #fff;
        width: 98%;
        line-height: 28px;
        padding-left: 16px;
        padding-top: 2px;
        top: 1px;
        left: 1px;
        border-radius: 4px;
        height: 28px; }
        .ds-ui-kit-scope .ds-input textarea ~ label:after {
          padding-left: 16px;
          width: 100%; }
    .ds-ui-kit-scope .ds-input .ds-tooltip {
      position: absolute;
      right: 16px;
      top: 20px;
      line-height: 1; }
    .ds-ui-kit-scope .ds-input .ds-ico-calendar-mini,
    .ds-ui-kit-scope .ds-input .ds-ico-form-error-mini {
      font-size: 16px;
      line-height: 1;
      position: absolute;
      right: 16px;
      top: 20px;
      margin: 0; }
    .ds-ui-kit-scope .ds-input .ds-ico-calendar-mini {
      color: rgba(0, 0, 0, 0.32);
      pointer-events: none; }
    .ds-ui-kit-scope .ds-input .ds-ico-form-error-mini {
      display: none;
      color: #e63f41;
      cursor: pointer; }
      .ds-ui-kit-scope .ds-input .ds-ico-form-error-mini:hover {
        color: #D33A3B; }
  .ds-ui-kit-scope .ds-input__info {
    display: block;
    margin-top: 9px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.32); }
  .ds-ui-kit-scope .ds-input__info--counter {
    text-align: right;
    color: rgba(0, 0, 0, 0.48);
    float: right; }
  .ds-ui-kit-scope .ds-input__icon-cta {
    position: absolute;
    right: 8px;
    top: 12px;
    font-size: 16px;
    line-height: 15px;
    padding: 8px;
    margin: 0;
    width: 32px;
    height: 32px;
    color: rgba(0, 0, 0, 0.32);
    cursor: pointer;
    border-radius: 32px; }
  .ds-ui-kit-scope .ds-input__autocomplete {
    position: absolute;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-top-color: #239de8;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-top: -3px;
    padding: 10px 0;
    line-height: 35px;
    display: none; }
    .ds-ui-kit-scope .ds-input__autocomplete > div {
      cursor: pointer;
      color: rgba(0, 0, 0, 0.48);
      padding: 0 16px; }
      .ds-ui-kit-scope .ds-input__autocomplete > div:hover {
        background-color: rgba(0, 0, 0, 0.08); }
  .ds-ui-kit-scope .ds-input--only input {
    padding-top: 10px; }
  .ds-ui-kit-scope .ds-input--only ::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.48); }
  .ds-ui-kit-scope .ds-input--only ::-moz-placeholder {
    color: rgba(0, 0, 0, 0.48); }
  .ds-ui-kit-scope .ds-input--only :-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.48) !important; }
  .ds-ui-kit-scope .ds-input--only ::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.48); }
  .ds-ui-kit-scope .ds-input--search:after {
    content: '\e926';
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -8px;
    font-family: 'icon';
    font-size: 16px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.48); }
  .ds-ui-kit-scope .ds-input--search.is-compact:after, .ds-ui-kit-scope .ds-input--search.has-icon-left:after {
    right: auto;
    left: 16px; }
  .ds-ui-kit-scope .ds-input--search.is-compact input, .ds-ui-kit-scope .ds-input--search.has-icon-left input {
    padding-left: 40px; }
  .ds-ui-kit-scope .ds-input--search.is-compact input {
    border-radius: 75px;
    height: 40px; }
  .ds-ui-kit-scope .ds-checkbox,
  .ds-ui-kit-scope .ds-radio,
  .ds-ui-kit-scope .ds-switch {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px; }
    .ds-ui-kit-scope .ds-checkbox label,
    .ds-ui-kit-scope .ds-radio label,
    .ds-ui-kit-scope .ds-switch label {
      position: relative;
      display: inline-block;
      padding-left: 36px;
      font-weight: 300;
      line-height: 15px; }
      .ds-ui-kit-scope .ds-checkbox label:before,
      .ds-ui-kit-scope .ds-radio label:before,
      .ds-ui-kit-scope .ds-switch label:before {
        content: '';
        display: inline-block;
        height: 20px;
        width: 20px;
        vertical-align: middle;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -11px;
        border: solid 1px rgba(0, 0, 0, 0.12); }
      .ds-ui-kit-scope .ds-checkbox label:after,
      .ds-ui-kit-scope .ds-radio label:after,
      .ds-ui-kit-scope .ds-switch label:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0; }
    .ds-ui-kit-scope .ds-checkbox input,
    .ds-ui-kit-scope .ds-radio input,
    .ds-ui-kit-scope .ds-switch input {
      position: absolute;
      opacity: 0; }
      .ds-ui-kit-scope .ds-checkbox input:disabled ~ label,
      .ds-ui-kit-scope .ds-radio input:disabled ~ label,
      .ds-ui-kit-scope .ds-switch input:disabled ~ label {
        color: rgba(0, 0, 0, 0.16); }
      .ds-ui-kit-scope .ds-checkbox input:focus ~ label:before,
      .ds-ui-kit-scope .ds-radio input:focus ~ label:before,
      .ds-ui-kit-scope .ds-switch input:focus ~ label:before {
        border-color: #239de8; }
  .ds-ui-kit-scope .ds-checkbox label:before {
    border-radius: 4px; }
  .ds-ui-kit-scope .ds-checkbox label:after {
    opacity: 0;
    transition: opacity ease-out .2s;
    will-change: opacity; }
  .ds-ui-kit-scope .ds-checkbox input:checked ~ label:after {
    font-family: 'icon';
    content: '\e90e';
    width: 20px;
    height: 20px;
    margin-top: -9px;
    text-align: center;
    opacity: 1;
    color: #239de8; }
  .ds-ui-kit-scope .ds-radio label:before {
    border-radius: 100%;
    background-color: #fff;
    transition: border-color ease-out .2s;
    will-change: border-color; }
  .ds-ui-kit-scope .ds-radio label:after {
    opacity: 0;
    transition: opacity ease-out .2s;
    will-change: opacity; }
  .ds-ui-kit-scope .ds-radio input:checked ~ label:after {
    background-color: #239de8;
    width: 14px;
    height: 14px;
    top: 50%;
    left: 3px;
    margin-top: -8px;
    border-radius: 100%;
    opacity: 1; }
  .ds-ui-kit-scope .ds-switch label {
    padding-left: 56px; }
    .ds-ui-kit-scope .ds-switch label:before {
      border-radius: 40px;
      height: 24px;
      width: 40px;
      margin-top: -12px;
      background-color: rgba(0, 0, 0, 0.16);
      border: 0;
      transition: background-color ease-out .2s;
      will-change: background-color; }
    .ds-ui-kit-scope .ds-switch label:after {
      background-color: #fff;
      width: 20px;
      height: 20px;
      top: 50%;
      left: 2px;
      margin-top: -10px;
      border-radius: 100%;
      transition: left ease-out .2s;
      will-change: left; }
  .ds-ui-kit-scope .ds-switch input:checked ~ label:before {
    background-color: #239de8; }
  .ds-ui-kit-scope .ds-switch input:checked ~ label:after {
    top: 50%;
    left: 18px; }
  .ds-ui-kit-scope .ds-switch input:focus ~ label:after {
    background-color: #239de8;
    box-shadow: #fff 0 0 0 8px inset, rgba(0, 0, 0, 0.48) 0 3px 8px; }
  .ds-ui-kit-scope .ds-select {
    position: relative;
    margin-bottom: 16px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #fff;
    border-radius: 4px; }
    .ds-ui-kit-scope .ds-select:focus, .ds-ui-kit-scope .ds-select.has-focus {
      border-color: #239de8; }
    .ds-ui-kit-scope .ds-select:after {
      content: '\e939';
      position: absolute;
      right: 0;
      top: 0;
      font-family: 'icon';
      font-size: 16px;
      line-height: 1;
      color: rgba(0, 0, 0, 0.48);
      pointer-events: none;
      background-color: #fff;
      width: 56px;
      text-align: center;
      line-height: 56px;
      border-radius: 4px; }
    .ds-ui-kit-scope .ds-select select {
      display: block;
      width: 100%;
      height: 56px;
      border: 0;
      box-shadow: none;
      background: none;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      font-size: 15px;
      font-weight: 300;
      padding-left: 16px;
      padding-right: 56px;
      color: rgba(0, 0, 0, 0.8);
      background-color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .ds-ui-kit-scope .ds-select select::-ms-expand {
        display: none; }
      .ds-ui-kit-scope .ds-select select:focus::-ms-value {
        background-color: transparent;
        color: rgba(0, 0, 0, 0.8); }
      .ds-ui-kit-scope .ds-select select.has-placeholder {
        color: rgba(0, 0, 0, 0.48); }
  .ds-ui-kit-scope .ds-select__placeholder {
    display: none;
    height: 56px;
    line-height: 56px;
    font-weight: 300;
    padding-left: 16px;
    color: rgba(0, 0, 0, 0.48);
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80%; }
    .ds-ui-kit-scope .ds-select__placeholder.has-changed {
      color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .ds-select__list {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    width: 100%;
    width: calc(100% + 2px);
    max-height: 230px;
    overflow: scroll;
    overflow-x: hidden;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 16px 0;
    margin-top: 1px;
    z-index: 1; }
  .ds-ui-kit-scope .ds-select--checkbox select {
    min-height: 56px;
    height: auto;
    padding: 16px; }
  .ds-ui-kit-scope .ds-select--checkbox.is-open {
    border-color: #239de8;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
    .ds-ui-kit-scope .ds-select--checkbox.is-open .ds-select__list {
      display: block; }
    .ds-ui-kit-scope .ds-select--checkbox.is-open:after {
      content: '\e935'; }
  .ds-ui-kit-scope .ds-select--checkbox.is-enabled {
    overflow: visible; }
    .ds-ui-kit-scope .ds-select--checkbox.is-enabled select {
      display: none; }
    .ds-ui-kit-scope .ds-select--checkbox.is-enabled .ds-select__placeholder {
      display: block; }
  .ds-ui-kit-scope .ds-select--checkbox .ds-checkbox {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 32px 0 8px; }
    .ds-ui-kit-scope .ds-select--checkbox .ds-checkbox.has-keyboard {
      background-color: rgba(0, 0, 0, 0.08); }
    .ds-ui-kit-scope .ds-select--checkbox .ds-checkbox input:checked + label {
      color: #239de8; }
    .ds-ui-kit-scope .ds-select--checkbox .ds-checkbox label {
      padding: 13px 0 12px 26px;
      width: 100%; }
      .ds-ui-kit-scope .ds-select--checkbox .ds-checkbox label:before {
        border: 0; }
  .ds-ui-kit-scope .flatpickr-calendar {
    background: transparent;
    overflow: hidden;
    max-height: 0;
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    padding: 0;
    -webkit-animation: none;
    animation: none;
    direction: ltr;
    border: 0;
    font-size: 14px;
    line-height: 24px;
    border-radius: 5px;
    position: absolute;
    width: 307.875px;
    box-sizing: border-box;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    background: #fff;
    box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); }
  .ds-ui-kit-scope .flatpickr-calendar.open,
  .ds-ui-kit-scope .flatpickr-calendar.inline {
    opacity: 1;
    visibility: visible;
    overflow: visible;
    overflow: hidden;
    max-height: 640px;
    max-width: 380px; }
  .ds-ui-kit-scope .flatpickr-calendar.open {
    display: inline-block;
    z-index: 9; }
  .ds-ui-kit-scope .flatpickr-calendar.animate.open {
    -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
    animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); }
  .ds-ui-kit-scope .flatpickr-calendar.inline {
    display: block;
    position: relative;
    top: 2px; }
  .ds-ui-kit-scope .flatpickr-calendar.static {
    position: absolute;
    top: calc(100% + 2px); }
  .ds-ui-kit-scope .flatpickr-calendar.static.open {
    z-index: 9;
    display: block; }
  .ds-ui-kit-scope .flatpickr-calendar.hasWeeks {
    width: auto; }
  .ds-ui-kit-scope .flatpickr-calendar .hasWeeks .dayContainer,
  .ds-ui-kit-scope .flatpickr-calendar .hasTime .dayContainer {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0; }
  .ds-ui-kit-scope .flatpickr-calendar .hasWeeks .dayContainer {
    border-left: 0; }
  .ds-ui-kit-scope .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
    height: 40px;
    border-top: 1px solid #e6e6e6; }
  .ds-ui-kit-scope .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
    height: auto; }
  .ds-ui-kit-scope .flatpickr-calendar:before,
  .ds-ui-kit-scope .flatpickr-calendar:after {
    position: absolute;
    display: block;
    pointer-events: none;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    left: 22px; }
  .ds-ui-kit-scope .flatpickr-calendar.rightMost:before,
  .ds-ui-kit-scope .flatpickr-calendar.rightMost:after {
    left: auto;
    right: 22px; }
  .ds-ui-kit-scope .flatpickr-calendar:before {
    border-width: 5px;
    margin: 0 -5px; }
  .ds-ui-kit-scope .flatpickr-calendar:after {
    border-width: 4px;
    margin: 0 -4px; }
  .ds-ui-kit-scope .flatpickr-calendar.arrowTop:before,
  .ds-ui-kit-scope .flatpickr-calendar.arrowTop:after {
    bottom: 100%; }
  .ds-ui-kit-scope .flatpickr-calendar.arrowTop:before {
    border-bottom-color: #e6e6e6; }
  .ds-ui-kit-scope .flatpickr-calendar.arrowTop:after {
    border-bottom-color: #fff; }
  .ds-ui-kit-scope .flatpickr-calendar.arrowBottom:before,
  .ds-ui-kit-scope .flatpickr-calendar.arrowBottom:after {
    top: 100%; }
  .ds-ui-kit-scope .flatpickr-calendar.arrowBottom:before {
    border-top-color: #e6e6e6; }
  .ds-ui-kit-scope .flatpickr-calendar.arrowBottom:after {
    border-top-color: #fff; }
  .ds-ui-kit-scope .flatpickr-calendar:focus {
    outline: 0; }
  .ds-ui-kit-scope .flatpickr-wrapper {
    position: relative;
    display: inline-block; }
  .ds-ui-kit-scope .flatpickr-month {
    background: transparent;
    color: rgba(0, 0, 0, 0.9);
    fill: rgba(0, 0, 0, 0.9);
    height: 28px;
    line-height: 1;
    text-align: center;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden; }
  .ds-ui-kit-scope .flatpickr-prev-month,
  .ds-ui-kit-scope .flatpickr-next-month {
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    top: 0px;
    line-height: 16px;
    height: 28px;
    padding: 10px calc(3.57% - 1.5px);
    z-index: 3; }
  .ds-ui-kit-scope .flatpickr-prev-month i,
  .ds-ui-kit-scope .flatpickr-next-month i {
    position: relative; }
  .ds-ui-kit-scope .flatpickr-prev-month.flatpickr-prev-month,
  .ds-ui-kit-scope .flatpickr-next-month.flatpickr-prev-month {
    /*
        /*rtl:begin:ignore*/
    /*
        */
    left: 0;
    /*
        /*rtl:end:ignore*/
    /*
        */ }
  .ds-ui-kit-scope .flatpickr-prev-month.flatpickr-next-month,
  .ds-ui-kit-scope .flatpickr-next-month.flatpickr-next-month {
    /*
        /*rtl:begin:ignore*/
    /*
        */
    right: 0;
    /*
        /*rtl:end:ignore*/
    /*
        */ }
  .ds-ui-kit-scope .flatpickr-prev-month:hover,
  .ds-ui-kit-scope .flatpickr-next-month:hover {
    color: #959ea9; }
  .ds-ui-kit-scope .flatpickr-prev-month:hover svg,
  .ds-ui-kit-scope .flatpickr-next-month:hover svg {
    fill: #f64747; }
  .ds-ui-kit-scope .flatpickr-prev-month svg,
  .ds-ui-kit-scope .flatpickr-next-month svg {
    width: 14px; }
  .ds-ui-kit-scope .flatpickr-prev-month svg path,
  .ds-ui-kit-scope .flatpickr-next-month svg path {
    transition: fill 0.1s;
    fill: inherit; }
  .ds-ui-kit-scope .numInputWrapper {
    position: relative;
    height: auto; }
  .ds-ui-kit-scope .numInputWrapper input,
  .ds-ui-kit-scope .numInputWrapper span {
    display: inline-block; }
  .ds-ui-kit-scope .numInputWrapper input {
    width: 100%; }
  .ds-ui-kit-scope .numInputWrapper span {
    position: absolute;
    right: 0;
    width: 14px;
    padding: 0 4px 0 2px;
    height: 50%;
    line-height: 50%;
    opacity: 0;
    cursor: pointer;
    border: 1px solid rgba(57, 57, 57, 0.05);
    box-sizing: border-box; }
  .ds-ui-kit-scope .numInputWrapper span:hover {
    background: rgba(0, 0, 0, 0.1); }
  .ds-ui-kit-scope .numInputWrapper span:active {
    background: rgba(0, 0, 0, 0.2); }
  .ds-ui-kit-scope .numInputWrapper span:after {
    display: block;
    content: "";
    position: absolute;
    top: 33%; }
  .ds-ui-kit-scope .numInputWrapper span.arrowUp {
    top: 0;
    border-bottom: 0; }
  .ds-ui-kit-scope .numInputWrapper span.arrowUp:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(57, 57, 57, 0.6); }
  .ds-ui-kit-scope .numInputWrapper span.arrowDown {
    top: 50%; }
  .ds-ui-kit-scope .numInputWrapper span.arrowDown:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid rgba(57, 57, 57, 0.6); }
  .ds-ui-kit-scope .numInputWrapper span svg {
    width: inherit;
    height: auto; }
  .ds-ui-kit-scope .numInputWrapper span svg path {
    fill: rgba(0, 0, 0, 0.5); }
  .ds-ui-kit-scope .numInputWrapper:hover {
    color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .numInputWrapper:hover span {
    opacity: 1; }
  .ds-ui-kit-scope .flatpickr-current-month {
    font-size: 135%;
    line-height: inherit;
    font-weight: 300;
    color: inherit;
    position: absolute;
    width: 75%;
    left: 12.5%;
    padding: 6.16px 0 0 0;
    line-height: 1;
    height: 28px;
    display: inline-block;
    text-align: center;
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px); }
  .ds-ui-kit-scope .flatpickr-current-month.slideLeft {
    -webkit-transform: translate3d(-100%, 0px, 0px);
    transform: translate3d(-100%, 0px, 0px);
    -webkit-animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
    animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); }
  .ds-ui-kit-scope .flatpickr-current-month.slideLeftNew {
    -webkit-transform: translate3d(100%, 0px, 0px);
    transform: translate3d(100%, 0px, 0px);
    -webkit-animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
    animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1); }
  .ds-ui-kit-scope .flatpickr-current-month.slideRight {
    -webkit-transform: translate3d(100%, 0px, 0px);
    transform: translate3d(100%, 0px, 0px);
    -webkit-animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
    animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1); }
  .ds-ui-kit-scope .flatpickr-current-month.slideRightNew {
    -webkit-transform: translate3d(0, 0, 0px);
    transform: translate3d(0, 0, 0px);
    -webkit-animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
    animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); }
  .ds-ui-kit-scope .flatpickr-current-month span.cur-month {
    font-family: inherit;
    font-weight: 700;
    color: inherit;
    display: inline-block;
    margin-left: 0.5ch;
    padding: 0; }
  .ds-ui-kit-scope .flatpickr-current-month span.cur-month:hover {
    cursor: default; }
  .ds-ui-kit-scope .flatpickr-current-month .numInputWrapper {
    width: 6ch;
    width: 7ch\0;
    display: inline-block; }
  .ds-ui-kit-scope .flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: rgba(0, 0, 0, 0.9); }
  .ds-ui-kit-scope .flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: rgba(0, 0, 0, 0.9); }
  .ds-ui-kit-scope .flatpickr-current-month input.cur-year {
    background: transparent;
    box-sizing: border-box;
    color: inherit;
    cursor: default;
    padding: 0 0 0 0.5ch;
    margin: 0;
    display: inline-block;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    line-height: inherit;
    height: initial;
    border: 0;
    border-radius: 0;
    vertical-align: initial;
    pointer-events: none; }
  .ds-ui-kit-scope .flatpickr-current-month input.cur-year:focus {
    outline: 0; }
  .ds-ui-kit-scope .flatpickr-current-month input.cur-year[disabled],
  .ds-ui-kit-scope .flatpickr-current-month input.cur-year[disabled]:hover {
    font-size: 100%;
    color: rgba(0, 0, 0, 0.5);
    background: transparent;
    pointer-events: none; }
  .ds-ui-kit-scope .flatpickr-weekdays {
    background: transparent;
    text-align: center;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 28px; }
  .ds-ui-kit-scope span.flatpickr-weekday {
    cursor: default;
    font-size: 90%;
    background: transparent;
    color: rgba(0, 0, 0, 0.54);
    line-height: 1;
    margin: 0;
    text-align: center;
    display: inline-block;
    width: 14%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-weight: bolder; }
  .ds-ui-kit-scope .dayContainer,
  .ds-ui-kit-scope .flatpickr-weeks {
    padding: 1px 0 0 0; }
  .ds-ui-kit-scope .flatpickr-days {
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 307.875px; }
  .ds-ui-kit-scope .flatpickr-days:focus {
    outline: 0; }
  .ds-ui-kit-scope .dayContainer {
    padding: 0;
    outline: 0;
    text-align: left;
    width: 307.875px;
    min-width: 307.875px;
    max-width: 307.875px;
    box-sizing: border-box;
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-around;
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    opacity: 1; }
  .ds-ui-kit-scope .flatpickr-calendar.animate .dayContainer.slideLeft {
    -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
    animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); }
  .ds-ui-kit-scope .flatpickr-calendar.animate .dayContainer.slideLeft,
  .ds-ui-kit-scope .flatpickr-calendar.animate .dayContainer.slideLeftNew {
    -webkit-transform: translate3d(-100%, 0px, 0px);
    transform: translate3d(-100%, 0px, 0px); }
  .ds-ui-kit-scope .flatpickr-calendar.animate .dayContainer.slideLeftNew {
    -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
    animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); }
  .ds-ui-kit-scope .flatpickr-calendar.animate .dayContainer.slideRight {
    -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
    animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: translate3d(100%, 0px, 0px);
    transform: translate3d(100%, 0px, 0px); }
  .ds-ui-kit-scope .flatpickr-calendar.animate .dayContainer.slideRightNew {
    -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
    animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); }
  .ds-ui-kit-scope .flatpickr-day {
    background: none;
    border: 1px solid transparent;
    border-radius: 150px;
    box-sizing: border-box;
    color: #393939;
    cursor: pointer;
    font-weight: 400;
    width: 14.2857143%;
    -ms-flex-preferred-size: 14.2857143%;
    flex-basis: 14.2857143%;
    max-width: 39px;
    height: 39px;
    line-height: 39px;
    margin: 0;
    display: inline-block;
    position: relative;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center; }
  .ds-ui-kit-scope .flatpickr-day.inRange,
  .ds-ui-kit-scope .flatpickr-day.prevMonthDay.inRange,
  .ds-ui-kit-scope .flatpickr-day.nextMonthDay.inRange,
  .ds-ui-kit-scope .flatpickr-day.today.inRange,
  .ds-ui-kit-scope .flatpickr-day.prevMonthDay.today.inRange,
  .ds-ui-kit-scope .flatpickr-day.nextMonthDay.today.inRange,
  .ds-ui-kit-scope .flatpickr-day:hover,
  .ds-ui-kit-scope .flatpickr-day.prevMonthDay:hover,
  .ds-ui-kit-scope .flatpickr-day.nextMonthDay:hover,
  .ds-ui-kit-scope .flatpickr-day:focus,
  .ds-ui-kit-scope .flatpickr-day.prevMonthDay:focus,
  .ds-ui-kit-scope .flatpickr-day.nextMonthDay:focus {
    cursor: pointer;
    outline: 0;
    background: #e6e6e6;
    border-color: #e6e6e6; }
  .ds-ui-kit-scope .flatpickr-day.today {
    border-color: #959ea9; }
  .ds-ui-kit-scope .flatpickr-day.today:hover,
  .ds-ui-kit-scope .flatpickr-day.today:focus {
    border-color: #959ea9;
    background: #959ea9;
    color: #fff; }
  .ds-ui-kit-scope .flatpickr-day.selected,
  .ds-ui-kit-scope .flatpickr-day.startRange,
  .ds-ui-kit-scope .flatpickr-day.endRange,
  .ds-ui-kit-scope .flatpickr-day.selected.inRange,
  .ds-ui-kit-scope .flatpickr-day.startRange.inRange,
  .ds-ui-kit-scope .flatpickr-day.endRange.inRange,
  .ds-ui-kit-scope .flatpickr-day.selected:focus,
  .ds-ui-kit-scope .flatpickr-day.startRange:focus,
  .ds-ui-kit-scope .flatpickr-day.endRange:focus,
  .ds-ui-kit-scope .flatpickr-day.selected:hover,
  .ds-ui-kit-scope .flatpickr-day.startRange:hover,
  .ds-ui-kit-scope .flatpickr-day.endRange:hover,
  .ds-ui-kit-scope .flatpickr-day.selected.prevMonthDay,
  .ds-ui-kit-scope .flatpickr-day.startRange.prevMonthDay,
  .ds-ui-kit-scope .flatpickr-day.endRange.prevMonthDay,
  .ds-ui-kit-scope .flatpickr-day.selected.nextMonthDay,
  .ds-ui-kit-scope .flatpickr-day.startRange.nextMonthDay,
  .ds-ui-kit-scope .flatpickr-day.endRange.nextMonthDay {
    background: #569ff7;
    box-shadow: none;
    color: #fff;
    border-color: #569ff7; }
  .ds-ui-kit-scope .flatpickr-day.selected.startRange,
  .ds-ui-kit-scope .flatpickr-day.startRange.startRange,
  .ds-ui-kit-scope .flatpickr-day.endRange.startRange {
    border-radius: 50px 0 0 50px; }
  .ds-ui-kit-scope .flatpickr-day.selected.endRange,
  .ds-ui-kit-scope .flatpickr-day.startRange.endRange,
  .ds-ui-kit-scope .flatpickr-day.endRange.endRange {
    border-radius: 0 50px 50px 0; }
  .ds-ui-kit-scope .flatpickr-day.selected.startRange + .endRange,
  .ds-ui-kit-scope .flatpickr-day.startRange.startRange + .endRange,
  .ds-ui-kit-scope .flatpickr-day.endRange.startRange + .endRange {
    box-shadow: -10px 0 0 #569ff7; }
  .ds-ui-kit-scope .flatpickr-day.selected.startRange.endRange,
  .ds-ui-kit-scope .flatpickr-day.startRange.startRange.endRange,
  .ds-ui-kit-scope .flatpickr-day.endRange.startRange.endRange {
    border-radius: 50px; }
  .ds-ui-kit-scope .flatpickr-day.inRange {
    border-radius: 0;
    box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; }
  .ds-ui-kit-scope .flatpickr-day.disabled,
  .ds-ui-kit-scope .flatpickr-day.disabled:hover {
    pointer-events: none; }
  .ds-ui-kit-scope .flatpickr-day.disabled,
  .ds-ui-kit-scope .flatpickr-day.disabled:hover,
  .ds-ui-kit-scope .flatpickr-day.prevMonthDay,
  .ds-ui-kit-scope .flatpickr-day.nextMonthDay,
  .ds-ui-kit-scope .flatpickr-day.notAllowed,
  .ds-ui-kit-scope .flatpickr-day.notAllowed.prevMonthDay,
  .ds-ui-kit-scope .flatpickr-day.notAllowed.nextMonthDay {
    color: rgba(57, 57, 57, 0.3);
    background: transparent;
    border-color: transparent;
    cursor: default; }
  .ds-ui-kit-scope .flatpickr-day.week.selected {
    border-radius: 0;
    box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; }
  .ds-ui-kit-scope .rangeMode .flatpickr-day {
    margin-top: 1px; }
  .ds-ui-kit-scope .flatpickr-weekwrapper {
    display: inline-block;
    float: left; }
  .ds-ui-kit-scope .flatpickr-weekwrapper .flatpickr-weeks {
    padding: 0 12px;
    box-shadow: 1px 0 0 #e6e6e6; }
  .ds-ui-kit-scope .flatpickr-weekwrapper .flatpickr-weekday {
    float: none;
    width: 100%;
    line-height: 28px; }
  .ds-ui-kit-scope .flatpickr-weekwrapper span.flatpickr-day {
    display: block;
    width: 100%;
    max-width: none; }
  .ds-ui-kit-scope .flatpickr-innerContainer {
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
    overflow: hidden; }
  .ds-ui-kit-scope .flatpickr-rContainer {
    display: inline-block;
    padding: 0;
    box-sizing: border-box; }
  .ds-ui-kit-scope .flatpickr-time {
    text-align: center;
    outline: 0;
    display: block;
    height: 0;
    line-height: 40px;
    max-height: 40px;
    box-sizing: border-box;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .ds-ui-kit-scope .flatpickr-time:after {
    content: "";
    display: table;
    clear: both; }
  .ds-ui-kit-scope .flatpickr-time .numInputWrapper {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 40%;
    height: 40px;
    float: left; }
  .ds-ui-kit-scope .flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: #393939; }
  .ds-ui-kit-scope .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: #393939; }
  .ds-ui-kit-scope .flatpickr-time.hasSeconds .numInputWrapper {
    width: 26%; }
  .ds-ui-kit-scope .flatpickr-time.time24hr .numInputWrapper {
    width: 49%; }
  .ds-ui-kit-scope .flatpickr-time input {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    text-align: center;
    margin: 0;
    padding: 0;
    height: inherit;
    line-height: inherit;
    cursor: pointer;
    color: #393939;
    font-size: 14px;
    position: relative;
    box-sizing: border-box; }
  .ds-ui-kit-scope .flatpickr-time input.flatpickr-hour {
    font-weight: bold; }
  .ds-ui-kit-scope .flatpickr-time input.flatpickr-minute,
  .ds-ui-kit-scope .flatpickr-time input.flatpickr-second {
    font-weight: 400; }
  .ds-ui-kit-scope .flatpickr-time input:focus {
    outline: 0;
    border: 0; }
  .ds-ui-kit-scope .flatpickr-time .flatpickr-time-separator,
  .ds-ui-kit-scope .flatpickr-time .flatpickr-am-pm {
    height: inherit;
    display: inline-block;
    float: left;
    line-height: inherit;
    color: #393939;
    font-weight: bold;
    width: 2%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-flex-item-align: center;
    align-self: center; }
  .ds-ui-kit-scope .flatpickr-time .flatpickr-am-pm {
    outline: 0;
    width: 18%;
    cursor: pointer;
    text-align: center;
    font-weight: 400; }
  .ds-ui-kit-scope .flatpickr-time .flatpickr-am-pm:hover,
  .ds-ui-kit-scope .flatpickr-time .flatpickr-am-pm:focus {
    background: #f0f0f0; }
  .ds-ui-kit-scope .flatpickr-input[readonly] {
    cursor: pointer; }

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@-webkit-keyframes fpSlideLeft {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px); }
  to {
    -webkit-transform: translate3d(-100%, 0px, 0px);
    transform: translate3d(-100%, 0px, 0px); } }

@keyframes fpSlideLeft {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px); }
  to {
    -webkit-transform: translate3d(-100%, 0px, 0px);
    transform: translate3d(-100%, 0px, 0px); } }

@-webkit-keyframes fpSlideLeftNew {
  from {
    -webkit-transform: translate3d(100%, 0px, 0px);
    transform: translate3d(100%, 0px, 0px); }
  to {
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px); } }

@keyframes fpSlideLeftNew {
  from {
    -webkit-transform: translate3d(100%, 0px, 0px);
    transform: translate3d(100%, 0px, 0px); }
  to {
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px); } }

@-webkit-keyframes fpSlideRight {
  from {
    -webkit-transform: translate3d(0, 0, 0px);
    transform: translate3d(0, 0, 0px); }
  to {
    -webkit-transform: translate3d(100%, 0px, 0px);
    transform: translate3d(100%, 0px, 0px); } }

@keyframes fpSlideRight {
  from {
    -webkit-transform: translate3d(0, 0, 0px);
    transform: translate3d(0, 0, 0px); }
  to {
    -webkit-transform: translate3d(100%, 0px, 0px);
    transform: translate3d(100%, 0px, 0px); } }

@-webkit-keyframes fpSlideRightNew {
  from {
    -webkit-transform: translate3d(-100%, 0, 0px);
    transform: translate3d(-100%, 0, 0px); }
  to {
    -webkit-transform: translate3d(0, 0, 0px);
    transform: translate3d(0, 0, 0px); } }

@keyframes fpSlideRightNew {
  from {
    -webkit-transform: translate3d(-100%, 0, 0px);
    transform: translate3d(-100%, 0, 0px); }
  to {
    -webkit-transform: translate3d(0, 0, 0px);
    transform: translate3d(0, 0, 0px); } }

@-webkit-keyframes fpFadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fpFadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-webkit-keyframes fpFadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fpFadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
  .ds-ui-kit-scope .flatpickr-calendar {
    font-size: 15px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 9px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 26px 32px 28px;
    width: auto;
    display: none; }
    .ds-ui-kit-scope .flatpickr-calendar:after, .ds-ui-kit-scope .flatpickr-calendar:before {
      display: none; }
    .ds-ui-kit-scope .flatpickr-calendar.arrowTop {
      margin-top: 14px; }
    .ds-ui-kit-scope .flatpickr-calendar.arrowBottom {
      margin-top: -14px; }
    .ds-ui-kit-scope .flatpickr-calendar.open {
      display: block; }
  .ds-ui-kit-scope .flatpickr-day {
    color: rgba(0, 0, 0, 0.8);
    border: 0;
    max-width: 40px;
    height: 40px;
    line-height: 41px;
    font-weight: 300;
    margin-bottom: 4px; }
    .ds-ui-kit-scope .flatpickr-day:hover {
      background-color: #f5f5f5; }
    .ds-ui-kit-scope .flatpickr-day.selected {
      position: relative;
      z-index: 1;
      font-weight: 400;
      background-color: #239de8; }
      .ds-ui-kit-scope .flatpickr-day.selected:hover {
        background-color: #239de8; }
      .ds-ui-kit-scope .flatpickr-day.selected.disabled {
        color: #fff; }
    .ds-ui-kit-scope .flatpickr-day.disabled {
      color: rgba(0, 0, 0, 0.16); }
    .ds-ui-kit-scope .flatpickr-day.nextMonthDay {
      color: rgba(0, 0, 0, 0.32); }
      .ds-ui-kit-scope .flatpickr-day.nextMonthDay:hover {
        background-color: #f5f5f5; }
    .ds-ui-kit-scope .flatpickr-day.today {
      border: 0;
      font-weight: 600; }
      .ds-ui-kit-scope .flatpickr-day.today:hover {
        background-color: #f5f5f5;
        color: inherit; }
      .ds-ui-kit-scope .flatpickr-day.today.selected:hover {
        background-color: #239de8;
        color: #fff; }
    .ds-ui-kit-scope .flatpickr-day.inRangeHover {
      border-radius: 0; }
      .ds-ui-kit-scope .flatpickr-day.inRangeHover.last {
        box-shadow: -5px 0 0 #f5f5f5, 0px 0 0 #f5f5f5;
        border-top-right-radius: 150px;
        border-bottom-right-radius: 150px; }
    .ds-ui-kit-scope .flatpickr-day.inRangeHover {
      background-color: #f5f5f5;
      box-shadow: -5px 0 0 #f5f5f5, 20px 0 0 #f5f5f5; }
      .ds-ui-kit-scope .flatpickr-day.inRangeHover:hover {
        background-color: #f5f5f5; }
    .ds-ui-kit-scope .flatpickr-day.selected + .inRangeHover {
      box-shadow: -20px 0 0 #f5f5f5, 20px 0 0 #f5f5f5; }
      .ds-ui-kit-scope .flatpickr-day.selected + .inRangeHover.last {
        box-shadow: -20px 0 0 #f5f5f5, 0px 0 0 #f5f5f5; }
    .ds-ui-kit-scope .flatpickr-day.inRange, .ds-ui-kit-scope .flatpickr-day.nextMonthDay.inRange, .ds-ui-kit-scope .flatpickr-day.prevMonthDay.inRange {
      background-color: #EEF8FE;
      box-shadow: -5px 0 0 #EEF8FE, 20px 0 0 #EEF8FE; }
    .ds-ui-kit-scope .flatpickr-day.selected + .inRange {
      box-shadow: -20px 0 0 #EEF8FE, 20px 0 0 #EEF8FE; }
    .ds-ui-kit-scope .flatpickr-day.selected.end.inRangeHover {
      background-color: #239de8;
      border-radius: 150px;
      box-shadow: none; }
  .ds-ui-kit-scope .flatpickr-month {
    margin-bottom: 30px;
    color: rgba(0, 0, 0, 0.48); }
  .ds-ui-kit-scope .flatpickr-current-month {
    font-size: 18px; }
    .ds-ui-kit-scope .flatpickr-current-month span.cur-month,
    .ds-ui-kit-scope .flatpickr-current-month input.cur-year {
      font-weight: 400; }
  .ds-ui-kit-scope .flatpickr-weekdays {
    margin-bottom: 20px; }
  .ds-ui-kit-scope span.flatpickr-weekday {
    font-weight: 600;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.32); }
  .ds-ui-kit-scope .flatpickr-prev-month:hover,
  .ds-ui-kit-scope .flatpickr-next-month:hover　 {
    color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .ds-input input.flatpickr-input.active {
    border-color: #239de8; }
  .ds-ui-kit-scope .ds-picker-range {
    display: table;
    width: 100%; }
    .ds-ui-kit-scope .ds-picker-range > div {
      display: block;
      vertical-align: middle; }
    .ds-ui-kit-scope .ds-picker-range .ds-input {
      width: 100%; }
    .ds-ui-kit-scope .ds-picker-range .ds-ico-right-mini {
      display: none;
      width: 32px;
      line-height: 56px;
      text-align: center;
      color: rgba(0, 0, 0, 0.32); }
  @media (min-width: 721px) {
    .ds-ui-kit-scope .flatpickr-calendar {
      display: block; }
    .ds-ui-kit-scope .ds-picker-range > div {
      display: table-cell; }
    .ds-ui-kit-scope .ds-picker-range .ds-input {
      width: 50%; }
    .ds-ui-kit-scope .ds-picker-range .ds-ico-right-mini {
      display: block; } }
  .ds-ui-kit-scope .noUi-target,
  .ds-ui-kit-scope .noUi-target * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
            user-select: none;
    box-sizing: border-box; }
  .ds-ui-kit-scope .noUi-target {
    position: relative;
    direction: ltr; }
  .ds-ui-kit-scope .noUi-base {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    /* Fix 401 */ }
  .ds-ui-kit-scope .noUi-connect {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0; }
  .ds-ui-kit-scope .noUi-origin {
    position: absolute;
    height: 0;
    width: 0; }
  .ds-ui-kit-scope .noUi-handle {
    position: relative;
    z-index: 1; }
  .ds-ui-kit-scope .noUi-state-tap .noUi-connect,
  .ds-ui-kit-scope .noUi-state-tap .noUi-origin {
    transition: top .3s, right .3s, bottom .3s, left .3s; }
  .ds-ui-kit-scope .noUi-state-drag * {
    cursor: inherit !important; }
  .ds-ui-kit-scope .noUi-base,
  .ds-ui-kit-scope .noUi-handle {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  .ds-ui-kit-scope .noUi-horizontal {
    height: 18px; }
  .ds-ui-kit-scope .noUi-horizontal .noUi-handle {
    width: 34px;
    height: 28px;
    left: -17px;
    top: -6px; }
  .ds-ui-kit-scope .noUi-vertical {
    width: 18px; }
  .ds-ui-kit-scope .noUi-vertical .noUi-handle {
    width: 28px;
    height: 34px;
    left: -6px;
    top: -17px; }
  .ds-ui-kit-scope .noUi-target {
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid #D3D3D3;
    box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; }
  .ds-ui-kit-scope .noUi-connect {
    background: #3FB8AF;
    border-radius: 4px;
    box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
    transition: background 450ms; }
  .ds-ui-kit-scope .noUi-draggable {
    cursor: ew-resize; }
  .ds-ui-kit-scope .noUi-vertical .noUi-draggable {
    cursor: ns-resize; }
  .ds-ui-kit-scope .noUi-handle {
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    background: #FFF;
    cursor: default;
    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; }
  .ds-ui-kit-scope .noUi-active {
    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; }
  .ds-ui-kit-scope .noUi-handle:before,
  .ds-ui-kit-scope .noUi-handle:after {
    content: '';
    display: block;
    position: absolute;
    height: 14px;
    width: 1px;
    background: #E8E7E6;
    left: 14px;
    top: 6px; }
  .ds-ui-kit-scope .noUi-handle:after {
    left: 17px; }
  .ds-ui-kit-scope .noUi-vertical .noUi-handle:before,
  .ds-ui-kit-scope .noUi-vertical .noUi-handle:after {
    width: 14px;
    height: 1px;
    left: 6px;
    top: 14px; }
  .ds-ui-kit-scope .noUi-vertical .noUi-handle:after {
    top: 17px; }
  .ds-ui-kit-scope [disabled] .noUi-connect {
    background: #B8B8B8; }
  .ds-ui-kit-scope [disabled].noUi-target,
  .ds-ui-kit-scope [disabled].noUi-handle,
  .ds-ui-kit-scope [disabled] .noUi-handle {
    cursor: not-allowed;
    pointer-events: none; }
  .ds-ui-kit-scope .noUi-pips,
  .ds-ui-kit-scope .noUi-pips * {
    box-sizing: border-box; }
  .ds-ui-kit-scope .noUi-pips {
    position: absolute;
    color: #999; }
  .ds-ui-kit-scope .noUi-value {
    position: absolute;
    white-space: nowrap;
    text-align: center; }
  .ds-ui-kit-scope .noUi-value-sub {
    color: #ccc;
    font-size: 10px; }
  .ds-ui-kit-scope .noUi-marker {
    position: absolute;
    background: #CCC; }
  .ds-ui-kit-scope .noUi-marker-sub {
    background: #AAA; }
  .ds-ui-kit-scope .noUi-marker-large {
    background: #AAA; }
  .ds-ui-kit-scope .noUi-pips-horizontal {
    padding: 10px 0;
    height: 80px;
    top: 100%;
    left: 0;
    width: 100%; }
  .ds-ui-kit-scope .noUi-marker-horizontal.noUi-marker {
    margin-left: -1px;
    width: 2px;
    height: 5px; }
  .ds-ui-kit-scope .noUi-marker-horizontal.noUi-marker-sub {
    height: 10px; }
  .ds-ui-kit-scope .noUi-marker-horizontal.noUi-marker-large {
    height: 15px; }
  .ds-ui-kit-scope .noUi-pips-vertical {
    padding: 0 10px;
    height: 100%;
    top: 0;
    left: 100%; }
  .ds-ui-kit-scope .noUi-value-vertical {
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    padding-left: 25px; }
  .ds-ui-kit-scope .noUi-marker-vertical.noUi-marker {
    width: 5px;
    height: 2px;
    margin-top: -1px; }
  .ds-ui-kit-scope .noUi-marker-vertical.noUi-marker-sub {
    width: 10px; }
  .ds-ui-kit-scope .noUi-marker-vertical.noUi-marker-large {
    width: 15px; }
  .ds-ui-kit-scope .noUi-tooltip {
    display: block;
    position: absolute;
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    background: #fff;
    color: #000;
    padding: 5px;
    text-align: center;
    white-space: nowrap; }
  .ds-ui-kit-scope .noUi-horizontal .noUi-tooltip {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    left: 50%;
    bottom: 120%; }
  .ds-ui-kit-scope .noUi-vertical .noUi-tooltip {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
    top: 50%;
    right: 120%; }
  .ds-ui-kit-scope .noUi-target {
    border: 0;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.16);
    border-radius: 120px; }
    .ds-ui-kit-scope .noUi-target[disabled], .ds-ui-kit-scope .noUi-target.is-unsetted[disabled] {
      background-color: #ebebeb; }
      .ds-ui-kit-scope .noUi-target[disabled] .noUi-connect, .ds-ui-kit-scope .noUi-target.is-unsetted[disabled] .noUi-connect {
        display: none; }
      .ds-ui-kit-scope .noUi-target[disabled] .noUi-handle, .ds-ui-kit-scope .noUi-target.is-unsetted[disabled] .noUi-handle {
        background-color: #ebebeb;
        border-color: #ebebeb; }
  .ds-ui-kit-scope .noUi-connect {
    background-color: #239de8; }
  .ds-ui-kit-scope .noUi-horizontal {
    height: 6px;
    margin-top: 32px; }
    .ds-ui-kit-scope .noUi-horizontal .noUi-handle {
      width: 16px;
      height: 16px;
      left: -14px;
      top: -5px;
      transition: -webkit-transform ease-out .1s;
      transition: transform ease-out .1s; }
      .ds-ui-kit-scope .noUi-horizontal .noUi-handle.noUi-active {
        -webkit-transform: scale(1.5);
            -ms-transform: scale(1.5);
                transform: scale(1.5);
        box-shadow: none; }
  .ds-ui-kit-scope .noUi-handle {
    background-color: #239de8;
    border: 2px solid #239de8;
    box-shadow: none;
    border-radius: 100px; }
    .ds-ui-kit-scope .noUi-handle:after, .ds-ui-kit-scope .noUi-handle:before {
      display: none; }
    .ds-ui-kit-scope .noUi-handle:hover {
      box-shadow: 0 0 0 6px rgba(0, 0, 255, 0.06); }
  .ds-ui-kit-scope .noUi-target.is-min .noUi-handle-lower {
    left: -4px; }
  .ds-ui-kit-scope .noUi-target.is-unsetted .noUi-handle {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.12); }
    .ds-ui-kit-scope .noUi-target.is-unsetted .noUi-handle:hover, .ds-ui-kit-scope .noUi-target.is-unsetted .noUi-handle.noUi-active {
      box-shadow: none;
      background-color: #cecece;
      border-color: #cecece; }
  .ds-ui-kit-scope .noUi-target.is-unsetted .noUi-connect {
    opacity: 0; }
  .ds-ui-kit-scope .noUi-marker {
    display: none; }
  .ds-ui-kit-scope .noUi-value {
    color: rgba(0, 0, 0, 0.32); }
  .ds-ui-kit-scope .noUi-pips-horizontal {
    padding: 8px 0;
    height: auto; }
  .ds-ui-kit-scope .noUi-value-horizontal:last-child {
    width: 100px;
    margin-left: -100px;
    text-align: right; }
  .ds-ui-kit-scope .ds-slider {
    padding-bottom: 40px;
    font-weight: 300; }
    .ds-ui-kit-scope .ds-slider .ds-input {
      float: right; }
      .ds-ui-kit-scope .ds-slider .ds-input input {
        height: 40px;
        width: 52px;
        padding: 0;
        text-align: center;
        display: inline-block; }
      .ds-ui-kit-scope .ds-slider .ds-input span {
        color: rgba(0, 0, 0, 0.48);
        padding: 0 5px; }
    .ds-ui-kit-scope .ds-slider label {
      color: rgba(0, 0, 0, 0.48);
      display: inline-block;
      margin-top: 8px; }
  .ds-ui-kit-scope .ds-gmenu-wrapper {
    position: fixed;
    width: 100%;
    overflow-x: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: visibility .3s;
    z-index: 2000;
    pointer-events: none;
    visibility: hidden;
    -webkit-overflow-scrolling: touch; }
    .ds-ui-kit-scope .ds-gmenu-wrapper.active {
      pointer-events: all;
      visibility: visible; }
    .ds-ui-kit-scope .ds-gmenu-wrapper * {
      -webkit-tap-highlight-color: transparent; }
  .ds-ui-kit-scope .ds-g-menu {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    font-size: 15px;
    background: #fff;
    color: rgba(0, 0, 0, 0.48);
    height: 56px;
    box-sizing: border-box;
    z-index: 10;
    -webkit-overflow-scrolling: touch; }
  .ds-ui-kit-scope .ds-g-menu__action {
    display: inline-block;
    margin-right: 13px;
    top: -1px;
    position: relative; }
  .ds-ui-kit-scope .ds-g-menu__action__burger {
    padding-left: 12px;
    padding-right: 16px;
    position: relative;
    line-height: 56px;
    display: inline-block;
    font-size: 25px;
    vertical-align: middle;
    cursor: pointer;
    transition: all .3s ease; }
    .ds-ui-kit-scope .ds-g-menu__action__burger:hover {
      color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-g-menu__action__burger + .ds-g-menu__action__logo {
      margin-left: 0; }
  .ds-ui-kit-scope .ds-g-menu__action__logo {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    line-height: 56px;
    margin-left: 16px; }
  .ds-ui-kit-scope .ds-g-menu__list {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    font-weight: 400; }
    .ds-ui-kit-scope .ds-g-menu__list li {
      display: inline-block;
      padding: 0 20px; }
  .ds-ui-kit-scope .ds-g-menu__compass {
    display: none; }
  .ds-ui-kit-scope .ds-g-menu__features {
    line-height: 56px;
    display: inline-block;
    float: right;
    margin-top: 0;
    vertical-align: middle;
    font-size: 0; }
    .ds-ui-kit-scope .ds-g-menu__features i {
      position: relative;
      top: -2px; }
  .ds-ui-kit-scope .ds-g-menu__cta {
    display: none; }
  .ds-ui-kit-scope .ds-g-menu__notif {
    margin-right: 0;
    padding: 0 16px 0 12px;
    line-height: 56px;
    cursor: pointer;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    right: 0;
    display: inline-block;
    position: relative;
    font-size: 34px;
    vertical-align: middle;
    transition: color .3s ease; }
    .ds-ui-kit-scope .ds-g-menu__notif.active {
      color: #239de8; }
      .ds-ui-kit-scope .ds-g-menu__notif.active:hover {
        color: #1d83c2; }
    .ds-ui-kit-scope .ds-g-menu__notif:hover {
      color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-g-menu__notif.is-logged .ds-ico {
      display: none; }
    .ds-ui-kit-scope .ds-g-menu__notif.is-logged .ds-g-menu__user {
      display: inline-block; }
    .ds-ui-kit-scope .ds-g-menu__notif a {
      color: rgba(0, 0, 0, 0.48); }
      .ds-ui-kit-scope .ds-g-menu__notif a:hover {
        color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .ds-g-menu__notif__count {
    position: absolute;
    background: #239de8;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    width: 19px;
    height: 19px;
    line-height: 17px;
    text-align: center;
    border-radius: 100%;
    border: 2px solid #fff;
    display: none;
    right: 9px;
    top: 10px; }
  .ds-ui-kit-scope .ds-g-menu__user {
    display: none;
    vertical-align: top; }
    .ds-ui-kit-scope .ds-g-menu__user > div {
      line-height: 1;
      display: none;
      color: #000; }
  .ds-ui-kit-scope .ds-g-menu__shortname {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background-color: #f6f6f6;
    color: rgba(0, 0, 0, 0.32);
    border-radius: 100%;
    vertical-align: middle;
    margin-right: 3px;
    margin-bottom: 2px; }
  .ds-ui-kit-scope .ds-g-menu__username {
    font-size: 13px;
    font-weight: 400;
    display: block; }
  .ds-ui-kit-scope .ds-g-menu__welcome {
    font-size: 10px;
    font-weight: 300;
    display: block; }
  .ds-ui-kit-scope .ds-g-menu__search {
    line-height: 56px;
    padding: 0 4px 0 12px;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    cursor: pointer;
    display: none;
    position: relative;
    font-size: 34px;
    vertical-align: middle;
    transition: color .3s ease; }
    .ds-ui-kit-scope .ds-g-menu__search:hover {
      color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-g-menu__search.is-visible {
      display: inline-block; }
  .ds-ui-kit-scope .ds-g-menu__list {
    display: none; }
  .ds-ui-kit-scope .ds-g-menu-login {
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 5000;
    padding: 26px 24px;
    visibility: hidden;
    transition: opacity 0.15s cubic-bezier(0.25, 0.1, 0.25, 1), top 0.15s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 0;
    top: -8px; }
    .ds-ui-kit-scope .ds-g-menu-login.active {
      visibility: visible;
      opacity: 1;
      top: 0; }
    .ds-ui-kit-scope .ds-g-menu-login li {
      vertical-align: middle;
      margin-bottom: 16px; }
      .ds-ui-kit-scope .ds-g-menu-login li:last-child {
        margin-bottom: 0; }
    .ds-ui-kit-scope .ds-g-menu-login a {
      text-decoration: none; }
      .ds-ui-kit-scope .ds-g-menu-login a:hover {
        text-decoration: none; }
  .ds-ui-kit-scope .ds-g-menu-login__intro {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.32);
    font-size: 13px;
    line-height: 13px;
    text-transform: uppercase;
    margin-bottom: 32px; }
  .ds-ui-kit-scope .ds-g-menu-login .ds-btn {
    color: rgba(0, 0, 0, 0.48);
    border-color: rgba(0, 0, 0, 0.12); }
    .ds-ui-kit-scope .ds-g-menu-login .ds-btn:hover {
      background-color: rgba(0, 0, 0, 0.08);
      border-color: rgba(0, 0, 0, 0.24);
      color: rgba(0, 0, 0, 0.56); }
  .ds-ui-kit-scope .ds-g-menu-login__logo {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: cover;
    line-height: 32px;
    vertical-align: middle;
    border-radius: 100%; }
  .ds-ui-kit-scope .ds-g-menu-login__title {
    display: inline-block;
    line-height: 32px;
    vertical-align: middle;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.8);
    padding-left: 12px;
    font-weight: 400;
    transition: color .3s; }
    .ds-ui-kit-scope .ds-g-menu-login__title:hover {
      color: rgba(0, 0, 0, 0.48); }
  .ds-ui-kit-scope .ds-g-menu-login__expand {
    display: none; }
  .ds-ui-kit-scope .ds-g-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    visibility: hidden;
    transition: background .3s ease; }
    .ds-ui-kit-scope .ds-g-overlay.visible {
      background: rgba(0, 0, 0, 0.32);
      pointer-events: initial;
      visibility: visible; }
  .ds-ui-kit-scope .ds-g-left-bar {
    top: 0;
    z-index: 5;
    position: absolute;
    bottom: 0;
    background: #fff;
    overflow: hidden;
    left: -289px;
    transition: left 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
    width: 289px;
    -webkit-overflow-scrolling: touch; }
    .ds-ui-kit-scope .ds-g-left-bar a {
      color: inherit;
      text-decoration: none; }
      .ds-ui-kit-scope .ds-g-left-bar a:hover {
        text-decoration: inherit; }
  .ds-ui-kit-scope .ds-g-left-bar.ds-g-left-bar--open {
    left: 0;
    width: 100%; }
  .ds-ui-kit-scope .ds-g-left-bar__action {
    height: 56px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    font-size: 0;
    background: #fff;
    display: block;
    box-sizing: border-box; }
  .ds-ui-kit-scope .ds-g-left-bar__action__close {
    padding-left: 12px;
    padding-right: 16px;
    line-height: 56px;
    display: inline-block;
    font-size: 25px;
    vertical-align: middle;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.48);
    position: relative;
    top: -1px;
    transition: all .3s ease; }
    .ds-ui-kit-scope .ds-g-left-bar__action__close:hover {
      color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .ds-g-left-bar__action__logo {
    display: inline-block;
    vertical-align: middle;
    margin-left: -4px;
    position: relative;
    top: -2px; }
  .ds-ui-kit-scope .ds-g-left-bar__action__close {
    line-height: 56px;
    padding-right: 23px; }
  .ds-ui-kit-scope .ds-g-left-bar__top-part {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 21px; }
  .ds-ui-kit-scope .ds-g-left-bar__bottom-part {
    padding-bottom: 7px; }
  .ds-ui-kit-scope .ds-g-left-bar__menu {
    padding-top: 17px; }
  .ds-ui-kit-scope .ds-g-left-bar__input {
    margin: auto 67px 20px 48px;
    width: auto;
    color: rgba(0, 0, 0, 0.32);
    font-weight: 400;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding-bottom: 7px; }
    .ds-ui-kit-scope .ds-g-left-bar__input input {
      font-size: 15px;
      font-weight: 400;
      font-family: '3ds';
      margin-left: 10px;
      display: inline-block;
      border: 0;
      outline: none;
      background: transparent;
      color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-g-left-bar__input ::-webkit-input-placeholder {
      color: rgba(0, 0, 0, 0.32); }
    .ds-ui-kit-scope .ds-g-left-bar__input ::-moz-placeholder {
      color: rgba(0, 0, 0, 0.32); }
    .ds-ui-kit-scope .ds-g-left-bar__input :-ms-input-placeholder {
      color: rgba(0, 0, 0, 0.32); }
    .ds-ui-kit-scope .ds-g-left-bar__input :-moz-placeholder {
      color: rgba(0, 0, 0, 0.32); }
  .ds-ui-kit-scope .ds-g-left-bar__title {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 11px;
    line-height: 32px;
    padding: 0 24px;
    color: rgba(0, 0, 0, 0.32);
    margin-bottom: 7px; }
  .ds-ui-kit-scope .ds-g-left-bar__wrapper {
    height: calc(100vh - 113px);
    overflow-y: auto; }
    .ds-ui-kit-scope .ds-g-left-bar__wrapper:after {
      content: '';
      display: block;
      width: 100%;
      height: 80px; }
  .ds-ui-kit-scope .ds-g-left-bar__menu-location-wrapper {
    height: calc(100%);
    top: 56px;
    position: absolute;
    background: #F2F3F4;
    width: calc(100% + 20px);
    transition: left .3s ease;
    overflow-y: auto;
    z-index: 10;
    left: 100%; }
    .ds-ui-kit-scope .ds-g-left-bar__menu-location-wrapper.active {
      left: 0; }
    .ds-ui-kit-scope .ds-g-left-bar__menu-location-wrapper:after {
      content: '';
      display: block;
      height: 110px;
      width: 100%; }
    .ds-ui-kit-scope .ds-g-left-bar__menu-location-wrapper .ds-g-left-bar__back {
      margin-top: 28px;
      margin-bottom: 24px; }
    .ds-ui-kit-scope .ds-g-left-bar__menu-location-wrapper .ds-g-left-list .ds-g-left-list__item {
      height: 48px;
      line-height: 48px; }
      .ds-ui-kit-scope .ds-g-left-bar__menu-location-wrapper .ds-g-left-list .ds-g-left-list__item.active {
        font-weight: 400;
        background: inherit;
        color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .ds-g-left-bar__menu-location-container  {
    overflow-x: hidden; }
  .ds-ui-kit-scope .ds-g-left-bar__footer {
    color: rgba(0, 0, 0, 0.48);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 57px;
    line-height: 57px;
    border-top: 1px solid rgba(0, 0, 0, 0.16);
    z-index: 4;
    box-sizing: border-box;
    background: #fff; }
  .ds-ui-kit-scope .ds-g-left-bar__login {
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.12); }
  .ds-ui-kit-scope .ds-g-left-bar__location {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 13px;
    transition: color .3s; }
    .ds-ui-kit-scope .ds-g-left-bar__location:hover {
      color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-g-left-bar__location i {
      position: relative;
      top: -2px;
      margin-right: 7px; }
  .ds-ui-kit-scope .ds-g-left-bar__back {
    margin-left: 32px;
    margin-top: 32px;
    margin-bottom: 32px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.48);
    transition: all .3s ease; }
    .ds-ui-kit-scope .ds-g-left-bar__back:hover {
      color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .ds-g-left-list {
    margin: 0; }
  .ds-ui-kit-scope .ds-g-left-list__item {
    padding: 0 24px;
    height: 48px;
    line-height: 48px;
    position: relative;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 300;
    cursor: pointer; }
    .ds-ui-kit-scope .ds-g-left-list__item.active {
      background: #239de8;
      color: #fff; }
      .ds-ui-kit-scope .ds-g-left-list__item.active.ds-g-left-list__item--chevron:before {
        color: #fff; }
  .ds-ui-kit-scope .ds-g-left-list__item--chevron:before {
    right: 25px;
    content: '\e90f';
    font-family: icon;
    position: absolute;
    color: rgba(0, 0, 0, 0.48);
    font-size: 16px;
    top: -1px; }
  .ds-ui-kit-scope .ds-g-left-list--countries {
    padding-bottom: 24px; }
    .ds-ui-kit-scope .ds-g-left-list--countries .ds-g-left-list__item {
      padding: 0 32px;
      font-weight: 400; }
      .ds-ui-kit-scope .ds-g-left-list--countries .ds-g-left-list__item:hover {
        background: transparent;
        color: #239de8; }
      .ds-ui-kit-scope .ds-g-left-list--countries .ds-g-left-list__item img {
        margin-right: 16px;
        -webkit-transform: translateY(-1px);
            -ms-transform: translateY(-1px);
                transform: translateY(-1px); }
      .ds-ui-kit-scope .ds-g-left-list--countries .ds-g-left-list__item span {
        width: 80%;
        vertical-align: middle;
        line-height: 21px;
        display: inline-block; }
  .ds-ui-kit-scope .ds-g-left-list--local {
    padding-bottom: 40px; }
    .ds-ui-kit-scope .ds-g-left-list--local a {
      color: rgba(0, 0, 0, 0.48); }
      .ds-ui-kit-scope .ds-g-left-list--local a:hover {
        color: #239de8; }
    .ds-ui-kit-scope .ds-g-left-list--local .ds-g-left-list__smitem {
      font-weight: 400;
      height: 32px;
      line-height: 32px;
      padding: 0 32px; }
  .ds-ui-kit-scope .ds-g-left-list__title {
    font-size: 15px;
    font-weight: 400;
    margin: 0 51px 0 32px;
    padding: 22px 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    height: auto;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer; }
    .ds-ui-kit-scope .ds-g-left-list__title:after {
      content: '\e93a';
      float: right;
      font-family: icon;
      font-size: 16px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.48); }
  .ds-ui-kit-scope .ds-g-left-list__slide-wrapper {
    overflow-y: hidden;
    transition: height .3s ease;
    height: 0; }
  .ds-ui-kit-scope .ds-g-left-bar__menu-location.is-open .ds-g-left-list__title:after {
    content: '\e930'; }
  .ds-ui-kit-scope .ds-g-submenu {
    left: 100%;
    bottom: 0;
    top: 56px;
    width: 100%;
    overflow-x: hidden;
    background: #F2F3F4;
    position: absolute;
    z-index: 11;
    white-space: nowrap;
    font-size: 0;
    transition: all .3s ease;
    padding: 1px 0;
    -webkit-overflow-scrolling: touch; }
    .ds-ui-kit-scope .ds-g-submenu.active {
      left: 0; }
    .ds-ui-kit-scope .ds-g-submenu a {
      text-decoration: none;
      color: inherit; }
      .ds-ui-kit-scope .ds-g-submenu a:hover {
        text-decoration: none; }
    .ds-ui-kit-scope .ds-g-submenu .ds-g-submenu__title {
      font-size: 11px;
      line-height: 32px;
      color: rgba(0, 0, 0, 0.32);
      font-weight: 400;
      text-transform: uppercase;
      margin-bottom: 0; }
    .ds-ui-kit-scope .ds-g-submenu .ds-g-submenu__title--chevron {
      position: relative;
      top: -4px; }
      .ds-ui-kit-scope .ds-g-submenu .ds-g-submenu__title--chevron:after {
        font-family: icon;
        -webkit-transform: translateY(3px);
            -ms-transform: translateY(3px);
                transform: translateY(3px);
        font-size: 16px;
        margin-left: 7px;
        font-weight: 100;
        display: inline-block; }
  .ds-ui-kit-scope .ds-g-submenu--exit-mobile {
    -webkit-transform: translate(-200%);
        -ms-transform: translate(-200%);
            transform: translate(-200%); }
  .ds-ui-kit-scope .ds-g-submenu__first-col,
  .ds-ui-kit-scope .ds-g-submenu__last-col,
  .ds-ui-kit-scope .ds-g-submenu-wrapper {
    width: calc(100% + 17px);
    height: auto; }
  .ds-ui-kit-scope .ds-g-submenu__first-col {
    display: block;
    border: 0;
    margin-bottom: 17px;
    width: 100%;
    white-space: normal;
    vertical-align: top;
    padding: 0 48px; }
    .ds-ui-kit-scope .ds-g-submenu__first-col .ds-g-submenu__title {
      margin-bottom: 7px; }
    .ds-ui-kit-scope .ds-g-submenu__first-col .ds-g-sub-list__descr {
      display: none; }
  .ds-ui-kit-scope .ds-g-submenu__last-col {
    padding: 0 32px 0 48px;
    padding-bottom: 26px;
    display: inline-block;
    width: 100%;
    white-space: normal;
    vertical-align: top; }
    .ds-ui-kit-scope .ds-g-submenu__last-col .ds-g-submenu__title {
      margin-bottom: 7px; }
  .ds-ui-kit-scope .ds-g-submenu__back {
    margin-left: 20px;
    margin-top: 31px;
    margin-bottom: 25px;
    color: rgba(0, 0, 0, 0.48);
    cursor: pointer;
    transition: all .3s ease; }
    .ds-ui-kit-scope .ds-g-submenu__back:hover {
      color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .ds-g-submenu-container {
    overflow: initial;
    width: 100%; }
  .ds-ui-kit-scope .ds-g-submenu__title-description {
    display: block;
    font-size: 15px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 300;
    margin-top: 3px;
    margin-bottom: 12px; }
  .ds-ui-kit-scope .ds-g-submenu__related {
    border: 0; }
  .ds-ui-kit-scope .ds-g-sub-list__item {
    padding-bottom: 18px;
    padding-top: 18px; }
    .ds-ui-kit-scope .ds-g-sub-list__item:after {
      display: block;
      height: 1px;
      left: -50px;
      right: -50px;
      background: rgba(0, 0, 0, 0.16);
      position: absolute;
      bottom: 0; }
  .ds-ui-kit-scope .ds-g-submenu__card {
    display: block; }
    .ds-ui-kit-scope .ds-g-submenu__card img {
      border-radius: 5px;
      margin-top: 3px;
      margin-bottom: 24px;
      width: calc(48% - 17px); }
    .ds-ui-kit-scope .ds-g-submenu__card .ds-g-submenu__card__title {
      font-size: 11px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.32);
      margin: 0;
      line-height: 11px;
      text-transform: uppercase;
      margin-bottom: 5px; }
    .ds-ui-kit-scope .ds-g-submenu__card p {
      margin: 0;
      font-size: 15px;
      font-weight: 300; }
  .ds-ui-kit-scope .ds-g-submenu__products__image {
    width: calc(100% - 17px);
    height: 70px;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    margin-top: 9px;
    margin-bottom: 21px; }
  .ds-ui-kit-scope .ds-g-submenu-container {
    overflow: hidden;
    width: 100%; }
  .ds-ui-kit-scope .ds-g-submenu-wrapper {
    width: calc(100% + 17px);
    overflow-y: initial;
    height: auto; }
  .ds-ui-kit-scope .ds-g-sub-list {
    color: rgba(0, 0, 0, 0.8);
    font-size: 15px;
    line-height: 20px;
    font-weight: 300;
    margin-top: 0; }
  .ds-ui-kit-scope .ds-g-sub-list__item {
    padding-bottom: 8px;
    padding-top: 8px;
    position: relative;
    padding-right: 32px; }
  .ds-ui-kit-scope .ds-g-sub-list__title {
    transition: opacity .3s, -webkit-filter .3s, opacity .3s, filter .3s; }
    .ds-ui-kit-scope .ds-g-sub-list__title img {
      -webkit-filter: brightness(0%);
              filter: brightness(0%);
      opacity: .48;
      height: 11px; }
  .ds-ui-kit-scope .ds-g-sub-list__descr {
    color: rgba(0, 0, 0, 0.48);
    font-size: 13px;
    line-height: 20px;
    font-weight: 300;
    transition: opacity .3s;
    margin-top: 5px; }
    .ds-ui-kit-scope .ds-g-sub-list__descr:empty {
      margin-top: 0; }
  .ds-ui-kit-scope .ds-gmenu-profile,
  .ds-ui-kit-scope .ds-gmenu-search {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 3;
    padding: 128px 0 24px;
    overflow-y: scroll; }
  .ds-ui-kit-scope .ds-gmenu-search.is-visible {
    display: block; }
  .ds-ui-kit-scope .ds-gmenu-search.has-animation .ds-container, .ds-ui-kit-scope .ds-gmenu-search.has-reverse-animation .ds-container {
    opacity: 0;
    -webkit-transform: translateY(-16px);
        -ms-transform: translateY(-16px);
            transform: translateY(-16px);
    transition: none; }
  .ds-ui-kit-scope .ds-gmenu-search.no-background {
    background-color: transparent; }
  .ds-ui-kit-scope .ds-gmenu-search input {
    font-size: 32px;
    border: 0;
    background: none;
    font-weight: 300;
    width: 100%; }
  .ds-ui-kit-scope .ds-gmenu-search label,
  .ds-ui-kit-scope .ds-gmenu-search .ds-gmenu-search__title {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.48);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block; }
  .ds-ui-kit-scope .ds-gmenu-search svg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); }
  .ds-ui-kit-scope .ds-gmenu-search .ds-gmenu-search__title {
    color: rgba(0, 0, 0, 0.32);
    margin-top: 48px;
    margin-bottom: 5px;
    letter-spacing: .29px;
    line-height: 15px; }
  .ds-ui-kit-scope .ds-gmenu-search .ds-ico-back-icon {
    color: rgba(0, 0, 0, 0.48);
    margin-left: -7px;
    margin-bottom: 36px;
    cursor: pointer; }
    .ds-ui-kit-scope .ds-gmenu-search .ds-ico-back-icon:hover {
      color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .ds-gmenu-search .ds-container {
    transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); }
  .ds-ui-kit-scope .ds-gmenu-search__tag {
    margin-top: 0; }
    .ds-ui-kit-scope .ds-gmenu-search__tag li {
      float: left; }
  .ds-ui-kit-scope .ds-gmenu-profile {
    display: block;
    height: 0%;
    text-align: center;
    padding: 0;
    transition: height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
    .ds-ui-kit-scope .ds-gmenu-profile.is-visible {
      height: 100%; }
      .ds-ui-kit-scope .ds-gmenu-profile.is-visible .ds-gmenu-profile__close {
        display: inline-block; }
    .ds-ui-kit-scope .ds-gmenu-profile.has-iframe .ds-gmenu-profile__wrapper {
      display: none; }
    .ds-ui-kit-scope .ds-gmenu-profile.has-iframe .ds-gmenu-profile__iframe {
      display: block; }
  .ds-ui-kit-scope .ds-gmenu-profile__wrapper {
    position: relative;
    padding-top: 116px;
    padding-bottom: 0; }
  .ds-ui-kit-scope .ds-gmenu-profile__thumbnail {
    display: inline-block;
    width: 96px;
    height: 96px;
    border-radius: 100%;
    line-height: 96px;
    font-size: 22px;
    background-color: #f6f6f6;
    text-transform: uppercase; }
  .ds-ui-kit-scope .ds-gmenu-profile__name {
    font-size: 32px;
    margin-top: 32px;
    font-weight: 400; }
  .ds-ui-kit-scope .ds-gmenu-profile__links {
    display: inline-block;
    margin-top: 32px;
    font-weight: 400;
    text-align: left; }
    .ds-ui-kit-scope .ds-gmenu-profile__links a {
      font-size: 18px;
      color: rgba(0, 0, 0, 0.32);
      display: block;
      margin-bottom: 16px; }
      .ds-ui-kit-scope .ds-gmenu-profile__links a:hover {
        color: rgba(0, 0, 0, 0.48);
        text-decoration: none; }
    .ds-ui-kit-scope .ds-gmenu-profile__links i {
      color: rgba(0, 0, 0, 0.32);
      position: relative;
      top: -2px; }
  .ds-ui-kit-scope .ds-gmenu-profile__cta {
    margin-top: 43px; }
  .ds-ui-kit-scope .ds-gmenu-profile__close {
    width: 100px;
    display: none;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.32);
    margin: 100px auto 32px; }
    .ds-ui-kit-scope .ds-gmenu-profile__close:hover {
      color: rgba(0, 0, 0, 0.48);
      text-decoration: none; }
    .ds-ui-kit-scope .ds-gmenu-profile__close i {
      color: rgba(0, 0, 0, 0.32); }
  .ds-ui-kit-scope .ds-gmenu-profile__iframe {
    position: relative;
    display: none;
    padding-top: 64px;
    padding-bottom: 0; }
    .ds-ui-kit-scope .ds-gmenu-profile__iframe iframe {
      max-width: 600px; }
    .ds-ui-kit-scope .ds-gmenu-profile__iframe .ds-gmenu-profile__close {
      margin-top: 28px; }
  @media all and (min-width: 721px) {
    .ds-ui-kit-scope .ds-g-menu {
      height: 56px; }
    .ds-ui-kit-scope .ds-g-menu__action__burger {
      padding-left: 20px;
      padding-right: 15px;
      line-height: 56px; }
    .ds-ui-kit-scope .ds-g-menu__action__logo {
      display: inline-block;
      vertical-align: middle;
      top: -1px; }
    .ds-ui-kit-scope .ds-g-menu__features {
      line-height: 56px; }
    .ds-ui-kit-scope .ds-g-menu__cta {
      display: inline-block;
      margin-right: 24px;
      position: relative;
      top: 4px; }
      .ds-ui-kit-scope .ds-g-menu__cta a {
        font-size: 13px;
        font-weight: 600; }
    .ds-ui-kit-scope .ds-g-menu__notif {
      line-height: 56px;
      margin-right: 24px;
      padding: 0;
      border: 0; }
    .ds-ui-kit-scope .ds-g-menu__notif__count {
      top: 13px;
      right: -3px; }
    .ds-ui-kit-scope .ds-g-menu__user > div {
      display: inline-block; }
    .ds-ui-kit-scope .ds-g-menu__search {
      line-height: 56px;
      padding: 0;
      border: 0;
      margin-right: 20px; }
    .ds-ui-kit-scope .ds-g-menu__compass {
      display: inline-block;
      margin-left: 15px;
      padding-left: 15px;
      padding-right: 15px;
      border-left: 1px solid rgba(0, 0, 0, 0.12); }
    .ds-ui-kit-scope .ds-g-overlay {
      -webkit-transform: translatez(0); }
      .ds-ui-kit-scope .ds-g-overlay.active {
        background-color: rgba(0, 0, 0, 0.48); }
    .ds-ui-kit-scope .ds-g-side .ds-g-submenu__back {
      display: none; }
    .ds-ui-kit-scope .ds-g-left-bar {
      top: 0;
      z-index: 15; }
    .ds-ui-kit-scope .ds-g-left-bar.ds-g-left-bar--open {
      left: 0;
      width: 260px; }
    .ds-ui-kit-scope .ds-g-left-bar__container {
      overflow-x: hidden;
      width: 260px; }
    .ds-ui-kit-scope .ds-g-left-bar__wrapper {
      overflow-y: scroll;
      height: calc(100vh - 120px);
      width: 280px; }
    .ds-ui-kit-scope .ds-g-left-bar__action {
      height: 56px;
      width: 260px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
      padding-left: 8px;
      background: #fff;
      display: block; }
    .ds-ui-kit-scope .ds-g-left-bar__action__close {
      display: inline-block;
      padding-right: 20px;
      line-height: 56px;
      vertical-align: middle;
      cursor: pointer; }
    .ds-ui-kit-scope .ds-g-left-bar__action__logo {
      display: inline-block;
      vertical-align: middle;
      margin-left: 0;
      position: relative;
      top: -2px; }
    .ds-ui-kit-scope .ds-g-left-bar__top-part {
      padding-bottom: 15px;
      margin-bottom: 34px; }
    .ds-ui-kit-scope .ds-g-left-bar__menu {
      padding-top: 29px; }
    .ds-ui-kit-scope .ds-g-left-bar__menu-location-wrapper {
      top: 56px; }
    .ds-ui-kit-scope .ds-g-left-bar__menu-location {
      width: 259px; }
    .ds-ui-kit-scope .ds-g-left-bar__input {
      margin: auto auto 32px 32px;
      width: 191px; }
      .ds-ui-kit-scope .ds-g-left-bar__input input {
        width: 80%; }
    .ds-ui-kit-scope .ds-g-left-bar__title {
      padding: 0 34px;
      margin-bottom: 6px; }
    .ds-ui-kit-scope .ds-g-left-bar__footer {
      background: #fff;
      height: 52px;
      line-height: 52px; }
    .ds-ui-kit-scope .ds-g-left-bar__bottom-part .ds-g-left-bar__title {
      margin-bottom: 7px; }
    .ds-ui-kit-scope .ds-g-left-list {
      margin: 0; }
    .ds-ui-kit-scope .ds-g-left-list__item {
      padding: 0 34px;
      border: 0; }
    .ds-ui-kit-scope .ds-g-left-list__item--chevron:before {
      right: 44px; }
    .ds-ui-kit-scope .ds-g-left-list__item--chevron:hover .ds-g-submenu {
      left: 260px; }
    .ds-ui-kit-scope .ds-g-submenu {
      top: 0;
      left: 260px;
      width: calc(100% - 260px);
      overflow: hidden;
      -ms-transform: translateX(-200%);
      -webkit-transform: translateX(calc(-100% - 260px));
              transform: translateX(calc(-100% - 260px)); }
      .ds-ui-kit-scope .ds-g-submenu:hover {
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
        left: 260px; }
      .ds-ui-kit-scope .ds-g-submenu.active {
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
        left: 260px; }
      .ds-ui-kit-scope .ds-g-submenu .ds-g-submenu__title {
        margin-bottom: 4px; }
    .ds-ui-kit-scope .ds-g-submenu__card {
      display: block; }
      .ds-ui-kit-scope .ds-g-submenu__card img {
        border-radius: 5px;
        margin-top: 3px;
        margin-bottom: 24px;
        width: calc(100% - 17px); }
    .ds-ui-kit-scope .ds-g-submenu__first-col {
      display: inline-block;
      width: 50%;
      padding: 0;
      margin: 0;
      padding-left: 24px;
      padding-right: 12px; }
      .ds-ui-kit-scope .ds-g-submenu__first-col .ds-g-submenu__title {
        margin-bottom: 6px; }
      .ds-ui-kit-scope .ds-g-submenu__first-col .ds-g-sub-list__descr {
        display: block; }
    .ds-ui-kit-scope .ds-g-submenu__last-col {
      width: 50%;
      padding: 0;
      margin: 0;
      padding-left: 12px;
      padding-right: 24px; }
      .ds-ui-kit-scope .ds-g-submenu__last-col .ds-g-submenu__title {
        margin-bottom: 7px; }
    .ds-ui-kit-scope .ds-g-submenu__products__image {
      width: 90%;
      height: 72px; }
    .ds-ui-kit-scope .ds-g-submenu__title-description {
      display: none; }
    .ds-ui-kit-scope .ds-g-submenu-container {
      overflow: hidden;
      width: 100%; }
    .ds-ui-kit-scope .ds-g-submenu-wrapper {
      width: calc(100% + 17px);
      height: calc(100vh);
      padding-top: 85px;
      overflow-y: scroll; }
      .ds-ui-kit-scope .ds-g-submenu-wrapper:after {
        content: ' ';
        display: block;
        height: 110px;
        width: 100%; }
    .ds-ui-kit-scope .ds-g-submenu__discover,
    .ds-ui-kit-scope .ds-g-submenu__related {
      transition: opacity .3s ease; }
    .ds-ui-kit-scope .ds-g-submenu__discover .ds-g-submenu__products__image {
      opacity: 1;
      transition: opacity .3s ease; }
      .ds-ui-kit-scope .ds-g-submenu__discover .ds-g-submenu__products__image:hover {
        opacity: 1; }
    .ds-ui-kit-scope .ds-g-submenu__card img {
      margin-top: 4px; }
    .ds-ui-kit-scope .ds-g-sub-list {
      opacity: 1; }
    .ds-ui-kit-scope .ds-g-sub-list .ds-g-sub-list__item {
      position: relative;
      transition: opacity .3s ease; }
      .ds-ui-kit-scope .ds-g-sub-list .ds-g-sub-list__item:after {
        display: none; }
    .ds-ui-kit-scope .ds-gmenu-search input {
      font-size: 44px; }
    .ds-ui-kit-scope .ds-gmenu-search .ds-ico-back-icon {
      margin-bottom: 52px; }
    .ds-ui-kit-scope .ds-gmenu-search .ds-gmenu-search__title {
      margin-top: 66px; }
    .ds-ui-kit-scope .ds-gmenu-profile__name {
      font-size: 55px; }
    .ds-ui-kit-scope .ds-gmenu-profile__links {
      display: block;
      text-align: center;
      margin-top: 7px; }
      .ds-ui-kit-scope .ds-gmenu-profile__links a {
        display: inline-block;
        margin: 0 16px; }
    .ds-ui-kit-scope .ds-gmenu-profile__thumbnail {
      width: 104px;
      height: 104px;
      line-height: 104px;
      font-size: 26px; }
    .ds-ui-kit-scope .ds-gmenu-profile__cta {
      margin-top: 200px; }
      .ds-ui-kit-scope .ds-gmenu-profile__cta .ds-btn {
        font-size: 18px;
        height: 56px;
        line-height: 58px;
        border-radius: 40px;
        padding-left: 40px;
        padding-right: 40px; }
    .ds-ui-kit-scope .ds-g-left-list__title {
      margin: 0 32px 6px; } }
  @media all and (min-width: 721px) and (min-height: 800px) {
    .ds-ui-kit-scope .ds-gmenu-profile {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .ds-ui-kit-scope .ds-gmenu-profile.has-iframe {
        display: block; }
    .ds-ui-kit-scope .ds-gmenu-profile__wrapper {
      padding-top: 48px; }
      .ds-ui-kit-scope .ds-gmenu-profile__wrapper .ds-gmenu-profile__close {
        position: fixed;
        top: auto;
        bottom: 32px;
        left: 50%;
        margin: 0 0 0 -50px; } }
  @media all and (min-width: 841px) {
    .ds-ui-kit-scope .ds-g-menu {
      height: 64px; }
    .ds-ui-kit-scope .ds-g-menu__action__burger {
      line-height: 64px; }
    .ds-ui-kit-scope .ds-g-menu__action__logo {
      position: relative;
      top: -2px;
      line-height: 64px; }
    .ds-ui-kit-scope .ds-g-menu__features {
      line-height: 64px; }
    .ds-ui-kit-scope .ds-g-menu__cta {
      margin-right: 32px; }
    .ds-ui-kit-scope .ds-g-menu__notif {
      line-height: 64px; }
    .ds-ui-kit-scope .ds-g-menu__notif__count {
      top: 16px;
      right: -3px; }
    .ds-ui-kit-scope .ds-g-menu__search {
      line-height: 64px; }
    .ds-ui-kit-scope .ds-g-menu-login {
      width: 312px;
      position: absolute;
      right: 0;
      padding: 32px 40px;
      top: 56px;
      max-height: calc(100vh - 64px);
      overflow-y: auto; }
      .ds-ui-kit-scope .ds-g-menu-login.active {
        top: 64px; }
      .ds-ui-kit-scope .ds-g-menu-login .ds-g-menu-login__intro {
        margin-bottom: 37px; }
      .ds-ui-kit-scope .ds-g-menu-login ul {
        max-height: 144px;
        overflow-y: hidden; }
      .ds-ui-kit-scope .ds-g-menu-login.expanded ul {
        max-height: none; }
      .ds-ui-kit-scope .ds-g-menu-login.expanded .ds-g-menu-login__expand {
        display: none; }
    .ds-ui-kit-scope .ds-g-menu-login__expand {
      display: block;
      text-align: center;
      margin-top: 24px;
      margin-bottom: 8px;
      opacity: 1;
      transition: all .1s; }
    .ds-ui-kit-scope .ds-g-left-bar .ds-g-left-bar__title {
      margin-bottom: 2px; }
    .ds-ui-kit-scope .ds-g-left-bar.ds-g-left-bar--open {
      width: 298px; }
    .ds-ui-kit-scope .ds-g-left-bar__container {
      width: 298px; }
    .ds-ui-kit-scope .ds-g-left-bar__wrapper {
      width: 318px; }
    .ds-ui-kit-scope .ds-g-left-bar__action {
      width: 298px;
      height: 64px;
      line-height: 62px;
      padding-left: 10px; }
    .ds-ui-kit-scope .ds-g-left-bar__action__close {
      padding-right: 19px;
      top: 0; }
    .ds-ui-kit-scope .ds-g-left-bar__action__logo {
      position: relative;
      top: -2px; }
    .ds-ui-kit-scope .ds-g-left-bar__bottom-part .ds-g-left-bar__title {
      margin-bottom: 2px; }
    .ds-ui-kit-scope .ds-g-left-bar__menu-location {
      width: 298px;
      padding-top: 0; }
    .ds-ui-kit-scope .ds-g-left-bar__back {
      margin-left: 29px;
      margin-top: 19px; }
    .ds-ui-kit-scope .ds-g-left-bar__input {
      margin: auto auto 21px;
      width: 234px; }
    .ds-ui-kit-scope .ds-g-left-bar__menu-location-wrapper {
      top: 64px; }
      .ds-ui-kit-scope .ds-g-left-bar__menu-location-wrapper .ds-g-left-list .ds-g-left-list__item {
        padding: 0 32px; }
    .ds-ui-kit-scope .ds-g-left-bar__footer {
      height: 54px;
      line-height: 56px; }
    .ds-ui-kit-scope .ds-g-left-list__item {
      height: 56px;
      line-height: 58px; }
    .ds-ui-kit-scope .ds-g-left-list__item--chevron:before {
      right: 51px; }
    .ds-ui-kit-scope .ds-g-left-list__item--chevron:hover .ds-g-submenu {
      left: 298px; }
    .ds-ui-kit-scope .ds-g-left-list--countries {
      padding-bottom: 30px; }
    .ds-ui-kit-scope .ds-g-submenu {
      top: 0;
      left: 0;
      width: calc(100% - 260px);
      overflow: hidden;
      -webkit-transform: translateX(calc(-100%));
          -ms-transform: translateX(calc(-100%));
              transform: translateX(calc(-100%));
      max-width: 645px; }
      .ds-ui-kit-scope .ds-g-submenu:hover {
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
        left: 298px; }
      .ds-ui-kit-scope .ds-g-submenu.active {
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
        left: 298px; }
    .ds-ui-kit-scope .ds-g-submenu__first-col {
      width: 50%;
      padding: 0;
      padding-left: 64px;
      padding-right: 32px; }
    .ds-ui-kit-scope .ds-g-submenu__last-col {
      width: 50%;
      padding: 0;
      padding-left: 32px;
      padding-right: 64px; }
    .ds-ui-kit-scope .ds-g-submenu__products__image {
      width: calc(100% - 17px);
      margin-right: 0; }
    .ds-ui-kit-scope .ds-g-submenu-wrapper {
      width: calc(100% + 17px);
      height: calc(100vh);
      padding-top: 56px; }
    .ds-ui-kit-scope .ds-g-submenu__card img {
      margin-top: 10px;
      width: calc(100% - 17px); }
    .ds-ui-kit-scope .ds-gmenu-search {
      padding-top: 152px; } }
  @media all and (min-width: 1041px) {
    .ds-ui-kit-scope .ds-g-submenu__card img {
      margin-top: 10px;
      width: 224px; }
    .ds-ui-kit-scope .ds-g-submenu__products__image {
      width: 224px;
      margin-right: 0; }
    .ds-ui-kit-scope .ds-g-left-bar .ds-g-left-bar__title {
      margin-bottom: 2px; }
    .ds-ui-kit-scope .ds-g-left-bar .ds-g-left-bar__bottom-part .ds-g-left-bar__title {
      margin-bottom: 2px; }
    .ds-ui-kit-scope .ds-g-left-bar__menu-location {
      padding-top: 0; }
    .ds-ui-kit-scope .ds-g-left-bar__menu-location .ds-g-left-bar__back {
      margin-top: 19px;
      margin-left: 29px;
      margin-bottom: 33px; }
    .ds-ui-kit-scope .ds-g-left-bar__back {
      margin-top: 19px;
      margin-left: 29px; }
    .ds-ui-kit-scope .ds-g-left-bar__input {
      width: 232px;
      padding-bottom: 7px;
      margin-bottom: 20px; }
    .ds-ui-kit-scope .ds-g-left-list__item {
      height: 56px;
      line-height: 58px; }
      .ds-ui-kit-scope .ds-g-left-list__item.active {
        background: #239de8;
        color: #fff; }
        .ds-ui-kit-scope .ds-g-left-list__item.active.ds-g-left-list__item--chevron:before {
          color: #fff; }
    .ds-ui-kit-scope .ds-g-left-bar__bottom-part .ds-g-left-list__item:hover {
      background: #239de8;
      color: #fff; }
    .ds-ui-kit-scope .ds-g-left-list__item--chevron:before {
      right: 51px; }
    .ds-ui-kit-scope .ds-g-left-list--countries .ds-g-left-list__item {
      padding: 0 33px;
      height: 48px;
      line-height: 48px; }
    .ds-ui-kit-scope .ds-g-submenu .ds-g-submenu-wrapper {
      width: calc(100% + 17px);
      height: calc(100vh);
      padding-top: 92px; }
    .ds-ui-kit-scope .ds-g-submenu-wrapper:hover .ds-g-submenu__related,
    .ds-ui-kit-scope .ds-g-submenu-wrapper:hover .ds-g-submenu__discover {
      opacity: .48; }
    .ds-ui-kit-scope .ds-g-left-bar .ds-g-left-bar__menu-location-wrapper {
      height: calc(100%); }
    .ds-ui-kit-scope .ds-g-sub-list__item:hover .ds-g-sub-list__title {
      color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-g-sub-list__item:hover .ds-g-sub-list__descr {
      opacity: 1; }
    .ds-ui-kit-scope .ds-g-sub-list__item:hover .ds-g-sub-list__title img {
      opacity: 1;
      -webkit-filter: brightness(100%);
              filter: brightness(100%); }
    .ds-ui-kit-scope .ds-g-submenu__related:hover {
      opacity: 1 !important; }
    .ds-ui-kit-scope .ds-g-submenu__discover:hover {
      opacity: 1 !important; }
      .ds-ui-kit-scope .ds-g-submenu__discover:hover .ds-g-submenu__products__image {
        opacity: .48; }
    .ds-ui-kit-scope .ds-g-submenu__discover .ds-g-submenu__products__image {
      opacity: 1;
      transition: opacity .3s ease; }
      .ds-ui-kit-scope .ds-g-submenu__discover .ds-g-submenu__products__image:hover {
        opacity: 1; }
    .ds-ui-kit-scope .ds-g-submenu__card img {
      margin-top: 4px; }
    .ds-ui-kit-scope .ds-g-sub-list {
      opacity: 1; }
      .ds-ui-kit-scope .ds-g-sub-list:hover .ds-g-sub-list__item {
        opacity: .48; }
    .ds-ui-kit-scope .ds-g-sub-list .ds-g-sub-list__item:hover {
      opacity: 1; }
    .ds-ui-kit-scope .ds-gmenu-profile__name {
      font-size: 72px;
      margin-top: 25px; }
    .ds-ui-kit-scope .ds-gmenu-profile__links {
      margin-top: -1px; } }
  @media all and (min-width: 1441px) {
    .ds-ui-kit-scope .ds-gmenu-search {
      padding-top: 184px; }
      .ds-ui-kit-scope .ds-gmenu-search input {
        font-size: 55px; }
      .ds-ui-kit-scope .ds-gmenu-search .ds-ico-back-icon {
        margin-bottom: 68px; }
      .ds-ui-kit-scope .ds-gmenu-search .ds-gmenu-search__title {
        margin-top: 86px; } }
  .ds-ui-kit-scope .ds-footer {
    color: rgba(0, 0, 0, 0.48);
    background-color: #fff; }
    .ds-ui-kit-scope .ds-footer a {
      color: rgba(0, 0, 0, 0.48); }
      .ds-ui-kit-scope .ds-footer a:hover {
        color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-footer .ds-ico-round {
      margin-left: 16px; }
  .ds-ui-kit-scope .ds-footer--legacy {
    color: #fff; }
    .ds-ui-kit-scope .ds-footer--legacy a {
      color: rgba(255, 255, 255, 0.64); }
      .ds-ui-kit-scope .ds-footer--legacy a:hover {
        color: #fff; }
    .ds-ui-kit-scope .ds-footer--legacy .ds-footer__top {
      background-color: #005386;
      padding: 30px 0; }
    .ds-ui-kit-scope .ds-footer--legacy .ds-footer__links {
      background-color: #003F66; }
    .ds-ui-kit-scope .ds-footer--legacy .ds-footer__corporate {
      background-color: rgba(0, 0, 0, 0.8);
      padding: 43px 0 28px; }
      .ds-ui-kit-scope .ds-footer--legacy .ds-footer__corporate a {
        color: #fff; }
    .ds-ui-kit-scope .ds-footer--legacy .ds-ico-round {
      background-color: rgba(255, 255, 255, 0.08); }
      .ds-ui-kit-scope .ds-footer--legacy .ds-ico-round:hover {
        background: rgba(255, 255, 255, 0.16); }
  .ds-ui-kit-scope .ds-footer__title {
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    margin: 16px 0 20px; }
  .ds-ui-kit-scope .ds-footer__top {
    padding: 64px 0 46px; }
    .ds-ui-kit-scope .ds-footer__top .ds-footer__social {
      display: none;
      vertical-align: bottom;
      margin-left: 19px; }
      .ds-ui-kit-scope .ds-footer__top .ds-footer__social .ds-footer__title {
        margin-bottom: 16px; }
  .ds-ui-kit-scope .ds-footer__links {
    padding: 24px 0 40px; }
    .ds-ui-kit-scope .ds-footer__links li {
      line-height: 16px;
      font-weight: 400; }
    .ds-ui-kit-scope .ds-footer__links ul {
      margin: 0; }
    .ds-ui-kit-scope .ds-footer__links .ds-footer__social {
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      margin-bottom: 35px; }
      .ds-ui-kit-scope .ds-footer__links .ds-footer__social > div:first-child {
        float: right;
        margin-top: -8px;
        margin-bottom: 20px; }
    .ds-ui-kit-scope .ds-footer__links .ds-footer__tag {
      margin-bottom: 34px; }
    .ds-ui-kit-scope .ds-footer__links .ds-col .ds-footer__title {
      margin-bottom: 16px;
      cursor: pointer; }
      .ds-ui-kit-scope .ds-footer__links .ds-col .ds-footer__title:after {
        content: '\e93a';
        float: right;
        font-family: icon;
        font-size: 16px;
        font-weight: 400; }
    .ds-ui-kit-scope .ds-footer__links .ds-col a {
      display: block;
      padding: 8px 0; }
      .ds-ui-kit-scope .ds-footer__links .ds-col a:hover {
        text-decoration: none; }
  .ds-ui-kit-scope .ds-footer__slide-wrapper {
    overflow-y: hidden;
    transition: height .3s ease;
    height: 0; }
  .ds-ui-kit-scope .ds-footer__slide-container.is-open .ds-footer__title:after {
    content: '\e930'; }
  .ds-ui-kit-scope .ds-footer__slide-container.is-open .ds-footer__slide-wrapper {
    margin-bottom: 6px; }
  .ds-ui-kit-scope .ds-footer__tag li {
    display: inline-block;
    margin-top: 0; }
  .ds-ui-kit-scope .ds-footer__corporate {
    padding: 47px 0 20px;
    text-align: center; }
  .ds-ui-kit-scope .ds-footer__corporate-legal {
    font-size: 13px;
    margin-bottom: 13px;
    margin-top: 0; }
  .ds-ui-kit-scope .ds-footer__corporate-links {
    line-height: 32px; }
    .ds-ui-kit-scope .ds-footer__corporate-links li {
      display: inline-block; }
  .ds-ui-kit-scope .ds-footer__logo {
    display: inline-block;
    vertical-align: middle; }
    .ds-ui-kit-scope .ds-footer__logo img {
      height: 40px;
      width: 131px; }
  .ds-ui-kit-scope .ds-footer__lang {
    position: relative;
    float: right;
    margin-top: 4px; }
    .ds-ui-kit-scope .ds-footer__lang select {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      opacity: 0; }
    .ds-ui-kit-scope .ds-footer__lang i {
      margin-left: 2px; }
  @media (min-width: 721px) {
    .ds-ui-kit-scope .ds-footer__top {
      padding: 71px 0 24px; }
      .ds-ui-kit-scope .ds-footer__top .ds-footer__social {
        display: inline-block; }
    .ds-ui-kit-scope .ds-footer__links {
      padding: 42px 0 10px; }
      .ds-ui-kit-scope .ds-footer__links ul {
        margin-bottom: 38px; }
      .ds-ui-kit-scope .ds-footer__links .ds-col .ds-footer__title {
        cursor: default; }
        .ds-ui-kit-scope .ds-footer__links .ds-col .ds-footer__title:after {
          display: none; }
      .ds-ui-kit-scope .ds-footer__links .ds-col ul {
        display: block; }
      .ds-ui-kit-scope .ds-footer__links .ds-footer__social {
        display: none; }
    .ds-ui-kit-scope .ds-footer__lang {
      margin-top: 8px; }
    .ds-ui-kit-scope .ds-footer__slide-container .ds-footer__slide-wrapper {
      height: auto; } }
  @media (min-width: 1041px) {
    .ds-ui-kit-scope .ds-footer__links {
      padding-bottom: 32px; }
      .ds-ui-kit-scope .ds-footer__links ul {
        margin: 0 0 32px; }
      .ds-ui-kit-scope .ds-footer__links .ds-col a {
        padding: 4px 0; }
      .ds-ui-kit-scope .ds-footer__links .ds-col .ds-footer__title {
        margin-bottom: 20px; }
      .ds-ui-kit-scope .ds-footer__links .ds-footer__tag {
        margin-bottom: 42px; }
    .ds-ui-kit-scope .ds-footer__corporate {
      text-align: left;
      padding: 73px 0 50px; }
      .ds-ui-kit-scope .ds-footer__corporate p {
        margin: 0;
        line-height: 24px; }
      .ds-ui-kit-scope .ds-footer__corporate img,
      .ds-ui-kit-scope .ds-footer__corporate img + p {
        position: relative;
        top: -12px; }
      .ds-ui-kit-scope .ds-footer__corporate .ds-col:last-child {
        text-align: right; }
    .ds-ui-kit-scope .ds-footer__corporate-links {
      line-height: 24px;
      position: relative;
      top: -1px; } }
  .ds-ui-kit-scope .ds-banner {
    position: relative;
    width: 100%;
    height: 88vh;
    background: #000 50% 50% no-repeat;
    overflow: hidden;
    color: #fff;
    background-size: cover; }
  .ds-ui-kit-scope .ds-banner .ds-breadcrumb {
    margin-top: 80px; }
  .ds-ui-kit-scope .ds-banner__shadow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4); }
  .ds-ui-kit-scope .ds-banner__content {
    text-align: center;
    width: 100%;
    position: relative;
    top: inherit;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    margin-top: 197px; }
    .ds-ui-kit-scope .ds-banner__content p {
      font-size: 18px;
      line-height: 28px;
      margin-bottom: 40px;
      margin-top: 0; }
    .ds-ui-kit-scope .ds-banner__content .ds-btn {
      font-size: 15px; }
      .ds-ui-kit-scope .ds-banner__content .ds-btn:last-child {
        margin-left: 30px;
        display: none; }
      .ds-ui-kit-scope .ds-banner__content .ds-btn:first-child {
        margin-left: 0;
        display: inline-block; }
      .ds-ui-kit-scope .ds-banner__content .ds-btn--large {
        font-size: 18px; }
  .ds-ui-kit-scope .ds-banner__title {
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 4px; }
  .ds-ui-kit-scope .ds-banner__subtitle {
    margin: 0;
    font-weight: 300;
    line-height: 36px;
    font-size: 26px;
    margin-bottom: 16px; }
  .ds-ui-kit-scope .ds-banner__visual {
    position: absolute;
    bottom: 24px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
  .ds-ui-kit-scope .ds-banner__indicator {
    display: inline-block;
    width: 56px;
    height: 56px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    cursor: pointer;
    line-height: 52px;
    text-align: center;
    font-size: 15px;
    border-radius: 100%;
    transition: border-color .3s, background .3s; }
    .ds-ui-kit-scope .ds-banner__indicator:hover {
      border-color: #fff;
      background-color: rgba(255, 255, 255, 0.16); }
  .ds-ui-kit-scope .ds-banner__buttons {
    margin-bottom: 64px;
    transition: opacity .3s ease; }
  .ds-ui-kit-scope .ds-banner--editorial {
    height: calc(100vh - 44px);
    min-height: 600px;
    max-height: 696px; }
  .ds-ui-kit-scope .ds-banner--editorial .ds-banner__content .ds-banner__title {
    font-size: 32px;
    line-height: 36px;
    margin-bottom: 8px; }
  .ds-ui-kit-scope .ds-banner--editorial .ds-banner__content .ds-banner__subtitle {
    margin-bottom: 32px;
    font-size: 26px;
    line-height: 32px; }
  .ds-ui-kit-scope .ds-banner--big {
    height: auto; }
  .ds-ui-kit-scope .ds-banner--big .ds-banner__content {
    text-align: left;
    margin-top: 123px; }
    .ds-ui-kit-scope .ds-banner--big .ds-banner__content .ds-banner__title {
      font-size: 32px;
      line-height: 36px;
      margin-bottom: 8px; }
    .ds-ui-kit-scope .ds-banner--big .ds-banner__content .ds-banner__subtitle {
      margin-bottom: 17px;
      font-size: 26px;
      line-height: 32px; }
    .ds-ui-kit-scope .ds-banner--big .ds-banner__content p {
      margin-bottom: 35px; }
  .ds-ui-kit-scope .ds-banner--big .ds-banner__visual {
    display: none; }
  .ds-ui-kit-scope .ds-banner--medium {
    height: auto; }
  .ds-ui-kit-scope .ds-banner--medium .ds-banner__content {
    margin-top: 127px;
    text-align: left; }
    .ds-ui-kit-scope .ds-banner--medium .ds-banner__content .ds-banner__title {
      font-size: 26px;
      line-height: 32px;
      margin-bottom: 3px; }
    .ds-ui-kit-scope .ds-banner--medium .ds-banner__content .ds-banner__subtitle {
      font-size: 22px;
      line-height: 28px;
      margin-bottom: 25px; }
    .ds-ui-kit-scope .ds-banner--medium .ds-banner__content .ds-btn:last-child {
      display: none; }
    .ds-ui-kit-scope .ds-banner--medium .ds-banner__content .ds-btn:first-child {
      display: inline-block; }
  .ds-ui-kit-scope .ds-banner--medium .ds-banner__buttons {
    margin-bottom: 64px; }
  .ds-ui-kit-scope .ds-banner--medium .ds-banner__visual {
    display: none; }
  .ds-ui-kit-scope .ds-banner--with-highlights {
    padding-bottom: 160px; }
  .ds-ui-kit-scope .ds-banner--with-highlights .ds-banner__buttons {
    margin-bottom: 58px; }
  .ds-ui-kit-scope .ds-banner--small {
    height: auto; }
  .ds-ui-kit-scope .ds-banner--small .ds-banner__content {
    margin-top: 127px; }
    .ds-ui-kit-scope .ds-banner--small .ds-banner__content .ds-banner__title {
      font-size: 26px;
      margin-bottom: 72px;
      line-height: 32px; }
  .ds-ui-kit-scope .ds-banner--x-small {
    height: auto; }
  .ds-ui-kit-scope .ds-banner--x-small .ds-banner__content {
    margin-top: 111px; }
    .ds-ui-kit-scope .ds-banner--x-small .ds-banner__content .ds-banner__title {
      font-size: 26px;
      margin-bottom: 52px;
      line-height: 32px; }
  .ds-ui-kit-scope .ds-banner__breadcrumb {
    display: none; }
  @media all and (min-width: 721px) {
    .ds-ui-kit-scope .ds-banner__content {
      position: absolute;
      top: calc(50% + 14px);
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%);
      text-align: center;
      width: 100%;
      margin-top: 0; }
      .ds-ui-kit-scope .ds-banner__content .ds-banner__title {
        font-size: 55px;
        line-height: 64px;
        font-weight: 600;
        margin: 0 0 20px; }
      .ds-ui-kit-scope .ds-banner__content .ds-banner__subtitle {
        margin: 0;
        font-weight: 300;
        font-size: 32px;
        line-height: 36px;
        margin-bottom: 56px; }
      .ds-ui-kit-scope .ds-banner__content p {
        margin-bottom: 60px;
        font-size: 18px;
        line-height: 28px; }
      .ds-ui-kit-scope .ds-banner__content .ds-btn {
        font-size: 15px; }
        .ds-ui-kit-scope .ds-banner__content .ds-btn:last-child {
          margin-left: 44px; }
        .ds-ui-kit-scope .ds-banner__content .ds-btn:first-child {
          margin-left: 0; }
        .ds-ui-kit-scope .ds-banner__content .ds-btn--large {
          font-size: 18px; }
    .ds-ui-kit-scope .ds-banner__buttons {
      margin-bottom: 0; }
    .ds-ui-kit-scope .ds-banner__visual {
      bottom: 64px; }
    .ds-ui-kit-scope .ds-banner--editorial {
      min-height: 632px;
      max-height: inherit;
      height: 88vh; }
    .ds-ui-kit-scope .ds-banner--editorial .ds-banner__content .ds-banner__title {
      font-size: 55px;
      line-height: 64px;
      font-weight: 600;
      margin: 0 0 20px; }
    .ds-ui-kit-scope .ds-banner--editorial .ds-banner__content .ds-banner__subtitle {
      margin: 0;
      font-weight: 300;
      font-size: 32px;
      line-height: 36px;
      margin-bottom: 56px; }
    .ds-ui-kit-scope .ds-banner--editorial .ds-banner__content .ds-btn:last-child {
      display: inline-block; }
    .ds-ui-kit-scope .ds-banner--editorial .ds-banner__content .ds-btn:first-child {
      display: inline-block; }
    .ds-ui-kit-scope .ds-banner--big {
      height: 696px; }
    .ds-ui-kit-scope .ds-banner--big .ds-banner__content {
      text-align: left;
      margin-top: 0;
      top: calc(50% + 19px); }
      .ds-ui-kit-scope .ds-banner--big .ds-banner__content .ds-banner__title {
        margin-bottom: 14px;
        font-size: 44px;
        line-height: 48px; }
      .ds-ui-kit-scope .ds-banner--big .ds-banner__content .ds-banner__subtitle {
        margin-bottom: 36px;
        font-size: 26px;
        line-height: 32px; }
      .ds-ui-kit-scope .ds-banner--big .ds-banner__content p {
        margin-bottom: 56px; }
      .ds-ui-kit-scope .ds-banner--big .ds-banner__content .ds-btn:last-child {
        display: inline-block; }
      .ds-ui-kit-scope .ds-banner--big .ds-banner__content .ds-btn:first-child {
        display: inline-block; }
    .ds-ui-kit-scope .ds-banner--medium {
      height: 540px; }
    .ds-ui-kit-scope .ds-banner--medium .ds-banner__content {
      margin-top: 0;
      text-align: left;
      top: calc(50% + 22px); }
      .ds-ui-kit-scope .ds-banner--medium .ds-banner__content .ds-banner__title {
        font-size: 44px;
        margin-bottom: 12px;
        line-height: 48px; }
      .ds-ui-kit-scope .ds-banner--medium .ds-banner__content .ds-banner__subtitle {
        font-size: 26px;
        line-height: 32px;
        margin-bottom: 48px; }
      .ds-ui-kit-scope .ds-banner--medium .ds-banner__content .ds-btn:last-child {
        display: inline-block; }
      .ds-ui-kit-scope .ds-banner--medium .ds-banner__content .ds-btn:first-child {
        display: inline-block; }
    .ds-ui-kit-scope .ds-banner--medium .ds-banner__buttons {
      margin-bottom: 0; }
    .ds-ui-kit-scope .ds-banner--with-highlights {
      height: 856px;
      padding-bottom: 0; }
    .ds-ui-kit-scope .ds-banner--with-highlights .ds-banner__content {
      top: calc(50% - 61px); }
    .ds-ui-kit-scope .ds-banner--with-highlights .ds-banner__buttons {
      margin-bottom: 0; }
    .ds-ui-kit-scope .ds-banner--small {
      height: 420px; }
    .ds-ui-kit-scope .ds-banner--small .ds-banner__content {
      top: calc(50% + 50px);
      margin-top: 0; }
      .ds-ui-kit-scope .ds-banner--small .ds-banner__content .ds-banner__title {
        font-size: 44px;
        margin-bottom: 12px;
        line-height: 48px; }
    .ds-ui-kit-scope .ds-banner--x-small {
      height: 300px; }
    .ds-ui-kit-scope .ds-banner--x-small .ds-banner__content {
      top: calc(50% + 59px);
      margin-top: 0; }
      .ds-ui-kit-scope .ds-banner--x-small .ds-banner__content .ds-banner__title {
        font-size: 32px;
        margin-bottom: 20px;
        line-height: 36px; }
    .ds-ui-kit-scope .ds-banner__breadcrumb {
      display: block; } }
  .ds-ui-kit-scope .ds-discover {
    margin-top: -256px;
    position: relative;
    background: #fff;
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    overflow: hidden; }
    .ds-ui-kit-scope .ds-discover .ds-heading-3 {
      color: #005386;
      text-align: center;
      margin-bottom: 32px; }
  .ds-ui-kit-scope .ds-discover__container {
    position: relative; }
  .ds-ui-kit-scope .ds-discover--closed {
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    display: none; }
  .ds-ui-kit-scope .ds-discover__close {
    color: #fff;
    position: absolute;
    z-index: 10;
    top: 48px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.32);
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: all .15s ease-out; }
    .ds-ui-kit-scope .ds-discover__close:hover {
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.48); }
    .ds-ui-kit-scope .ds-discover__close:after {
      content: '\e911';
      font-family: 'icon';
      display: inline-block;
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%);
      font-size: 16px; }
    .ds-ui-kit-scope .ds-discover__close.sticky {
      position: fixed; }
    .ds-ui-kit-scope .ds-discover__close.to-top {
      top: 48px;
      bottom: auto; }
    .ds-ui-kit-scope .ds-discover__close.to-bottom {
      bottom: 48px;
      top: auto; }
    .ds-ui-kit-scope .ds-discover__close.in-local-menu {
      top: 104px;
      bottom: auto; }
  .ds-ui-kit-scope .ds-discover__footer {
    padding-bottom: 472px;
    width: 100%;
    background-size: cover;
    position: relative; }
    .ds-ui-kit-scope .ds-discover__footer .ds-heading-2 {
      margin-bottom: 36px; }
    .ds-ui-kit-scope .ds-discover__footer .content {
      margin: auto;
      color: #fff;
      text-align: center;
      position: absolute;
      top: calc((100% - 160px)/2);
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
  .ds-ui-kit-scope .ds-discover__wrapper {
    position: relative;
    padding-bottom: 126px;
    padding-top: 126px; }
  @media all and (min-width: 721px) and (max-width: 1041px) {
    .ds-ui-kit-scope .ds-discover {
      margin-top: -256px; } }
  @media all and (min-width: 1041px) {
    .ds-ui-kit-scope .ds-discover {
      margin-top: -256px; }
    .ds-ui-kit-scope .ds-discover__footer {
      height: 535px; }
    .ds-ui-kit-scope .ds-discover__close.in-local-menu {
      top: 128px; } }
  .ds-ui-kit-scope .ds-highlight {
    background-size: cover;
    background-color: #005386;
    position: relative;
    color: #fff;
    overflow: hidden;
    margin-bottom: 16px;
    height: 480px;
    padding: 48px 32px 46px;
    z-index: 0; }
    .ds-ui-kit-scope .ds-highlight:hover .ds-highlight__image {
      -webkit-transform: scale(1.05);
          -ms-transform: scale(1.05);
              transform: scale(1.05); }
    .ds-ui-kit-scope .ds-highlight .ds-highlight__link {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      display: block; }
  .ds-ui-kit-scope .ds-highlight__title {
    position: relative;
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 16px;
    font-weight: 600; }
  .ds-ui-kit-scope .ds-highlight__image {
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
    top: 0;
    left: 0;
    transition: -webkit-transform 3s cubic-bezier(0.06, 0.69, 0.18, 0.99);
    transition: transform 3s cubic-bezier(0.06, 0.69, 0.18, 0.99);
    -webkit-backface-visibility: hidden; }
  .ds-ui-kit-scope .ds-highlight__shadow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: .2;
    background: #000;
    -webkit-backface-visibility: hidden; }
  .ds-ui-kit-scope .ds-highlight__subinfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    margin-bottom: 3px; }
    .ds-ui-kit-scope .ds-highlight__subinfo span {
      margin-bottom: 0;
      margin-right: 0;
      margin-left: 6px; }
  .ds-ui-kit-scope .ds-highlight__meta {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin-left: auto;
    position: relative;
    top: -8px; }
  .ds-ui-kit-scope .ds-highlight__category {
    position: relative;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 20px;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin: 0;
    padding-right: 16px; }
  .ds-ui-kit-scope .ds-highlight__additionnal {
    position: relative;
    font-size: 15px;
    height: 64px; }
    .ds-ui-kit-scope .ds-highlight__additionnal span {
      font-weight: 400;
      font-size: 15px;
      line-height: 16px;
      margin-bottom: 8px;
      display: block; }
      .ds-ui-kit-scope .ds-highlight__additionnal span i {
        position: relative;
        top: -1px; }
  .ds-ui-kit-scope .ds-highlight--over-hero {
    margin-top: -154px; }
  .ds-ui-kit-scope .ds-highlight__cta {
    position: relative;
    padding-right: 8px;
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
    margin-bottom: 15px; }
  .ds-ui-kit-scope .ds-highlight__shout {
    position: relative;
    margin-bottom: 15px; }
  .ds-ui-kit-scope .ds-highlight__buttons-wrapper {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    padding-left: 32px;
    padding-right: 32px;
    z-index: 2; }
  .ds-ui-kit-scope .ds-highlight__buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .ds-ui-kit-scope .ds-highlight__buttons a {
      white-space: nowrap;
      overflow: visible; }
      .ds-ui-kit-scope .ds-highlight__buttons a span {
        white-space: normal;
        line-height: 16px;
        padding-right: 24px; }
  @media all and (min-width: 721px) and (max-width: 1041px) {
    .ds-ui-kit-scope .ds-highlight {
      height: 480px;
      padding: 65px 32px 52px;
      margin-bottom: 32px; }
      .ds-ui-kit-scope .ds-highlight .ds-highlight__subinfo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: baseline;
            -ms-flex-align: baseline;
                align-items: baseline;
        margin-bottom: 1px; }
      .ds-ui-kit-scope .ds-highlight .ds-highlight__category {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        margin: 0; }
      .ds-ui-kit-scope .ds-highlight .ds-highlight__meta {
        position: relative;
        right: inherit;
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        margin-left: auto;
        font-size: 13px;
        top: -9px; }
      .ds-ui-kit-scope .ds-highlight .ds-highlight__cta {
        position: relative;
        left: inherit;
        bottom: inherit;
        padding-right: 8px;
        -webkit-box-flex: 2;
            -ms-flex-positive: 2;
                flex-grow: 2;
        margin-bottom: 15px; }
      .ds-ui-kit-scope .ds-highlight .ds-highlight__shout {
        position: relative;
        right: inherit;
        bottom: inherit;
        margin-bottom: 15px; }
      .ds-ui-kit-scope .ds-highlight .ds-highlight__buttons-wrapper {
        padding-left: 32px;
        padding-right: 32px; }
    .ds-ui-kit-scope .ds-highlight--over-hero {
      margin-top: -160px; } }
  @media all and (min-width: 1041px) {
    .ds-ui-kit-scope .ds-highlight {
      height: 480px;
      padding: 68px 90px 58px 64px;
      margin-bottom: 64px; }
    .ds-ui-kit-scope .ds-highlight__subinfo {
      display: inherit;
      -webkit-box-align: inherit;
          -ms-flex-align: inherit;
              align-items: inherit;
      margin-bottom: 3px; }
      .ds-ui-kit-scope .ds-highlight__subinfo span {
        margin-bottom: 16px; }
    .ds-ui-kit-scope .ds-highlight__meta {
      position: absolute;
      top: 57px;
      right: 64px; }
    .ds-ui-kit-scope .ds-highlight__category {
      margin-bottom: 3px;
      padding-right: 0; }
    .ds-ui-kit-scope .ds-highlight--over-hero {
      margin-top: -160px; }
    .ds-ui-kit-scope .ds-highlight__cta {
      margin-bottom: 24px; }
    .ds-ui-kit-scope .ds-highlight__shout {
      margin-bottom: 24px; }
    .ds-ui-kit-scope .ds-highlight__buttons-wrapper {
      padding-left: 64px;
      padding-right: 64px;
      bottom: 42px; }
    .ds-ui-kit-scope .ds-highlight__buttons {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; } }
  .ds-ui-kit-scope .ds-sharing {
    -webkit-tap-highlight-color: transparent; }
    .ds-ui-kit-scope .ds-sharing .ds-btn {
      background-color: rgba(0, 0, 0, 0.08);
      color: rgba(0, 0, 0, 0.48); }
      .ds-ui-kit-scope .ds-sharing .ds-btn:hover {
        background-color: rgba(0, 0, 0, 0.16); }
    .ds-ui-kit-scope .ds-sharing .ds-sharing__close {
      width: 32px;
      height: 32px;
      padding: 0;
      text-align: center;
      background: transparent;
      border: 2px solid rgba(0, 0, 0, 0.48);
      vertical-align: top;
      line-height: 30px;
      float: left; }
      .ds-ui-kit-scope .ds-sharing .ds-sharing__close:hover {
        border: 2px solid rgba(0, 0, 0, 0.8);
        color: rgba(0, 0, 0, 0.8);
        background: rgba(0, 0, 0, 0.08); }
      .ds-ui-kit-scope .ds-sharing .ds-sharing__close i {
        margin: 0;
        vertical-align: middle;
        position: relative;
        top: -1px; }
      .ds-ui-kit-scope .ds-sharing .ds-sharing__close ~ .ds-sharing__socials .ds-btn {
        margin-left: 8px;
        margin-right: 0; }
        .ds-ui-kit-scope .ds-sharing .ds-sharing__close ~ .ds-sharing__socials .ds-btn i {
          top: 0; }
    .ds-ui-kit-scope .ds-sharing .ds-sharing__socials {
      float: left; }
      .ds-ui-kit-scope .ds-sharing .ds-sharing__socials .ds-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        margin: 0;
        text-align: center;
        line-height: 32px;
        float: left;
        margin-right: 8px; }
        .ds-ui-kit-scope .ds-sharing .ds-sharing__socials .ds-btn i {
          margin: 0;
          padding: 0;
          vertical-align: middle;
          top: 0; }
  .ds-ui-kit-scope .ds-sharing .ds-sharing__socials,
  .ds-ui-kit-scope .ds-sharing .ds-sharing__close {
    display: none; }
  .ds-ui-kit-scope .ds-sharing--open .ds-sharing__socials,
  .ds-ui-kit-scope .ds-sharing--open .ds-sharing__close {
    display: inline-block; }
  .ds-ui-kit-scope .ds-sharing--open .ds-sharing__action {
    display: none; }
  .ds-ui-kit-scope .ds-sharing--compact .ds-sharing__action.ds-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    text-align: center;
    line-height: 32px; }
    .ds-ui-kit-scope .ds-sharing--compact .ds-sharing__action.ds-btn i {
      padding: 0;
      margin: 0; }
    .ds-ui-kit-scope .ds-sharing--compact .ds-sharing__action.ds-btn span {
      display: none; }
  .ds-ui-kit-scope .ds-sharing--dark .ds-btn {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff; }
    .ds-ui-kit-scope .ds-sharing--dark .ds-btn:hover {
      background-color: rgba(255, 255, 255, 0.16); }
  .ds-ui-kit-scope .ds-sharing--dark .ds-sharing__close {
    background: #fff;
    border: 2px solid transparent;
    color: rgba(0, 0, 0, 0.48); }
    .ds-ui-kit-scope .ds-sharing--dark .ds-sharing__close:hover {
      border: 2px solid transparent;
      color: #626263;
      background: rgba(255, 255, 255, 0.64); }
  .ds-ui-kit-scope .ds-sharing--card .ds-btn {
    background-color: rgba(0, 0, 0, 0.48);
    color: #fff; }
    .ds-ui-kit-scope .ds-sharing--card .ds-btn:hover {
      background-color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .ds-sharing--card .ds-sharing__close {
    background: rgba(0, 0, 0, 0.8);
    border-color: transparent;
    color: #fff; }
    .ds-ui-kit-scope .ds-sharing--card .ds-sharing__close:hover {
      background: rgba(0, 0, 0, 0.48);
      border-color: transparent;
      color: #fff; }
  .ds-ui-kit-scope .ds-card {
    position: relative;
    width: 100%;
    max-width: 432px;
    margin: 20px 0;
    display: block;
    float: left;
    text-align: left;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 transparent;
    transition: box-shadow .35s ease-out; }
    .ds-ui-kit-scope .ds-card:hover {
      box-shadow: 0 9px 12px 0 rgba(0, 0, 0, 0.1); }
      .ds-ui-kit-scope .ds-card:hover .ds-sharing {
        opacity: 1;
        transition: opacity .15s ease-out; }
      .ds-ui-kit-scope .ds-card:hover .ds-ico-play-big {
        -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
                transform: scale(1.1); }
    .ds-ui-kit-scope .ds-card .ds-sharing {
      position: absolute;
      top: 16px;
      right: 16px;
      opacity: 0;
      font-size: 14px;
      z-index: 10; }
    .ds-ui-kit-scope .ds-card span i {
      position: relative;
      top: -2px; }
    .ds-ui-kit-scope .ds-card p {
      font-size: 15px;
      line-height: 24px;
      color: rgba(0, 0, 0, 0.8);
      margin: 0 0 16px;
      max-height: 120px;
      overflow: hidden; }
    .ds-ui-kit-scope .ds-card a {
      text-decoration: none; }
    .ds-ui-kit-scope .ds-card .ds-ico-play-big {
      position: absolute;
      top: 67px;
      left: 50%;
      margin-left: -32px;
      cursor: pointer;
      color: #fff;
      transition: all 0.6s cubic-bezier(0.39, 0.58, 0.57, 1); }
    .ds-ui-kit-scope .ds-card .ds-tag-meta {
      position: absolute;
      top: 152px;
      left: 32px; }
    .ds-ui-kit-scope .ds-card .ds-people__infos {
      color: rgba(0, 0, 0, 0.48); }
  .ds-ui-kit-scope .ds-card__title {
    font-size: 22px;
    line-height: 24px;
    font-weight: 600;
    max-height: 48px;
    overflow: hidden;
    margin: 7px 0 10px;
    color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-card__title ~ span {
      color: rgba(0, 0, 0, 0.48);
      font-weight: 600;
      font-size: 13px;
      line-height: 16px;
      margin-bottom: 8px;
      display: block; }
  .ds-ui-kit-scope .ds-card__links,
  .ds-ui-kit-scope .ds-card__wrapper {
    padding: 31px 32px 29px;
    width: 100%; }
  .ds-ui-kit-scope .ds-card__wrapper {
    border-radius: 0 0 10px 10px;
    height: 320px;
    /*background: #fff;*/
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-top: 0; }
  .ds-ui-kit-scope .ds-card__links {
    position: absolute;
    z-index: 1;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .ds-ui-kit-scope .ds-card__links a:first-child {
      padding-right: 16px;
      -ms-flex-negative: 2;
          flex-shrink: 2;
      max-width: 60%; }
    .ds-ui-kit-scope .ds-card__links a:last-child {
      padding-right: 16px;
      -ms-flex-negative: 2;
          flex-shrink: 2;
      max-width: inherit; }
    .ds-ui-kit-scope .ds-card__links a:nth-child(2) {
      margin-left: auto;
      white-space: nowrap; }
  .ds-ui-kit-scope .ds-card__category {
    display: block;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.48);
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  .ds-ui-kit-scope .ds-card__authors {
    display: inline-block;
    margin-top: 16px; }
    .ds-ui-kit-scope .ds-card__authors * {
      display: inline-block;
      vertical-align: middle; }
  .ds-ui-kit-scope .ds-card__pictures {
    margin-right: 21px; }
    .ds-ui-kit-scope .ds-card__pictures img {
      display: block;
      float: left;
      height: 32px;
      width: auto;
      margin-right: -14px; }
  .ds-ui-kit-scope .ds-card__names strong {
    font-weight: normal;
    margin-top: -2px; }
  .ds-ui-kit-scope .ds-card__names em {
    display: block;
    font-style: normal;
    font-weight: 300; }
  .ds-ui-kit-scope .ds-card__thumbnail {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 192px;
    background: rgba(0, 0, 0, 0.08) no-repeat center center;
    background-size: cover; }
  .ds-ui-kit-scope .ds-card--video p {
    color: #808080;
    font-weight: 400; }
  .ds-ui-kit-scope .ds-card--video .ds-card__title {
    margin-bottom: 18px; }
  .ds-ui-kit-scope .ds-card--video .ds-card__wrapper {
    height: 236px;
    padding-top: 27px; }
  .ds-ui-kit-scope .ds-card--video .ds-ico-play-big {
    top: 108px; }
  .ds-ui-kit-scope .ds-card--video .ds-card__thumbnail {
    height: 276px; }
  .ds-ui-kit-scope .ds-card--live p {
    max-height: 72px; }
  .ds-ui-kit-scope .ds-card--noimage .ds-card__wrapper {
    height: 512px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    padding-top: 118px; }
  .ds-ui-kit-scope .ds-card--lines {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
    margin: 0;
    padding: 24px 0; }
    .ds-ui-kit-scope .ds-card--lines:hover {
      box-shadow: none; }
    .ds-ui-kit-scope .ds-card--lines:last-child {
      border-bottom: 0; }
    .ds-ui-kit-scope .ds-card--lines .ds-card__links,
    .ds-ui-kit-scope .ds-card--lines p[itemprop='description'] {
      display: none; }
    .ds-ui-kit-scope .ds-card--lines .ds-card__thumbnail {
      position: relative;
      float: left;
      width: 64px;
      height: 64px;
      border-radius: 4px; }
    .ds-ui-kit-scope .ds-card--lines .ds-card__wrapper {
      width: calc(100% - 64px);
      margin-left: 64px;
      border: 0;
      padding: 0 24px;
      height: auto; }
    .ds-ui-kit-scope .ds-card--lines .ds-card__title {
      margin-top: 2px;
      margin-bottom: 20px; }
      .ds-ui-kit-scope .ds-card--lines .ds-card__title ~ span:last-child {
        margin-bottom: 0; }
    .ds-ui-kit-scope .ds-card--lines .ds-ico-play-big {
      font-size: 32px;
      top: 50%;
      left: 50%;
      margin-top: -16px;
      margin-left: -16px; }
    .ds-ui-kit-scope .ds-card--lines .ds-tag-meta {
      float: right;
      position: static;
      margin: 0;
      margin-top: -4px;
      margin-right: -24px; }
      .ds-ui-kit-scope .ds-card--lines .ds-tag-meta + .ds-card__category {
        overflow: visible;
        white-space: normal; }
  @media all and (min-width: 721px) {
    .ds-ui-kit-scope .ds-card--large .ds-card__thumbnail,
    .ds-ui-kit-scope .ds-card--small .ds-card__thumbnail {
      border-radius: 10px 0 0 10px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .ds-ui-kit-scope .ds-card--large .ds-card__wrapper,
    .ds-ui-kit-scope .ds-card--small .ds-card__wrapper {
      height: auto;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-left: 0;
      border-radius: 0 10px 10px 0; }
    .ds-ui-kit-scope .ds-card--large {
      width: 100%;
      max-width: 1008px;
      margin: 0; }
      .ds-ui-kit-scope .ds-card--large .ds-card__thumbnail {
        width: 35%; }
      .ds-ui-kit-scope .ds-card--large .ds-card__wrapper {
        width: 65%;
        margin-left: 35%;
        padding: 42px 48px 101px; }
      .ds-ui-kit-scope .ds-card--large .ds-card__category {
        margin-bottom: 1px; }
      .ds-ui-kit-scope .ds-card--large .ds-card__links {
        width: auto;
        left: 35%;
        padding: 44px 48px; }
      .ds-ui-kit-scope .ds-card--large .ds-sharing {
        left: 20%;
        right: auto;
        top: auto;
        bottom: 48px;
        margin-left: -50px; }
      .ds-ui-kit-scope .ds-card--large .ds-sharing--open {
        margin-left: -110px; }
      .ds-ui-kit-scope .ds-card--large .ds-card__title {
        font-size: 26px;
        line-height: 32px;
        max-height: 64px;
        margin: 9px 0 16px; }
      .ds-ui-kit-scope .ds-card--large p {
        margin-bottom: 2px; }
    .ds-ui-kit-scope .ds-card--small {
      width: 560px;
      max-width: none;
      box-shadow: 0 9px 12px 0 rgba(0, 0, 0, 0.1); }
      .ds-ui-kit-scope .ds-card--small .ds-card__thumbnail {
        width: 176px; }
      .ds-ui-kit-scope .ds-card--small p {
        font-size: 13px;
        line-height: 20px;
        margin: 0; }
      .ds-ui-kit-scope .ds-card--small .ds-card__title {
        font-size: 18px;
        line-height: 20px;
        margin: 0 0 6px; }
      .ds-ui-kit-scope .ds-card--small .ds-card__category {
        font-size: 11px;
        margin-bottom: 4px; }
      .ds-ui-kit-scope .ds-card--small .ds-card__wrapper {
        width: 384px;
        margin-left: 176px;
        padding: 19px 32px 16px 24px; }
    .ds-ui-kit-scope .ds-card--lines {
      width: 100%;
      max-width: none;
      padding: 16px 0; }
      .ds-ui-kit-scope .ds-card--lines p[itemprop='description'] {
        display: block; }
      .ds-ui-kit-scope .ds-card--lines p {
        margin-bottom: 13px; }
      .ds-ui-kit-scope .ds-card--lines .ds-card__thumbnail {
        width: 160px;
        height: 160px; }
      .ds-ui-kit-scope .ds-card--lines .ds-card__wrapper {
        border: 0;
        width: calc(100% - 160px);
        margin-left: 160px;
        padding: 0 32px; }
      .ds-ui-kit-scope .ds-card--lines .ds-card__title {
        font-size: 18px;
        margin-bottom: 4px;
        margin-top: 4px; }
        .ds-ui-kit-scope .ds-card--lines .ds-card__title ~ span {
          display: inline-block;
          margin-right: 24px;
          margin-bottom: 0; }
      .ds-ui-kit-scope .ds-card--lines .ds-card__category {
        margin-top: 11px; }
      .ds-ui-kit-scope .ds-card--lines .ds-ico-play-big {
        font-size: 64px;
        margin-top: -32px;
        margin-left: -32px; }
      .ds-ui-kit-scope .ds-card--lines .ds-tag-meta {
        position: absolute;
        top: 24px;
        left: 8px;
        margin: 0; } }
  @media all and (min-width: 841px) {
    .ds-ui-kit-scope .ds-card--large .ds-card__thumbnail {
      width: 38%; }
    .ds-ui-kit-scope .ds-card--large .ds-card__wrapper {
      width: 62%;
      margin-left: 38%; }
    .ds-ui-kit-scope .ds-card--large .ds-card__links {
      left: 38%; } }
  @media all and (min-width: 1441px) {
    .ds-ui-kit-scope .ds-card--large .ds-card__thumbnail {
      width: 37.5%; }
    .ds-ui-kit-scope .ds-card--large .ds-card__wrapper {
      width: 62.5%;
      margin-left: 37.5%; }
    .ds-ui-kit-scope .ds-card--large .ds-card__links {
      left: 37.5%; }
    .ds-ui-kit-scope .ds-card--lines .ds-card__wrapper {
      padding: 0 40px; } }
  @media all and (max-width: 374px) {
    .ds-ui-kit-scope .ds-card__links a:first-child:only-child {
      display: block; }
    .ds-ui-kit-scope .ds-card__links a:nth-child(2) {
      margin-left: inherit; } }
  .ds-ui-kit-scope .ds-card--mini .ds-card__thumbnail {
    display: none; }
  .ds-ui-kit-scope .ds-card--mini .ds-card__wrapper {
    height: 192px;
    padding: 29px 32px; }
  .ds-ui-kit-scope .ds-card--mini .ds-card__title {
    height: 80px;
    margin: 0 0 12px; }
    .ds-ui-kit-scope .ds-card--mini .ds-card__title ~ span {
      font-size: 14px;
      line-height: 18px;
      font-weight: 400;
      margin-bottom: 6px; }
  .ds-ui-kit-scope .ds-breadcrumb {
    position: relative;
    display: none;
    font-size: 15px; }
    .ds-ui-kit-scope .ds-breadcrumb ol.ds-breadcrumb__ariane {
      font-size: 0; }
      .ds-ui-kit-scope .ds-breadcrumb ol.ds-breadcrumb__ariane li {
        display: inline-block;
        font-size: 15px;
        font-weight: 300; }
        .ds-ui-kit-scope .ds-breadcrumb ol.ds-breadcrumb__ariane li:after {
          content: '\e90c';
          font-family: icon;
          font-size: 16px;
          position: relative;
          top: 2px;
          margin-left: 8px;
          margin-right: 8px;
          color: rgba(0, 0, 0, 0.32); }
        .ds-ui-kit-scope .ds-breadcrumb ol.ds-breadcrumb__ariane li a {
          transition: color .3s;
          color: rgba(0, 0, 0, 0.32); }
        .ds-ui-kit-scope .ds-breadcrumb ol.ds-breadcrumb__ariane li a:hover {
          color: rgba(0, 0, 0, 0.8);
          text-decoration: none; }
        .ds-ui-kit-scope .ds-breadcrumb ol.ds-breadcrumb__ariane li i {
          font-size: 32px;
          position: relative;
          top: -1px; }
        .ds-ui-kit-scope .ds-breadcrumb ol.ds-breadcrumb__ariane li.active i {
          color: #239de8; }
      .ds-ui-kit-scope .ds-breadcrumb ol.ds-breadcrumb__ariane li:last-child {
        color: rgba(0, 0, 0, 0.32);
        cursor: default; }
        .ds-ui-kit-scope .ds-breadcrumb ol.ds-breadcrumb__ariane li:last-child a {
          cursor: default;
          pointer-events: none; }
        .ds-ui-kit-scope .ds-breadcrumb ol.ds-breadcrumb__ariane li:last-child:after {
          content: none; }
    .ds-ui-kit-scope .ds-breadcrumb .ds-breadcrumb__submenu {
      min-width: 160px;
      visibility: hidden;
      padding: 11px 0 13px;
      background: #fff;
      border-radius: 4px;
      position: absolute;
      left: -24px;
      top: 49px;
      font-size: 15px;
      font-weight: 300;
      line-height: 32px;
      color: rgba(0, 0, 0, 0.8);
      box-shadow: 0 9px 12px 0 rgba(0, 0, 0, 0.1);
      opacity: 0;
      transition: all 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
      z-index: 15; }
      .ds-ui-kit-scope .ds-breadcrumb .ds-breadcrumb__submenu.active {
        visibility: visible;
        opacity: 1;
        top: 37px; }
      .ds-ui-kit-scope .ds-breadcrumb .ds-breadcrumb__submenu ol {
        position: relative;
        list-style: none; }
        .ds-ui-kit-scope .ds-breadcrumb .ds-breadcrumb__submenu ol li {
          padding-right: 40px;
          padding-left: 24px;
          position: relative;
          top: 1px; }
        .ds-ui-kit-scope .ds-breadcrumb .ds-breadcrumb__submenu ol a {
          display: block;
          color: rgba(0, 0, 0, 0.8); }
          .ds-ui-kit-scope .ds-breadcrumb .ds-breadcrumb__submenu ol a:hover {
            background: rgba(0, 0, 0, 0.08);
            text-decoration: inherit; }
  .ds-ui-kit-scope .ds-breadcrumb--dark ol.ds-breadcrumb__ariane li:after {
    color: rgba(255, 255, 255, 0.64); }
  .ds-ui-kit-scope .ds-breadcrumb--dark ol.ds-breadcrumb__ariane li a {
    color: rgba(255, 255, 255, 0.64); }
    .ds-ui-kit-scope .ds-breadcrumb--dark ol.ds-breadcrumb__ariane li a:hover {
      color: #fff; }
  .ds-ui-kit-scope .ds-breadcrumb--dark ol.ds-breadcrumb__ariane li:last-child {
    color: rgba(255, 255, 255, 0.64); }
  .ds-ui-kit-scope .ds-breadcrumb-container {
    height: 0; }
  .ds-ui-kit-scope .ds-breadcrumb--over-hero {
    position: absolute;
    top: 98px;
    z-index: 1; }
  .ds-ui-kit-scope .ds-menu--banner.is--transparent + .ds-breadcrumb-container .ds-breadcrumb--over-hero,
  .ds-ui-kit-scope .ds-menu--banner.is--transparent + .ds-banner .ds-breadcrumb--over-hero {
    top: 56px; }
  .ds-ui-kit-scope .ds-menu--banner.is--transparent.is-open + .ds-breadcrumb-container {
    display: none; }
  .ds-ui-kit-scope .ds-banner .ds-breadcrumb {
    margin-top: 0; }
  @media all and (min-width: 721px) {
    .ds-ui-kit-scope .ds-breadcrumb {
      display: block; } }
  .ds-ui-kit-scope .ds-vplayer {
    width: 100%;
    padding-bottom: calc(100% * 9 / 16);
    background: #000;
    position: relative;
    overflow: hidden;
    cursor: pointer; }
    .ds-ui-kit-scope .ds-vplayer.active .ds-vplayer__cover {
      opacity: 0;
      pointer-events: none; }
    .ds-ui-kit-scope .ds-vplayer.active .ds-vplayer__play {
      opacity: 0;
      pointer-events: none; }
    .ds-ui-kit-scope .ds-vplayer:hover .ds-vplayer__cover {
      -webkit-transform: scale(1.02);
          -ms-transform: scale(1.02);
              transform: scale(1.02); }
    .ds-ui-kit-scope .ds-vplayer .ds-vplayer__cover {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-size: cover;
      transition: all 0.6s cubic-bezier(0.39, 0.58, 0.57, 1); }
    .ds-ui-kit-scope .ds-vplayer .ds-vplayer__gradient {
      position: absolute;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to bottom, black 0%, transparent 100%); }
    .ds-ui-kit-scope .ds-vplayer .ds-vplayer__play {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      color: #fff; }
      .ds-ui-kit-scope .ds-vplayer .ds-vplayer__play i {
        transition: all 0.6s cubic-bezier(0.39, 0.58, 0.57, 1);
        text-shadow: 0 16px 8px rgba(0, 0, 0, 0.48); }
        .ds-ui-kit-scope .ds-vplayer .ds-vplayer__play i:hover {
          -webkit-transform: scale(0.9);
              -ms-transform: scale(0.9);
                  transform: scale(0.9); }
    .ds-ui-kit-scope .ds-vplayer iframe {
      position: absolute;
      left: 0;
      width: 100% !important;
      height: 100% !important; }
  .ds-ui-kit-scope .ds-vplayer__legend {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.48);
    text-align: center;
    margin-top: 19px;
    margin-bottom: 32px; }
  .ds-ui-kit-scope .ds-youtube-overlay {
    position: fixed;
    background: #fff;
    opacity: 0;
    z-index: 100;
    top: 50%;
    bottom: 50%;
    left: 50%;
    right: 50%;
    overflow-y: scroll;
    transition: opacity .5s ease-out; }
    .ds-ui-kit-scope .ds-youtube-overlay .ds-youtube-overlay__close {
      color: #fff;
      position: absolute;
      z-index: 1;
      top: 3em;
      left: 50%;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      display: block;
      margin: auto;
      width: 40px;
      height: 40px;
      line-height: 40px;
      border: 2px solid #fff;
      border-radius: 100%;
      background: rgba(0, 0, 0, 0.08);
      text-align: center;
      cursor: pointer;
      opacity: 0;
      transition: all .15s ease-out; }
      .ds-ui-kit-scope .ds-youtube-overlay .ds-youtube-overlay__close:hover {
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.16); }
      .ds-ui-kit-scope .ds-youtube-overlay .ds-youtube-overlay__close:after {
        content: '\e911';
        font-family: 'icon';
        display: inline-block;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        font-size: 16px; }
    .ds-ui-kit-scope .ds-youtube-overlay.ds-youtube-overlay--fullscreen {
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.35, 1.1, 0.25, 1) !important;
      top: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      opacity: 1 !important; }
    .ds-ui-kit-scope .ds-youtube-overlay.ds-youtube-overlay--fullscreen, .ds-ui-kit-scope .ds-youtube-overlay.on {
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.85, 0, 0.75, -0.1); }
    .ds-ui-kit-scope .ds-youtube-overlay.ds-youtube-overlay--exit {
      opacity: 0 !important; }
    .ds-ui-kit-scope .ds-youtube-overlay.ds-youtube-overlay--fullscreen.on .ds-youtube-overlay__close {
      opacity: 1; }
    .ds-ui-kit-scope .ds-youtube-overlay .ds-iframe-container {
      position: absolute;
      top: 8em;
      bottom: 8em;
      left: 50%;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      margin-bottom: 40px; }
    .ds-ui-kit-scope .ds-youtube-overlay .ds-iframe-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  .ds-ui-kit-scope .ds-menu {
    position: relative;
    background-color: #005386;
    transition: background .3s, border .3s;
    color: #fff;
    width: 100%;
    height: 56px;
    line-height: 56px;
    z-index: 1; }
    .ds-ui-kit-scope .ds-menu ul {
      margin-top: 0; }
    .ds-ui-kit-scope .ds-menu.is--transparent:not(.is-open):not(.ds-menu--sticky) {
      background-color: transparent; }
      .ds-ui-kit-scope .ds-menu.is--transparent:not(.is-open):not(.ds-menu--sticky) .ds-menu__top {
        background-color: transparent; }
      .ds-ui-kit-scope .ds-menu.is--transparent:not(.is-open):not(.ds-menu--sticky) .ds-menu__wrapper,
      .ds-ui-kit-scope .ds-menu.is--transparent:not(.is-open):not(.ds-menu--sticky) .ds-menu__container {
        height: 100%; }
  .ds-ui-kit-scope .ds-menu--white {
    background-color: #fff; }
    .ds-ui-kit-scope .ds-menu--white.ds-menu--down {
      border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
    .ds-ui-kit-scope .ds-menu--white.is--transparent:not(.is-open):not(.ds-menu--sticky) .ds-menu__title {
      color: #fff; }
    .ds-ui-kit-scope .ds-menu--white.is--transparent:not(.is-open):not(.ds-menu--sticky) a {
      color: #fff; }
      .ds-ui-kit-scope .ds-menu--white.is--transparent:not(.is-open):not(.ds-menu--sticky) a:hover {
        color: rgba(255, 255, 255, 0.64); }
    .ds-ui-kit-scope .ds-menu--white.is--transparent:not(.is-open):not(.ds-menu--sticky) .ds-btn--gray {
      border-color: #fff; }
      .ds-ui-kit-scope .ds-menu--white.is--transparent:not(.is-open):not(.ds-menu--sticky) .ds-btn--gray:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08); }
    .ds-ui-kit-scope .ds-menu--white.is-open .ds-menu__top {
      background-color: #fff; }
    .ds-ui-kit-scope .ds-menu--white .ds-menu__top {
      background-color: transparent; }
    .ds-ui-kit-scope .ds-menu--white .ds-menu__links {
      background-color: #fff; }
      .ds-ui-kit-scope .ds-menu--white .ds-menu__links a {
        color: rgba(0, 0, 0, 0.48); }
        .ds-ui-kit-scope .ds-menu--white .ds-menu__links a:hover, .ds-ui-kit-scope .ds-menu--white .ds-menu__links a.is-open {
          color: rgba(0, 0, 0, 0.8); }
      .ds-ui-kit-scope .ds-menu--white .ds-menu__links li {
        border-bottom-color: rgba(0, 0, 0, 0.12); }
      .ds-ui-kit-scope .ds-menu--white .ds-menu__links .ds-ico-dropdown-chevron-mini {
        color: inherit; }
    .ds-ui-kit-scope .ds-menu--white .ds-menu__title {
      color: rgba(0, 0, 0, 0.48); }
      .ds-ui-kit-scope .ds-menu--white .ds-menu__title a {
        color: inherit; }
    .ds-ui-kit-scope .ds-menu--white .ds-menu__more .ds-menu__back a {
      color: rgba(0, 0, 0, 0.48); }
    .ds-ui-kit-scope .ds-menu--white .ds-menu__more .ds-menu__back i {
      color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-menu--white .ds-menu__more .ds-menu__back:hover i {
      color: rgba(0, 0, 0, 0.48); }
  .ds-ui-kit-scope .ds-menu--banner {
    position: absolute;
    top: 56px;
    z-index: 2; }
  .ds-ui-kit-scope .ds-menu--sticky {
    position: fixed;
    z-index: 10;
    top: 0;
    transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%); }
  .ds-ui-kit-scope .ds-menu--down {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none; }
  .ds-ui-kit-scope .ds-menu__wrapper {
    max-width: 1600px;
    margin: 0 auto; }
  .ds-ui-kit-scope .ds-menu__title {
    position: relative;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    overflow: hidden;
    padding-left: 40px; }
    .ds-ui-kit-scope .ds-menu__title span {
      display: inline-block;
      line-height: 16px;
      vertical-align: middle;
      margin-top: 1px; }
    .ds-ui-kit-scope .ds-menu__title a {
      color: #fff; }
    .ds-ui-kit-scope .ds-menu__title i {
      position: absolute;
      top: 12px;
      left: 0;
      height: 32px;
      width: 32px;
      line-height: 32px; }
    .ds-ui-kit-scope .ds-menu__title img {
      max-height: 22px;
      position: relative;
      top: -1px; }
  .ds-ui-kit-scope .ds-menu__title--single {
    padding-left: 16px; }
  .ds-ui-kit-scope .ds-menu__cta {
    float: right;
    position: relative;
    z-index: 3;
    padding-right: 16px;
    margin-left: 16px; }
    .ds-ui-kit-scope .ds-menu__cta .ds-btn {
      height: 32px;
      line-height: 30px;
      border-radius: 100px;
      padding: 0 16px; }
      .ds-ui-kit-scope .ds-menu__cta .ds-btn i {
        margin-right: 4px; }
      .ds-ui-kit-scope .ds-menu__cta .ds-btn.has-icon {
        padding-left: 12px;
        padding-right: 12px; }
  .ds-ui-kit-scope .ds-menu__top {
    position: relative;
    z-index: 2;
    padding: 0 8px;
    background-color: #005386; }
  .ds-ui-kit-scope .ds-menu__links a {
    color: #fff;
    font-weight: 400;
    transition: color .3s; }
    .ds-ui-kit-scope .ds-menu__links a:hover, .ds-ui-kit-scope .ds-menu__links a:focus {
      text-decoration: none; }
    .ds-ui-kit-scope .ds-menu__links a.is-open .ds-ico-dropdown-chevron-mini:before {
      content: '\e93c'; }
  .ds-ui-kit-scope .ds-menu__bottom {
    display: none; }
  .ds-ui-kit-scope .ds-menu__links {
    background-color: #002D4A; }
  .ds-ui-kit-scope .ds-menu__sub {
    display: block;
    height: 0;
    transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    overflow-y: hidden; }
    .ds-ui-kit-scope .ds-menu__sub.has-height {
      height: auto; }
  .ds-ui-kit-scope .ds-menu__more .ds-menu__sub {
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 34px; }
    .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-two-level {
      overflow: hidden; }
      .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-two-level .ds-menu__item > a {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        -webkit-transform: translateX(-16px);
            -ms-transform: translateX(-16px);
                transform: translateX(-16px); }
        .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-two-level .ds-menu__item > a i {
          -webkit-transform: translateX(16px);
              -ms-transform: translateX(16px);
                  transform: translateX(16px); }
      .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-two-level .ds-menu__more-sub.is-visible {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
        pointer-events: auto; }
        .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-two-level .ds-menu__more-sub.is-visible i {
          -webkit-transform: translateX(0);
              -ms-transform: translateX(0);
                  transform: translateX(0); }
        .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-two-level .ds-menu__more-sub.is-visible ul {
          overflow: auto;
          position: absolute;
          top: 64px;
          bottom: 0;
          padding-bottom: 22px;
          padding-top: 26px; }
        .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-two-level .ds-menu__more-sub.is-visible .is-level-2 > li > a {
          transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
    .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-tree-level > li > .ds-menu__more-sub.is-visible {
      -webkit-transform: translateX(-16px);
          -ms-transform: translateX(-16px);
              transform: translateX(-16px); }
      .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-tree-level > li > .ds-menu__more-sub.is-visible > ul > li > a,
      .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-tree-level > li > .ds-menu__more-sub.is-visible > .ds-menu__back {
        opacity: 0;
        visibility: hidden;
        pointer-events: none; }
    .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-tree-level .ds-menu__more-sub.is-visible {
      -webkit-transform: translateX(16px);
          -ms-transform: translateX(16px);
              transform: translateX(16px); }
      .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-tree-level .ds-menu__more-sub.is-visible ul {
        position: static;
        margin-top: -4px; }
      .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-tree-level .ds-menu__more-sub.is-visible .ds-menu__more-sub.is-visible ul {
        position: absolute;
        margin-top: 0; }
      .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-tree-level .ds-menu__more-sub.is-visible .ds-menu__more-sub.is-visible i {
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0); }
    .ds-ui-kit-scope .ds-menu__more .ds-menu__sub.has-tree-level .ds-menu__more-sub .ds-menu__more-sub i {
      -webkit-transform: translateX(-16px);
          -ms-transform: translateX(-16px);
              transform: translateX(-16px); }
  .ds-ui-kit-scope .ds-menu__more .ds-menu__more-sub {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    padding: 22px 0 46px;
    -webkit-transform: translateX(16px);
        -ms-transform: translateX(16px);
            transform: translateX(16px);
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
    .ds-ui-kit-scope .ds-menu__more .ds-menu__more-sub i {
      -webkit-transform: translateX(-16px);
          -ms-transform: translateX(-16px);
              transform: translateX(-16px);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
    .ds-ui-kit-scope .ds-menu__more .ds-menu__more-sub ul {
      padding: 0 40px; }
  .ds-ui-kit-scope .ds-menu__more .ds-menu__item {
    margin-bottom: 12px;
    margin-left: 0;
    position: static; }
    .ds-ui-kit-scope .ds-menu__more .ds-menu__item > a {
      display: block;
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
      .ds-ui-kit-scope .ds-menu__more .ds-menu__item > a i {
        transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
  .ds-ui-kit-scope .ds-menu__more li.is-highlight {
    display: none; }
  .ds-ui-kit-scope .ds-menu__more .ds-ico-right-chevron-mini {
    float: right;
    margin-top: 2px; }
  .ds-ui-kit-scope .ds-menu__more .ds-ico-back-mini {
    margin-right: 16px;
    margin-left: -16px; }
  .ds-ui-kit-scope .ds-menu__more .ds-menu__back {
    margin-bottom: 24px;
    padding: 0 40px; }
    .ds-ui-kit-scope .ds-menu__more .ds-menu__back:after {
      content: '';
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      position: absolute;
      top: 63px;
      left: 0;
      right: 0;
      transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
    .ds-ui-kit-scope .ds-menu__more .ds-menu__back span {
      font-weight: 700; }
  @media (max-width: 840px) {
    .ds-ui-kit-scope .ds-menu.is-open {
      position: fixed;
      height: 100%;
      top: 0;
      z-index: 1001; }
      .ds-ui-kit-scope .ds-menu.is-open .ds-menu__links {
        opacity: 1;
        visibility: visible; }
      .ds-ui-kit-scope .ds-menu.is-open .ds-menu__title i {
        -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
                transform: rotate(180deg); }
    .ds-ui-kit-scope .ds-menu--white .ds-menu__sub {
      background-color: rgba(0, 0, 0, 0.04); }
    .ds-ui-kit-scope .ds-menu__links {
      position: absolute;
      left: 0;
      width: 100%;
      z-index: 1;
      transition: opacity 300ms;
      opacity: 0;
      visibility: hidden; }
      .ds-ui-kit-scope .ds-menu__links li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
      .ds-ui-kit-scope .ds-menu__links a {
        display: block;
        padding: 0 24px; }
        .ds-ui-kit-scope .ds-menu__links a span {
          display: inline-block;
          width: 90%;
          vertical-align: middle;
          line-height: 20px; }
    .ds-ui-kit-scope .ds-menu__links {
      height: 100%;
      top: 0;
      padding-top: 56px;
      padding-bottom: 116px;
      overflow: scroll;
      background-color: #003F66; }
      .ds-ui-kit-scope .ds-menu__links .ds-ico-dropdown-chevron-mini {
        float: right;
        line-height: 56px;
        color: rgba(255, 255, 255, 0.64); }
        .ds-ui-kit-scope .ds-menu__links .ds-ico-dropdown-chevron-mini:before {
          content: '\e93a'; }
      .ds-ui-kit-scope .ds-menu__links a.is-open .ds-ico-dropdown-chevron-mini:before {
        content: '\e930'; }
    .ds-ui-kit-scope .ds-menu__sub {
      background-color: #003557;
      padding: 0 24px; }
      .ds-ui-kit-scope .ds-menu__sub a {
        padding: 0 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
      .ds-ui-kit-scope .ds-menu__sub li {
        -webkit-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
                transform: translateY(-10px);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
        .ds-ui-kit-scope .ds-menu__sub li:last-child {
          border: 0; }
      .ds-ui-kit-scope .ds-menu__sub.is-visible li {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
        opacity: 1; }
      .ds-ui-kit-scope .ds-menu__sub .is-highlight i {
        display: none; } }
  @media all and (min-width: 841px) {
    .ds-ui-kit-scope .ds-menu--banner {
      top: 64px; }
    .ds-ui-kit-scope .ds-menu--sticky {
      top: 0; }
    .ds-ui-kit-scope .ds-menu {
      height: 80px;
      line-height: 80px; }
    .ds-ui-kit-scope .ds-menu--white {
      border-bottom: 0; }
      .ds-ui-kit-scope .ds-menu--white.ds-menu--down {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
      .ds-ui-kit-scope .ds-menu--white.is-open .ds-menu__top {
        background: transparent; }
      .ds-ui-kit-scope .ds-menu--white .ds-menu__sub {
        background-color: #fff;
        box-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.08); }
    .ds-ui-kit-scope .ds-menu__wrapper {
      max-width: 1280px;
      padding: 0 24px; }
    .ds-ui-kit-scope .ds-menu__top {
      background: none;
      float: left;
      padding-left: 0; }
    .ds-ui-kit-scope .ds-menu__title {
      padding-left: 0;
      font-size: 22px; }
      .ds-ui-kit-scope .ds-menu__title i {
        display: none; }
      .ds-ui-kit-scope .ds-menu__title img {
        max-height: 33px;
        top: -2px; }
    .ds-ui-kit-scope .ds-menu__cta {
      padding-right: 0;
      margin-left: 32px; }
      .ds-ui-kit-scope .ds-menu__cta .ds-btn {
        height: 40px;
        border-radius: 22px;
        line-height: 38px;
        padding: 0 24px; }
        .ds-ui-kit-scope .ds-menu__cta .ds-btn i {
          margin-right: 8px;
          position: relative;
          top: -1px; }
        .ds-ui-kit-scope .ds-menu__cta .ds-btn.has-icon {
          padding-left: 16px;
          padding-right: 20px; }
    .ds-ui-kit-scope .ds-menu__links {
      float: right;
      background: none !important; }
      .ds-ui-kit-scope .ds-menu__links a:hover, .ds-ui-kit-scope .ds-menu__links a.is-open {
        color: rgba(255, 255, 255, 0.64); }
    .ds-ui-kit-scope .ds-menu__item {
      display: inline-block;
      margin-left: 21px;
      position: relative; }
    .ds-ui-kit-scope .ds-menu__sub {
      position: absolute;
      left: -40px;
      padding: 34px 40px 22px;
      background-color: #003F66;
      max-height: none;
      -webkit-transform: translateY(-10px);
          -ms-transform: translateY(-10px);
              transform: translateY(-10px);
      transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      display: block;
      height: auto;
      overflow-y: auto;
      overflow-x: hidden; }
      .ds-ui-kit-scope .ds-menu__sub.is-visible {
        opacity: 1;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
        pointer-events: all;
        visibility: visible; }
      .ds-ui-kit-scope .ds-menu__sub.has-column {
        width: 504px;
        padding-bottom: 30px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; }
        .ds-ui-kit-scope .ds-menu__sub.has-column li.is-highlight {
          margin-bottom: 34px;
          margin-top: -2px; }
      .ds-ui-kit-scope .ds-menu__sub li {
        width: 200px;
        line-height: 20px;
        margin-bottom: 12px; }
        .ds-ui-kit-scope .ds-menu__sub li.is-highlight {
          width: 100%;
          position: relative;
          margin-top: -10px;
          margin-bottom: 18px;
          line-height: 15px; }
          .ds-ui-kit-scope .ds-menu__sub li.is-highlight a {
            display: block;
            padding-left: 28px;
            font-size: 16px; }
          .ds-ui-kit-scope .ds-menu__sub li.is-highlight i {
            position: absolute;
            top: 50%;
            left: 0;
            border-radius: 100%;
            text-align: center;
            margin-top: -10px;
            font-size: 20px; }
          .ds-ui-kit-scope .ds-menu__sub li.is-highlight span {
            line-height: 16px; } }
  @media (min-width: 1041px) {
    .ds-ui-kit-scope .ds-menu__wrapper {
      padding: 0 32px; }
    .ds-ui-kit-scope .ds-menu__item {
      margin-left: 29px; } }
  @media (min-width: 1441px) {
    .ds-ui-kit-scope .ds-menu__wrapper {
      max-width: 1600px;
      padding: 0 40px; } }
  .ds-ui-kit-scope .ds-filter {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 27px 0; }
    .ds-ui-kit-scope .ds-filter .ds-filter-dropdown {
      margin-right: 21px; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown label {
        white-space: nowrap; }
    .ds-ui-kit-scope .ds-filter .ds-link {
      color: rgba(0, 0, 0, 0.48); }
      .ds-ui-kit-scope .ds-filter .ds-link:hover {
        color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-filter.has-search {
      padding: 20px 0; }
      .ds-ui-kit-scope .ds-filter.has-search .ds-filter-search {
        float: left; }
      .ds-ui-kit-scope .ds-filter.has-search .ds-filter__wrapper {
        float: right;
        margin-top: 8px; }
  .ds-ui-kit-scope .ds-filter__trigger {
    display: none;
    background-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.48); }
    .ds-ui-kit-scope .ds-filter__trigger:hover {
      background-color: rgba(0, 0, 0, 0.16);
      color: rgba(0, 0, 0, 0.48); }
    .ds-ui-kit-scope .ds-filter__trigger .ds-filter-dropdown__counter {
      margin-left: 8px; }
  .ds-ui-kit-scope .ds-filter-dropdown {
    display: inline;
    position: relative;
    z-index: 1; }
    .ds-ui-kit-scope .ds-filter-dropdown.is-open {
      z-index: 2; }
      .ds-ui-kit-scope .ds-filter-dropdown.is-open .ds-filter-dropdown__list {
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
        opacity: 1; }
      .ds-ui-kit-scope .ds-filter-dropdown.is-open .ds-filter-dropdown__head,
      .ds-ui-kit-scope .ds-filter-dropdown.is-open .ds-ico-close-mini {
        color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-filter-dropdown.is-active .ds-filter-dropdown__head,
    .ds-ui-kit-scope .ds-filter-dropdown.is-active .ds-ico-close-mini {
      color: #239de8; }
      .ds-ui-kit-scope .ds-filter-dropdown.is-active .ds-filter-dropdown__head:hover,
      .ds-ui-kit-scope .ds-filter-dropdown.is-active .ds-ico-close-mini:hover {
        color: #1d83c2; }
    .ds-ui-kit-scope .ds-filter-dropdown.is-active .ds-filter-dropdown__head:after {
      color: rgba(0, 0, 0, 0.48); }
    .ds-ui-kit-scope .ds-filter-dropdown.is-active .ds-filter-dropdown__head:hover:after {
      color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-filter-dropdown.is-active .ds-ico-close-mini {
      display: inline-block;
      cursor: pointer; }
    .ds-ui-kit-scope .ds-filter-dropdown.is-active.is-open .ds-filter-dropdown__head {
      color: #1d83c2; }
    .ds-ui-kit-scope .ds-filter-dropdown.is-active.is-open .ds-filter-dropdown__head:after {
      color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-filter-dropdown.has-counter .ds-filter-dropdown__counter {
      display: inline-block; }
    .ds-ui-kit-scope .ds-filter-dropdown .ds-ico-close-mini {
      display: none;
      position: relative;
      top: -1px;
      margin-right: 3px; }
  .ds-ui-kit-scope .ds-filter-dropdown--radio .ds-filter-dropdown__head:after {
    content: '\e929'; }
  .ds-ui-kit-scope .ds-filter-dropdown__title {
    font-size: 15px;
    margin-bottom: 14px;
    margin-top: 0;
    line-height: 28px;
    font-weight: 400; }
  .ds-ui-kit-scope .ds-filter-dropdown__head:after {
    content: '\e915';
    font-family: icon;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -1px; }
  .ds-ui-kit-scope .ds-filter-dropdown__head:hover .ds-filter-dropdown__counter {
    background-color: #1d83c2; }
  .ds-ui-kit-scope .ds-filter-dropdown__head {
    color: rgba(0, 0, 0, 0.48);
    cursor: pointer; }
    .ds-ui-kit-scope .ds-filter-dropdown__head:hover {
      color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .ds-filter-dropdown__counter {
    display: none;
    background-color: #239de8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    padding: 0 4px;
    height: 16px;
    min-width: 16px;
    text-align: center;
    margin-right: -1px; }
  .ds-ui-kit-scope .ds-filter-dropdown__list {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: -24px;
    background-color: #fff;
    margin-top: 16px;
    border-radius: 4px;
    -webkit-transform: translate3d(0, -8px, 0);
            transform: translate3d(0, -8px, 0);
    transition: opacity 0.15s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: opacity 0.15s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 20; }
    .ds-ui-kit-scope .ds-filter-dropdown__list .ds-checkbox,
    .ds-ui-kit-scope .ds-filter-dropdown__list .ds-radio,
    .ds-ui-kit-scope .ds-filter-dropdown__list .ds-switch {
      margin: 8px 0 0; }
      .ds-ui-kit-scope .ds-filter-dropdown__list .ds-checkbox:first-child,
      .ds-ui-kit-scope .ds-filter-dropdown__list .ds-radio:first-child,
      .ds-ui-kit-scope .ds-filter-dropdown__list .ds-switch:first-child {
        margin-top: 0; }
    .ds-ui-kit-scope .ds-filter-dropdown__list.on-right {
      right: -24px;
      left: auto; }
    .ds-ui-kit-scope .ds-filter-dropdown__list.has-2columns .ds-filter-dropdown__wrapper, .ds-ui-kit-scope .ds-filter-dropdown__list.has-3columns .ds-filter-dropdown__wrapper, .ds-ui-kit-scope .ds-filter-dropdown__list.has-4columns .ds-filter-dropdown__wrapper {
      padding: 30px 32px 28px; }
    .ds-ui-kit-scope .ds-filter-dropdown__list.has-2columns label, .ds-ui-kit-scope .ds-filter-dropdown__list.has-3columns label, .ds-ui-kit-scope .ds-filter-dropdown__list.has-4columns label {
      white-space: normal; }
    .ds-ui-kit-scope .ds-filter-dropdown__list.has-2columns {
      width: 496px; }
    .ds-ui-kit-scope .ds-filter-dropdown__list.has-3columns {
      width: 728px; }
    .ds-ui-kit-scope .ds-filter-dropdown__list.has-4columns {
      width: 960px; }
  .ds-ui-kit-scope .ds-filter-dropdown__wrapper {
    padding: 24px 40px 24px 24px;
    max-height: 360px;
    overflow: auto; }
  .ds-ui-kit-scope .ds-filter-dropdown__search .ds-input {
    margin-bottom: 0;
    min-width: 240px; }
    .ds-ui-kit-scope .ds-filter-dropdown__search .ds-input input {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      border-width: 0;
      border-bottom-width: 1px;
      padding-top: 6px;
      padding-bottom: 6px; }
      .ds-ui-kit-scope .ds-filter-dropdown__search .ds-input input:focus {
        border-color: rgba(0, 0, 0, 0.12); }
  .ds-ui-kit-scope .ds-filter-dropdown__col {
    width: 190px;
    float: left;
    margin-left: 32px; }
    .ds-ui-kit-scope .ds-filter-dropdown__col:first-child {
      margin-left: 0; }
  .ds-ui-kit-scope .ds-filter-dropdown__sub {
    margin-top: 26px; }
    .ds-ui-kit-scope .ds-filter-dropdown__sub:first-child {
      margin-top: 0; }
  .ds-ui-kit-scope .ds-filter__header,
  .ds-ui-kit-scope .ds-filter__footer {
    display: none; }
  .ds-ui-kit-scope .ds-filter-conversation {
    font-size: 26px;
    line-height: 40px;
    color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-filter-conversation .ds-filter-dropdown {
      white-space: nowrap; }
      .ds-ui-kit-scope .ds-filter-conversation .ds-filter-dropdown .ds-filter-dropdown__head:after {
        content: '\e915';
        font-size: 16px;
        color: #239de8; }
      .ds-ui-kit-scope .ds-filter-conversation .ds-filter-dropdown .ds-filter-dropdown__head:hover:after {
        color: #1d83c2; }
      .ds-ui-kit-scope .ds-filter-conversation .ds-filter-dropdown.is-open .ds-filter-dropdown__head:after {
        color: #1d83c2; }
    .ds-ui-kit-scope .ds-filter-conversation .ds-filter-dropdown__label {
      font-weight: 600; }
  .ds-ui-kit-scope .ds-filter-conversation__list {
    left: 50%;
    color: rgba(0, 0, 0, 0.48);
    padding: 0;
    max-height: none; }
    .ds-ui-kit-scope .ds-filter-conversation__list.is-open {
      visibility: visible;
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0); }
    .ds-ui-kit-scope .ds-filter-conversation__list > div {
      max-width: 480px;
      max-height: 384px;
      overflow-y: scroll;
      padding: 16px 0 15px;
      z-index: 2; }
    .ds-ui-kit-scope .ds-filter-conversation__list .ds-checkbox {
      margin: 0; }
      .ds-ui-kit-scope .ds-filter-conversation__list .ds-checkbox input:checked ~ label {
        color: #239de8; }
      .ds-ui-kit-scope .ds-filter-conversation__list .ds-checkbox label {
        font-size: 22px;
        line-height: 32px;
        font-weight: 400;
        padding: 8px 32px 8px 48px;
        white-space: initial;
        width: 100%; }
        .ds-ui-kit-scope .ds-filter-conversation__list .ds-checkbox label:hover {
          background-color: rgba(0, 0, 0, 0.08);
          cursor: pointer; }
        .ds-ui-kit-scope .ds-filter-conversation__list .ds-checkbox label:before {
          border: 0; }
        .ds-ui-kit-scope .ds-filter-conversation__list .ds-checkbox label:after {
          font-size: 16px;
          line-height: 1;
          margin-left: 16px; }
  .ds-ui-kit-scope .ds-filter-conversation__arrow {
    position: absolute;
    top: -24px;
    left: 50%;
    margin-left: -12px;
    border: 12px solid transparent;
    border-bottom-color: #fff; }
  .ds-ui-kit-scope .ds-filter-tag {
    overflow: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; }
    .ds-ui-kit-scope .ds-filter-tag li {
      display: inline-block; }
  .ds-ui-kit-scope .ds-filter-search {
    display: inline-block;
    width: 200px; }
    .ds-ui-kit-scope .ds-filter-search .ds-input {
      margin-bottom: 0; }
  .ds-ui-kit-scope .ds-filter-search__action {
    display: none; }
  @media all and (max-width: 721px) {
    .ds-ui-kit-scope .ds-filter-conversation {
      text-align: center;
      margin-left: 8px;
      margin-right: 8px; }
      .ds-ui-kit-scope .ds-filter-conversation .ds-filter-dropdown__list {
        text-align: left; }
      .ds-ui-kit-scope .ds-filter-conversation .ds-filter-dropdown {
        display: block; }
    .ds-ui-kit-scope .ds-filter {
      border-bottom: 0; }
      .ds-ui-kit-scope .ds-filter.has-search .ds-filter-search,
      .ds-ui-kit-scope .ds-filter.has-search .ds-filter__wrapper {
        float: none;
        margin-top: 0; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown {
        margin-right: 0; }
        .ds-ui-kit-scope .ds-filter .ds-filter-dropdown .ds-ico-close-mini,
        .ds-ui-kit-scope .ds-filter .ds-filter-dropdown .ds-filter-dropdown__counter {
          display: none !important; }
        .ds-ui-kit-scope .ds-filter .ds-filter-dropdown label {
          white-space: normal; }
      .ds-ui-kit-scope .ds-filter.is-visible .ds-filter__wrapper,
      .ds-ui-kit-scope .ds-filter.is-visible .ds-filter__header,
      .ds-ui-kit-scope .ds-filter.is-visible .ds-filter__footer {
        display: block; }
      .ds-ui-kit-scope .ds-filter.is-visible .ds-filter__trigger {
        display: none; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown,
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__sub {
        display: block;
        margin-bottom: 7px;
        margin-top: 0;
        background-color: #fff;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        padding: 30px 24px 32px; }
        .ds-ui-kit-scope .ds-filter .ds-filter-dropdown .ds-filter-dropdown__title,
        .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__sub .ds-filter-dropdown__title {
          font-size: 18px; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown--more {
        padding: 0;
        background: none;
        border: 0; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__label {
        color: rgba(0, 0, 0, 0.8);
        font-size: 18px; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__list {
        visibility: visible;
        opacity: 1;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
        position: static;
        box-shadow: none;
        background: none;
        padding: 0;
        margin-top: 23px; }
        .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__list.has-2columns, .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__list.has-3columns, .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__list.has-4columns {
          width: auto;
          margin: 0; }
          .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__list.has-2columns .ds-filter-dropdown__wrapper, .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__list.has-3columns .ds-filter-dropdown__wrapper, .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__list.has-4columns .ds-filter-dropdown__wrapper {
            padding: 0; }
        .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__list .ds-checkbox,
        .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__list .ds-radio,
        .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__list .ds-switch {
          margin-top: 16px; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__search {
        display: none; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__wrapper {
        max-height: none;
        overflow: visible;
        padding: 0; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__col {
        float: none;
        width: 100%;
        margin-left: 0; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__head:after {
        display: none; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown--more .ds-filter-dropdown__head,
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown--more .ds-ico-close-mini {
        display: none; }
    .ds-ui-kit-scope .ds-filter__wrapper {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 55px 0;
      background-color: #f6f6f6;
      overflow: scroll;
      z-index: 10; }
    .ds-ui-kit-scope .ds-filter__header,
    .ds-ui-kit-scope .ds-filter__footer {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 56px;
      width: 100%;
      background-color: #fff;
      z-index: 11; }
    .ds-ui-kit-scope .ds-filter__header {
      text-align: center;
      padding: 0 12px; }
      .ds-ui-kit-scope .ds-filter__header p {
        font-size: 18px;
        font-weight: 400;
        line-height: 56px; }
      .ds-ui-kit-scope .ds-filter__header i {
        float: right;
        line-height: 56px;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.48); }
    .ds-ui-kit-scope .ds-filter__footer {
      top: auto;
      bottom: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.12);
      padding: 8px 16px; }
      .ds-ui-kit-scope .ds-filter__footer button[type='submit'] {
        float: right; }
      .ds-ui-kit-scope .ds-filter__footer button[type='button'] {
        margin-top: 10px;
        padding: 0; }
    .ds-ui-kit-scope .ds-filter__trigger {
      display: inline-block;
      vertical-align: middle; }
      .ds-ui-kit-scope .ds-filter__trigger.has-counter {
        padding-right: 12px; }
        .ds-ui-kit-scope .ds-filter__trigger.has-counter .ds-filter-dropdown__counter {
          display: inline-block;
          line-height: 1.6;
          vertical-align: text-bottom; }
    .ds-ui-kit-scope .ds-filter-search.is-open {
      z-index: 11;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 16px 0;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14); }
      .ds-ui-kit-scope .ds-filter-search.is-open .ds-filter-search__action {
        display: block;
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translate3d(0, 8px, 0);
                transform: translate3d(0, 8px, 0);
        transition: all 0.15s cubic-bezier(0.25, 0.1, 0.25, 1); }
      .ds-ui-kit-scope .ds-filter-search.is-open .ds-filter-search__action.is-visible {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0); }
      .ds-ui-kit-scope .ds-filter-search.is-open .ds-filter-search__wrapper {
        padding-left: 24px;
        padding-right: 24px; }
    .ds-ui-kit-scope .ds-filter-search .ds-btn--scream {
      float: right; }
    .ds-ui-kit-scope .ds-filter-search__wrapper {
      width: 100%;
      max-width: 480px;
      margin-right: auto;
      margin-left: auto; }
    .ds-ui-kit-scope .ds-filter-search__action {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(0, 0, 0, 0.16); }
    .ds-ui-kit-scope .ds-filter-search__close {
      margin-top: 8px;
      padding-left: 0; }
    .ds-ui-kit-scope .ds-filter-mobile {
      display: table;
      width: 100%; }
      .ds-ui-kit-scope .ds-filter-mobile .ds-filter-search,
      .ds-ui-kit-scope .ds-filter-mobile .ds-filter__trigger {
        display: table-cell;
        vertical-align: top; }
      .ds-ui-kit-scope .ds-filter-mobile .ds-filter__trigger {
        white-space: nowrap; }
      .ds-ui-kit-scope .ds-filter-mobile .ds-filter-search {
        padding-right: 16px;
        width: 100%; }
        .ds-ui-kit-scope .ds-filter-mobile .ds-filter-search.is-open {
          padding-right: 0; } }
  @media all and (max-width: 480px) {
    .ds-ui-kit-scope .ds-filter-conversation .ds-filter-dropdown {
      white-space: normal; }
    .ds-ui-kit-scope .ds-filter-conversation .ds-filter-dropdown__head {
      display: inline-block;
      position: relative;
      margin-left: -16px; }
      .ds-ui-kit-scope .ds-filter-conversation .ds-filter-dropdown__head:after {
        position: absolute;
        right: -16px;
        top: 50%;
        margin-top: -8px; }
    .ds-ui-kit-scope .ds-filter-conversation__list {
      border-radius: 0;
      width: 100%; }
      .ds-ui-kit-scope .ds-filter-conversation__list .ds-checkbox label {
        padding-right: 24px;
        padding-left: 52px; }
        .ds-ui-kit-scope .ds-filter-conversation__list .ds-checkbox label:after {
          margin-left: 24px; } }
  @media all and (min-width: 841px) {
    .ds-ui-kit-scope .ds-filter-tag {
      white-space: normal; } }
  .ds-ui-kit-scope .ds-pagination {
    font-weight: 600;
    line-height: 33px;
    color: rgba(0, 0, 0, 0.48);
    text-align: center;
    font-size: 0; }
    .ds-ui-kit-scope .ds-pagination li {
      display: inline-block;
      font-size: 15px;
      margin: 0 6px;
      cursor: default; }
      .ds-ui-kit-scope .ds-pagination li.is-hidden {
        display: none; }
    .ds-ui-kit-scope .ds-pagination a {
      text-align: center;
      text-decoration: none;
      display: inline-block;
      min-width: 32px;
      height: 32px;
      padding: 0 10px;
      border-radius: 22px;
      color: rgba(0, 0, 0, 0.48); }
      .ds-ui-kit-scope .ds-pagination a:hover {
        background-color: rgba(0, 0, 0, 0.04); }
      .ds-ui-kit-scope .ds-pagination a.is-active {
        background-color: #239de8;
        color: #fff; }
  .ds-ui-kit-scope .ds-pagination__prev span,
  .ds-ui-kit-scope .ds-pagination__next span {
    display: none; }
  @media (min-width: 480px) {
    .ds-ui-kit-scope .ds-pagination li.is-hidden {
      display: inline-block; }
    .ds-ui-kit-scope .ds-pagination .ds-pagination__prev,
    .ds-ui-kit-scope .ds-pagination .ds-pagination__next {
      margin: 0; }
      .ds-ui-kit-scope .ds-pagination .ds-pagination__prev a,
      .ds-ui-kit-scope .ds-pagination .ds-pagination__next a {
        padding: 0 16px; }
      .ds-ui-kit-scope .ds-pagination .ds-pagination__prev i,
      .ds-ui-kit-scope .ds-pagination .ds-pagination__next i {
        display: none; }
      .ds-ui-kit-scope .ds-pagination .ds-pagination__prev span,
      .ds-ui-kit-scope .ds-pagination .ds-pagination__next span {
        display: inline; } }
  .ds-ui-kit-scope .ds-card--loading:hover {
    box-shadow: none; }
  .ds-ui-kit-scope .ds-card--loading h4,
  .ds-ui-kit-scope .ds-card--loading p,
  .ds-ui-kit-scope .ds-card--loading span,
  .ds-ui-kit-scope .ds-card--loading .ds-card__thumbnail {
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-name: wave;
            animation-name: wave;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    background-color: rgba(0, 0, 0, 0.08);
    background: linear-gradient(105deg, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.12) 24%, rgba(6, 6, 6, 0.08) 48%);
    Background-size: 1000px 1000px; }
  .ds-ui-kit-scope .ds-card--loading h4 {
    width: 80%;
    height: 15px;
    margin-bottom: 25px; }
  .ds-ui-kit-scope .ds-card--loading p {
    height: 8px; }
    .ds-ui-kit-scope .ds-card--loading p:nth-of-type(1) {
      width: 50%; }
    .ds-ui-kit-scope .ds-card--loading p:nth-of-type(2) {
      width: 100%; }
    .ds-ui-kit-scope .ds-card--loading p:nth-of-type(3) {
      width: 100%; }
    .ds-ui-kit-scope .ds-card--loading p:nth-of-type(4) {
      width: 90%; }
  .ds-ui-kit-scope .ds-card--loading .ds-card__links span {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    display: inline-block; }
  .ds-ui-kit-scope .ds-card--loading .ds-card__links p {
    display: inline-block;
    width: 100px;
    margin: 12px 0 0 8px; }
  .ds-ui-kit-scope .ds-card--loading .ds-card__wrapper {
    border-color: rgba(0, 0, 0, 0.08); }

@-webkit-keyframes wave {
  0% {
    background-position: -468px 0; }
  100% {
    background-position: 468px 0; } }

@keyframes wave {
  0% {
    background-position: -468px 0; }
  100% {
    background-position: 468px 0; } }
  .ds-ui-kit-scope .ds-lazy {
    background-color: rgba(0, 0, 0, 0.16); }
    .ds-ui-kit-scope .ds-lazy.loaded {
      background-color: transparent; }
  .ds-ui-kit-scope .ds-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.08);
    visibility: hidden;
    opacity: 0;
    pointer-events: none; }
    .ds-ui-kit-scope .ds-loader div {
      background-color: #239de8;
      width: 0%;
      height: 100%; }
    .ds-ui-kit-scope .ds-loader.is-visible {
      visibility: visible;
      opacity: 1; }
      .ds-ui-kit-scope .ds-loader.is-visible div {
        width: 67%;
        transition: width 5s cubic-bezier(0.25, 0.1, 0.25, 1); }
    .ds-ui-kit-scope .ds-loader.is-loaded div {
      width: 100%;
      transition-duration: .4s; }
  .ds-ui-kit-scope .swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    /* Fix of Webkit flickering */
    z-index: 1; }
  .ds-ui-kit-scope .swiper-container-no-flexbox .swiper-slide {
    float: left; }
  .ds-ui-kit-scope .swiper-container-vertical > .swiper-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .ds-ui-kit-scope .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: -webkit-transform, -webkit-transform;
    transition-property: transform, -webkit-transform;
    box-sizing: content-box; }
  .ds-ui-kit-scope .swiper-container-android .swiper-slide,
  .ds-ui-kit-scope .swiper-wrapper {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  .ds-ui-kit-scope .swiper-container-multirow > .swiper-wrapper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .ds-ui-kit-scope .swiper-container-free-mode > .swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto; }
  .ds-ui-kit-scope .swiper-slide {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative; }
  .ds-ui-kit-scope .swiper-invisible-blank-slide {
    visibility: hidden; }
  .ds-ui-kit-scope .swiper-container-autoheight,
  .ds-ui-kit-scope .swiper-container-autoheight .swiper-slide {
    height: auto; }
  .ds-ui-kit-scope .swiper-container-autoheight .swiper-wrapper {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    transition-property: height, -webkit-transform;
    transition-property: -webkit-transform, height;
    transition-property: transform, height;
    transition-property: -webkit-transform, height, -webkit-transform;
    transition-property: transform, height, -webkit-transform; }
  .ds-ui-kit-scope .swiper-container-3d {
    -webkit-perspective: 1200px;
    perspective: 1200px; }
  .ds-ui-kit-scope .swiper-container-3d .swiper-cube-shadow,
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide,
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-bottom,
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-left,
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-right,
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-top,
  .ds-ui-kit-scope .swiper-container-3d .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; }
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-bottom,
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-left,
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-right,
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10; }
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent); }
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent); }
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent); }
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent); }
  .ds-ui-kit-scope .swiper-container-wp8-horizontal,
  .ds-ui-kit-scope .swiper-container-wp8-horizontal > .swiper-wrapper {
    -ms-touch-action: pan-y;
    touch-action: pan-y; }
  .ds-ui-kit-scope .swiper-container-wp8-vertical,
  .ds-ui-kit-scope .swiper-container-wp8-vertical > .swiper-wrapper {
    -ms-touch-action: pan-x;
    touch-action: pan-x; }
  .ds-ui-kit-scope .swiper-button-next,
  .ds-ui-kit-scope .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat; }
  .ds-ui-kit-scope .swiper-button-next.swiper-button-disabled,
  .ds-ui-kit-scope .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none; }
  .ds-ui-kit-scope .swiper-button-prev,
  .ds-ui-kit-scope .swiper-container-rtl .swiper-button-next {
    left: 10px;
    right: auto; }
  .ds-ui-kit-scope .swiper-button-next,
  .ds-ui-kit-scope .swiper-container-rtl .swiper-button-prev {
    right: 10px;
    left: auto; }
  .ds-ui-kit-scope .swiper-pagination {
    position: absolute;
    text-align: center;
    transition: 300ms opacity;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10; }
  .ds-ui-kit-scope .swiper-pagination.swiper-pagination-hidden {
    opacity: 0; }
  .ds-ui-kit-scope .swiper-container-horizontal > .swiper-pagination-bullets,
  .ds-ui-kit-scope .swiper-pagination-custom,
  .ds-ui-kit-scope .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%; }
  .ds-ui-kit-scope .swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0;
    height: 10px; }
  .ds-ui-kit-scope .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
        transform: scale(0.6);
    position: relative; }
  .ds-ui-kit-scope .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1); }
  .ds-ui-kit-scope .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  .ds-ui-kit-scope .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1); }
  .ds-ui-kit-scope .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
        transform: scale(0.6); }
  .ds-ui-kit-scope .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1); }
  .ds-ui-kit-scope .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
        transform: scale(0.6); }
  .ds-ui-kit-scope .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: .2; }
  .ds-ui-kit-scope button.swiper-pagination-bullet {
    border: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; }
  .ds-ui-kit-scope .swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer; }
  .ds-ui-kit-scope .swiper-pagination-bullet-active {
    opacity: 1;
    background: #007aff; }
  .ds-ui-kit-scope .swiper-container-vertical > .swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0); }
  .ds-ui-kit-scope .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 6px 0;
    display: block; }
  .ds-ui-kit-scope .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    width: 8px; }
  .ds-ui-kit-scope .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: 200ms top, 200ms -webkit-transform;
    transition: 200ms -webkit-transform, 200ms top;
    transition: 200ms transform, 200ms top;
    transition: 200ms -webkit-transform, 200ms top, 200ms -webkit-transform;
    transition: 200ms transform, 200ms top, 200ms -webkit-transform; }
  .ds-ui-kit-scope .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px; }
  .ds-ui-kit-scope .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    white-space: nowrap; }
  .ds-ui-kit-scope .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: 200ms left, 200ms -webkit-transform;
    transition: 200ms -webkit-transform, 200ms left;
    transition: 200ms transform, 200ms left;
    transition: 200ms -webkit-transform, 200ms left, 200ms -webkit-transform;
    transition: 200ms transform, 200ms left, 200ms -webkit-transform; }
  .ds-ui-kit-scope .swiper-pagination-progressbar {
    background: rgba(0, 0, 0, 0.25);
    position: absolute; }
  .ds-ui-kit-scope .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #007aff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
        transform: scale(0);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
        transform-origin: left top; }
  .ds-ui-kit-scope .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
        transform-origin: right top; }
  .ds-ui-kit-scope .swiper-container-horizontal > .swiper-pagination-progressbar {
    width: 100%;
    height: 4px;
    left: 0;
    top: 0; }
  .ds-ui-kit-scope .swiper-container-vertical > .swiper-pagination-progressbar {
    width: 4px;
    height: 100%;
    left: 0;
    top: 0; }
  .ds-ui-kit-scope .swiper-pagination-white .swiper-pagination-bullet-active {
    background: #fff; }
  .ds-ui-kit-scope .swiper-pagination-progressbar.swiper-pagination-white {
    background: rgba(255, 255, 255, 0.25); }
  .ds-ui-kit-scope .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
    background: #fff; }
  .ds-ui-kit-scope .swiper-pagination-black .swiper-pagination-bullet-active {
    background: #000; }
  .ds-ui-kit-scope .swiper-pagination-progressbar.swiper-pagination-black {
    background: rgba(0, 0, 0, 0.25); }
  .ds-ui-kit-scope .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
    background: #000; }
  .ds-ui-kit-scope .swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, 0.1); }
  .ds-ui-kit-scope .swiper-container-horizontal > .swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%; }
  .ds-ui-kit-scope .swiper-container-vertical > .swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%; }
  .ds-ui-kit-scope .swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    left: 0;
    top: 0; }
  .ds-ui-kit-scope .swiper-scrollbar-cursor-drag {
    cursor: move; }
  .ds-ui-kit-scope .swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center; }
  .ds-ui-kit-scope .swiper-zoom-container > canvas,
  .ds-ui-kit-scope .swiper-zoom-container > img,
  .ds-ui-kit-scope .swiper-zoom-container > svg {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain; }
  .ds-ui-kit-scope .swiper-slide-zoomed {
    cursor: move; }
  .ds-ui-kit-scope .swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    -webkit-transform-origin: 50%;
    -ms-transform-origin: 50%;
        transform-origin: 50%;
    -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    animation: swiper-preloader-spin 1s steps(12, end) infinite; }
  .ds-ui-kit-scope .swiper-lazy-preloader:after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat; }
  .ds-ui-kit-scope .swiper-lazy-preloader-white:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
  .ds-ui-kit-scope .swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000; }
  .ds-ui-kit-scope .swiper-container-fade.swiper-container-free-mode .swiper-slide {
    transition-timing-function: ease-out; }
  .ds-ui-kit-scope .swiper-container-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity; }
  .ds-ui-kit-scope .swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none; }
  .ds-ui-kit-scope .swiper-container-fade .swiper-slide-active,
  .ds-ui-kit-scope .swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto; }
  .ds-ui-kit-scope .swiper-container-flip {
    overflow: visible; }
  .ds-ui-kit-scope .swiper-container-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1; }
  .ds-ui-kit-scope .swiper-container-flip .swiper-slide .swiper-slide {
    pointer-events: none; }
  .ds-ui-kit-scope .swiper-container-flip .swiper-slide-active,
  .ds-ui-kit-scope .swiper-container-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto; }
  .ds-ui-kit-scope .swiper-container-flip .swiper-slide-shadow-bottom,
  .ds-ui-kit-scope .swiper-container-flip .swiper-slide-shadow-left,
  .ds-ui-kit-scope .swiper-container-flip .swiper-slide-shadow-right,
  .ds-ui-kit-scope .swiper-container-flip .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
  .ds-ui-kit-scope .swiper-container-cube {
    overflow: visible; }
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1; }
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide .swiper-slide {
    pointer-events: none; }
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide-active,
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto; }
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide-shadow-bottom,
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide-shadow-left,
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide-shadow-right,
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide {
    visibility: hidden;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
        transform-origin: 0 0;
    width: 100%;
    height: 100%; }
  .ds-ui-kit-scope .swiper-container-cube.swiper-container-rtl .swiper-slide {
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
        transform-origin: 100% 0; }
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide-active,
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide-next,
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide-next + .swiper-slide,
  .ds-ui-kit-scope .swiper-container-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible; }
  .ds-ui-kit-scope .swiper-container-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    -webkit-filter: blur(50px);
    filter: blur(50px);
    z-index: 0; }
  .ds-ui-kit-scope .swiper-container-coverflow .swiper-wrapper {
    /* Windows 8 IE 10 fix */
    -ms-perspective: 1200px; }
  .ds-ui-kit-scope .swiper-container {
    padding-bottom: 40px;
    margin-bottom: 40px; }
    .ds-ui-kit-scope .swiper-container .ds-card {
      margin: 0; }
  .ds-ui-kit-scope .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .ds-ui-kit-scope .swiper-button-next,
  .ds-ui-kit-scope .swiper-button-prev {
    opacity: 0;
    background: rgba(0, 0, 0, 0.16);
    color: #fff;
    height: 80px;
    line-height: 80px;
    width: 48px;
    margin-top: -72px;
    /* height + margin bottom of container */
    transition: opacity .3s ease-in;
    text-align: center; }
    .ds-ui-kit-scope .swiper-button-next:before,
    .ds-ui-kit-scope .swiper-button-prev:before {
      font-family: icon;
      content: '\e932';
      font-size: 16px; }
    .ds-ui-kit-scope .swiper-button-next:hover,
    .ds-ui-kit-scope .swiper-button-prev:hover {
      background-color: rgba(0, 0, 0, 0.32); }
    .ds-ui-kit-scope .swiper-button-next.swiper-button-disabled,
    .ds-ui-kit-scope .swiper-button-prev.swiper-button-disabled {
      opacity: 0; }
  .ds-ui-kit-scope .swiper-button-prev {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    left: 0; }
    .ds-ui-kit-scope .swiper-button-prev:before {
      content: '\e936'; }
  .ds-ui-kit-scope .swiper-button-next {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    right: 0; }
  .ds-ui-kit-scope .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0; }
  .ds-ui-kit-scope .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.16);
    opacity: 1; }
    .ds-ui-kit-scope .swiper-pagination-bullet:hover {
      background-color: rgba(0, 0, 0, 0.32); }
  .ds-ui-kit-scope .swiper-pagination-bullet-active {
    background-color: #239de8; }
    .ds-ui-kit-scope .swiper-pagination-bullet-active:hover {
      background-color: #239de8; }
  .ds-ui-kit-scope .swiper-pagination-clickable .swiper-pagination-bullet-active {
    cursor: default; }
  .ds-ui-kit-scope .swiper-container--banner {
    padding: 0; }
    .ds-ui-kit-scope .swiper-container--banner .swiper-button-next,
    .ds-ui-kit-scope .swiper-container--banner .swiper-button-prev {
      background-color: rgba(255, 255, 255, 0.4);
      color: rgba(255, 255, 255, 0.64); }
      .ds-ui-kit-scope .swiper-container--banner .swiper-button-next:hover,
      .ds-ui-kit-scope .swiper-container--banner .swiper-button-prev:hover {
        background-color: rgba(255, 255, 255, 0.64);
        color: #fff; }
    .ds-ui-kit-scope .swiper-container--banner .swiper-pagination {
      bottom: 57px; }
    .ds-ui-kit-scope .swiper-container--banner .swiper-pagination-bullet {
      margin: 0 4px;
      background-color: rgba(255, 255, 255, 0.4); }
      .ds-ui-kit-scope .swiper-container--banner .swiper-pagination-bullet:hover {
        background-color: rgba(255, 255, 255, 0.64); }
    .ds-ui-kit-scope .swiper-container--banner .swiper-pagination-bullet-active {
      background-color: #fff; }
      .ds-ui-kit-scope .swiper-container--banner .swiper-pagination-bullet-active:hover {
        background-color: #fff; }
  .ds-ui-kit-scope .ds-carousel {
    position: relative; }
  @media (min-width: 721px) {
    .ds-ui-kit-scope .swiper-container {
      padding-bottom: 64px;
      margin-bottom: 64px; }
    .ds-ui-kit-scope .ds-carousel:hover .swiper-button-next,
    .ds-ui-kit-scope .ds-carousel:hover .swiper-button-prev,
    .ds-ui-kit-scope .swiper-container--banner:hover .swiper-button-next,
    .ds-ui-kit-scope .swiper-container--banner:hover .swiper-button-prev {
      opacity: 1; }
    .ds-ui-kit-scope .ds-carousel:hover .swiper-button-disabled,
    .ds-ui-kit-scope .swiper-container--banner:hover .swiper-button-disabled {
      opacity: 0; } }
  @media (min-width: 1696px) {
    .ds-ui-kit-scope .ds-carousel .ds-container--carousel {
      position: relative; }
      .ds-ui-kit-scope .ds-carousel .ds-container--carousel .swiper-button-next,
      .ds-ui-kit-scope .ds-carousel .ds-container--carousel .swiper-button-prev {
        border-radius: 3px; }
      .ds-ui-kit-scope .ds-carousel .ds-container--carousel .swiper-button-prev {
        left: -48px; }
      .ds-ui-kit-scope .ds-carousel .ds-container--carousel .swiper-button-next {
        right: -48px; } }
  @media (max-width: 721px) {
    .ds-ui-kit-scope .swiper-container--banner .swiper-pagination {
      width: 100%;
      bottom: 16px; }
    .ds-ui-kit-scope .swiper-container--banner .ds-banner__buttons {
      margin-bottom: 98px; } }
  .ds-ui-kit-scope .ds-theme-catia .ds-footer__top, .ds-ui-kit-scope.ds-theme-catia .ds-footer__top {
    background-color: #292A7C; }
  .ds-ui-kit-scope .ds-theme-catia .ds-footer__links, .ds-ui-kit-scope.ds-theme-catia .ds-footer__links {
    background-color: #1E1F5C; }
  .ds-ui-kit-scope .ds-theme-catia .ds-menu,
  .ds-ui-kit-scope .ds-theme-catia .ds-menu__top, .ds-ui-kit-scope.ds-theme-catia .ds-menu,
  .ds-ui-kit-scope.ds-theme-catia .ds-menu__top {
    background-color: #292A7C; }
  .ds-ui-kit-scope .ds-theme-catia .ds-menu__links, .ds-ui-kit-scope.ds-theme-catia .ds-menu__links {
    background-color: #1E1F5C; }
    .ds-ui-kit-scope .ds-theme-catia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-catia .ds-menu__links ul ul {
      background-color: #191A4C; }
      @media (min-width: 841px) {
        .ds-ui-kit-scope .ds-theme-catia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-catia .ds-menu__links ul ul {
          background-color: #1E1F5C; } }
  .ds-ui-kit-scope .ds-theme-delmia .ds-footer__top, .ds-ui-kit-scope.ds-theme-delmia .ds-footer__top {
    background-color: #FFD600; }
  .ds-ui-kit-scope .ds-theme-delmia .ds-footer__links, .ds-ui-kit-scope.ds-theme-delmia .ds-footer__links {
    background-color: #DEB900; }
  .ds-ui-kit-scope .ds-theme-delmia .ds-menu,
  .ds-ui-kit-scope .ds-theme-delmia .ds-menu__top, .ds-ui-kit-scope.ds-theme-delmia .ds-menu,
  .ds-ui-kit-scope.ds-theme-delmia .ds-menu__top {
    background-color: #FFD600; }
  .ds-ui-kit-scope .ds-theme-delmia .ds-menu__links, .ds-ui-kit-scope.ds-theme-delmia .ds-menu__links {
    background-color: #DEB900; }
    .ds-ui-kit-scope .ds-theme-delmia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-delmia .ds-menu__links ul ul {
      background-color: #CFAC00; }
      @media (min-width: 841px) {
        .ds-ui-kit-scope .ds-theme-delmia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-delmia .ds-menu__links ul ul {
          background-color: #DEB900; } }
  .ds-ui-kit-scope .ds-theme-enovia .ds-footer__top, .ds-ui-kit-scope.ds-theme-enovia .ds-footer__top {
    background-color: #ED7C13; }
  .ds-ui-kit-scope .ds-theme-enovia .ds-footer__links, .ds-ui-kit-scope.ds-theme-enovia .ds-footer__links {
    background-color: #CC6B10; }
  .ds-ui-kit-scope .ds-theme-enovia .ds-menu,
  .ds-ui-kit-scope .ds-theme-enovia .ds-menu__top, .ds-ui-kit-scope.ds-theme-enovia .ds-menu,
  .ds-ui-kit-scope.ds-theme-enovia .ds-menu__top {
    background-color: #ED7C13; }
  .ds-ui-kit-scope .ds-theme-enovia .ds-menu__links, .ds-ui-kit-scope.ds-theme-enovia .ds-menu__links {
    background-color: #CC6B10; }
    .ds-ui-kit-scope .ds-theme-enovia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-enovia .ds-menu__links ul ul {
      background-color: #BD630F; }
      @media (min-width: 841px) {
        .ds-ui-kit-scope .ds-theme-enovia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-enovia .ds-menu__links ul ul {
          background-color: #CC6B10; } }
  .ds-ui-kit-scope .ds-theme-exalead .ds-footer__top, .ds-ui-kit-scope.ds-theme-exalead .ds-footer__top {
    background-color: #0081C5; }
  .ds-ui-kit-scope .ds-theme-exalead .ds-footer__links, .ds-ui-kit-scope.ds-theme-exalead .ds-footer__links {
    background-color: #006AA3; }
  .ds-ui-kit-scope .ds-theme-exalead .ds-menu,
  .ds-ui-kit-scope .ds-theme-exalead .ds-menu__top, .ds-ui-kit-scope.ds-theme-exalead .ds-menu,
  .ds-ui-kit-scope.ds-theme-exalead .ds-menu__top {
    background-color: #0081C5; }
  .ds-ui-kit-scope .ds-theme-exalead .ds-menu__links, .ds-ui-kit-scope.ds-theme-exalead .ds-menu__links {
    background-color: #006AA3; }
    .ds-ui-kit-scope .ds-theme-exalead .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-exalead .ds-menu__links ul ul {
      background-color: #006094; }
      @media (min-width: 841px) {
        .ds-ui-kit-scope .ds-theme-exalead .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-exalead .ds-menu__links ul ul {
          background-color: #006AA3; } }
  .ds-ui-kit-scope .ds-theme-geovia .ds-footer__top, .ds-ui-kit-scope.ds-theme-geovia .ds-footer__top {
    background-color: #CB9604; }
  .ds-ui-kit-scope .ds-theme-geovia .ds-footer__links, .ds-ui-kit-scope.ds-theme-geovia .ds-footer__links {
    background-color: #AB7E03; }
  .ds-ui-kit-scope .ds-theme-geovia .ds-menu,
  .ds-ui-kit-scope .ds-theme-geovia .ds-menu__top, .ds-ui-kit-scope.ds-theme-geovia .ds-menu,
  .ds-ui-kit-scope.ds-theme-geovia .ds-menu__top {
    background-color: #CB9604; }
  .ds-ui-kit-scope .ds-theme-geovia .ds-menu__links, .ds-ui-kit-scope.ds-theme-geovia .ds-menu__links {
    background-color: #AB7E03; }
    .ds-ui-kit-scope .ds-theme-geovia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-geovia .ds-menu__links ul ul {
      background-color: #9C7303; }
      @media (min-width: 841px) {
        .ds-ui-kit-scope .ds-theme-geovia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-geovia .ds-menu__links ul ul {
          background-color: #AB7E03; } }
  .ds-ui-kit-scope .ds-theme-simulia .ds-footer__top, .ds-ui-kit-scope.ds-theme-simulia .ds-footer__top {
    background-color: #00ABAA; }
  .ds-ui-kit-scope .ds-theme-simulia .ds-footer__links, .ds-ui-kit-scope.ds-theme-simulia .ds-footer__links {
    background-color: #008A8A; }
  .ds-ui-kit-scope .ds-theme-simulia .ds-menu,
  .ds-ui-kit-scope .ds-theme-simulia .ds-menu__top, .ds-ui-kit-scope.ds-theme-simulia .ds-menu,
  .ds-ui-kit-scope.ds-theme-simulia .ds-menu__top {
    background-color: #00ABAA; }
  .ds-ui-kit-scope .ds-theme-simulia .ds-menu__links, .ds-ui-kit-scope.ds-theme-simulia .ds-menu__links {
    background-color: #008A8A; }
    .ds-ui-kit-scope .ds-theme-simulia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-simulia .ds-menu__links ul ul {
      background-color: #007A7A; }
      @media (min-width: 841px) {
        .ds-ui-kit-scope .ds-theme-simulia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-simulia .ds-menu__links ul ul {
          background-color: #008A8A; } }
  .ds-ui-kit-scope.ds-theme-solidworks .ds-footer__top,
  .ds-ui-kit-scope .ds-theme-solidworks .ds-footer__top {
    background-color: #E31818; }
  .ds-ui-kit-scope.ds-theme-solidworks .ds-footer__links,
  .ds-ui-kit-scope .ds-theme-solidworks .ds-footer__links {
    background-color: #C21515; }
  .ds-ui-kit-scope.ds-theme-solidworks .ds-menu,
  .ds-ui-kit-scope.ds-theme-solidworks .ds-menu__top,
  .ds-ui-kit-scope .ds-theme-solidworks .ds-menu,
  .ds-ui-kit-scope .ds-theme-solidworks .ds-menu__top {
    background-color: #E31818; }
  .ds-ui-kit-scope.ds-theme-solidworks .ds-menu__links,
  .ds-ui-kit-scope .ds-theme-solidworks .ds-menu__links {
    background-color: #C21515; }
    .ds-ui-kit-scope.ds-theme-solidworks .ds-menu__links ul ul,
    .ds-ui-kit-scope .ds-theme-solidworks .ds-menu__links ul ul {
      background-color: #B31313; }
      @media (min-width: 841px) {
        .ds-ui-kit-scope.ds-theme-solidworks .ds-menu__links ul ul,
        .ds-ui-kit-scope .ds-theme-solidworks .ds-menu__links ul ul {
          background-color: #C21515; } }
  .ds-ui-kit-scope .ds-theme-3dexcite .ds-footer__top, .ds-ui-kit-scope.ds-theme-3dexcite .ds-footer__top {
    background-color: #000; }
  .ds-ui-kit-scope .ds-theme-3dexcite .ds-footer__links, .ds-ui-kit-scope.ds-theme-3dexcite .ds-footer__links {
    background-color: #000; }
  .ds-ui-kit-scope .ds-theme-3dexcite .ds-menu,
  .ds-ui-kit-scope .ds-theme-3dexcite .ds-menu__top, .ds-ui-kit-scope.ds-theme-3dexcite .ds-menu,
  .ds-ui-kit-scope.ds-theme-3dexcite .ds-menu__top {
    background-color: #000; }
  .ds-ui-kit-scope .ds-theme-3dexcite .ds-menu__links, .ds-ui-kit-scope.ds-theme-3dexcite .ds-menu__links {
    background-color: #1f1f1f; }
    .ds-ui-kit-scope .ds-theme-3dexcite .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-3dexcite .ds-menu__links ul ul {
      background-color: #282828; }
      @media (min-width: 841px) {
        .ds-ui-kit-scope .ds-theme-3dexcite .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-3dexcite .ds-menu__links ul ul {
          background-color: #1f1f1f; } }
  .ds-ui-kit-scope .ds-theme-3dvia .ds-footer__top, .ds-ui-kit-scope.ds-theme-3dvia .ds-footer__top {
    background-color: #88BD23; }
  .ds-ui-kit-scope .ds-theme-3dvia .ds-footer__links, .ds-ui-kit-scope.ds-theme-3dvia .ds-footer__links {
    background-color: #6F9C1D; }
  .ds-ui-kit-scope .ds-theme-3dvia .ds-menu,
  .ds-ui-kit-scope .ds-theme-3dvia .ds-menu__top, .ds-ui-kit-scope.ds-theme-3dvia .ds-menu,
  .ds-ui-kit-scope.ds-theme-3dvia .ds-menu__top {
    background-color: #88BD23; }
  .ds-ui-kit-scope .ds-theme-3dvia .ds-menu__links, .ds-ui-kit-scope.ds-theme-3dvia .ds-menu__links {
    background-color: #6F9C1D; }
    .ds-ui-kit-scope .ds-theme-3dvia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-3dvia .ds-menu__links ul ul {
      background-color: #648C1A; }
      @media (min-width: 841px) {
        .ds-ui-kit-scope .ds-theme-3dvia .ds-menu__links ul ul, .ds-ui-kit-scope.ds-theme-3dvia .ds-menu__links ul ul {
          background-color: #6F9C1D; } }