/**
 * ui-kit-3d - UI kit ‎Dassault Systèmes
 * @version v2.1.3
 */
@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.3.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: #005686"> $blue-brand</li>
		<li style="background: #239de8"> $blue-action</li>
		<li style="background: #1d83c2"> $blue-action-hover</li>
    <li style="background: #f7f9fb" 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: #005686"> map-get($corporate, 500)</li>
    <li style="background: #004266"> map-get($corporate, 600)</li>
    <li style="background: #003857"> map-get($corporate, 800)</li>
    <li style="background: #00304A"> map-get($corporate, 900)</li>
  </ul>
```
*/
@font-face {
  font-family: 'icon';
  src: url("../fonts/ui-kit-icons.eot");
  src: url("../fonts/ui-kit-icons.eot") format("embedded-opentype"), url("../fonts/ui-kit-icons.ttf") format("truetype"), url("../fonts/ui-kit-icons.woff") format("woff"), url("../fonts/ui-kit-icons.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

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

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

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

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

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

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

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

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

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

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

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

@font-face {
  font-family: '3dscondensed';
  src: url("../fonts/3ds-CondensedLight-v2.eot");
  src: url("../fonts/3ds-CondensedLight-v2.eot?#iefix") format("embedded-opentype"), url("../fonts/3ds-CondensedLight-v2.woff2") format("woff2"), url("../fonts/3ds-CondensedLight-v2.woff") format("woff"), url("../fonts/3ds-CondensedLight-v2.ttf") format("truetype"), url("../fonts/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: 16px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: -.2px;
  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: 2.0.0
tag:
 - Source approval done
 - DS approval pending
---

#### Heading

* We have helper class for the heading ex: `ds-h1`.
* These classes are responsive.

```html
<h1 class="ds-h1">Heading h1</h1>
<h2 class="ds-h2">Heading h2</h2>
<h3 class="ds-h3">Heading h3</h3>
<h4 class="ds-h4">Heading h4</h4>
<h5 class="ds-h5">Heading h5</h5>
```

#### Copy helper

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

```html
<p>Default and secondary body: Lorem Ipsum is simply dummy text of the printing<br>and typesetting industry.</p>
<p class="ds-primary-body">Primary body: Lorem Ipsum is simply dummy text of the printing<br>and typesetting industry.</p>

<p class="ds-tagline">Tagline: Lorem Ipsum is simply dummy text of the printing<br>and typesetting industry.</p>
<p class="ds-caption1">Caption 1: Lorem Ipsum is simply dummy text of the printing<br>and typesetting industry.</p>
<p class="ds-caption2">Caption 2: Lorem Ipsum is simply dummy text of the printing<br>and typesetting industry.</p>
```
*/
  /* Legacy heading must not be used*/
  /* WIP NEW Dynamic Type scale */
  /*
---
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.


#### Special 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>
        <i class="ds-ico ds-ico-download-circle-large"></i> download big
      </li>
    </ul>
  </div>
  <div class="ds-col ds-col--lg-6">
    <ul>
      <li>
        <i class="ds-ico ds-ico-play-medium"></i> play compact
      </li>
      <li>
        <i class="ds-ico ds-ico-download-circle-medium"></i> download comptact
      </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>
      <li>
        <i class="ds-ico ds-ico-fullscreen"></i> fullscreen-icon
      <li>
      <li>
        <i class="ds-ico ds-ico-windowed"></i> windowed-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.4.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>
```

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

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

#### 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="#">Simple link</a>
```

#### Disc
Works with all ds-ico-*-mini classes

Regular
```html
<a href="#" class="ds-btn-disc">
	<i class="ds-ico ds-ico-play-mini"></i>
</a>
<a href="#" class="ds-btn-disc">
	<i class="ds-ico ds-ico-upload-mini"></i>
</a>
<a href="#" class="ds-btn-disc">
	<i class="ds-ico ds-ico-plus-mini"></i>
</a>
<a href="#" class="ds-btn-disc">
	<i class="ds-ico ds-ico-search-mini"></i>
</a>
<a href="#" class="ds-btn-disc">
	<i class="ds-ico ds-ico-youtube-mini"></i>
</a>
<a href="#" class="ds-btn-disc">
	<i class="ds-ico ds-ico-share-mini"></i>
</a>
```

Compact
```html
<a href="#" class="ds-btn-disc ds-btn-disc--compact">
	<i class="ds-ico ds-ico-play-mini"></i>
</a>
<a href="#" class="ds-btn-disc ds-btn-disc--compact">
	<i class="ds-ico ds-ico-upload-mini"></i>
</a>
<a href="#" class="ds-btn-disc ds-btn-disc--compact">
	<i class="ds-ico ds-ico-plus-mini"></i>
</a>
<a href="#" class="ds-btn-disc ds-btn-disc--compact">
	<i class="ds-ico ds-ico-search-mini"></i>
</a>
<a href="#" class="ds-btn-disc ds-btn-disc--compact">
	<i class="ds-ico ds-ico-youtube-mini"></i>
</a>
<a href="#" class="ds-btn-disc ds-btn-disc--compact">
	<i class="ds-ico ds-ico-share-mini"></i>
</a>
```





#### Circle (deprecated)

Regular play
```html
deprecated<br>
<a href="#" class="ds-btn-circle">
	<i class="ds-ico ds-ico-play-big"></i>
</a>
```

Compact play
```html
deprecated<br>
<a href="#" class="ds-btn-circle ds-btn-circle--compact">
	<i class="ds-ico ds-ico-play-big"></i>
</a>
```

Regular download
```html
deprecated<br>
<a href="#" class="ds-btn-circle">
	<i class="ds-ico ds-ico-download-circle-large"></i>
</a>
```

Compact download
```html
deprecated<br>
<a href="#" class="ds-btn-circle ds-btn-circle--compact">
	<i class="ds-ico ds-ico-download-circle-medium"></i>
</a>
```

#### 3DExperience platform

Regular
```html
<a class="ds-btn ds-btn--3dexperience" href="#">
	<i class="ds-ico ds-ico-compass-large"></i><span>Button</span>
</a>

<a class="ds-btn ds-btn--3dexperience is-disabled" href="#">
	<i class="ds-ico ds-ico-compass-large"></i><span>Disabled</span>
</a>
```

Transparent
```html
<a class="ds-btn ds-btn--3dexperience ds-btn--transparent" href="#">
	<i class="ds-ico ds-ico-compass-large"></i><span>Button</span>
</a>

<a class="ds-btn ds-btn--3dexperience ds-btn--transparent is-disabled" href="#">
	<i class="ds-ico ds-ico-compass-large"></i><span>Disabled</span>
</a>
```

Regular on dark
```html
<!-- dark -->
<a class="ds-btn ds-btn--3dexperience ds-btn--dark" href="#">
	<i class="ds-ico ds-ico-compass-large"></i><span>Button</span>
</a>

<a class="ds-btn ds-btn--3dexperience ds-btn--dark is-disabled" href="#">
	<i class="ds-ico ds-ico-compass-large"></i><span>Disabled</span>
</a>
```

Transparent on dark
```html
<!-- dark -->
<a class="ds-btn ds-btn--3dexperience ds-btn--transparent ds-btn--dark" href="#">
	<i class="ds-ico ds-ico-compass-large"></i><span>Button</span>
</a>

<a class="ds-btn ds-btn--3dexperience ds-btn--dark ds-btn--transparent is-disabled" href="#">
	<i class="ds-ico ds-ico-compass-large"></i><span>Disabled</span>
</a>
```

Highlighted segments
```html
<a class="ds-btn ds-btn--3dexperience" href="#">
	<i class="ds-ico ds-ico-compass-large"></i><span>Button</span>
</a>

<a class="ds-btn ds-btn--3dexperience" href="#">
	<i class="ds-ico ds-ico-compass-north-large"></i><span>Button</span>
</a>

<a class="ds-btn ds-btn--3dexperience" href="#">
	<i class="ds-ico ds-ico-compass-east-large"></i><span>Button</span>
</a>

<a class="ds-btn ds-btn--3dexperience" href="#">
	<i class="ds-ico ds-ico-compass-south-large"></i><span>Button</span>
</a>

<a class="ds-btn ds-btn--3dexperience" href="#">
	<i class="ds-ico ds-ico-compass-west-large"></i><span>Button</span>
</a>
```


*/
  /** SIZE **/
  /** TYPE **/
  /** COLOR **/
  /*
---
name: Dividers
elements:
 - doc
 - doc/Dividers
version: 1.0.0
tag:
 - Source approval done
 - DS approval pending
---

#### Line dividers

Regular
```html
<div class="ds-divider-line"></div>
```

Regular on dark background
```html
<!-- dark -->
<div class="ds-divider-line ds-divider-line--dark"></div>
```

#### Dots dividers

Regular
```html
<div class="ds-divider-dots"><span></span></div>
```

Regular on dark background
```html
<!-- dark -->
<div class="ds-divider-dots ds-divider-dots--dark"><span></span></div>
```

*/
  /*
---
name: Lists
elements:
 - doc
 - doc/Lists
version: 1.1.0
tag:
 - Source approval done
 - DS approval pending
---

#### This is a default list
font-size 16px & line-height 24px
```html
<p style="font-size: 16px; 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 16px & line-height 28px
```html
<p style="font-size: 16px; 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 sur desktop XL
```html
<p class="ds-primary-body">Quisque scelerisque lectus a metus imperdiet:</p>
<ul class="ds-lists ds-lists--big-ft">
  <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">
      <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>
```

font-size 18px & line-height 32px sur desktop XL
```html
<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: 16px
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: 16px,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.2.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.2.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.1.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/32x32/999999/fff');"></div>
  </div>
  <div class="ds-people__infos">
    <div class="ds-people__name">Author name</div>
  </div>
</div>
```

#### Default without placeholder
```html
<div class="ds-people">
  <div class="ds-people__faces">
    <div class="ds-people__face" style=""><i class="ds-ico ds-ico-profile-mini"></i></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/32x32/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 ds-people__face--border" style="background-image: url('//dummyimage.com/32x32/999999/fff');"></div>
    <div class="ds-people__face ds-people__face--border" style="background-image: url('//dummyimage.com/32x32/999999/fff');"></div>
    <div class="ds-people__face ds-people__face--border" style="background-image: url('//dummyimage.com/32x32/999999/fff');"></div>
  </div>
  <div class="ds-people__infos">
    <div class="ds-people__name">Monica and 3 others...</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/32x32/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.4.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.4.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.4.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>
<div class="ds-switch">
  <input type="checkbox" id="input9" class="has-error">
  <label for="input9">Toggle on</label>
  <span class="ds-switch__info ds-switch__error">Please accept the privacy policy</span>
</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.3.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.3.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.3.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: 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: 2.0.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-highlight');
var highlight = new uikit.bundle.highlight(el);
```

#### Highlight (default)

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

```html
<!-- no-preview -->
<div class="ds-container">
  <div class="ds-highlight2" style="background-image: url(//dummyimage.com/1560x576/005686/0086a6);">
    <div class="ds-row">
      <div class="ds-col ds-col--xs-4 ds-col--md-5 ds-col--ld-7 ds-col--lg-7 ds-col--xl-8 ds-col--md-offset-1 ds-col--ld-offset-1 ds-col--lg-offset-1 ds-col--xl-offset-2">
        <div class="ds-highlight2__wrapper">
          <div class="ds-highlight2__category ds-caption1">Aerospace &amp; Defense </div>
          <div class="ds-highlight2__title ds-h2" data-title="Designer to Cure">Designer to Cure</div>
          <div class="ds-highlight2__body ds-primary-body" data-title="Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp;amp; machining times from roughing to">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp; machining times from roughing to</div>
          <div class="ds-highlight2__info"><span class="ds-caption1"><i class="ds-ico ds-ico-location-mini is-inline"></i>Lorem ipsum</span><span class="ds-caption1"><i class="ds-ico ds-ico-calendar-mini is-inline"></i>Lorem ipsum</span></div>
          <div class="ds-highlight2__links">
            <div><a class="ds-btn ds-btn--scream has-icon" target="_self" href="catia-cnc-machining.html" itemprop="url"><i class="ds-ico ds-ico-chevron-mini"></i><span>Learn more</span></a></div>
            <div><a class="ds-btn ds-btn--murmur ds-btn--dark has-icon" target="_self" href="catia-cnc-machining.html" itemprop="url"><i class="ds-ico ds-ico-chevron-mini"></i><span>Register</span></a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

#### Highlight without background

If you don't use an image on background you need to add the class `ds-highlight2--grey` to the component.

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

```html
<!-- no-preview -->
<div class="ds-container">
  <div class="ds-highlight2 ds-highlight2--grey">
    <div class="ds-row">
      <div class="ds-col ds-col--xs-4 ds-col--md-5 ds-col--ld-7 ds-col--lg-7 ds-col--xl-8 ds-col--md-offset-1 ds-col--ld-offset-1 ds-col--lg-offset-1 ds-col--xl-offset-2">
        <div class="ds-highlight2__wrapper">
          <div class="ds-highlight2__category ds-caption1">Aerospace &amp; Defense </div>
          <div class="ds-highlight2__title ds-h2" data-title="Designer to Cure">Designer to Cure</div>
          <div class="ds-highlight2__body ds-primary-body" data-title="Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp;amp; machining times from roughing to">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp; machining times from roughing to</div>
          <div class="ds-highlight2__info"><span class="ds-caption1"><i class="ds-ico ds-ico-location-mini is-inline"></i>Lorem ipsum</span><span class="ds-caption1"><i class="ds-ico ds-ico-calendar-mini is-inline"></i>Lorem ipsum</span></div>
          <div class="ds-highlight2__links">
            <div><a class="ds-btn ds-btn--scream has-icon" target="_self" href="catia-cnc-machining.html" itemprop="url"><i class="ds-ico ds-ico-chevron-mini"></i><span>Learn more</span></a></div>
            <div><a class="ds-btn ds-btn--murmur has-icon" target="_self" href="catia-cnc-machining.html" itemprop="url"><i class="ds-ico ds-ico-chevron-mini"></i><span>Register</span></a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

#### Highlight video

For this type of highlight you need to add the class `ds-highlight2--center` to the component and an attribut to define the type like `data-type="video"`.

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

```html
<!-- no-preview -->
<div class="ds-container">
  <div class="ds-highlight2 ds-highlight2--center" style="background-image: url(//dummyimage.com/1560x576/005686/0086a6);" data-type="video">
    <div class="ds-row">
      <div class="ds-col ds-col--xs-4 ds-col--md-5 ds-col--ld-7 ds-col--lg-7 ds-col--xl-8 ds-col--center">
        <div class="ds-highlight2__wrapper">
          <div class="ds-highlight2__category ds-caption1">Aerospace &amp; Defense </div>
          <div class="ds-highlight2__title ds-h2" data-title="Designer to Cure">Designer to Cure</div>
          <div class="ds-highlight2__body ds-primary-body" data-title="Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp;amp; machining times from roughing to">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp; machining times from roughing to</div>
          <div class="ds-highlight2__info"><span class="ds-caption1"><i class="ds-ico ds-ico-location-mini is-inline"></i>Duration 2 min 45</span></div>
          <div class="ds-highlight2__links">
            <div><a class="ds-btn-circle" href="https://youtu.be/byHUwhRC644" data-video-id="byHUwhRC644"><i class="ds-ico ds-ico-play-big"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

#### Highlight document

For this type of highlight you need to add the class `ds-highlight2--center` to the component and an attribut to define the type like `data-type="file"`.

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

```html
<!-- no-preview -->
<div class="ds-container">
  <div class="ds-highlight2 ds-highlight2--center" style="background-image: url(//dummyimage.com/1560x576/005686/0086a6);" data-type="file">
    <div class="ds-row">
      <div class="ds-col ds-col--xs-4 ds-col--md-5 ds-col--ld-7 ds-col--lg-7 ds-col--xl-8 ds-col--center">
        <div class="ds-highlight2__wrapper">
          <div class="ds-highlight2__category ds-caption1">Aerospace &amp; Defense </div>
          <div class="ds-highlight2__title ds-h2" data-title="Designer to Cure">Designer to Cure</div>
          <div class="ds-highlight2__body ds-primary-body" data-title="Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp;amp; machining times from roughing to">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp; machining times from roughing to</div>
          <div class="ds-highlight2__info"><span class="ds-caption1"><i class="ds-ico ds-ico-location-mini is-inline"></i>PDF 3mo</span></div>
          <div class="ds-highlight2__links">
            <div>
              <a class="ds-btn-circle" target="_blank" href="http://customer-excellence.3ds.sourceinteractive.net/customer-transformation/src/img/pdf/3DS_2018_IE_Digital_Equipment_Continuity_Flyer_USLetter_WEB.pdf" download="3DS_2018_IE_Digital_Equipment_Continuity_Flyer_USLetter_WEB.pdf"><i class="ds-ico ds-ico-download-circle-large"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

#### Highlight video gated

When a highlight is gated you need to add a class `is-gated` and a type attribut `data-type="video"` to the component.

For a video type you need to add an attribut on your CTA to define the video id `data-video-id="byHUwhRC644"`. There is also an optional attribut to change the type of player, for ex: ``data-player="youku"``.


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

```html
<!-- no-preview -->
<div class="ds-highlight2 ds-highlight2--center is-gated" style="background-image: url(//dummyimage.com/1560x576/005686/0086a6);" data-type="video">
  <div class="ds-row">
    <div class="ds-col ds-col--xs-4 ds-col--md-5 ds-col--ld-7 ds-col--lg-7 ds-col--xl-8 ds-col--center">
      <div class="ds-highlight2__wrapper">
        <div class="ds-highlight2__category ds-caption1">Aerospace &amp; Defense </div>
        <div class="ds-highlight2__title ds-h2" data-title="Designer to Cure">Designer to Cure</div>
        <div class="ds-highlight2__body ds-primary-body" data-title="Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp;amp; machining times from roughing to">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp; machining times from roughing to</div>
        <div class="ds-highlight2__info">
          <span class="ds-caption1"><i class="ds-ico ds-ico-location-mini is-inline"></i>Duration 2 min 45</span>
        </div>
        <div class="ds-highlight2__links">
          <div>
            <a class="ds-btn-circle" href="https://emailing.3ds.com/dsx/lp.jssp?template=LDP42740" data-href="https://youtu.be/byHUwhRC644" data-video-id="byHUwhRC644"><i class="ds-ico ds-ico-play-big"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMax meet">
    <circle cx="50" cy="80" r="0" style="fill: #f7f9fb" id="ds-highlight-1"></circle>
    <animate xlink:href="#ds-highlight-1" attributeName="r" dur="0.6s" begin="indefinite" fill="freeze" restart="whenNotActive"></animate>
  </svg>
</div>
```

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

#### Highlight document gated

When a highlight is gated you need to add a class `is-gated` and a type attribut `data-type="file"` to the component.

For a document type you need to add an attribut on your CTA to define the document's url `data-href="file.pdf"`.

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

```html
<!-- no-preview -->
<div class="ds-highlight2 ds-highlight2--center is-gated" style="background-image: url(//dummyimage.com/1560x576/005686/0086a6);" data-type="file">
  <div class="ds-row">
    <div class="ds-col ds-col--xs-4 ds-col--md-5 ds-col--ld-7 ds-col--lg-7 ds-col--xl-8 ds-col--center">
      <div class="ds-highlight2__wrapper">
        <div class="ds-highlight2__category ds-caption1">Aerospace &amp; Defense </div>
        <div class="ds-highlight2__title ds-h2" data-title="Designer to Cure">Designer to Cure</div>
        <div class="ds-highlight2__body ds-primary-body" data-title="Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp;amp; machining times from roughing to">Machinist operators, tool path programmers, NC Machine code validation specialists can reduce programming &amp; machining times from roughing to</div>
        <div class="ds-highlight2__info">
          <span class="ds-caption1"><i class="ds-ico ds-ico-location-mini is-inline"></i>PDF 3mo</span>
        </div>
        <div class="ds-highlight2__links">
          <div>
            <a class="ds-btn-circle" href="https://emailing.3ds.com/dsx/lp.jssp?template=LDP42740" data-href="http://customer-excellence.3ds.sourceinteractive.net/customer-transformation/src/img/pdf/3DS_2018_IE_Digital_Equipment_Continuity_Flyer_USLetter_WEB.pdf"><i class="ds-ico ds-ico-download-circle-large"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMax meet">
    <circle cx="50" cy="80" r="0" style="fill: #f7f9fb" id="ds-highlight-2"></circle>
    <animate xlink:href="#ds-highlight-2" attributeName="r" dur="0.6s" begin="indefinite" fill="freeze" restart="whenNotActive"></animate>
  </svg>
</div>
```

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

<div class="aigis-highlight aigis-highlight--red">
  <h4>WARNING CODE DEPRECATED</h4>
  <p>The component Highlight 1.0.0 bellow is deprecated.<br>
  It is necessary for backward compatibility. Don't use it!.</p>
</div>

#### Highlight 1.0.0 DEPRECATED

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>
```
*/
  /* Highlight 2.0.0 */
  /*
  DEPRECATED Highlight 1.0.0
  NECESSARY FOR BACKWARD COMPATIBILITY
  DON'T USE IT
 */
  /*
---
name: Sharing
elements:
 - doc
 - doc/Sharing
version: 1.3.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: 2.2.0
tag:
 - Source approval done
 - DS approval pending
---

#### Medium card (default)

```html
<article class="ds-card">
	<div class="ds-sharing ds-sharing--card" 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</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>
```

#### Classic card

```html
<article class="ds-card ds-card--classic">
	<div class="ds-sharing ds-sharing--card" 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</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...</p>
		</div>
	</a>
</article>
```

#### Youtube card

```html
<article class="ds-card ds-card--video">
	<div class="ds-sharing ds-sharing--card" 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"></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</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>
			<div class="ds-card__info">
				<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>
	</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>
	</div>
</article>
```

#### Live card

```html
<article class="ds-card ds-card--live">
	<div class="ds-sharing ds-sharing--card" 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"></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-card__info">
				<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">Company</div>
					</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>
```

#### Classic live card

```html
<article class="ds-card ds-card--classic ds-card--live">
	<div class="ds-sharing ds-sharing--card" 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"></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>
			<div class="ds-card__info">
				<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">Company</div>
					</div>
				</div>
			</div>
		</div>
	</a>
</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"></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>
```

#### Compact card

```html
<div style="width: 400px;">
<article class="ds-card ds-card--compact">
	<a target="_self" href="#" itemprop="url">
		<div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/104x104/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>
		</div>
	</a>
</article>
</div>
```

#### Compact live card

```html
<div style="width: 400px;">
<article class="ds-card ds-card--compact">
	<a target="_self" href="#" itemprop="url">
		<div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/104x104/999999/fff)">
			<i class="ds-ico ds-ico-play-medium"></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>
		</div>
	</a>
</article>
</div>
```

#### Compact card without thumbnail

```html
<div style="width: 400px;">
<article class="ds-card ds-card--compact">
	<a target="_self" href="#" itemprop="url">
		<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>
			<div class="ds-card__info">
				<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>
		</div>
	</a>
</article>
</div>
```

#### Compact card for large container

On tablet and desktop, if you are going to add a compact card in a large container of 6 or 8 columns you must add the class `is-large`.

```html
<article class="ds-card ds-card--compact is-large">
	<a target="_self" href="#" itemprop="url">
		<div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/120x120/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>
		</div>
	</a>
</article>
```

#### Compact live card for large container

On tablet and desktop, if you are going to add a compact card in a large container of 6 or 8 columns you must add the class `is-large`.

```html
<article class="ds-card ds-card--compact is-large">
	<a target="_self" href="#" itemprop="url">
		<div class="ds-card__thumbnail" style="background-image: url(//dummyimage.com/120x120/999999/fff)">
			<i class="ds-ico ds-ico-play-medium"></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>
		</div>
	</a>
</article>
```

#### Compact card without thumbnail for large container

On tablet and desktop, if you are going to add a compact card in a large container of 6 or 8 columns you must add the class `is-large`.

```html
<article class="ds-card ds-card--compact is-large">
	<a target="_self" href="#" itemprop="url">
		<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>
			<div class="ds-card__info">
				<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>
		</div>
	</a>
</article>
```

#### Compact card with alternative background

The compact card can be used with a different background. You just need to add the class `has-background` to the component.

```html
<div style="width: 400px;">
<article class="ds-card ds-card--compact has-background">
	<a target="_self" href="#" itemprop="url">
		<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>
			<div class="ds-card__info">
				<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>
		</div>
	</a>
</article>
</div>
```

#### Category card

```html
<article class="ds-card ds-card--category" style="background-image: url(//dummyimage.com/400x600/999999/fff);">
	<a target="_self" href="#" itemprop="url">
		<div class="ds-card__wrapper">
			<div class="ds-card__title" itemprop="headline" data-title="From Automated to SMART Tools test long title for croping lorem ipsum ipsum ipsum">From Automated to SMART Tools test long...</div>
			<div class="ds-card__info">
				<span>4 Challenges</span>
				<span>10 Solutions</span>
			</div>
		</div>
	</a>
</article>
```

#### Collection card

```html
<article class="ds-card ds-card--collection" style="background-color: rgba(106, 135, 166, 1);">
	<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">Collection</span>
			<div class="ds-card__title" itemprop="headline" data-title="From Automated to SMART Tools test long title for croping lorem ipsum ipsum ipsum">From Automated to SMART Tools test long...</div>
			<div class="ds-card__info">
				<span><i class="ds-ico ds-ico-location-mini is-inline"></i>Collection • 4 Parts</span>
			</div>
		</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.1.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>
            <li>
              <a href="#">Solidworks</a>
            </li>
            <li>
              <a href="#">3DS</a>
            </li>
          </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>
            <li>
              <a href="#">Solidworks</a>
            </li>
            <li>
              <a href="#">3DS</a>
            </li>
          </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.4.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 menu 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.5.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.1.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.1.1
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).

By default all the tag with the class `ds-lazy` are instantiated when the ui-kit is initialized.
You can also manualy call the plugin with you custom selector :  
`var img = new uikit.bundle.lazyLoad({elements_selector: ".ds-lazy"});`

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

If you want to manage responsive lazy loading, the plugin uses the same behavior as the srcset API.

Example: Responsive retina lazy load with
```html
<img class="ds-lazy" data-src="//dummyimage.com/200x100/999999/fff"
    data-srcset="//dummyimage.com/200x100/999999/fff 1x, //dummyimage.com/400x200/999999/fff 2x">
```

Example: Responsive lazy
```html
<picture>
    <source media="(min-width: 1024px)" data-srcset="//dummyimage.com/600x300/999999/fff" />
    <source media="(min-width: 500px)" data-srcset="//dummyimage.com/400x150/999999/fff" />
    <img class="ds-lazy" alt="Stivaletti" data-src="//dummyimage.com/200x100/999999/fff">
</picture>
```

You can find more exemple on [the official documentation](https://www.andreaverlicchi.eu/lazyload/#recipes).

#### 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>
```

#### Asynchronous form loading

```html
<div class="ds-spinner">
  <div class="ds-spinner__container">
    <div class="ds-spinner__layer ds-spinner-layer">
        <div class="ds-spinner__clipper">
            <div class="ds-spinner__circle ds-spinner__circle--left"></div>
        </div>
        <div class="ds-spinner__patch">
          <div class="ds-spinner__circle"></div>
        </div>
        <div class="ds-spinner__clipper">
            <div class="ds-spinner__circle ds-spinner__circle--right"></div>
        </div>
    </div>
  </div>
</div>
```
*/
  /*
---
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 .swiper-container--images', {
  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', {
  navigation: {
    nextEl: '#demo2 .swiper-button-next',
    prevEl: '#demo2 .swiper-button-prev',
  },
  slidesPerView: 4,
  spaceBetween: 40,
  slidesPerGroup: 4,
  breakpoints: {
    720: {
      slidesPerView: 1,
      spaceBetween: 8,
      slidesPerGroup: 1,
    },
    840: {
      slidesPerView: 2,
      spaceBetween: 8,
      slidesPerGroup: 1,
    },
    1041: {
      slidesPerView: 2,
      spaceBetween: 32,
      slidesPerGroup: 2,
    },
    1441: {
      slidesPerView: 3,
      spaceBetween: 32,
      slidesPerGroup: 3,
    }
  }
});
```

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 */
  /* Scrollbar */
  /* 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 {
    max-width: 100%;
    -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: 32px;
      padding-right: 32px; }
    .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 .ds-h1 {
    font-weight: 600;
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -1px; }
  .ds-ui-kit-scope .ds-h2 {
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -.8px; }
  .ds-ui-kit-scope .ds-h3 {
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -.6px; }
  .ds-ui-kit-scope .ds-h4 {
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -.4px; }
  .ds-ui-kit-scope .ds-h5 {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -.2px; }
  .ds-ui-kit-scope .ds-tagline {
    font-weight: 300;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -.2px; }
  .ds-ui-kit-scope .ds-primary-body,
  .ds-ui-kit-scope .ds-secondary-body {
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -.2px; }
  .ds-ui-kit-scope .ds-caption1 {
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0; }
  .ds-ui-kit-scope .ds-caption2 {
    font-weight: 600;
    font-size: 11px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: 0; }
  @media (max-width: 720px) {
    .ds-ui-kit-scope .ds-h1 {
      font-size: 32px;
      line-height: 36px;
      letter-spacing: -.8px; }
    .ds-ui-kit-scope .ds-h2 {
      font-size: 26px;
      line-height: 32px;
      letter-spacing: -.6px; }
    .ds-ui-kit-scope .ds-h3 {
      font-size: 22px;
      line-height: 28px;
      letter-spacing: -.4px; }
    .ds-ui-kit-scope .ds-h4 {
      font-size: 18px;
      line-height: 28px;
      letter-spacing: -.2px; } }
  @media (min-width: 1441px) {
    .ds-ui-kit-scope .ds-h1 {
      font-size: 55px;
      line-height: 64px;
      letter-spacing: -1.3px; }
    .ds-ui-kit-scope .ds-h2 {
      font-size: 44px;
      line-height: 48px;
      letter-spacing: -1px; }
    .ds-ui-kit-scope .ds-h3 {
      font-size: 32px;
      line-height: 36px;
      letter-spacing: -.8px; }
    .ds-ui-kit-scope .ds-h4 {
      font-size: 26px;
      line-height: 32px;
      letter-spacing: -.6px; }
    .ds-ui-kit-scope .ds-tagline {
      font-size: 22px;
      line-height: 28px;
      letter-spacing: -.4px; }
    .ds-ui-kit-scope .ds-primary-body {
      font-size: 18px;
      line-height: 28px; } }
  .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;
    letter-spacing: 0;
    /* 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-fullscreen:before {
      content: '\e953'; }
    .ds-ui-kit-scope i.ds-ico-windowed:before {
      content: '\e954'; }
    .ds-ui-kit-scope i.ds-ico-quote-sign:before {
      content: '\e92e'; }
    .ds-ui-kit-scope i.ds-ico-play-big:before, .ds-ui-kit-scope i.ds-ico-play-medium:before {
      content: '\e923'; }
    .ds-ui-kit-scope i.ds-ico-download-circle-large:before, .ds-ui-kit-scope i.ds-ico-download-circle-medium:before {
      content: '\e914'; }
    .ds-ui-kit-scope i.ds-ico-compass-north-large:before {
      content: '\e951'; }
    .ds-ui-kit-scope i.ds-ico-compass-south-large:before {
      content: '\e94f'; }
    .ds-ui-kit-scope i.ds-ico-compass-east-large:before {
      content: '\e94e'; }
    .ds-ui-kit-scope i.ds-ico-compass-west-large:before {
      content: '\e950'; }
    .ds-ui-kit-scope i.ds-ico-compass-large:before {
      content: '\e952'; }
    .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-fullscreen, .ds-ui-kit-scope i.ds-ico-windowed, .ds-ui-kit-scope i.ds-ico-back-icon {
      font-size: 32px; }
    .ds-ui-kit-scope i.ds-ico-quote-sign {
      font-size: 64px; }
    .ds-ui-kit-scope i.ds-ico-compass-north-large, .ds-ui-kit-scope i.ds-ico-compass-south-large, .ds-ui-kit-scope i.ds-ico-compass-east-large, .ds-ui-kit-scope i.ds-ico-compass-west-large, .ds-ui-kit-scope i.ds-ico-compass-large {
      font-size: 40px; }
  .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;
    vertical-align: middle;
    height: 40px;
    border-radius: 22px;
    border: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    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.is-disabled, .ds-ui-kit-scope .ds-btn[disabled] {
      pointer-events: none; }
  .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: 24px;
      padding-right: 28px; }
  .ds-ui-kit-scope .ds-btn--compact {
    height: 32px;
    line-height: 33px;
    font-size: 13px;
    letter-spacing: 0;
    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); }
    .ds-ui-kit-scope .ds-btn--scream.ds-btn--dark {
      color: #239de8;
      background: #fff; }
      .ds-ui-kit-scope .ds-btn--scream.ds-btn--dark:hover, .ds-ui-kit-scope .ds-btn--scream.ds-btn--dark:focus {
        background: #1d83c2;
        color: #fff; }
      .ds-ui-kit-scope .ds-btn--scream.ds-btn--dark.is-disabled, .ds-ui-kit-scope .ds-btn--scream.ds-btn--dark[disabled] {
        background-color: rgba(255, 255, 255, 0.16);
        color: rgba(255, 255, 255, 0.4); }
  .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; }
    .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: 16px; }
    .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: -12px;
        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--3dexperience {
    position: relative;
    height: 56px;
    line-height: 56px;
    border-radius: 28px;
    margin-right: 16px;
    margin-bottom: 16px;
    padding-left: 8px;
    padding-right: 28px;
    background-color: #005686;
    color: #fff; }
    .ds-ui-kit-scope .ds-btn--3dexperience:hover, .ds-ui-kit-scope .ds-btn--3dexperience:focus {
      color: #fff;
      background-color: #004870; }
    .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--dark {
      background-color: #fff;
      color: #005686; }
      .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--dark:hover, .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--dark:focus {
        color: #fff;
        background-color: #004266; }
      .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--dark.is-disabled, .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--dark[disabled] {
        background-color: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.16);
        border: 0; }
    .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent {
      line-height: 55px;
      background-color: transparent;
      color: #005686;
      border: 2px solid #005686; }
      .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent:hover, .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent:focus {
        color: #005686;
        background-color: rgba(0, 86, 134, 0.08); }
      .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent i {
        left: -1px;
        top: -2px; }
      .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent.is-disabled, .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent[disabled] {
        line-height: 58px; }
        .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent.is-disabled i, .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent[disabled] i {
          left: 0;
          top: -2px; }
      .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent.ds-btn--dark {
        color: #fff;
        border: 2px solid #fff; }
        .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent.ds-btn--dark:hover, .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent.ds-btn--dark:focus {
          color: #fff;
          background-color: rgba(255, 255, 255, 0.08); }
        .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent.ds-btn--dark i {
          top: -2px; }
        .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent.ds-btn--dark.is-disabled, .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent.ds-btn--dark[disabled] {
          background-color: rgba(255, 255, 255, 0.08);
          color: rgba(255, 255, 255, 0.16);
          border: 0; }
          .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent.ds-btn--dark.is-disabled i, .ds-ui-kit-scope .ds-btn--3dexperience.ds-btn--transparent.ds-btn--dark[disabled] i {
            left: 0;
            top: -1px; }
    .ds-ui-kit-scope .ds-btn--3dexperience.is-disabled, .ds-ui-kit-scope .ds-btn--3dexperience[disabled] {
      background-color: rgba(0, 0, 0, 0.08);
      color: rgba(0, 0, 0, 0.16);
      border: 0; }
    .ds-ui-kit-scope .ds-btn--3dexperience i {
      margin-right: 16px; }
  .ds-ui-kit-scope .ds-btn--scream,
  .ds-ui-kit-scope .ds-btn--shout,
  .ds-ui-kit-scope .ds-btn--3dexperience {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; }
  .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-btn-circle .ds-ico-play-big,
  .ds-ui-kit-scope .ds-btn-circle .ds-ico-play-medium,
  .ds-ui-kit-scope .ds-btn-circle .ds-ico-download-circle-large,
  .ds-ui-kit-scope .ds-btn-circle .ds-ico-download-circle-medium,
  .ds-ui-kit-scope .ds-card .ds-ico-play-big,
  .ds-ui-kit-scope .ds-card .ds-ico-play-medium,
  .ds-ui-kit-scope .ds-card .ds-ico-download-circle-large,
  .ds-ui-kit-scope .ds-card .ds-ico-download-circle-medium,
  .ds-ui-kit-scope .ds-vplayer__play .ds-ico-play-big,
  .ds-ui-kit-scope .ds-vplayer__play .ds-ico-play-medium,
  .ds-ui-kit-scope .ds-vplayer__play .ds-ico-download-circle-large,
  .ds-ui-kit-scope .ds-vplayer__play .ds-ico-download-circle-medium {
    border-radius: 50%;
    background-color: #fff;
    color: #239de8;
    text-align: center;
    box-shadow: 0 16px 16px rgba(0, 0, 0, 0.32);
    transition: -webkit-transform 0.6s cubic-bezier(0.39, 0.58, 0.57, 1);
    transition: transform 0.6s cubic-bezier(0.39, 0.58, 0.57, 1); }
    .ds-ui-kit-scope .ds-btn-circle .ds-ico-play-big:before,
    .ds-ui-kit-scope .ds-btn-circle .ds-ico-play-medium:before,
    .ds-ui-kit-scope .ds-btn-circle .ds-ico-download-circle-large:before,
    .ds-ui-kit-scope .ds-btn-circle .ds-ico-download-circle-medium:before,
    .ds-ui-kit-scope .ds-card .ds-ico-play-big:before,
    .ds-ui-kit-scope .ds-card .ds-ico-play-medium:before,
    .ds-ui-kit-scope .ds-card .ds-ico-download-circle-large:before,
    .ds-ui-kit-scope .ds-card .ds-ico-download-circle-medium:before,
    .ds-ui-kit-scope .ds-vplayer__play .ds-ico-play-big:before,
    .ds-ui-kit-scope .ds-vplayer__play .ds-ico-play-medium:before,
    .ds-ui-kit-scope .ds-vplayer__play .ds-ico-download-circle-large:before,
    .ds-ui-kit-scope .ds-vplayer__play .ds-ico-download-circle-medium:before {
      position: absolute; }
  .ds-ui-kit-scope .ds-btn-circle .ds-ico-play-big,
  .ds-ui-kit-scope .ds-btn-circle .ds-ico-download-circle-large,
  .ds-ui-kit-scope .ds-card .ds-ico-play-big,
  .ds-ui-kit-scope .ds-card .ds-ico-download-circle-large,
  .ds-ui-kit-scope .ds-vplayer__play .ds-ico-play-big,
  .ds-ui-kit-scope .ds-vplayer__play .ds-ico-download-circle-large {
    width: 64px;
    height: 64px; }
    .ds-ui-kit-scope .ds-btn-circle .ds-ico-play-big:before,
    .ds-ui-kit-scope .ds-btn-circle .ds-ico-download-circle-large:before,
    .ds-ui-kit-scope .ds-card .ds-ico-play-big:before,
    .ds-ui-kit-scope .ds-card .ds-ico-download-circle-large:before,
    .ds-ui-kit-scope .ds-vplayer__play .ds-ico-play-big:before,
    .ds-ui-kit-scope .ds-vplayer__play .ds-ico-download-circle-large:before {
      top: 24px;
      left: 24px; }
  .ds-ui-kit-scope .ds-btn-circle .ds-ico-play-medium,
  .ds-ui-kit-scope .ds-btn-circle .ds-ico-download-circle-medium,
  .ds-ui-kit-scope .ds-card .ds-ico-play-medium,
  .ds-ui-kit-scope .ds-card .ds-ico-download-circle-medium,
  .ds-ui-kit-scope .ds-vplayer__play .ds-ico-play-medium,
  .ds-ui-kit-scope .ds-vplayer__play .ds-ico-download-circle-medium {
    width: 40px;
    height: 40px; }
    .ds-ui-kit-scope .ds-btn-circle .ds-ico-play-medium:before,
    .ds-ui-kit-scope .ds-btn-circle .ds-ico-download-circle-medium:before,
    .ds-ui-kit-scope .ds-card .ds-ico-play-medium:before,
    .ds-ui-kit-scope .ds-card .ds-ico-download-circle-medium:before,
    .ds-ui-kit-scope .ds-vplayer__play .ds-ico-play-medium:before,
    .ds-ui-kit-scope .ds-vplayer__play .ds-ico-download-circle-medium:before {
      top: 12px;
      left: 12px; }
  .ds-ui-kit-scope .ds-btn-disc .ds-ico[class$="-mini"] {
    border-radius: 50%;
    background-color: #fff;
    color: #239de8;
    text-align: center;
    box-shadow: 0 16px 16px rgba(0, 0, 0, 0.32);
    transition: -webkit-transform 0.6s cubic-bezier(0.39, 0.58, 0.57, 1);
    transition: transform 0.6s cubic-bezier(0.39, 0.58, 0.57, 1);
    width: 64px;
    height: 64px; }
    .ds-ui-kit-scope .ds-btn-disc .ds-ico[class$="-mini"]:before {
      position: absolute;
      top: 24px;
      left: 24px; }
  .ds-ui-kit-scope .ds-btn-disc.ds-btn-disc--compact .ds-ico[class$="-mini"] {
    width: 40px;
    height: 40px; }
    .ds-ui-kit-scope .ds-btn-disc.ds-btn-disc--compact .ds-ico[class$="-mini"]:before {
      top: 12px;
      left: 12px; }
  .ds-ui-kit-scope .ds-btn-circle,
  .ds-ui-kit-scope .ds-btn-disc {
    position: relative;
    display: inline-block; }
    .ds-ui-kit-scope .ds-btn-circle:hover i,
    .ds-ui-kit-scope .ds-btn-disc:hover i {
      -webkit-transform: scale(0.9);
          -ms-transform: scale(0.9);
              transform: scale(0.9);
      color: #239de8; }
    .ds-ui-kit-scope .ds-btn-circle .ds-spinner,
    .ds-ui-kit-scope .ds-btn-disc .ds-spinner {
      display: none; }
    .ds-ui-kit-scope .ds-btn-circle.is-loading i,
    .ds-ui-kit-scope .ds-btn-disc.is-loading i {
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1); }
    .ds-ui-kit-scope .ds-btn-circle.is-loading .ds-spinner,
    .ds-ui-kit-scope .ds-btn-disc.is-loading .ds-spinner {
      display: block; }
  .ds-ui-kit-scope .ds-divider-line {
    background: rgba(0, 0, 0, 0.12);
    display: block;
    margin: 48px 0;
    height: 1px;
    width: 100%; }
    .ds-ui-kit-scope .ds-divider-line--dark {
      background: rgba(255, 255, 255, 0.12); }
  .ds-ui-kit-scope .ds-divider-dots {
    position: relative;
    display: block;
    padding: 48px 0;
    margin: 0 auto;
    text-align: center;
    line-height: 4px;
    clear: both; }
    .ds-ui-kit-scope .ds-divider-dots span {
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.12); }
      .ds-ui-kit-scope .ds-divider-dots span:before, .ds-ui-kit-scope .ds-divider-dots span:after {
        position: absolute;
        content: '';
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.12); }
      .ds-ui-kit-scope .ds-divider-dots span:before {
        left: calc(50% - 8px); }
      .ds-ui-kit-scope .ds-divider-dots span:after {
        left: calc(50% + 8px); }
    .ds-ui-kit-scope .ds-divider-dots--dark span {
      background: rgba(255, 255, 255, 0.12); }
      .ds-ui-kit-scope .ds-divider-dots--dark span:before, .ds-ui-kit-scope .ds-divider-dots--dark span:after {
        background: rgba(255, 255, 255, 0.12); }
  .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; }
  .ds-ui-kit-scope .ds-lists--big-lh {
    line-height: 28px; }
  .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;
    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 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); }
  @media (min-width: 1441px) {
    .ds-ui-kit-scope .ds-lists--big-ft {
      font-size: 18px;
      line-height: 28px; }
    .ds-ui-kit-scope .ds-lists--big-ft.ds-lists--big-lh {
      line-height: 32px;
      margin-top: 16px; }
      .ds-ui-kit-scope .ds-lists--big-ft.ds-lists--big-lh li {
        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 .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: 16px;
    letter-spacing: -.2px;
    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: 60px; }
  .ds-ui-kit-scope .ds-quote .ds-quote__text {
    color: rgba(0, 0, 0, 0.48);
    margin: 0 0 28px; }
  .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: 16px;
    margin-top: 48px; }
  .ds-ui-kit-scope .ds-quote .ds-quote__name {
    font-weight: 600; }
  .ds-ui-kit-scope .ds-quote--large {
    text-align: center;
    margin-top: 32px;
    margin-bottom: 32px; }
    .ds-ui-kit-scope .ds-quote--large .ds-quote__text {
      font-size: 18px;
      font-weight: 400;
      line-height: 32px;
      letter-spacing: -.2px; }
  .ds-ui-kit-scope .ds-quote--compact {
    margin-top: 32px;
    margin-bottom: 32px; }
    .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: 16px;
      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: 40px; }
    .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--large .ds-quote__text {
        font-size: 22px;
        letter-spacing: -.4px;
        margin-bottom: 32px; }
    .ds-ui-kit-scope .ds-quote--compact {
      margin-top: 36px;
      margin-bottom: 40px; }
      .ds-ui-kit-scope .ds-quote--compact .ds-quote__text {
        margin-bottom: 24px; }
        .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%; } }
  @media (min-width: 1441px) {
    .ds-ui-kit-scope .ds-quote--large .ds-quote__text {
      font-size: 26px;
      line-height: 40px;
      letter-spacing: -.6px; }
    .ds-ui-kit-scope .ds-quote--compact .ds-quote__text {
      font-size: 18px; } }
  .ds-ui-kit-scope .ds-people {
    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: 8px;
      white-space: nowrap; }
    .ds-ui-kit-scope .ds-people .ds-people__face {
      display: inline-block;
      width: 32px;
      height: 32px;
      line-height: 30px;
      background-size: cover;
      border-radius: 100%;
      margin-left: -12px;
      background-color: rgba(0, 0, 0, 0.08);
      text-align: center;
      color: rgba(0, 0, 0, 0.48); }
      .ds-ui-kit-scope .ds-people .ds-people__face--border {
        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-size: 13px;
      line-height: 16px; }
    .ds-ui-kit-scope .ds-people .ds-people__name {
      font-weight: 600; }
    .ds-ui-kit-scope .ds-people .ds-people__company {
      font-weight: 300; }
      .ds-ui-kit-scope .ds-people .ds-people__company span {
        display: block; }
  .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-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 16px 24px;
    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-weight: 600;
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 0;
      margin-bottom: 4px; }
    .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;
      line-height: 20px;
      font-weight: 600;
      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: 16px;
        line-height: 24px;
        font-weight: 300;
        letter-spacing: -.2px;
        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: 28px 32px 8px 16px;
      background-color: #fff;
      color: rgba(0, 0, 0, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 4px;
      font-size: 16px;
      font-weight: 300;
      letter-spacing: -.2px;
      -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: rgba(0, 0, 0, 0); }
        .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: 8px;
    color: rgba(0, 0, 0, 0.32);
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0; }
  .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: 28px;
      line-height: 16px; }
      .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: -10px;
        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: -8px;
    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: -7px;
    border-radius: 100%;
    opacity: 1; }
  .ds-ui-kit-scope .ds-switch label {
    padding-left: 48px; }
    .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-switch input.has-error ~ label:before {
    background-color: #e63f41; }
  .ds-ui-kit-scope .ds-switch__info {
    display: block;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0;
    margin-top: 1px;
    padding-left: 48px; }
  .ds-ui-kit-scope .ds-switch__error {
    color: #e63f41; }
  .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: 16px;
      font-weight: 300;
      letter-spacing: -.2px;
      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: 12px 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: 8px 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: 8px 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: 16px;
    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: 16px; }
    .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: 16px;
    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: rgba(0, 0, 0, 0);
    -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: -16px;
      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: 0; }
  .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; }
    .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-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: 16px; }
      .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: 16px;
    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: 16px; }
        .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: #005686;
      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-highlight2 {
    position: relative;
    color: #fff;
    border-radius: 6px;
    overflow: hidden;
    text-align: left; }
    .ds-ui-kit-scope .ds-highlight2:hover .ds-highlight2__bg {
      -webkit-transform: scale(1.02);
          -ms-transform: scale(1.02);
              transform: scale(1.02); }
    .ds-ui-kit-scope .ds-highlight2.has-form .ds-highlight2__form {
      display: block; }
    .ds-ui-kit-scope .ds-highlight2.has-form .ds-highlight2__content {
      display: none; }
    .ds-ui-kit-scope .ds-highlight2.has-thanks .ds-highlight2__thanks {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .ds-ui-kit-scope .ds-highlight2.has-thanks .ds-highlight2__content,
    .ds-ui-kit-scope .ds-highlight2.has-thanks .ds-highlight2__form {
      display: none; }
    .ds-ui-kit-scope .ds-highlight2.is-visible .ds-highlight2__wrapper {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0); }
    .ds-ui-kit-scope .ds-highlight2 svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1; }
  .ds-ui-kit-scope .ds-highlight2__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #005686 no-repeat center center;
    background-size: cover;
    transition: -webkit-transform 0.6s cubic-bezier(0.39, 0.58, 0.57, 1);
    transition: transform 0.6s cubic-bezier(0.39, 0.58, 0.57, 1);
    will-change: transform; }
    .ds-ui-kit-scope .ds-highlight2__bg:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      display: block;
      border-radius: 6px; }
  .ds-ui-kit-scope .ds-highlight2__wrapper {
    position: relative;
    height: 464px;
    padding: 72px 32px 0;
    transition: all 0.3s cubic-bezier(0.39, 0.58, 0.57, 1);
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
            transform: translate3d(0, 50px, 0); }
  .ds-ui-kit-scope .ds-highlight2__category {
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.64);
    text-transform: uppercase; }
  .ds-ui-kit-scope .ds-highlight2__title {
    margin-bottom: 8px; }
  .ds-ui-kit-scope .ds-highlight2__info {
    position: absolute;
    top: 216px;
    color: rgba(255, 255, 255, 0.64); }
    .ds-ui-kit-scope .ds-highlight2__info > span {
      display: block;
      margin-bottom: 4px; }
  .ds-ui-kit-scope .ds-highlight2__links {
    position: absolute;
    bottom: 52px; }
    .ds-ui-kit-scope .ds-highlight2__links > div:last-child {
      margin-top: 32px; }
    .ds-ui-kit-scope .ds-highlight2__links .ds-spinner {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2; }
  .ds-ui-kit-scope .ds-highlight2__form {
    display: none;
    position: relative;
    z-index: 2;
    min-height: 464px;
    padding-top: 32px;
    padding-bottom: 32px;
    background-color: #f7f9fb; }
    .ds-ui-kit-scope .ds-highlight2__form iframe {
      margin: 0 auto !important;
      height: 0;
      max-height: 100%;
      max-width: 100%;
      min-height: 100%;
      min-width: 100%;
      width: 0 !important; }
  .ds-ui-kit-scope .ds-highlight2__thanks {
    display: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative;
    z-index: 2;
    height: 464px;
    background-color: #f7f9fb;
    color: rgba(0, 0, 0, 0.48);
    font-weight: 400; }
  .ds-ui-kit-scope .ds-highlight2__thanks-title {
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 32px;
    margin-top: 16px;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -.4px; }
  .ds-ui-kit-scope .ds-highlight2__thanks-desc a {
    color: rgba(0, 0, 0, 0.8); }
  .ds-ui-kit-scope .ds-highlight2__player {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: #000; }
    .ds-ui-kit-scope .ds-highlight2__player iframe {
      width: 100%;
      height: 100%; }
  .ds-ui-kit-scope .ds-highlight2--center {
    text-align: center; }
    .ds-ui-kit-scope .ds-highlight2--center .ds-highlight2__links,
    .ds-ui-kit-scope .ds-highlight2--center .ds-highlight2__info {
      left: 0;
      width: 100%; }
    .ds-ui-kit-scope .ds-highlight2--center .ds-highlight2__links > div {
      margin: 0; }
  .ds-ui-kit-scope .ds-highlight2--grey {
    background-color: #f7f9fb;
    color: rgba(0, 0, 0, 0.8); }
    .ds-ui-kit-scope .ds-highlight2--grey:before {
      display: none; }
    .ds-ui-kit-scope .ds-highlight2--grey .ds-highlight2__category,
    .ds-ui-kit-scope .ds-highlight2--grey .ds-highlight2__info {
      color: rgba(0, 0, 0, 0.48); }
  @media all and (min-width: 480px) {
    .ds-ui-kit-scope .ds-highlight2__form iframe {
      max-width: 384px;
      margin: 0 auto !important;
      max-height: initial;
      min-height: auto;
      min-width: auto;
      width: 100% !important; } }
  @media all and (min-width: 721px) {
    .ds-ui-kit-scope .ds-highlight2 .ds-btn--scream {
      font-size: 18px;
      height: 56px;
      line-height: 58px;
      border-radius: 40px;
      padding-left: 40px;
      padding-right: 40px; }
      .ds-ui-kit-scope .ds-highlight2 .ds-btn--scream i {
        position: relative;
        top: -2px; }
      .ds-ui-kit-scope .ds-highlight2 .ds-btn--scream.has-icon {
        padding-left: 28px;
        padding-right: 28px; }
    .ds-ui-kit-scope .ds-highlight2__wrapper {
      height: 508px;
      padding: 96px 0 0; }
    .ds-ui-kit-scope .ds-highlight2__info {
      top: 256px; }
    .ds-ui-kit-scope .ds-highlight2__links {
      bottom: 96px; }
      .ds-ui-kit-scope .ds-highlight2__links > div {
        display: inline-block;
        margin-right: 32px; }
        .ds-ui-kit-scope .ds-highlight2__links > div:last-child {
          margin-top: 0; }
    .ds-ui-kit-scope .ds-highlight2__form {
      min-height: 508px; } }
  @media all and (min-width: 1441px) {
    .ds-ui-kit-scope .ds-highlight2__wrapper {
      height: 576px;
      padding-top: 120px; }
    .ds-ui-kit-scope .ds-highlight2__info {
      top: 300px; }
    .ds-ui-kit-scope .ds-highlight2__links {
      bottom: 120px; }
    .ds-ui-kit-scope .ds-highlight2__form {
      min-height: 576px; } }
  .ds-ui-kit-scope .ds-highlight {
    background-size: cover;
    background-color: #005686;
    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: 16px;
    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: rgba(0, 0, 0, 0); }
    .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: -2px; }
      .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__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: -1px; }
  .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: 6px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: box-shadow .2s 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,
      .ds-ui-kit-scope .ds-card:hover .ds-ico-play-medium {
        -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: 16px;
      line-height: 24px;
      letter-spacing: -.2px;
      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%;
      width: 64px;
      height: 64px;
      margin-left: -32px;
      cursor: pointer; }
    .ds-ui-kit-scope .ds-card .ds-tag-meta {
      position: absolute;
      top: 152px;
      left: 32px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: calc(100% - 64px); }
    .ds-ui-kit-scope .ds-card .ds-people__infos {
      width: calc(100% - 39px);
      color: rgba(0, 0, 0, 0.48);
      padding-right: 16px; }
      .ds-ui-kit-scope .ds-card .ds-people__infos .ds-people__name,
      .ds-ui-kit-scope .ds-card .ds-people__infos .ds-people__company {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
  .ds-ui-kit-scope .ds-card__title {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -.2px;
    max-height: 48px;
    overflow: hidden;
    margin: 7px 0 10px;
    color: rgba(0, 0, 0, 0.8);
    /*FUTURE DEPRECADED CODE*/ }
    .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: 4px;
      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 6px 6px;
    height: 320px;
    border-top: 0;
    padding-top: 27px; }
  .ds-ui-kit-scope .ds-card__info span {
    color: rgba(0, 0, 0, 0.48);
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 4px;
    padding-top: 1px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .ds-ui-kit-scope .ds-card__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    z-index: 1;
    bottom: 0; }
    .ds-ui-kit-scope .ds-card__links a {
      -ms-flex-negative: 2;
          flex-shrink: 2; }
  .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: 6px 6px 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-radius: 6px;
    padding-top: 118px; }
  .ds-ui-kit-scope .ds-card--classic .ds-card__wrapper {
    height: 184px;
    position: relative;
    padding: 28px 32px 24px; }
  .ds-ui-kit-scope .ds-card--classic .ds-card__info {
    position: absolute;
    top: 116px;
    width: calc(100% - 64px); }
  .ds-ui-kit-scope .ds-card--classic p[itemprop='description'] {
    max-height: calc(24px * 3); }
  .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;
    background-color: transparent;
    box-shadow: none; }
    .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 {
        max-width: 100%;
        padding-top: 1px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
      .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 {
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      margin-left: -20px; }
      .ds-ui-kit-scope .ds-card--lines .ds-ico-play-big:before {
        top: 12px;
        left: 12px; }
    .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; }
  .ds-ui-kit-scope .ds-card--compact {
    border-radius: 6px;
    padding: 16px;
    height: 136px;
    max-width: none;
    overflow: hidden;
    cursor: pointer; }
    .ds-ui-kit-scope .ds-card--compact.has-background {
      box-shadow: none;
      background-color: #f7f9fb; }
      .ds-ui-kit-scope .ds-card--compact.has-background:hover {
        box-shadow: 0 9px 12px 0 rgba(0, 0, 0, 0.1); }
    .ds-ui-kit-scope .ds-card--compact a:after {
      content: ' ';
      display: table;
      clear: both; }
    .ds-ui-kit-scope .ds-card--compact p {
      font-size: 13px;
      line-height: 16px;
      max-height: 48px; }
    .ds-ui-kit-scope .ds-card--compact .ds-card__thumbnail {
      position: relative;
      float: left;
      width: 104px;
      height: 104px;
      border-radius: 4px; }
      .ds-ui-kit-scope .ds-card--compact .ds-card__thumbnail + .ds-card__wrapper {
        width: calc(100% - 104px);
        margin-left: 104px;
        padding: 0 0 0 16px; }
        .ds-ui-kit-scope .ds-card--compact .ds-card__thumbnail + .ds-card__wrapper .ds-card__title {
          height: auto; }
        .ds-ui-kit-scope .ds-card--compact .ds-card__thumbnail + .ds-card__wrapper .ds-card__info {
          left: calc(104px + 32px);
          width: calc(100% - 104px - (3 * 16px)); }
    .ds-ui-kit-scope .ds-card--compact .ds-card__wrapper {
      border: 0;
      padding: 0;
      height: auto;
      max-height: calc(136px - 4px - 2 * 16px);
      overflow: hidden; }
    .ds-ui-kit-scope .ds-card--compact .ds-card__info {
      position: absolute;
      top: 80px;
      left: 16px;
      max-width: calc(100% - 32px); }
    .ds-ui-kit-scope .ds-card--compact .ds-card__title {
      margin-top: 0;
      margin-bottom: 8px;
      font-size: 16px;
      line-height: 20px;
      max-height: 40px; }
      .ds-ui-kit-scope .ds-card--compact .ds-card__title ~ span {
        margin-bottom: 4px; }
        .ds-ui-kit-scope .ds-card--compact .ds-card__title ~ span:last-child {
          margin-bottom: 0; }
    .ds-ui-kit-scope .ds-card--compact .ds-card__category {
      font-size: 11px;
      margin-top: 4px; }
    .ds-ui-kit-scope .ds-card--compact .ds-ico-play-medium {
      position: relative;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -20px; }
    .ds-ui-kit-scope .ds-card--compact .ds-tag-meta {
      position: absolute;
      top: 96px;
      left: 16px;
      margin: 0;
      max-width: 104px; }
  .ds-ui-kit-scope .ds-card--category {
    background: rgba(0, 0, 0, 0.08) no-repeat center center;
    background-size: cover;
    height: 376px;
    overflow: hidden; }
    .ds-ui-kit-scope .ds-card--category:before {
      content: '';
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 140px;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%); }
    .ds-ui-kit-scope .ds-card--category .ds-card__wrapper {
      position: relative;
      height: 376px;
      border: 0;
      padding-bottom: 0; }
    .ds-ui-kit-scope .ds-card--category .ds-card__title {
      color: #fff;
      margin-top: 219px;
      margin-bottom: 16px; }
    .ds-ui-kit-scope .ds-card--category .ds-card__info {
      position: absolute;
      top: 308px; }
      .ds-ui-kit-scope .ds-card--category .ds-card__info span,
      .ds-ui-kit-scope .ds-card--category .ds-card__info .ds-people__infos {
        color: rgba(255, 255, 255, 0.64); }
  .ds-ui-kit-scope .ds-card--collection {
    padding: 0 16px;
    background-color: #00F;
    margin-top: 76px;
    height: 320px;
    overflow: visible; }
    .ds-ui-kit-scope .ds-card--collection .ds-card__target {
      height: 376px;
      display: block;
      margin-top: -55px;
      padding-top: 55px; }
    .ds-ui-kit-scope .ds-card--collection .ds-card__thumbnail {
      border-radius: 6px;
      position: relative;
      top: -56px; }
    .ds-ui-kit-scope .ds-card--collection .ds-card__wrapper {
      height: auto;
      border: 0;
      position: absolute;
      top: 136px;
      left: 0; }
    .ds-ui-kit-scope .ds-card--collection .ds-card__category {
      color: #fff; }
    .ds-ui-kit-scope .ds-card--collection .ds-card__title {
      color: #fff; }
    .ds-ui-kit-scope .ds-card--collection .ds-people__infos {
      color: rgba(255, 255, 255, 0.64); }
    .ds-ui-kit-scope .ds-card--collection .ds-card__info {
      position: absolute;
      top: 116px;
      left: 32px;
      right: 32px; }
      .ds-ui-kit-scope .ds-card--collection .ds-card__info span {
        color: rgba(255, 255, 255, 0.64); }
  @media all and (min-width: 721px) {
    .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-ico-play-big {
        width: 64px;
        height: 64px;
        margin-top: -32px;
        margin-left: -32px; }
        .ds-ui-kit-scope .ds-card--lines .ds-ico-play-big:before {
          top: 24px;
          left: 24px; }
      .ds-ui-kit-scope .ds-card--lines .ds-tag-meta {
        position: absolute;
        top: 24px;
        left: 8px;
        margin: 0;
        max-width: calc(160px - 16px); }
    .ds-ui-kit-scope .ds-card--compact.is-large {
      max-width: none;
      height: 152px; }
      .ds-ui-kit-scope .ds-card--compact.is-large p {
        font-size: 16px;
        line-height: 20px;
        max-height: 60px; }
      .ds-ui-kit-scope .ds-card--compact.is-large .ds-card__thumbnail {
        width: 120px;
        height: 120px; }
        .ds-ui-kit-scope .ds-card--compact.is-large .ds-card__thumbnail + .ds-card__wrapper {
          width: calc(100% - 120px);
          margin-left: 120px;
          padding: 0 0 0 24px; }
          .ds-ui-kit-scope .ds-card--compact.is-large .ds-card__thumbnail + .ds-card__wrapper .ds-card__info {
            left: calc(120px + 40px);
            width: calc(100% - 120px - (2 * 16px + 24px)); }
      .ds-ui-kit-scope .ds-card--compact.is-large .ds-card__wrapper {
        border: 0;
        padding: 0 8px;
        max-height: calc(152px - 2 * 16px); }
      .ds-ui-kit-scope .ds-card--compact.is-large .ds-card__info {
        top: 96px; }
      .ds-ui-kit-scope .ds-card--compact.is-large .ds-card__title {
        font-size: 20px;
        line-height: 24px;
        height: 48px;
        max-height: 48px; }
      .ds-ui-kit-scope .ds-card--compact.is-large .ds-card__category {
        font-size: 13px; }
      .ds-ui-kit-scope .ds-card--compact.is-large .ds-ico-play-big {
        font-size: 64px;
        margin-top: -32px;
        margin-left: -32px; }
      .ds-ui-kit-scope .ds-card--compact.is-large .ds-tag-meta {
        top: 112px;
        max-width: 120px; } }
  @media all and (min-width: 1441px) {
    .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: 16px; }
    .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: 16px;
        font-weight: 400; }
        .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: 4px;
          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: 12px 0;
      background: #fff;
      border-radius: 4px;
      position: absolute;
      left: -24px;
      top: 49px;
      font-weight: 400;
      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 {
          position: relative;
          top: 1px; }
          .ds-ui-kit-scope .ds-breadcrumb .ds-breadcrumb__submenu ol > li a {
            padding-right: 40px;
            padding-left: 24px; }
        .ds-ui-kit-scope .ds-breadcrumb .ds-breadcrumb__submenu ol > a {
          padding-right: 40px;
          padding-left: 24px; }
        .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: 2; }
  .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: 64px; }
  .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%, rgba(0, 0, 0, 0) 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); }
        .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: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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 {
      opacity: 1; }
      .ds-ui-kit-scope .ds-youtube-overlay.ds-youtube-overlay--fullscreen .ds-iframe-container {
        -webkit-transform: translateX(-50%) scale(1);
            -ms-transform: translateX(-50%) scale(1);
                transform: translateX(-50%) scale(1); }
    .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%) scale(0.5);
          -ms-transform: translateX(-50%) scale(0.5);
              transform: translateX(-50%) scale(0.5);
      margin-bottom: 40px;
      background-color: #000;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .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: #005686;
    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-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; }
    .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: 8px; }
    .ds-ui-kit-scope .ds-menu__title--single .ds-ico-down-chevron-icon {
      display: none; }
  .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: #005686; }
  .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: #00304A; }
  .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: #004266; }
      .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: #003857;
      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 32px; }
    .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;
      letter-spacing: -.4px; }
      .ds-ui-kit-scope .ds-menu__title i.ds-ico {
        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: #004266;
      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__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-menu__title {
      font-size: 26px;
      letter-spacing: -.6px; } }
  .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: 16px 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: 12px; }
  .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 {
    margin-bottom: 16px;
    margin-top: 0;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.48); }
  .ds-ui-kit-scope .ds-filter-dropdown__head {
    color: rgba(0, 0, 0, 0.48);
    font-weight: 400;
    cursor: pointer; }
    .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 {
      color: rgba(0, 0, 0, 0.8); }
      .ds-ui-kit-scope .ds-filter-dropdown__head:hover .ds-filter-dropdown__counter {
        background-color: #1d83c2; }
  .ds-ui-kit-scope .ds-filter-dropdown__counter {
    display: none;
    background-color: #239de8;
    color: #fff;
    border-radius: 8px;
    padding: 0 4px;
    height: 16px;
    min-width: 16px;
    text-align: center;
    margin-right: -1px;
    font-weight: 600;
    font-size: 11px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: 0; }
  .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: 18px;
    line-height: 32px;
    font-weight: 600;
    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: 16px;
        line-height: 32px;
        font-weight: 400;
        padding: 0 32px 0 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--more {
        padding: 0;
        background: none;
        border: 0; }
      .ds-ui-kit-scope .ds-filter .ds-filter-dropdown__label {
        color: rgba(0, 0, 0, 0.48);
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -.2px; }
      .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: 16px; }
        .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: #f7f9fb;
      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-weight: 600;
        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;
        letter-spacing: -.2px;
        font-weight: 400; }
    .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: 721px) {
    .ds-ui-kit-scope .ds-filter-conversation {
      font-size: 22px; }
    .ds-ui-kit-scope .ds-filter-search .ds-input--search:after {
      content: '\e909';
      font-size: 32px;
      margin-top: -16px;
      left: 12px; }
    .ds-ui-kit-scope .ds-filter-search .ds-input--search input {
      height: 48px;
      padding-left: 48px; } }
  @media all and (min-width: 841px) {
    .ds-ui-kit-scope .ds-filter-tag {
      white-space: normal; } }
  @media all and (min-width: 1441px) {
    .ds-ui-kit-scope .ds-filter-conversation {
      font-size: 26px; }
    .ds-ui-kit-scope .ds-filter-conversation__list .ds-checkbox label {
      font-size: 18px; } }
  .ds-ui-kit-scope .ds-pagination {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.48);
    text-align: center;
    margin: 6px 0; }
    .ds-ui-kit-scope .ds-pagination li {
      display: inline-block;
      font-size: 16px;
      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;
      line-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 .ds-card__thumbnail,
  .ds-ui-kit-scope .ds-card--loading h4,
  .ds-ui-kit-scope .ds-card--loading p,
  .ds-ui-kit-scope .ds-card--loading span {
    -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 .ds-spinner {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 0; }
    .ds-ui-kit-scope .ds-spinner.is-large {
      width: 64px;
      height: 64px; }
  .ds-ui-kit-scope .ds-spinner__container {
    width: 100%;
    height: 100%;
    -webkit-animation: container-rotate 1568ms linear infinite;
            animation: container-rotate 1568ms linear infinite; }

@-webkit-keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
  .ds-ui-kit-scope .ds-spinner__layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    border-color: #239de8;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
            animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

@-webkit-keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg); }
  25% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }
  37.5% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg); }
  50% {
    -webkit-transform: rotate(540deg);
            transform: rotate(540deg); }
  62.5% {
    -webkit-transform: rotate(675deg);
            transform: rotate(675deg); }
  75% {
    -webkit-transform: rotate(810deg);
            transform: rotate(810deg); }
  87.5% {
    -webkit-transform: rotate(945deg);
            transform: rotate(945deg); }
  to {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg); } }

@keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg); }
  25% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }
  37.5% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg); }
  50% {
    -webkit-transform: rotate(540deg);
            transform: rotate(540deg); }
  62.5% {
    -webkit-transform: rotate(675deg);
            transform: rotate(675deg); }
  75% {
    -webkit-transform: rotate(810deg);
            transform: rotate(810deg); }
  87.5% {
    -webkit-transform: rotate(945deg);
            transform: rotate(945deg); }
  to {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg); } }
  .ds-ui-kit-scope .ds-spinner__clipper {
    position: relative;
    display: inline-block;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-color: inherit; }
  .ds-ui-kit-scope .ds-spinner__circle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    border-color: inherit;
    border-bottom-color: transparent;
    border-style: solid;
    border-width: 2px;
    border-radius: 50%;
    -webkit-animation: none;
            animation: none; }
  .ds-ui-kit-scope .ds-spinner__circle--left {
    border-right-color: transparent;
    -webkit-transform: rotate(129deg);
        -ms-transform: rotate(129deg);
            transform: rotate(129deg);
    -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
            animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
  .ds-ui-kit-scope .ds-spinner__circle--right {
    left: -100%;
    border-left-color: transparent;
    -webkit-transform: rotate(-129deg);
        -ms-transform: rotate(-129deg);
            transform: rotate(-129deg);
    -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
            animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg); } }

@keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg); } }

@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg); } }

@keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg); } }
  .ds-ui-kit-scope .ds-spinner__patch {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    height: 100%;
    overflow: hidden;
    border-color: inherit; }
    .ds-ui-kit-scope .ds-spinner__patch .ds-spinner__circle {
      left: -450%;
      width: 1000%; }
  .ds-ui-kit-scope .swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    /* 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-slide .ds-highlight2 {
      width: 100%; }
  .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), rgba(0, 0, 0, 0)); }
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .ds-ui-kit-scope .swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .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;
    display: none;
    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-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-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: 0;
    margin-bottom: 0; }
    .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 {
    background: #fff;
    color: rgba(0, 0, 0, 0.48);
    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 {
      box-shadow: 0 9px 12px 0 rgba(0, 0, 0, 0.1); }
    .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 .ds-carousel {
    position: relative;
    overflow-x: hidden;
    padding-bottom: 40px; }
    .ds-ui-kit-scope .ds-carousel__title {
      display: block;
      text-transform: uppercase;
      text-align: center;
      font-size: 13px;
      line-height: 13px;
      margin-bottom: 44px;
      font-weight: 600;
      letter-spacing: -.2px;
      color: rgba(0, 0, 0, 0.32); }
      .ds-ui-kit-scope .ds-carousel__title ~ .swiper-button-next,
      .ds-ui-kit-scope .ds-carousel__title ~ .swiper-button-prev {
        top: calc(50% + 30px); }
  @media (min-width: 721px) {
    .ds-ui-kit-scope .ds-carousel {
      padding-bottom: 64px; } }
  @media (min-width: 841px) {
    .ds-ui-kit-scope .swiper-button-next,
    .ds-ui-kit-scope .swiper-button-prev {
      display: inline-block; } }
  @media (min-width: 1441px) {
    .ds-ui-kit-scope .swiper-container--images .swiper-slide {
      max-width: 1228px; } }
  @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; } }
  .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; } }

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

#### Image zooming

You just need to add the attribut `data-action="zoom"` on an `img` tag.
The Javascript is Initializw when the page is loaded.
If you need more information you can visit [the documentation website](https://github.com/nishanths/zoom.js) of the plugin:
```html
<img src="//dummyimage.com/1200x400/999999/fff" width="600" data-action="zoom" />
```

*/
img[data-action='zoom'],
img.zoom-img {
  display: block;
  cursor: pointer;
  cursor: -moz-zoom-in; }
  img[data-action='zoom'].zoom-img,
  img.zoom-img.zoom-img {
    cursor: zoom-out; }

.zoom-img,
.zoom-img-wrap {
  position: relative;
  z-index: 666;
  transition: all 300ms; }

.zoom-overlay {
  z-index: 420;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: 'alpha(opacity=0)';
  opacity: 0;
  transition: opacity 300ms ease-in-out;
  cursor: zoom-out; }

.zoom-overlay-open .zoom-overlay {
  filter: 'alpha(opacity=100)';
  opacity: 1; }

.zoom-overlay-open,
.zoom-overlay-transitioning {
  cursor: default; }

.zoom-overlay-transitioning .zoom-overlay {
  opacity: 0; }