* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: var(--color-blue);
  color: #fff;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

@font-face {
  font-family: 'Roboto Thin Italic';
  src: url("../fonts/roboto-thinitalic.eot");
  src: local("Roboto Thin Italic"), url("../fonts/roboto-thinitalic.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-thinitalic.woff2") format("woff2"), url("../fonts/roboto-thinitalic.woff") format("woff"), url("../fonts/roboto-thinitalic.svg#robotothin_italic") format("svg");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Regular';
  src: url("../fonts/roboto-regular.eot");
  src: local("Roboto"), url("../fonts/roboto-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-regular.woff2") format("woff2"), url("../fonts/roboto-regular.woff") format("woff"), url("../fonts/roboto-regular.svg#robotoregular") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Regular Italic';
  src: url("../fonts/roboto-italic.eot");
  src: local("Roboto Italic"), url("../fonts/roboto-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-italic.woff2") format("woff2"), url("../fonts/roboto-italic.woff") format("woff"), url("../fonts/roboto-italic.svg#robotoitalic") format("svg");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Bold';
  src: url("../fonts/roboto-bold.eot");
  src: local("Roboto Bold"), url("../fonts/roboto-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-bold.woff2") format("woff2"), url("../fonts/roboto-bold.woff") format("woff"), url("../fonts/roboto-bold.svg#robotobold") format("svg");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Black';
  src: url("../fonts/roboto-black.eot");
  src: local("Roboto Black"), url("../fonts/roboto-black.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-black.woff2") format("woff2"), url("../fonts/roboto-black.woff") format("woff"), url("../fonts/roboto-black.svg#robotoblack") format("svg");
  font-weight: 900;
  font-style: normal;
}

:root {
  --color-white: #fff;
  --color-black: #000;
  --color-blackRgba: 0, 0, 0;
  --color-blue: #00bef8;
  --color-gray: #d3dbdf;
  --color-mandarin: #e3502b;
  --color-egg: #f7a731;
  --color-unepBlue: #00abf1;
  --color-undpBlue: #0073b5;
  --color-undpBlueRgba: #0073b5;
  --color-frog: #80bd3a;
  --color-grass: #489e42;
  --color-forest: #388e3c;
  --color-cream: #f5f5f5;
  --color-silver: #dae2e5;
  --color-silverRgba: 218, 226, 229;
  --color-earthbornBugle: #f7f7f7;
  --color-fruidSalad: #4f9e3e;
  --color-parFourGreen: #3c8d40;
  --font-size-xxs: 12px;
  --font-size-xs: 14px;
  --font-size-s: 16px;
  --font-size-base: 18px;
  --font-size-ms: 20px;
  --font-size-m: 22px;
  --font-size-msx: 26px;
  --font-size-mx: 28px;
  --font-size-l: 32px;
  --font-size-xl: 34px;
  --font-size-xml: 40px;
  --font-size-xxl: 60px;
  --f-weight-thin: 100;
  --f-weight-light: 300;
  --f-weight-normal: 400;
  --f-weight-bold: 700;
  --f-weight-black: 900;
  --f-style-italic: italic;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-s: 12px;
  --spacing-base: 16px;
  --spacing-m: 24px;
  --spacing-l: 32px;
  --spacing-xl: 40px;
  --spacing-xxl: 48px;
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-super-small-font-size: 14px;
    --f-size-super-small-line-height: 22px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-extra-small-font-size: 12px;
    --f-size-extra-small-line-height: 22px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-topic-head-font-size: 17px;
    --f-size-topic-head-line-height: 22px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-event-text-font-size: 18px;
    --f-size-event-text-line-height: 24px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-simple-news-font-size: 18px;
    --f-size-simple-news-line-height: 30px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-super-large-font-size: 15px;
    --f-size-super-large-line-height: 18px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-super-large-font-size: 17px;
    --f-size-super-large-line-height: 22px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-super-large-font-size: 20px;
    --f-size-super-large-line-height: 28px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-heading-9-font-size: 15px;
    --f-size-heading-9-line-height: 18px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-heading-9-font-size: 17px;
    --f-size-heading-9-line-height: 22px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-heading-9-font-size: 20px;
    --f-size-heading-9-line-height: 24px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-heading-8-font-size: 16px;
    --f-size-heading-8-line-height: 20px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-heading-8-font-size: 18px;
    --f-size-heading-8-line-height: 24px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-heading-8-font-size: 22px;
    --f-size-heading-8-line-height: 26px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-heading-7-font-size: 18px;
    --f-size-heading-7-line-height: 24px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-heading-7-font-size: 22px;
    --f-size-heading-7-line-height: 28px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-heading-7-font-size: 26px;
    --f-size-heading-7-line-height: 34px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-heading-6-font-size: 20px;
    --f-size-heading-6-line-height: 28px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-heading-6-font-size: 24px;
    --f-size-heading-6-line-height: 32px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-heading-6-font-size: 26px;
    --f-size-heading-6-line-height: 34px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-heading-5-font-size: 22px;
    --f-size-heading-5-line-height: 36px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-heading-5-font-size: 26px;
    --f-size-heading-5-line-height: 32px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-heading-5-font-size: 30px;
    --f-size-heading-5-line-height: 38px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-heading-4-font-size: 26px;
    --f-size-heading-4-line-height: 34px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-heading-4-font-size: 30px;
    --f-size-heading-4-line-height: 38px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-heading-4-font-size: 36px;
    --f-size-heading-4-line-height: 46px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-heading-3-font-size: 28px;
    --f-size-heading-3-line-height: 34px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-heading-3-font-size: 32px;
    --f-size-heading-3-line-height: 38px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-heading-3-font-size: 36px;
    --f-size-heading-3-line-height: 46px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-heading-2-font-size: 40px;
    --f-size-heading-2-line-height: 50px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-heading-2-font-size: 48px;
    --f-size-heading-2-line-height: 55px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-heading-2-font-size: 55px;
    --f-size-heading-2-line-height: 65px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-heading-1-font-size: 50px;
    --f-size-heading-1-line-height: 55px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-heading-1-font-size: 60px;
    --f-size-heading-1-line-height: 65px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-heading-1-font-size: 70px;
    --f-size-heading-1-line-height: 75px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-h-huge-font-size: 30px;
    --f-size-h-huge-line-height: 1.3;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-h-huge-font-size: 50px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-h-huge-font-size: 60px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-p-xxs-font-size: 12px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-p-xs-font-size: 14px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-p-s-font-size: 16px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-p-sx-font-size: 14px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-p-sx-font-size: 16px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-p-font-size: 16px;
    --f-size-p-line-height: 1.5;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-p-font-size: 18px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-p-ms-font-size: 18px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-p-ms-font-size: 20px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-p-m-font-size: 18px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-p-m-font-size: 22px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-p-mx-font-size: 20px;
    --f-size-p-mx-line-height: 30px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-p-mx-font-size: 24px;
    --f-size-p-mx-line-height: 34px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-p-mx-font-size: 28px;
    --f-size-p-mx-line-height: 38px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-p-l-font-size: 24px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-p-l-font-size: 28px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-p-l-font-size: 32px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-p-xl-font-size: 26px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-p-xl-font-size: 38px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-p-xl-font-size: 34px;
  }
}

@media screen and (min-width: 320px) {
  :root {
    --f-size-p-xxl-font-size: 32px;
    --f-size-p-xxl-line-height: 1.3;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --f-size-p-xxl-font-size: 36px;
  }
}

@media screen and (min-width: 1430px) {
  :root {
    --f-size-p-xxl-font-size: 40px;
  }
}

.grid {
  display: flex;
  flex-flow: row wrap;
  margin: 0 calc(-30px / 2);
}

.cell {
  margin: calc(30px / 2);
}

.cell--half {
  width: calc(((100% / 12) * 12) - 30px);
}

.cell--third {
  width: calc(((100% / 12) * 12) - 30px);
}

.cell--full {
  width: calc(((100% / 12) * 12) - 30px);
}

.cell--fourth {
  width: calc(((100% / 12) * 12) - 30px);
}

.cell--eighth {
  width: calc(((100% / 12) * 12) - 30px);
}

.cell--ninth {
  width: calc(((100% / 12) * 12) - 30px);
}

.cell--no-margin {
  margin: 0;
  width: 100%;
}

.cell--auto {
  width: auto;
}

.cell--no-gap .cell:not(:first-child) {
  margin-right: 0;
}

@media (min-width: 1000px) {
  .grid--auto {
    flex-wrap: nowrap;
  }
  .cell--half {
    width: calc(((100% / 12) * 6) - 30px);
  }
  .cell--third {
    width: calc(((100% / 12) * 4) - 30px);
  }
  .cell--eighth {
    width: calc(((100% / 12) * 8) - 30px);
  }
  .cell--ninth {
    width: calc(((100% / 12) * 9) - 30px);
  }
  .cell--fourth {
    width: calc(((100% / 12) * 3) - 30px);
  }
}

*,
::after,
::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--color-black);
  font-size: var(--f-size-p-font-size);
  line-height: var(--f-size-p-line-height);
}

body,
input,
button,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
}

p {
  margin: 0;
}

h1, h2,
h3, h4,
h5, h6 {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

form {
  width: 100%;
}

.element-message {
  display: none;
}

.demo {
  display: flex;
  flex-direction: column;
}

.demo .section {
  display: block;
  margin: 10px;
  border: 1px solid var(--color-blue);
}

.demo .section__title {
  background-color: var(--color-blue);
  color: var(--color-white);
  font-size: var(--font-size-mx);
  padding: 0.7rem;
}

.demo .section__item {
  padding: 10px;
}

.demo .invert {
  background-color: var(--color-blue);
}

.demo .invert .section__title {
  background-color: var(--color-white);
  color: var(--color-black);
}

.spacing {
  display: flex;
  flex-direction: column;
}

.spacing__title {
  margin-bottom: 20px;
}

.spacing-item {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-bottom: 40px;
}

.spacing-item__square {
  background-color: var(--color-blue);
  margin-right: 20px;
}

.spacing-item__square--xxs {
  height: var(--spacing-xxs);
  width: var(--spacing-xxs);
}

.spacing-item__square--xs {
  height: var(--spacing-xs);
  width: var(--spacing-xs);
}

.spacing-item__square--s {
  height: var(--spacing-s);
  width: var(--spacing-s);
}

.spacing-item__square--base {
  height: var(--spacing-base);
  width: var(--spacing-base);
}

.spacing-item__square--m {
  height: var(--spacing-m);
  width: var(--spacing-m);
}

.spacing-item__square--l {
  height: var(--spacing-l);
  width: var(--spacing-l);
}

.spacing-item__square--xl {
  height: var(--spacing-xl);
  width: var(--spacing-xl);
}

.spacing-item__square--xxl {
  height: var(--spacing-xxl);
  width: var(--spacing-xxl);
}

.typography {
  display: flex;
  flex-direction: column;
}

.typography-section {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.typography-section__text {
  padding: 10px;
}

.demo-colors__section {
  padding: var(--spacer-huge);
}

.demo-colors__section-inner {
  display: flex;
  justify-content: space-between;
  max-width: 1250px;
}

.demo-colors__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.demo-colors__list li {
  width: 100px;
  color: #fff;
  font-weight: bold;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 50px;
}

@media (min-width: 768px) {
  .demo-colors__list li {
    width: 150px;
    height: 150px;
  }
}

.demo-colors__fill--white {
  background-color: var(--color-white);
}

.background--white {
  background-color: var(--color-white);
}

.link--white {
  color: var(--color-white) !important;
}

.link--white .icon--white svg,
.link--white .icon--white path {
  fill: #fff;
}

.border-bottom--white:first-child {
  border-top-color: var(--color-white) !important;
}

.border-bottom--white {
  border-bottom-color: var(--color-white) !important;
}

.demo-colors__fill--black {
  background-color: var(--color-black);
}

.background--black {
  background-color: var(--color-black);
}

.link--black {
  color: var(--color-black) !important;
}

.link--black .icon--black svg,
.link--black .icon--black path {
  fill: #000;
}

.border-bottom--black:first-child {
  border-top-color: var(--color-black) !important;
}

.border-bottom--black {
  border-bottom-color: var(--color-black) !important;
}

.demo-colors__fill--blue {
  background-color: var(--color-blue);
}

.background--blue {
  background-color: var(--color-blue);
}

.link--blue {
  color: var(--color-blue) !important;
}

.link--blue .icon--blue svg,
.link--blue .icon--blue path {
  fill: #00bef8;
}

.border-bottom--blue:first-child {
  border-top-color: var(--color-blue) !important;
}

.border-bottom--blue {
  border-bottom-color: var(--color-blue) !important;
}

.demo-colors__fill--gray {
  background-color: var(--color-gray);
}

.background--gray {
  background-color: var(--color-gray);
}

.link--gray {
  color: var(--color-gray) !important;
}

.link--gray .icon--gray svg,
.link--gray .icon--gray path {
  fill: #d3dbdf;
}

.border-bottom--gray:first-child {
  border-top-color: var(--color-gray) !important;
}

.border-bottom--gray {
  border-bottom-color: var(--color-gray) !important;
}

.demo-colors__fill--mandarin {
  background-color: var(--color-mandarin);
}

.background--mandarin {
  background-color: var(--color-mandarin);
}

.link--mandarin {
  color: var(--color-mandarin) !important;
}

.link--mandarin .icon--mandarin svg,
.link--mandarin .icon--mandarin path {
  fill: #e3502b;
}

.border-bottom--mandarin:first-child {
  border-top-color: var(--color-mandarin) !important;
}

.border-bottom--mandarin {
  border-bottom-color: var(--color-mandarin) !important;
}

.demo-colors__fill--egg {
  background-color: var(--color-egg);
}

.background--egg {
  background-color: var(--color-egg);
}

.link--egg {
  color: var(--color-egg) !important;
}

.link--egg .icon--egg svg,
.link--egg .icon--egg path {
  fill: #f7a731;
}

.border-bottom--egg:first-child {
  border-top-color: var(--color-egg) !important;
}

.border-bottom--egg {
  border-bottom-color: var(--color-egg) !important;
}

.demo-colors__fill--unepBlue {
  background-color: var(--color-unepBlue);
}

.background--unepBlue {
  background-color: var(--color-unepBlue);
}

.link--unepBlue {
  color: var(--color-unepBlue) !important;
}

.link--unepBlue .icon--unepBlue svg,
.link--unepBlue .icon--unepBlue path {
  fill: #00abf1;
}

.border-bottom--unepBlue:first-child {
  border-top-color: var(--color-unepBlue) !important;
}

.border-bottom--unepBlue {
  border-bottom-color: var(--color-unepBlue) !important;
}

.demo-colors__fill--undpBlue {
  background-color: var(--color-undpBlue);
}

.background--undpBlue {
  background-color: var(--color-undpBlue);
}

.link--undpBlue {
  color: var(--color-undpBlue) !important;
}

.link--undpBlue .icon--undpBlue svg,
.link--undpBlue .icon--undpBlue path {
  fill: #0073b5;
}

.border-bottom--undpBlue:first-child {
  border-top-color: var(--color-undpBlue) !important;
}

.border-bottom--undpBlue {
  border-bottom-color: var(--color-undpBlue) !important;
}

.demo-colors__fill--undpBlueRgba {
  background-color: var(--color-undpBlueRgba);
}

.background--undpBlueRgba {
  background-color: var(--color-undpBlueRgba);
}

.link--undpBlueRgba {
  color: var(--color-undpBlueRgba) !important;
}

.link--undpBlueRgba .icon--undpBlueRgba svg,
.link--undpBlueRgba .icon--undpBlueRgba path {
  fill: #0073b5;
}

.border-bottom--undpBlueRgba:first-child {
  border-top-color: var(--color-undpBlueRgba) !important;
}

.border-bottom--undpBlueRgba {
  border-bottom-color: var(--color-undpBlueRgba) !important;
}

.demo-colors__fill--frog {
  background-color: var(--color-frog);
}

.background--frog {
  background-color: var(--color-frog);
}

.link--frog {
  color: var(--color-frog) !important;
}

.link--frog .icon--frog svg,
.link--frog .icon--frog path {
  fill: #80bd3a;
}

.border-bottom--frog:first-child {
  border-top-color: var(--color-frog) !important;
}

.border-bottom--frog {
  border-bottom-color: var(--color-frog) !important;
}

.demo-colors__fill--grass {
  background-color: var(--color-grass);
}

.background--grass {
  background-color: var(--color-grass);
}

.link--grass {
  color: var(--color-grass) !important;
}

.link--grass .icon--grass svg,
.link--grass .icon--grass path {
  fill: #489e42;
}

.border-bottom--grass:first-child {
  border-top-color: var(--color-grass) !important;
}

.border-bottom--grass {
  border-bottom-color: var(--color-grass) !important;
}

.demo-colors__fill--forest {
  background-color: var(--color-forest);
}

.background--forest {
  background-color: var(--color-forest);
}

.link--forest {
  color: var(--color-forest) !important;
}

.link--forest .icon--forest svg,
.link--forest .icon--forest path {
  fill: #388e3c;
}

.border-bottom--forest:first-child {
  border-top-color: var(--color-forest) !important;
}

.border-bottom--forest {
  border-bottom-color: var(--color-forest) !important;
}

.demo-colors__fill--cream {
  background-color: var(--color-cream);
}

.background--cream {
  background-color: var(--color-cream);
}

.link--cream {
  color: var(--color-cream) !important;
}

.link--cream .icon--cream svg,
.link--cream .icon--cream path {
  fill: #f5f5f5;
}

.border-bottom--cream:first-child {
  border-top-color: var(--color-cream) !important;
}

.border-bottom--cream {
  border-bottom-color: var(--color-cream) !important;
}

.demo-colors__fill--silver {
  background-color: var(--color-silver);
}

.background--silver {
  background-color: var(--color-silver);
}

.link--silver {
  color: var(--color-silver) !important;
}

.link--silver .icon--silver svg,
.link--silver .icon--silver path {
  fill: #dae2e5;
}

.border-bottom--silver:first-child {
  border-top-color: var(--color-silver) !important;
}

.border-bottom--silver {
  border-bottom-color: var(--color-silver) !important;
}

.demo-colors__fill--silverRgba {
  background-color: var(--color-silverRgba);
}

.background--silverRgba {
  background-color: var(--color-silverRgba);
}

.link--silverRgba {
  color: var(--color-silverRgba) !important;
}

.link--silverRgba .icon--silverRgba svg,
.link--silverRgba .icon--silverRgba path {
  fill: 218, 226, 229;
}

.border-bottom--silverRgba:first-child {
  border-top-color: var(--color-silverRgba) !important;
}

.border-bottom--silverRgba {
  border-bottom-color: var(--color-silverRgba) !important;
}

.demo-colors__fill--earthbornBugle {
  background-color: var(--color-earthbornBugle);
}

.background--earthbornBugle {
  background-color: var(--color-earthbornBugle);
}

.link--earthbornBugle {
  color: var(--color-earthbornBugle) !important;
}

.link--earthbornBugle .icon--earthbornBugle svg,
.link--earthbornBugle .icon--earthbornBugle path {
  fill: #f7f7f7;
}

.border-bottom--earthbornBugle:first-child {
  border-top-color: var(--color-earthbornBugle) !important;
}

.border-bottom--earthbornBugle {
  border-bottom-color: var(--color-earthbornBugle) !important;
}

.demo-colors__fill--fruidSalad {
  background-color: var(--color-fruidSalad);
}

.background--fruidSalad {
  background-color: var(--color-fruidSalad);
}

.link--fruidSalad {
  color: var(--color-fruidSalad) !important;
}

.link--fruidSalad .icon--fruidSalad svg,
.link--fruidSalad .icon--fruidSalad path {
  fill: #4f9e3e;
}

.border-bottom--fruidSalad:first-child {
  border-top-color: var(--color-fruidSalad) !important;
}

.border-bottom--fruidSalad {
  border-bottom-color: var(--color-fruidSalad) !important;
}

.demo-colors__fill--parFourGreen {
  background-color: var(--color-parFourGreen);
}

.background--parFourGreen {
  background-color: var(--color-parFourGreen);
}

.link--parFourGreen {
  color: var(--color-parFourGreen) !important;
}

.link--parFourGreen .icon--parFourGreen svg,
.link--parFourGreen .icon--parFourGreen path {
  fill: #3c8d40;
}

.border-bottom--parFourGreen:first-child {
  border-top-color: var(--color-parFourGreen) !important;
}

.border-bottom--parFourGreen {
  border-bottom-color: var(--color-parFourGreen) !important;
}

.color-icon {
  border: solid 1px #000;
  display: inline-block;
  height: 20px;
  width: 50px;
  margin: 0 5px;
}

.color-record {
  display: inline-flex;
}

.demo-colors__fill--white,
.demo-colors__fill--cream,
.demo-colors__fill--earthbornBugle {
  border: 1px solid black;
  color: black !important;
}

@font-face {
  font-family: 'Roboto Thin Italic';
  src: url("../fonts/roboto-thinitalic.eot");
  src: local("Roboto Thin Italic"), url("../fonts/roboto-thinitalic.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-thinitalic.woff2") format("woff2"), url("../fonts/roboto-thinitalic.woff") format("woff"), url("../fonts/roboto-thinitalic.svg#robotothin_italic") format("svg");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Regular';
  src: url("../fonts/roboto-regular.eot");
  src: local("Roboto"), url("../fonts/roboto-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-regular.woff2") format("woff2"), url("../fonts/roboto-regular.woff") format("woff"), url("../fonts/roboto-regular.svg#robotoregular") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Regular Italic';
  src: url("../fonts/roboto-italic.eot");
  src: local("Roboto Italic"), url("../fonts/roboto-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-italic.woff2") format("woff2"), url("../fonts/roboto-italic.woff") format("woff"), url("../fonts/roboto-italic.svg#robotoitalic") format("svg");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Bold';
  src: url("../fonts/roboto-bold.eot");
  src: local("Roboto Bold"), url("../fonts/roboto-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-bold.woff2") format("woff2"), url("../fonts/roboto-bold.woff") format("woff"), url("../fonts/roboto-bold.svg#robotobold") format("svg");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Black';
  src: url("../fonts/roboto-black.eot");
  src: local("Roboto Black"), url("../fonts/roboto-black.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-black.woff2") format("woff2"), url("../fonts/roboto-black.woff") format("woff"), url("../fonts/roboto-black.svg#robotoblack") format("svg");
  font-weight: 900;
  font-style: normal;
}

.audio {
  display: flex;
}

.audio input {
  width: 51px;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: default;
  font-size: var(--f-size-extra-small-font-size);
  line-height: var(--f-size-extra-small-line-height);
}

.audio__controls {
  display: flex;
  flex: 1;
  align-items: center;
}

.audio__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 15px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--color-silver);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}

.audio__toggle:hover .audio__toggle-element, .audio__toggle:active .audio__toggle-element {
  opacity: .6;
}

.audio__toggle--play .audio__toggle-element {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 10px;
  height: 10px;
  margin: 0;
  border: none;
}

.audio__toggle--play .audio__toggle-element::before, .audio__toggle--play .audio__toggle-element::after {
  content: "";
  width: 4px;
  height: 10px;
  background-color: var(--color-unepBlue);
}

.audio__toggle-element {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 5px solid transparent;
  border-right: none;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--color-unepBlue);
  transition: opacity .3s;
}

.audio__progress {
  position: relative;
  display: flex;
  margin: 0 12px;
  height: 12px;
  flex-basis: 0;
  flex-grow: 1;
  cursor: pointer;
}

.audio__progress::before {
  content: '';
  position: absolute;
  top: 5px;
  width: 100%;
  height: 2px;
  background-color: var(--color-silver);
}

.audio__progress > div {
  position: absolute;
  left: 0;
  top: 5px;
}

.audio__progress-filled {
  position: relative;
  flex-direction: row-reverse;
  z-index: 2;
  height: 2px;
  background: var(--color-unepBlue);
}

.audio__progress-filled::after {
  content: '';
  display: flex;
  position: absolute;
  box-sizing: border-box;
  top: -5px;
  right: -1px;
  margin-right: -5px;
  width: 12px;
  height: 12px;
  background-color: var(--color-white);
  border: 2px solid var(--color-unepBlue);
  border-radius: 6px;
}

.audio__volume {
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-left: 15px;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

.audio__volume--muted .audio__volume-element::after {
  display: none;
}

.audio__volume-element {
  display: flex;
  width: 6px;
  height: 8px;
  background-color: var(--color-silver);
  position: relative;
}

.audio__volume-element::before, .audio__volume-element::after {
  content: '';
  position: absolute;
}

.audio__volume-element::before {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 9px solid var(--color-silver);
  border-bottom: 8px solid transparent;
  border-left: none;
  top: -4px;
}

.audio__volume-element::after {
  left: 10px;
  top: -1px;
  width: 10px;
  height: 10px;
  border: 6px double var(--color-silver);
  border-width: 6px 6px 0 0;
  border-radius: 0 12px 0 0;
  transform: rotate(45deg);
}

.blockquote,
blockquote {
  font-style: italic;
  border-left: solid 3px var(--color-unepBlue);
  margin-left: 1em;
  padding-left: 1em;
}

.blockquote p::before,
blockquote p::before {
  content: open-quote;
}

.blockquote p::after,
blockquote p::after {
  content: close-quote;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 5px 18px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  transition: background-color .3s;
}

.btn:hover, .btn:focus, .btn:active {
  color: #fff;
}

.btn:not(:first-child) {
  margin-top: 63px;
}

.btn--primary {
  background-color: var(--color-mandarin);
}

.btn--primary:hover, .btn--primary:focus, .btn--primary:active {
  background-color: #e80700;
}

.btn--secondary {
  background-color: var(--color-frog);
}

.btn--secondary:hover, .btn--secondary:focus, .btn--secondary:active {
  background-color: #00763c;
}

.btn--tertiary {
  background-color: var(--color-grass);
}

.btn--tertiary:hover, .btn--tertiary:focus, .btn--tertiary:active {
  background-color: #007450;
}

.btn--fourth {
  background-color: var(--color-unepBlue);
}

.btn--fourth:hover, .btn--fourth:focus, .btn--fourth:active {
  background-color: #00a7ec;
}

.btn .icon:not(:last-child) {
  margin-left: 8px;
}

.btn__icon {
  margin-left: auto;
}

.btn__icon .icon {
  margin-left: 0;
}

.checkbox, .radio {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox:not(:last-child), .radio:not(:last-child) {
  margin-bottom: 20px;
}

.checkbox:hover .checkbox__indicator::before, .checkbox:focus .checkbox__indicator::before, .checkbox:active .checkbox__indicator::before, .radio:hover .checkbox__indicator::before, .radio:focus .checkbox__indicator::before, .radio:active .checkbox__indicator::before {
  transform: scale(0.5);
}

.checkbox:hover .checkbox__caption, .checkbox:focus .checkbox__caption, .checkbox:active .checkbox__caption, .radio:hover .checkbox__caption, .radio:focus .checkbox__caption, .radio:active .checkbox__caption {
  opacity: .8;
}

.checkbox__input, .radio__input {
  display: none;
}

.checkbox__input:checked ~ .checkbox__indicator, .radio__input:checked ~ .checkbox__indicator {
  background-color: var(--color-unepBlue);
}

.checkbox__input:checked ~ .checkbox__indicator::before, .radio__input:checked ~ .checkbox__indicator::before {
  transform: scale(1);
}

.checkbox__input:disabled ~ .checkbox__indicator, .radio__input:disabled ~ .checkbox__indicator {
  opacity: .5;
}

.checkbox__indicator, .radio__indicator {
  background-color: var(--color-cream);
  display: block;
  flex: 0 0 20px;
  height: 20px;
  position: relative;
  transition: all .3s;
  width: 20px;
}

.checkbox__indicator::before, .radio__indicator::before {
  background-image: url("/public/images/checked.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  height: 14px;
  left: 50%;
  margin-left: -7px;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  transform: scale(0);
  transition: all .3s;
  width: 14px;
}

.checkbox__caption, .radio__caption {
  color: var(--color-black);
  display: block;
  margin-left: 8px;
  transition: opacity .3s;
  font-size: var(--f-size-p-sx-font-size);
}

.radio__indicator {
  border-radius: 50%;
}

.radio__indicator::before {
  border-radius: 50%;
}

@media (min-width: 1430px) {
  .checkbox__indicator,
  .radio__indicator {
    flex: 0 0 24px;
    height: 24px;
    width: 24px;
  }
}

.date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 0 100px;
  width: 100px;
  height: 110px;
  padding: 5px;
  color: var(--color-white);
  background-color: var(--color-unepBlue);
}

.date strong {
  font-size: var(--font-size-xml);
  line-height: 1;
}

.date strong.small {
  font-size: var(--font-size-msx);
}

.date span {
  display: block;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-size: var(--f-size-super-small-font-size);
  line-height: var(--f-size-super-small-line-height);
}

.date--image {
  background: transparent;
  height: 320px;
  padding: 0;
  position: relative;
  width: 100%;
}

.date--image .date__image {
  height: auto;
  width: 100%;
}

.date--image .date__content {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100px;
  height: 110px;
  padding: 5px;
  background-color: var(--color-unepBlue);
  transform: translate(-50%, -50%);
}

@media (min-width: 1000px) {
  .date--image {
    height: 400px;
  }
}

.dropdown {
  position: relative;
}

.dropdown:hover .dropdown__list, .dropdown:focus .dropdown__list, .dropdown:active .dropdown__list {
  top: calc(100% + 5px);
  visibility: visible;
  opacity: 1;
  transition: opacity .3s ease, top .3s ease, visibility 0s linear;
}

.dropdown__select {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0 10px;
}

.dropdown__text {
  flex: 1;
  font-size: var(--font-size-xxs);
  color: var(--color-white);
}

.dropdown__text:not(:last-child) {
  margin-right: 10px;
}

.dropdown__list {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--color-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease,top .3s ease, visibility 0s linear .3s;
}

.dropdown__item {
  padding: 10px;
  transition: background-color .2s;
}

.dropdown__item .link {
  display: block;
  width: 100%;
  color: var(--color-unepBlue);
}

.dropdown__item:hover, .dropdown__item:focus, .dropdown__item:active {
  background-color: rgba(var(--color-unepBlue), 0.1);
}

.input {
  width: 100%;
  height: 36px;
  color: var(--color-black);
  background-color: var(--color-cream);
  border: 1px solid var(--color-silver);
  outline-color: var(--color-silver);
  padding: 0 20px;
  font-size: var(--f-size-p-sx-font-size);
}

@media (min-width: 768px) {
  .input {
    height: 50px;
  }
}

.filter-select {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  background-color: var(--color-silver);
  border-radius: 5px;
}

.filter-select .paragraph {
  margin-bottom: 0;
}

.filter-select__delete {
  position: relative;
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  padding: 0;
  background-color: var(--color-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .3s;
}

.filter-select__delete::before, .filter-select__delete::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: var(--color-silver);
}

.filter-select__delete::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.filter-select__delete::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.filter-select__delete:hover, .filter-select__delete:active {
  transform: scale(0.9);
}

.heading {
  display: block;
  line-height: 1.3;
  color: var(--color-black);
}

.heading span {
  display: block;
}

.heading--super-small {
  font-size: var(--f-size-super-small-font-size);
  line-height: var(--f-size-super-small-line-height);
}

.heading--super-small-uppercase {
  font-size: var(--f-size-super-small-font-size);
  line-height: var(--f-size-super-small-line-height);
  text-transform: uppercase;
}

.heading--super-large {
  font-size: var(--f-size-super-large-font-size);
  line-height: var(--f-size-super-large-line-height);
}

.heading--super-large-uppercase {
  font-size: var(--f-size-super-large-font-size);
  line-height: var(--f-size-super-large-line-height);
  text-transform: uppercase;
}

.heading--heading-9 {
  font-size: var(--f-size-heading-9-font-size);
  line-height: var(--f-size-heading-9-line-height);
  font-weight: bold;
}

.heading--topic-head {
  font-size: var(--f-size-topic-head-font-size);
  line-height: var(--f-size-topic-head-line-height);
}

.heading--heading-8 {
  font-size: var(--f-size-heading-8-font-size);
  line-height: var(--f-size-heading-8-line-height);
  font-weight: bold;
}

.heading--heading-7 {
  font-size: var(--f-size-heading-7-font-size);
  line-height: var(--f-size-heading-7-line-height);
  font-weight: normal;
}

.heading--heading-6 {
  font-size: var(--f-size-heading-6-font-size);
  line-height: var(--f-size-heading-6-line-height);
  font-weight: bold;
}

.heading--heading-5 {
  font-size: var(--f-size-heading-5-font-size);
  line-height: var(--f-size-heading-5-line-height);
  font-weight: bold;
}

.heading--heading-4 {
  font-size: var(--f-size-heading-4-font-size);
  line-height: var(--f-size-heading-4-line-height);
  font-weight: bold;
}

.heading--heading-3 {
  font-size: var(--f-size-heading-3-font-size);
  line-height: var(--f-size-heading-3-line-height);
  font-weight: 400;
}

.heading--heading-2 {
  font-size: var(--f-size-heading-2-font-size);
  line-height: var(--f-size-heading-2-line-height);
  font-weight: bold;
}

.heading--heading-1 {
  font-size: var(--f-size-heading-1-font-size);
  line-height: var(--f-size-heading-1-line-height);
  font-weight: bold;
}

.heading--underline::before {
  background-color: var(--color-blue);
  content: "";
  display: block;
  height: 0.4rem;
  width: 50px;
  margin-bottom: 0.5rem;
}

.heading--invert {
  filter: invert(1);
}

.heading--register-normal {
  text-transform: none;
}

.heading--register-upper {
  text-transform: uppercase;
}

.heading--white {
  color: var(--color-white);
}

.heading--black {
  color: var(--color-black);
}

.heading--blue {
  color: var(--color-blue);
}

.heading--gray {
  color: var(--color-gray);
}

.heading--mandarin {
  color: var(--color-mandarin);
}

.heading--egg {
  color: var(--color-egg);
}

.heading--unepBlue {
  color: var(--color-unepBlue);
}

.heading--undpBlue {
  color: var(--color-undpBlue);
}

.heading--undpBlueRgba {
  color: var(--color-undpBlueRgba);
}

.heading--frog {
  color: var(--color-frog);
}

.heading--grass {
  color: var(--color-grass);
}

.heading--forest {
  color: var(--color-forest);
}

.heading--cream {
  color: var(--color-cream);
}

.heading--silver {
  color: var(--color-silver);
}

.heading--silverRgba {
  color: var(--color-silverRgba);
}

.heading--earthbornBugle {
  color: var(--color-earthbornBugle);
}

.heading--fruidSalad {
  color: var(--color-fruidSalad);
}

.heading--parFourGreen {
  color: var(--color-parFourGreen);
}

.heading--blue {
  color: var(--color-undpBlue);
}

.heading--center {
  text-align: center;
}

.icon {
  display: inline-block;
}

.icon svg {
  display: block;
  fill: var(--color-unepBlue);
}

.icon--invert svg,
.icon--invert path {
  fill: #fff;
}

.icon--egg svg,
.icon--egg path {
  fill: var(--color-egg);
}

.icon--gray svg,
.icon--gray path {
  fill: var(--color-gray);
}

.icon--xxs {
  height: 12px;
}

.icon--xxs svg {
  width: 12px;
  height: 12px;
}

.icon--xs {
  height: 14px;
}

.icon--xs svg {
  width: 14px;
  height: 14px;
}

.icon--s {
  height: 16px;
}

.icon--s svg {
  width: 16px;
  height: 16px;
}

.icon--m {
  height: 18px;
}

.icon--m svg {
  width: 18px;
  height: 18px;
}

.icon--l {
  height: 24px;
}

.icon--l svg {
  width: 24px;
  height: 24px;
}

.icon--xl {
  height: 32px;
}

.icon--xl svg {
  width: 32px;
  height: 32px;
}

.icon--xxl {
  height: 40px;
}

.icon--xxl svg {
  width: 40px;
  height: 40px;
}

.icon--large {
  height: 48px;
}

.icon--large svg {
  width: 48px;
  height: 48px;
}

.link:hover .icon--hover-white svg, .link:hover .icon--hover-white path, .link:focus .icon--hover-white svg, .link:focus .icon--hover-white path {
  fill: var(--color-white) !important;
}

.link:hover .icon--hover-black svg, .link:hover .icon--hover-black path, .link:focus .icon--hover-black svg, .link:focus .icon--hover-black path {
  fill: var(--color-black) !important;
}

.link:hover .icon--hover-blackRgba svg, .link:hover .icon--hover-blackRgba path, .link:focus .icon--hover-blackRgba svg, .link:focus .icon--hover-blackRgba path {
  fill: var(--color-blackRgba) !important;
}

.link:hover .icon--hover-blue svg, .link:hover .icon--hover-blue path, .link:focus .icon--hover-blue svg, .link:focus .icon--hover-blue path {
  fill: var(--color-blue) !important;
}

.link:hover .icon--hover-gray svg, .link:hover .icon--hover-gray path, .link:focus .icon--hover-gray svg, .link:focus .icon--hover-gray path {
  fill: var(--color-gray) !important;
}

.link:hover .icon--hover-mandarin svg, .link:hover .icon--hover-mandarin path, .link:focus .icon--hover-mandarin svg, .link:focus .icon--hover-mandarin path {
  fill: var(--color-mandarin) !important;
}

.link:hover .icon--hover-egg svg, .link:hover .icon--hover-egg path, .link:focus .icon--hover-egg svg, .link:focus .icon--hover-egg path {
  fill: var(--color-egg) !important;
}

.link:hover .icon--hover-unepBlue svg, .link:hover .icon--hover-unepBlue path, .link:focus .icon--hover-unepBlue svg, .link:focus .icon--hover-unepBlue path {
  fill: var(--color-unepBlue) !important;
}

.link:hover .icon--hover-undpBlue svg, .link:hover .icon--hover-undpBlue path, .link:focus .icon--hover-undpBlue svg, .link:focus .icon--hover-undpBlue path {
  fill: var(--color-undpBlue) !important;
}

.link:hover .icon--hover-undpBlueRgba svg, .link:hover .icon--hover-undpBlueRgba path, .link:focus .icon--hover-undpBlueRgba svg, .link:focus .icon--hover-undpBlueRgba path {
  fill: var(--color-undpBlueRgba) !important;
}

.link:hover .icon--hover-frog svg, .link:hover .icon--hover-frog path, .link:focus .icon--hover-frog svg, .link:focus .icon--hover-frog path {
  fill: var(--color-frog) !important;
}

.link:hover .icon--hover-grass svg, .link:hover .icon--hover-grass path, .link:focus .icon--hover-grass svg, .link:focus .icon--hover-grass path {
  fill: var(--color-grass) !important;
}

.link:hover .icon--hover-forest svg, .link:hover .icon--hover-forest path, .link:focus .icon--hover-forest svg, .link:focus .icon--hover-forest path {
  fill: var(--color-forest) !important;
}

.link:hover .icon--hover-cream svg, .link:hover .icon--hover-cream path, .link:focus .icon--hover-cream svg, .link:focus .icon--hover-cream path {
  fill: var(--color-cream) !important;
}

.link:hover .icon--hover-silver svg, .link:hover .icon--hover-silver path, .link:focus .icon--hover-silver svg, .link:focus .icon--hover-silver path {
  fill: var(--color-silver) !important;
}

.link:hover .icon--hover-silverRgba svg, .link:hover .icon--hover-silverRgba path, .link:focus .icon--hover-silverRgba svg, .link:focus .icon--hover-silverRgba path {
  fill: var(--color-silverRgba) !important;
}

.link:hover .icon--hover-earthbornBugle svg, .link:hover .icon--hover-earthbornBugle path, .link:focus .icon--hover-earthbornBugle svg, .link:focus .icon--hover-earthbornBugle path {
  fill: var(--color-earthbornBugle) !important;
}

.link:hover .icon--hover-fruidSalad svg, .link:hover .icon--hover-fruidSalad path, .link:focus .icon--hover-fruidSalad svg, .link:focus .icon--hover-fruidSalad path {
  fill: var(--color-fruidSalad) !important;
}

.link:hover .icon--hover-parFourGreen svg, .link:hover .icon--hover-parFourGreen path, .link:focus .icon--hover-parFourGreen svg, .link:focus .icon--hover-parFourGreen path {
  fill: var(--color-parFourGreen) !important;
}

img {
  max-width: 100%;
  height: auto;
}

.image {
  display: flex;
  width: 100%;
  height: auto;
  max-height: 100%;
}

.image picture {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
}

.image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
}

.image--cover img {
  object-fit: cover;
}

.image--contain img {
  object-fit: contain;
}

.image--full picture {
  width: 100%;
}

.image--full img {
  object-fit: cover;
}

.image--round img {
  border-radius: 50%;
}

.image.image-box-shadow {
  box-shadow: 0 4px 8px 0 var(--color-gray);
}

.image.image-border-1px img {
  border: 1px solid var(--color-black);
}

.image.image-border-2px img {
  border: 2px solid var(--color-black);
}

.image.image-border-3px img {
  border: 3px solid var(--color-black);
}

.image.image-border-4px img {
  border: 4px solid var(--color-black);
}

.fixed-image-height-wrapper img, .fixed-image-height-wrapper picture, .fixed-image-height-wrapper .image {
  height: 100% !important;
  width: auto !important;
}

.keyword {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 17px;
  background-color: var(--color-cream);
  border: 1px solid var(--color-gray);
}

.label-field {
  display: block;
  margin-bottom: 5px;
  color: var(--color-black);
  font-size: var(--f-size-p-sx-font-size);
}

.line {
  display: block;
  width: 58px;
  height: 8px;
  background-color: var(--color-unepBlue);
}

.line:not(:last-child) {
  margin-bottom: 15px;
}

.line--small {
  width: 48px;
  height: 6px;
}

.line--egg {
  background-color: var(--color-egg);
}

a {
  color: var(--color-unepBlue);
  text-decoration: none;
  transition: color .2s;
}

a:hover, a:active {
  color: var(--color-blue);
}

a:hover .icon-download svg,
a:hover .icon-download svg path, a:active .icon-download svg,
a:active .icon-download svg path {
  fill: var(--color-blue);
}

a:focus {
  outline: none;
  color: var(--color-blue);
}

a:focus .icon svg {
  fill: var(--color-blue);
}

.link-hover, .link-hover * {
  transition: color .2s;
  text-decoration: none;
}

.link-hover:hover, .link-hover:active, .link-hover *:hover, .link-hover *:active {
  color: var(--color-blue);
}

.link-hover:hover .icon-download svg,
.link-hover:hover .icon-download svg path, .link-hover:active .icon-download svg,
.link-hover:active .icon-download svg path, .link-hover *:hover .icon-download svg,
.link-hover *:hover .icon-download svg path, .link-hover *:active .icon-download svg,
.link-hover *:active .icon-download svg path {
  fill: var(--color-blue);
}

.link-hover:focus, .link-hover *:focus {
  outline: none;
  color: var(--color-blue);
}

.link-hover:focus .icon svg, .link-hover *:focus .icon svg {
  fill: var(--color-blue);
}

.link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-black);
  transition: color .2s;
  font-size: var(--f-size-p-font-size);
  line-height: var(--f-size-p-line-height);
}

.link:hover, .link:active {
  color: var(--color-blue);
}

.link:hover .icon-download svg,
.link:hover .icon-download svg path, .link:active .icon-download svg,
.link:active .icon-download svg path {
  fill: var(--color-blue);
}

.link:focus {
  outline: none;
  color: var(--color-blue);
}

.link:focus .icon svg {
  fill: var(--color-blue);
}

.link--blue {
  color: var(--color-unepBlue);
}

.link--unepBlue {
  color: var(--color-unepBlue);
}

.link--undpBlue {
  color: var(--color-undpBlue);
}

.link--xxs {
  font-size: var(--f-size-p-xxs-font-size);
}

.link--xs {
  font-size: var(--f-size-p-xs-font-size);
}

.link--s {
  font-size: var(--f-size-p-s-font-size);
}

.link--ms {
  font-size: var(--f-size-p-ms-font-size);
}

.link--m {
  font-size: var(--f-size-p-m-font-size);
}

.link--mx {
  font-size: var(--f-size-p-mx-font-size);
  line-height: var(--f-size-p-mx-line-height);
}

.link--l {
  font-size: var(--f-size-p-l-font-size);
}

.link--xl {
  font-size: var(--f-size-p-xl-font-size);
}

.link--xxl {
  font-size: var(--f-size-p-xxl-font-size);
  line-height: var(--f-size-p-xxl-line-height);
}

.link--heading-1 {
  font-size: var(--f-size-heading-1-font-size);
  line-height: var(--f-size-heading-1-line-height);
}

.link--heading-2 {
  font-size: var(--f-size-heading-2-font-size);
  line-height: var(--f-size-heading-2-line-height);
}

.link--heading-3 {
  font-size: var(--f-size-heading-3-font-size);
  line-height: var(--f-size-heading-3-line-height);
}

.link--heading-4 {
  font-size: var(--f-size-heading-4-font-size);
  line-height: var(--f-size-heading-4-line-height);
}

.link--heading-5 {
  font-size: var(--f-size-heading-5-font-size);
  line-height: var(--f-size-heading-5-line-height);
}

.link--heading-6 {
  font-size: var(--f-size-heading-6-font-size);
  line-height: var(--f-size-heading-6-line-height);
}

.link--heading-7 {
  font-size: var(--f-size-heading-7-font-size);
  line-height: var(--f-size-heading-7-line-height);
}

.link--heading-8 {
  font-size: var(--f-size-heading-8-font-size);
  line-height: var(--f-size-heading-8-line-height);
}

.link--heading-9 {
  font-size: var(--f-size-heading-9-font-size);
  line-height: var(--f-size-heading-9-line-height);
}

.link--simple-news {
  font-size: var(--f-size-simple-news-font-size);
  line-height: var(--f-size-simple-news-line-height);
}

.link--bold {
  font-weight: var(--f-weight-bold);
}

.link--invert {
  color: var(--color-white);
}

.link--invert:hover, .link--invert:active {
  color: var(--color-black);
}

.link--invert:hover .icon svg, .link--invert:active .icon svg {
  fill: var(--color-black);
}

.link--invert:focus {
  outline: none;
  color: var(--color-black);
}

.link--invert:focus .icon svg {
  fill: var(--color-black);
}

.link--secondary {
  color: var(--color-unepBlue);
}

.link--secondary:hover, .link--secondary:focus, .link--secondary:active {
  color: var(--color-black);
}

.link--center {
  width: 100%;
  justify-content: center;
}

.link .icon:first-child {
  margin-right: 8px;
}

.link .icon:last-child {
  margin-left: 8px;
}

.link--upper {
  text-transform: uppercase;
}

.link--hover-white:hover, .link--hover-white:focus {
  color: var(--color-white) !important;
}

.link--hover-black:hover, .link--hover-black:focus {
  color: var(--color-black) !important;
}

.link--hover-blackRgba:hover, .link--hover-blackRgba:focus {
  color: var(--color-blackRgba) !important;
}

.link--hover-blue:hover, .link--hover-blue:focus {
  color: var(--color-blue) !important;
}

.link--hover-gray:hover, .link--hover-gray:focus {
  color: var(--color-gray) !important;
}

.link--hover-mandarin:hover, .link--hover-mandarin:focus {
  color: var(--color-mandarin) !important;
}

.link--hover-egg:hover, .link--hover-egg:focus {
  color: var(--color-egg) !important;
}

.link--hover-unepBlue:hover, .link--hover-unepBlue:focus {
  color: var(--color-unepBlue) !important;
}

.link--hover-undpBlue:hover, .link--hover-undpBlue:focus {
  color: var(--color-undpBlue) !important;
}

.link--hover-undpBlueRgba:hover, .link--hover-undpBlueRgba:focus {
  color: var(--color-undpBlueRgba) !important;
}

.link--hover-frog:hover, .link--hover-frog:focus {
  color: var(--color-frog) !important;
}

.link--hover-grass:hover, .link--hover-grass:focus {
  color: var(--color-grass) !important;
}

.link--hover-forest:hover, .link--hover-forest:focus {
  color: var(--color-forest) !important;
}

.link--hover-cream:hover, .link--hover-cream:focus {
  color: var(--color-cream) !important;
}

.link--hover-silver:hover, .link--hover-silver:focus {
  color: var(--color-silver) !important;
}

.link--hover-silverRgba:hover, .link--hover-silverRgba:focus {
  color: var(--color-silverRgba) !important;
}

.link--hover-earthbornBugle:hover, .link--hover-earthbornBugle:focus {
  color: var(--color-earthbornBugle) !important;
}

.link--hover-fruidSalad:hover, .link--hover-fruidSalad:focus {
  color: var(--color-fruidSalad) !important;
}

.link--hover-parFourGreen:hover, .link--hover-parFourGreen:focus {
  color: var(--color-parFourGreen) !important;
}

ul,
ol {
  padding-left: 1em;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

.list-item {
  margin-bottom: 0.2em;
  padding-left: 1em;
}

.list-item .link {
  width: 100%;
}

.list-item .link .icon {
  margin-left: auto;
  padding-left: 7px;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list .list-item {
  display: flex;
  align-items: center;
  padding: 0;
}

.list .list-item:not(:last-child) {
  margin-bottom: 40px;
}

.list .icon {
  margin-right: 7px;
}

.list--marked .list-item, .list--marked-primary .list-item {
  position: relative;
  padding-left: 16px;
}

.list--marked .list-item::before, .list--marked-primary .list-item::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background-color: var(--color-unepBlue);
}

.list--marked .list-item.bullet-color--white::before, .list--marked-primary .list-item.bullet-color--white::before {
  background-color: var(--color-white);
}

.list--marked .list-item.bullet-color--black::before, .list--marked-primary .list-item.bullet-color--black::before {
  background-color: var(--color-black);
}

.list--marked .list-item.bullet-color--blackRgba::before, .list--marked-primary .list-item.bullet-color--blackRgba::before {
  background-color: var(--color-blackRgba);
}

.list--marked .list-item.bullet-color--blue::before, .list--marked-primary .list-item.bullet-color--blue::before {
  background-color: var(--color-blue);
}

.list--marked .list-item.bullet-color--gray::before, .list--marked-primary .list-item.bullet-color--gray::before {
  background-color: var(--color-gray);
}

.list--marked .list-item.bullet-color--mandarin::before, .list--marked-primary .list-item.bullet-color--mandarin::before {
  background-color: var(--color-mandarin);
}

.list--marked .list-item.bullet-color--egg::before, .list--marked-primary .list-item.bullet-color--egg::before {
  background-color: var(--color-egg);
}

.list--marked .list-item.bullet-color--unepBlue::before, .list--marked-primary .list-item.bullet-color--unepBlue::before {
  background-color: var(--color-unepBlue);
}

.list--marked .list-item.bullet-color--undpBlue::before, .list--marked-primary .list-item.bullet-color--undpBlue::before {
  background-color: var(--color-undpBlue);
}

.list--marked .list-item.bullet-color--undpBlueRgba::before, .list--marked-primary .list-item.bullet-color--undpBlueRgba::before {
  background-color: var(--color-undpBlueRgba);
}

.list--marked .list-item.bullet-color--frog::before, .list--marked-primary .list-item.bullet-color--frog::before {
  background-color: var(--color-frog);
}

.list--marked .list-item.bullet-color--grass::before, .list--marked-primary .list-item.bullet-color--grass::before {
  background-color: var(--color-grass);
}

.list--marked .list-item.bullet-color--forest::before, .list--marked-primary .list-item.bullet-color--forest::before {
  background-color: var(--color-forest);
}

.list--marked .list-item.bullet-color--cream::before, .list--marked-primary .list-item.bullet-color--cream::before {
  background-color: var(--color-cream);
}

.list--marked .list-item.bullet-color--silver::before, .list--marked-primary .list-item.bullet-color--silver::before {
  background-color: var(--color-silver);
}

.list--marked .list-item.bullet-color--silverRgba::before, .list--marked-primary .list-item.bullet-color--silverRgba::before {
  background-color: var(--color-silverRgba);
}

.list--marked .list-item.bullet-color--earthbornBugle::before, .list--marked-primary .list-item.bullet-color--earthbornBugle::before {
  background-color: var(--color-earthbornBugle);
}

.list--marked .list-item.bullet-color--fruidSalad::before, .list--marked-primary .list-item.bullet-color--fruidSalad::before {
  background-color: var(--color-fruidSalad);
}

.list--marked .list-item.bullet-color--parFourGreen::before, .list--marked-primary .list-item.bullet-color--parFourGreen::before {
  background-color: var(--color-parFourGreen);
}

.list--marked .list-item:not(:last-child), .list--marked-primary .list-item:not(:last-child) {
  margin-bottom: 15px;
}

.list--marked-primary .list-item::before {
  background-color: var(--color-black);
}

.list--marked-primary .list-item:not(:last-child) {
  margin-bottom: 8px;
}

.logo {
  --logo-color: var(--color-undpBlue);
}

.logo__link {
  display: flex;
  width: 160px;
  height: 42px;
  width: 45%;
  height: auto;
}

.logo__slogan {
  color: var(--logo-color);
  font-family: 'Titillium Web', sans-serif;
  font-size: 5.5vw;
  line-height: 1.1;
  font-weight: var(--f-weight-light);
  margin-left: .6em;
  padding-left: .5em;
  position: relative;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
}

.logo__slogan::before {
  content: '';
  background-color: var(--logo-color);
  opacity: .2;
  width: 1px;
  height: 80%;
  display: inline-block;
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
}

.logo__image {
  display: block;
}

.logo__image svg {
  width: 100%;
  height: 100%;
  fill: var(--logo-color);
}

.logo__name {
  display: block;
  text-indent: -99999px;
}

.logo--invert {
  --logo-color: var(--color-white);
}

@media (min-width: 768px) {
  .logo__link {
    width: 190px;
    height: 54px;
  }
  .logo__slogan {
    font-size: var(--font-size-l);
  }
}

@media (min-width: 1430px) {
  .logo__link {
    width: 300px;
    height: 83px;
  }
  .logo__slogan {
    font-size: var(--font-size-xml);
    min-height: 50px;
    width: 55%;
  }
}

.paragraph {
  color: var(--color-black);
  font-size: var(--f-size-p-font-size);
  line-height: var(--f-size-p-line-height);
}

.paragraph--line-clamp-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  overflow-wrap: anywhere;
}

.paragraph--line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.paragraph--line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}

.paragraph--line-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 4;
  overflow-wrap: anywhere;
}

.paragraph--line-clamp-5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 5;
  overflow-wrap: anywhere;
}

.paragraph--line-clamp-6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 6;
  overflow-wrap: anywhere;
}

.paragraph .icon {
  margin-right: 5px;
}

.paragraph--center {
  text-align: center;
}

.paragraph--xs {
  font-size: var(--f-size-p-xs-font-size);
}

.paragraph--s {
  font-size: var(--f-size-p-s-font-size);
}

.paragraph--sx {
  font-size: var(--f-size-p-sx-font-size);
}

.paragraph--ms {
  font-size: var(--f-size-p-ms-font-size);
}

.paragraph--m {
  font-size: var(--f-size-p-m-font-size);
}

.paragraph--mx {
  font-size: var(--f-size-p-mx-font-size);
  line-height: var(--f-size-p-mx-line-height);
}

.paragraph--l {
  font-size: var(--f-size-p-l-font-size);
}

.paragraph--xl {
  font-size: var(--f-size-p-xl-font-size);
}

.paragraph--xxl {
  font-size: var(--f-size-p-xxl-font-size);
  line-height: var(--f-size-p-xxl-line-height);
}

.paragraph--heading-1 {
  font-size: var(--f-size-heading-1-font-size);
  line-height: var(--f-size-heading-1-line-height);
  font-weight: bold;
}

.paragraph--heading-2 {
  font-size: var(--f-size-heading-2-font-size);
  line-height: var(--f-size-heading-2-line-height);
  font-weight: bold;
}

.paragraph--heading-3 {
  font-size: var(--f-size-heading-3-font-size);
  line-height: var(--f-size-heading-3-line-height);
}

.paragraph--heading-4 {
  font-size: var(--f-size-heading-4-font-size);
  line-height: var(--f-size-heading-4-line-height);
  font-weight: bold;
}

.paragraph--heading-5 {
  font-size: var(--f-size-heading-5-font-size);
  line-height: var(--f-size-heading-5-line-height);
  font-weight: bold;
}

.paragraph--heading-6 {
  font-size: var(--f-size-heading-6-font-size);
  line-height: var(--f-size-heading-6-line-height);
  font-weight: bold;
}

.paragraph--heading-7 {
  font-size: var(--f-size-heading-7-font-size);
  line-height: var(--f-size-heading-7-line-height);
}

.paragraph--heading-8 {
  font-size: var(--f-size-heading-8-font-size);
  line-height: var(--f-size-heading-8-line-height);
  font-weight: bold;
}

.paragraph--heading-9 {
  font-size: var(--f-size-heading-9-font-size);
  line-height: var(--f-size-heading-9-line-height);
  font-weight: bold;
}

.paragraph--event-text {
  font-size: var(--f-size-event-text-font-size);
  line-height: var(--f-size-event-text-line-height);
}

.paragraph--simple-news {
  font-size: var(--f-size-simple-news-font-size);
  line-height: var(--f-size-simple-news-line-height);
}

.paragraph--super-small {
  font-size: var(--f-size-super-small-font-size);
  line-height: var(--f-size-super-small-line-height);
}

.paragraph--invert {
  filter: invert(1);
}

.paragraph--italic {
  font-style: italic;
}

.paragraph--caption {
  color: var(--color-unepBlue);
}

.paragraph--upper {
  text-transform: uppercase;
}

.paragraph--bold {
  font-weight: var(--f-weight-bold);
}

.paragraph--blue {
  color: var(--color-unepBlue);
}

.paragraph--white {
  color: var(--color-white);
}

.paragraph .link {
  color: var(--color-unepBlue);
}

.paragraph--base, .paragraph--xs, .paragraph--s, .paragraph--sx, .paragraph--ms, .paragraph--m, .paragraph--mx, .paragraph--l, .paragraph--xl, .paragraph--xxl, .paragraph--heading-1, .paragraph--heading-2, .paragraph--heading-3, .paragraph--heading-4, .paragraph--heading-5, .paragraph--heading-6, .paragraph--heading-7, .paragraph--heading-8, .paragraph--heading-9, .paragraph--simple-news, .paragraph--super-small, .paragraph--invert, .paragraph--italic, .paragraph--caption, .paragraph--upper, .paragraph--bold, .paragraph--blue, .paragraph--link {
  margin-bottom: 1em;
}

.partner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 126px;
  padding: 20px;
  background-color: var(--color-white);
  box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.18);
}

.partner .image--contain img {
  width: 100%;
}

select {
  width: 100%;
  height: 36px;
  color: var(--color-black);
  background-color: var(--color-cream);
  border: 1px solid var(--color-silver);
  padding: 0 20px;
  font-size: var(--f-size-p-sx-font-size);
}

.select2-container--custom .selection .select2-selection--single {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  background-color: var(--color-cream);
  border: 1px solid var(--color-silver);
  padding: 0 40px 0 20px;
}

.select2-container--custom .selection .select2-selection--single .select2-selection__arrow {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 16px;
  height: 8px;
  margin-top: -4px;
  background-image: url("/public/images/arrow.svg");
  background-size: 16px 8px;
  background-repeat: no-repeat;
}

.select2-container--custom .selection .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--color-black);
  font-size: var(--f-size-p-sx-font-size);
}

.select2-container--custom .select2-dropdown {
  background-color: var(--color-cream);
  border: 1px solid var(--color-silver);
}

.select2-container--custom .select2-dropdown .select2-search__field {
  background-color: transparent;
  border: 1px solid var(--color-silver);
  outline-color: var(--color-silver);
}

.select2-container--custom .select2-dropdown .select2-results__option {
  padding-right: 20px;
  padding-left: 20px;
  font-size: var(--f-size-p-sx-font-size);
}

.select2-container--custom .select2-dropdown .select2-results__option:hover {
  background-color: var(--color-silver);
}

.select2-container--custom .select2-dropdown .select2-results__option:not(:last-child) {
  border-bottom: 1px solid var(--color-silver);
}

@media (min-width: 768px) {
  select {
    height: 50px;
  }
  .select2-container--custom .selection .select2-selection--single {
    height: 50px;
  }
}

.slider {
  position: relative;
}

.slider .swiper-button-prev:focus:not(:focus-visible),
.slider .swiper-button-next:focus:not(:focus-visible) {
  outline: none;
}

.slider .swiper-button-prev::after,
.slider .swiper-button-next::after {
  display: none;
}

.slider .swiper-button-prev {
  left: 3px;
}

.slider .swiper-button-prev .icon {
  transform: scale(-1);
}

.slider .swiper-button-next {
  right: 3px;
}

.slider .swiper-slide {
  height: auto;
}

.slider .swiper-button-prev,
.slider .swiper-button-next {
  height: 41px;
  top: 50%;
}

.slider .swiper-pagination {
  position: static;
  margin-top: 20px;
  margin-bottom: 20px;
}

.slider .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 8px;
}

.slider .swiper-pagination-bullet {
  background: #939393;
}

.slider .swiper-pagination-bullet-active {
  background: #BEC3C6;
}

@media (min-width: 1430px) {
  .slider .swiper-button-prev {
    left: -50px;
  }
  .slider .swiper-button-next {
    right: -50px;
  }
  .slider .swiper-button-prev,
  .slider .swiper-button-next {
    top: 50%;
  }
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform .2s;
}

.social-link .icon {
  transition: transform .2s;
}

.social-link:hover, .social-link:focus, .social-link:active {
  transform: translateY(-3px);
}

.social-link:hover .icon, .social-link:focus .icon, .social-link:active .icon {
  transform: scale(0.9);
}

.tag {
  position: relative;
  display: inline-flex;
  padding: 7px 18px;
  background-color: var(--color-mandarin);
}

@media (min-width: 1280px) {
  .tag {
    margin-left: 0;
  }
}

.tag__name {
  font-weight: var(--f-weight-bold);
  text-transform: uppercase;
  color: var(--color-white);
  font-size: var(--f-size-p-ms-font-size);
}

.video {
  cursor: pointer;
  margin: auto;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.video-error {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
  z-index: 100;
}

.video .container-player-poster {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.video iframe {
  border-width: 0;
  outline-width: 0;
  position: absolute;
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 100%;
}

.video video {
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
}

.video img {
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video__play {
  background-color: #e75336;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  height: 60px;
  left: 50%;
  outline: none;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .3s;
  width: 80px;
}

.video__play::before {
  border-bottom: 10px solid transparent;
  border-left: 20px solid var(--color-white);
  border-top: 10px solid transparent;
  content: '';
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
}

.video__play:hover, .video__play:active {
  opacity: .8;
}

.video.hide .video__play {
  opacity: 0;
  visibility: hidden;
}

.video--local video {
  height: auto;
  width: 100%;
}

@media (min-width: 1000px) {
  .video__play {
    border-radius: 20px;
    height: 90px;
    width: 120px;
  }
  .video__play::before {
    border-bottom: 15px solid transparent;
    border-left: 30px solid var(--color-white);
    border-top: 15px solid transparent;
  }
  .video--small .video__play {
    border-radius: 10px;
    height: 42px;
    width: 56px;
  }
  .video--small .video__play::before {
    border-bottom: 10px solid transparent;
    border-left: 20px solid var(--color-white);
    border-top: 10px solid transparent;
  }
}

.accordion-item.section-nav__filter-item {
  border-bottom: 1px solid black;
}

.accordion-item.section-nav__filter-item .accordion-item-head {
  background: transparent;
  color: var(--color-undpBlue);
  padding: 15px 0;
  border-radius: 0;
  display: flex;
  border: none;
}

.accordion-item.section-nav__filter-item .accordion-item-head:before {
  display: none;
}

.accordion-item.section-nav__filter-item .accordion-item-head .icon {
  margin-left: auto;
  margin-top: 6px;
}

.accordion-item.section-nav__filter-item .accordion-item-head .icon svg {
  fill: var(--color-unepBlue);
}

.accordion-item.section-nav__filter-item.active {
  padding-bottom: 15px;
}

.accordion-item.section-nav__filter-item.active .accordion-item-head .icon {
  transform: rotate(180deg);
}

.accordion-item.section-nav__filter-item .accordion-item-body {
  border-radius: 0;
  border: none;
}

.accordion-item.section-nav__filter-item .section-nav__sub {
  margin: 0;
}

.achievements__item {
  position: relative;
  width: 100%;
  padding: 20px 0;
}

.achievements__item--image {
  display: none;
}

.achievements__count {
  text-align: center;
}

.achievements__count .paragraph {
  color: transparent;
  font-family: 'Roboto Black', Helvetica, Arial, sans-serif;
  font-weight: 900;
  line-height: 1;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: var(--color-white);
  -webkit-text-stroke-width: 2px;
}

.achievements__count .paragraph--xxl {
  font-size: calc(2.3125rem + 12.75vw);
}

@media (min-width: 1200px) {
  .achievements__count .paragraph--xxl {
    font-size: 11.875rem;
  }
}

.achievements__count .paragraph--label-190 {
  font-size: calc(2.3125rem + 12.75vw) !important;
}

@media (min-width: 1200px) {
  .achievements__count .paragraph--label-190 {
    font-size: 11.875rem !important;
  }
}

.achievements__count .paragraph--label-95 {
  font-size: calc(1.71875rem + 5.625vw) !important;
}

@media (min-width: 1200px) {
  .achievements__count .paragraph--label-95 {
    font-size: 5.9375rem !important;
  }
}

.achievements__count:not(:last-child) {
  margin-bottom: .2em;
}

.achievements__image {
  width: 100%;
  height: 250px;
}

.achievements .slider {
  overflow: hidden;
}

.achievements .slider .swiper-slide {
  display: flex;
  align-items: flex-start;
}

.achievements .swiper-pagination {
  margin-top: 0;
}

.achievements .swiper-pagination-bullet {
  background-color: #fff;
}

.achievements .swiper-pagination-bullet-active {
  background-color: #000;
}

.achievements .paragraph {
  margin-bottom: 0;
  text-align: center;
}

.achievements .paragraph--label-190 {
  font-size: calc(2.3125rem + 12.75vw) !important;
}

@media (min-width: 1200px) {
  .achievements .paragraph--label-190 {
    font-size: 11.875rem !important;
  }
}

.achievements .paragraph--label-95 {
  font-size: calc(1.71875rem + 5.625vw) !important;
}

@media (min-width: 1200px) {
  .achievements .paragraph--label-95 {
    font-size: 5.9375rem !important;
  }
}

.achievements .paragraph--text-20 {
  font-size: 1.25rem !important;
  line-height: 1.2;
}

.achievements .paragraph--text-22 {
  font-size: calc(1.2625rem + 0.15vw) !important;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .achievements .paragraph--text-22 {
    font-size: 1.375rem !important;
  }
}

.achievements .paragraph--text-24 {
  font-size: calc(1.275rem + 0.3vw) !important;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .achievements .paragraph--text-24 {
    font-size: 1.5rem !important;
  }
}

.achievements .achievement-image {
  height: 100%;
  overflow: visible;
  width: auto;
}

.achievements .achievement-image img {
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: unset;
}

.achievements .heading {
  margin-bottom: 10px;
}

.section--achievements {
  margin-top: 80px;
  padding: 0 !important;
}

.section--achievements .cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 100%;
}

.section--achievements-bg {
  background: url("../images/achievements-bg.png") no-repeat;
  background-size: cover;
}

.section--achievements-mandarin {
  background-color: var(--color-mandarin);
}

.section--achievements-grass {
  background-color: var(--color-grass);
}

.section--achievements-egg {
  background-color: var(--color-egg);
}

.section--achievements-blue {
  background-color: var(--color-unepBlue);
}

@media (min-width: 768px) {
  .achievements {
    display: flex;
    gap: 30px;
  }
  .achievements > .achievements__item {
    flex: 0 1 33.3333%;
  }
  .achievements__image {
    margin-top: -55px;
  }
  .achievements__count .paragraph {
    font-size: calc(1.8125rem + 6.75vw);
  }
}

@media (min-width: 768px) and (min-width: 1200px) {
  .achievements__count .paragraph {
    font-size: 6.875rem;
  }
}

@media (min-width: 1000px) {
  .achievements {
    display: flex;
    height: 390px;
  }
  .achievements__item {
    padding: 63px 0;
  }
  .achievements__item--image {
    display: block;
  }
  .achievements__image {
    bottom: 0;
    height: calc(100% + 50px);
    left: 0;
    position: absolute;
  }
  .achievements__item--image-left .achievements__image img {
    position: absolute;
    right: 0;
  }
  .achievements__count .paragraph {
    font-size: calc(2.1875rem + 11.25vw);
  }
}

@media (min-width: 1000px) and (min-width: 1200px) {
  .achievements__count .paragraph {
    font-size: 10.625rem;
  }
}

@media (min-width: 1000px) {
  .achievements .slider {
    flex: 1 0 66%;
    overflow: hidden;
    display: flex;
  }
  .achievements .swiper-wrapper {
    display: flex;
    gap: 30px;
  }
  .achievements .swiper .swiper-slide {
    flex: 1;
  }
}

@media (min-width: 1280px) {
  .achievements__count .paragraph {
    font-size: calc(2.3125rem + 12.75vw);
  }
}

@media (min-width: 1280px) and (min-width: 1200px) {
  .achievements__count .paragraph {
    font-size: 11.875rem;
  }
}

@media (min-width: 1430px) {
  .section--achievements {
    margin-top: 100px;
    padding: 0;
  }
  .section--achievements-margin {
    margin-top: 189px;
  }
  .achievements__image {
    height: calc(100% + 120px);
  }
  .achievements__image .image {
    position: absolute;
    bottom: 0;
  }
  .achievements__image .image img {
    object-fit: cover;
  }
}

.breadcrumb {
  padding: 0;
  margin: 0 0 10px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: normal;
}

.breadcrumb--margin-bottom-10 {
  margin-bottom: 10px;
}

.breadcrumb--margin-bottom-22 {
  margin-bottom: 22px;
}

.breadcrumb--margin-bottom-40 {
  margin-bottom: 40px;
}

.breadcrumb__item {
  font-weight: var(--f-weight-bold);
}

.breadcrumb--invert {
  color: var(--color-white);
}

.breadcrumb--invert .link {
  color: var(--color-white);
}

.breadcrumb__text {
  font-size: var(--f-size-heading-8-font-size);
  line-height: var(--f-size-heading-8-line-height);
}

.breadcrumb-container .breadcrumb {
  margin-bottom: var(--spacing-xxl);
}

.breadcrumb .breadcrumb__item + .breadcrumb__item {
  padding-left: 0.5rem;
}

.breadcrumb .breadcrumb__item + .breadcrumb__item::before {
  display: inline-block;
  padding-right: 0.5rem;
  content: " / ";
}

.cta-button {
  margin-bottom: 20px;
}

.cta-image {
  margin-bottom: 40px;
}

.btn--white {
  background-color: var(--color-white);
}

.btn--white:hover, .btn--white:focus, .btn--white:active {
  filter: brightness(85%);
}

.btn--black {
  background-color: var(--color-black);
}

.btn--black:hover, .btn--black:focus, .btn--black:active {
  filter: brightness(85%);
}

.btn--blackRgba {
  background-color: var(--color-blackRgba);
}

.btn--blackRgba:hover, .btn--blackRgba:focus, .btn--blackRgba:active {
  filter: brightness(85%);
}

.btn--blue {
  background-color: var(--color-blue);
}

.btn--blue:hover, .btn--blue:focus, .btn--blue:active {
  filter: brightness(85%);
}

.btn--gray {
  background-color: var(--color-gray);
}

.btn--gray:hover, .btn--gray:focus, .btn--gray:active {
  filter: brightness(85%);
}

.btn--mandarin {
  background-color: var(--color-mandarin);
}

.btn--mandarin:hover, .btn--mandarin:focus, .btn--mandarin:active {
  filter: brightness(85%);
}

.btn--egg {
  background-color: var(--color-egg);
}

.btn--egg:hover, .btn--egg:focus, .btn--egg:active {
  filter: brightness(85%);
}

.btn--unepBlue {
  background-color: var(--color-unepBlue);
}

.btn--unepBlue:hover, .btn--unepBlue:focus, .btn--unepBlue:active {
  filter: brightness(85%);
}

.btn--undpBlue {
  background-color: var(--color-undpBlue);
}

.btn--undpBlue:hover, .btn--undpBlue:focus, .btn--undpBlue:active {
  filter: brightness(85%);
}

.btn--undpBlueRgba {
  background-color: var(--color-undpBlueRgba);
}

.btn--undpBlueRgba:hover, .btn--undpBlueRgba:focus, .btn--undpBlueRgba:active {
  filter: brightness(85%);
}

.btn--frog {
  background-color: var(--color-frog);
}

.btn--frog:hover, .btn--frog:focus, .btn--frog:active {
  filter: brightness(85%);
}

.btn--grass {
  background-color: var(--color-grass);
}

.btn--grass:hover, .btn--grass:focus, .btn--grass:active {
  filter: brightness(85%);
}

.btn--forest {
  background-color: var(--color-forest);
}

.btn--forest:hover, .btn--forest:focus, .btn--forest:active {
  filter: brightness(85%);
}

.btn--cream {
  background-color: var(--color-cream);
}

.btn--cream:hover, .btn--cream:focus, .btn--cream:active {
  filter: brightness(85%);
}

.btn--silver {
  background-color: var(--color-silver);
}

.btn--silver:hover, .btn--silver:focus, .btn--silver:active {
  filter: brightness(85%);
}

.btn--silverRgba {
  background-color: var(--color-silverRgba);
}

.btn--silverRgba:hover, .btn--silverRgba:focus, .btn--silverRgba:active {
  filter: brightness(85%);
}

.btn--earthbornBugle {
  background-color: var(--color-earthbornBugle);
}

.btn--earthbornBugle:hover, .btn--earthbornBugle:focus, .btn--earthbornBugle:active {
  filter: brightness(85%);
}

.btn--fruidSalad {
  background-color: var(--color-fruidSalad);
}

.btn--fruidSalad:hover, .btn--fruidSalad:focus, .btn--fruidSalad:active {
  filter: brightness(85%);
}

.btn--parFourGreen {
  background-color: var(--color-parFourGreen);
}

.btn--parFourGreen:hover, .btn--parFourGreen:focus, .btn--parFourGreen:active {
  filter: brightness(85%);
}

.event__link {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
}

.event__link:hover .paragraph:first-child, .event__link:focus .paragraph:first-child, .event__link:active .paragraph:first-child {
  color: var(--color-unepBlue);
}

.event__link .date:not(:last-child) {
  margin-right: 20px;
}

.event__link .paragraph {
  transition: color .3s;
}

.event--secondary .event__info:not(:last-child), .event.toolbox-solution .event__info:not(:last-child) {
  margin-bottom: 20px;
}

.event--secondary .link:not(:last-child), .event.toolbox-solution .link:not(:last-child) {
  margin-bottom: 17px;
}

.event--secondary .event__breadcrumbs:not(:last-child), .event.toolbox-solution .event__breadcrumbs:not(:last-child) {
  margin-bottom: 25px;
}

.event--secondary .event__breadcrumbs-list, .event.toolbox-solution .event__breadcrumbs-list {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  padding: 0;
}

.event--secondary .event__breadcrumbs-list .event__breadcrumbs-item, .event.toolbox-solution .event__breadcrumbs-list .event__breadcrumbs-item {
  display: flex;
  align-items: center;
  position: relative;
}

.event--secondary .event__breadcrumbs-list .event__breadcrumbs-item .icon, .event.toolbox-solution .event__breadcrumbs-list .event__breadcrumbs-item .icon {
  margin-right: 11px;
}

.event--secondary .event__breadcrumbs-list .event__breadcrumbs-item .icon svg, .event.toolbox-solution .event__breadcrumbs-list .event__breadcrumbs-item .icon svg {
  fill: var(--color-black);
}

.event--secondary .event__breadcrumbs-list .event__breadcrumbs-item:not(:last-child), .event.toolbox-solution .event__breadcrumbs-list .event__breadcrumbs-item:not(:last-child) {
  padding-right: 16px;
}

.event--secondary .event__breadcrumbs-list .event__breadcrumbs-item:not(:last-child)::before, .event.toolbox-solution .event__breadcrumbs-list .event__breadcrumbs-item:not(:last-child)::before {
  content: "/";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  font-size: var(--f-size-super-large-font-size);
  line-height: var(--f-size-super-large-line-height);
  line-height: 1;
}

.event--secondary .event__data:not(:last-child), .event.toolbox-solution .event__data:not(:last-child) {
  margin-bottom: 20px;
}

.event--secondary .event__data .paragraph:not(:last-child), .event.toolbox-solution .event__data .paragraph:not(:last-child) {
  margin-bottom: 0;
}

.event--secondary .event__desc, .event.toolbox-solution .event__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 5;
  overflow-wrap: anywhere;
}

@media (min-width: 1000px) {
  .event--secondary .event__desc--three-lines, .event.toolbox-solution .event__desc--three-lines {
    -webkit-line-clamp: 3;
  }
  .event--secondary .event__desc--four-lines, .event.toolbox-solution .event__desc--four-lines {
    -webkit-line-clamp: 4;
  }
  .event--secondary .event__desc--full, .event.toolbox-solution .event__desc--full {
    display: block;
  }
}

.event--secondary .date--image, .event.toolbox-solution .date--image {
  margin-bottom: auto;
  height: auto;
  margin-left: auto;
}

.event__keyword {
  display: flex;
  flex-flow: row wrap;
  margin-top: 25px;
}

.event__keyword .keyword {
  margin-top: 5px;
  margin-bottom: 5px;
}

.event__keyword .keyword:not(:last-child) {
  margin-right: 22px;
}

.event__image .date--image {
  height: auto;
}

.event__image .btn {
  width: 100%;
  min-height: 50px;
}

.event__image .btn:not(:first-child) {
  margin-top: 0;
}

.event__image .btn__icon {
  display: flex;
}

.event--secondary .event__details-accordion, .event.toolbox-solution .event__details-accordion {
  margin-top: 20px;
}

.event--secondary .event__extra_url, .event.toolbox-solution .event__extra_url {
  margin-top: 15px;
}

.event--secondary .accordion-item, .event.toolbox-solution .accordion-item {
  border: none;
  display: flex;
  flex-direction: column;
}

.event--secondary .accordion-item h3, .event.toolbox-solution .accordion-item h3 {
  display: none;
}

.event--secondary .accordion-item.active .accordion-item-head, .event.toolbox-solution .accordion-item.active .accordion-item-head {
  margin-top: 15px;
}

.event--secondary .accordion-item .accordion-item-head, .event.toolbox-solution .accordion-item .accordion-item-head {
  padding: 0;
}

.event--secondary .accordion-item .accordion-item-head .icon, .event.toolbox-solution .accordion-item .accordion-item-head .icon {
  margin-left: 0;
}

.event--secondary .accordion-item .accordion-item-head .icon svg, .event.toolbox-solution .accordion-item .accordion-item-head .icon svg {
  fill: var(--color-black);
}

.event--secondary .accordion-item .accordion-item-body, .event.toolbox-solution .accordion-item .accordion-item-body {
  order: -1;
}

.event--secondary .accordion-item .field:not(:last-child), .event.toolbox-solution .accordion-item .field:not(:last-child) {
  margin-bottom: 25px;
}

.event--secondary .accordion-item .field__label, .event.toolbox-solution .accordion-item .field__label {
  margin-bottom: 5px;
}

.event--secondary .event__container, .event.toolbox-solution .event__container {
  display: flex;
  flex-direction: column;
}

.event--secondary .event__details, .event.toolbox-solution .event__details {
  display: flex;
}

.event--secondary .date--image, .event.toolbox-solution .date--image {
  flex: 0 0 150px;
  width: 150px;
}

@media (min-width: 768px) {
  .event--secondary .date--image, .event.toolbox-solution .date--image {
    flex: 0 0 200px;
    width: 200px;
  }
}

.event--secondary .event__info, .event.toolbox-solution .event__info {
  width: 100%;
  max-width: 820px;
}

.event--secondary .event__info:not(:last-child), .event.toolbox-solution .event__info:not(:last-child) {
  margin-bottom: 0;
  margin-right: 30px;
}

@media (max-width: 424px) {
  .event--secondary .event__info:not(:last-child), .event.toolbox-solution .event__info:not(:last-child) {
    margin-right: 15px;
  }
}

@media (min-width: 768px) {
  .event--secondary .event__info:not(:last-child), .event.toolbox-solution .event__info:not(:last-child) {
    margin-right: 40px;
  }
}

.event__video {
  flex: 0 0 220px;
  width: 220px;
}

@media (max-width: 424px) {
  .event__video {
    max-width: 60%;
  }
}

.event.news .date--image {
  flex: 0 0 150px;
  width: 150px;
  height: auto;
}

.event.news .date--image img {
  height: auto;
}

@media (min-width: 768px) {
  .event.news .date--image {
    flex: 0 0 225px;
    width: 225px;
  }
  .event.news .date--image img {
    height: 150px;
  }
}

.event.toolbox-solution .date--image {
  flex: 1 0 auto;
  width: auto;
  height: auto;
}

.event.toolbox-solution .date--image img {
  height: auto;
}

@media (min-width: 768px) {
  .event.toolbox-solution .date--image {
    flex: 1 0 auto;
    width: auto;
  }
  .event.toolbox-solution .date--image img {
    height: 282px;
  }
}

.field-container:not(:last-child) {
  margin-bottom: 60px;
}

.field-body:not(:last-child) {
  margin-bottom: 50px;
}

.field-body .paragraph:not(:last-child) {
  margin-bottom: 30px;
}

.field-footer .btn:not(:last-child) {
  margin-bottom: 40px;
}

.field-group {
  width: 100%;
}

.field-group:not(:last-child) {
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .field-group {
    width: 400px;
  }
}

.webform-submission-form .form-item label:not(:last-child) {
  max-width: 100%;
}

.webform-submission-form .checkbox, .webform-submission-form .radio {
  margin-bottom: 0;
}

.webform-submission-form .form-type-checkbox,
.webform-submission-form .form-type-radio {
  margin-bottom: 10px;
}

.webform-submission-form .webform-section + .webform-section {
  margin-top: 30px;
}

.webform-submission-form .checkboxes--wrapper legend,
.webform-submission-form .radios--wrapper legend {
  font-weight: normal;
}

.select2-search__field, .select2-selection {
  outline: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-top: 8px;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-top: 13px;
}

.form-item:first-child {
  margin-top: 0;
}

button, input, optgroup, select, textarea {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

.head {
  padding-top: 20px;
  position: relative;
}

.head::before {
  background-color: var(--color-unepBlue);
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  top: 0;
  width: 58px;
}

.head:not(:last-child) {
  margin-bottom: 35px;
}

.head--center {
  text-align: center;
}

.head--center::before {
  left: 50%;
  margin-left: -29px;
}

.head--left {
  text-align: left;
}

.head--right {
  margin-left: 29px;
  text-align: right;
}

.head--right::before {
  left: 95%;
}

.head--text::before {
  display: none;
}

.highlight__image {
  height: 266px;
}

.highlight__image:not(:last-child) {
  margin-bottom: 30px;
}

.highlight .heading:not(:last-child),
.highlight a:not(:last-child) {
  margin-bottom: 10px;
}

.menu {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu form {
  display: flex;
  align-items: center;
}

.menu__item {
  display: flex;
  align-items: center;
}

.menu__item:not(:last-child) {
  margin-right: 30px;
}

.menu--secondary .menu__item {
  position: relative;
  padding: 0 20px;
}

.menu--secondary .menu__item:not(:last-child) {
  margin-right: 0;
}

.menu--secondary .menu__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background-color: var(--color-white);
}

.menu--secondary .menu__item:first-child {
  padding-left: 0;
}

.menu--secondary .menu__item:last-child {
  padding-right: 0;
}

.menu--column {
  display: block;
}

.menu--column .menu__item:not(:last-child) {
  margin-right: 0;
  margin-bottom: 15px;
}

@media (min-width: 1000px) {
  .menu--column .menu__item:not(:last-child) {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

.nav-content .swiper {
  position: relative;
  display: block;
  flex: 1;
}

.nav-content .swiper::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gray);
}

.nav-content .swiper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 8px;
  z-index: 1;
  width: 50px;
  height: 67px;
  background: url("../images/white-gradient.svg") no-repeat;
  background-size: 100%;
}

.nav-content__inner {
  display: flex;
  min-height: 55px;
}

.nav-content__btns {
  display: flex;
}

.nav-content__btns .btn {
  display: flex;
}

.nav-content__btns .btn:not(:last-child) {
  display: none;
}

.nav-content__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 54px;
  width: 54px;
  background-color: var(--color-unepBlue);
  border: none;
  outline: none;
  cursor: pointer;
}

.nav-content__toggle span {
  position: relative;
  display: block;
  width: 30px;
  height: 3px;
  background-color: var(--color-white);
}

.nav-content__toggle span::before, .nav-content__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 30px;
  height: 3px;
  background-color: var(--color-white);
}

.nav-content__toggle span::before {
  top: -8px;
}

.nav-content__toggle span::after {
  top: 8px;
}

.nav-content--toolbox-main .swiper {
  display: flex;
}

.nav-content--toolbox-main .nav-content__inner {
  position: relative;
}

.nav-content--toolbox-main .nav-content__inner::after {
  content: "";
  width: 100%;
  height: 5px;
  margin-top: auto;
  background-color: var(--color-frog);
}

.nav-content__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-content__item {
  width: auto;
}

.nav-content__item.swiper-slide {
  width: auto;
}

.nav-content__item.swiper-slide.swiper-slide_active .link::after {
  opacity: 1;
}

.nav-content__item.swiper-slide.swiper-slide_active .link__text {
  color: var(--color-unepBlue);
}

.nav-content__item .link {
  position: relative;
  padding: 14px 25px;
}

.nav-content__item .link:hover::after, .nav-content__item .link:focus::after, .nav-content__item .link:active::after {
  opacity: 1;
}

.nav-content__item .link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background-color: var(--color-unepBlue);
  opacity: 0;
  transition: all .3s;
}

@media (min-width: 768px) {
  .nav-content__item {
    width: auto;
  }
  .nav-content__item .link {
    padding: 19px 30px;
  }
}

.nav-content--secondary .swiper::after {
  background: url("../images/cream-gradient.svg") no-repeat;
  background-size: 100%;
}

.nav-content--secondary .nav-content__item.swiper-slide.swiper-slide_active .link__text {
  color: var(--color-black);
}

.nav-content--secondary .nav-content__item .link:hover, .nav-content--secondary .nav-content__item .link:focus, .nav-content--secondary .nav-content__item .link:active {
  color: var(--color-black);
}

.nav-content--secondary .nav-content__item .link::after {
  background-color: var(--color-frog);
}

@media (min-width: 768px) {
  .nav-content__inner {
    min-height: 65px;
  }
}

@media (min-width: 1000px) {
  .nav-content__btns .btn {
    flex: 0 0 240px;
    width: 240px;
  }
  .nav-content__btns .btn:not(:last-child) {
    display: flex;
  }
  .nav-content__toggle {
    display: none;
  }
}

.nav {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background-color: #1eb2fc;
  transform: translateX(100%);
  transition: transform .3s ease-out;
}

.nav.show {
  transform: translateX(0);
}

.nav__list {
  display: flex;
  flex-flow: row wrap;
  padding: 20px 15px 30px;
  list-style: none;
}

.nav__item {
  display: flex;
  width: 100%;
}

.nav__item:not(:first-child) {
  margin-top: 15px;
}

.nav__item .link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  font-size: 14px;
  border: 1px solid var(--color-white);
}

.nav__item--image {
  display: none;
}

.nav__secondary {
  padding: 0 15px;
}

.nav__secondary:not(:last-child) {
  margin-bottom: 20px;
}

.nav__secondary .menu {
  flex-flow: row wrap;
  justify-content: center;
}

.nav__secondary .menu__item {
  margin: 5px 10px;
}

.nav__secondary .menu__item:not(:last-child) {
  margin-right: 10px;
}

.nav__lang {
  padding: 10px 15px;
  background-color: #007DBC;
}

.nav__lang .menu {
  flex-flow: row wrap;
  justify-content: center;
}

.nav__lang .menu__item {
  margin: 5px 10px;
}

.nav__lang .menu__item:not(:last-child) {
  margin-right: 10px;
}

@media (min-width: 375px) {
  .nav__list {
    margin: 0 -10px;
    padding-bottom: 10px;
  }
  .nav__item {
    margin: 10px;
    width: calc(50% - 20px);
  }
  .nav__item:not(:first-child) {
    margin-top: 10px;
  }
  .nav__item .link--bold {
    font-weight: normal;
  }
}

@media (min-width: 768px) {
  .nav__list {
    margin: 0 -15px;
  }
  .nav__item {
    margin: 15px;
    width: calc(50% - 30px);
  }
  .nav__item .link--bold {
    font-weight: 700;
  }
  .nav__secondary {
    display: none;
  }
  .nav__lang {
    display: none;
  }
}

@media (min-width: 1000px) {
  .nav {
    background-color: transparent;
    max-width: 970px;
    position: relative;
    top: 0;
    transform: translateX(0);
  }
  .nav__list {
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
  }
  .nav__item {
    margin: 0;
    width: auto;
  }
  .nav__item:not(:first-child) {
    margin-left: 20px;
    margin-top: 0;
  }
  .nav__item .link {
    color: var(--color-black);
    padding: 0;
  }
  .nav__item .link .icon {
    display: none;
  }
  .nav__item--image {
    display: block;
    width: 70px;
  }
  .nav__item--image .link {
    display: flex;
    justify-content: flex-end;
  }
  .nav__item--image .link .icon {
    display: block;
    margin-right: 0;
  }
}

@media (min-width: 1430px) {
  .nav__item:not(:first-child) {
    margin-left: 43px;
  }
  .nav__item.nav__item--image {
    margin-left: 0;
  }
  .nav__item .link {
    font-size: 18px;
  }
}

.news-item:not(:last-child) {
  margin-bottom: 40px;
}

.news-item .link:not(:last-child) {
  margin-bottom: 10px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pagination__list {
  display: inline-flex;
  align-items: center;
  flex-flow: row wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination__item {
  display: none;
  min-width: 46px;
  height: 45px;
}

.pagination__item:nth-child(-n+2) {
  display: block;
}

.pagination__item:nth-last-child(-n+2) {
  display: block;
}

.pagination__item.active {
  display: block;
}

.pagination__item.active .link {
  background-color: var(--color-undpBlue);
}

.pagination__item.active .link__text {
  color: var(--color-white);
}

.pagination__item--first {
  margin-right: 10px;
}

.pagination__item--last {
  margin-left: 10px;
}

.pagination__item > span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-undpBlue);
  font-size: var(--f-size-p-ms-font-size);
}

.pagination .link {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.pagination .link__text {
  color: var(--color-undpBlue);
}

@media (min-width: 768px) {
  .pagination__item--first {
    margin-right: 30px;
  }
  .pagination__item--last {
    margin-left: 30px;
  }
}

@media (min-width: 1000px) {
  .pagination__item {
    display: block;
  }
}

.post {
  min-height: 250px;
  overflow: hidden;
  height: 100%;
}

.post__link {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.post__link:hover .image img, .post__link:focus .image img, .post__link:active .image img {
  transform: scale(1.1);
}

.post__link:hover .post__desc::before, .post__link:focus .post__desc::before, .post__link:active .post__desc::before {
  transform: scale(1.2);
}

.post__image {
  height: 250px;
  overflow: hidden;
}

.post__image .image {
  height: 100%;
}

.post__image .image img {
  transition: transform .3s;
  height: 100%;
}

.post__desc {
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-grow: 1;
}

.post__desc::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  transition: transform .3s;
}

.post--full .post__desc {
  justify-content: flex-end;
}

.post--black .post__desc {
  background-color: var(--color-forest);
}

.post--mandarin .post__desc {
  background-color: var(--color-mandarin);
}

.post--mandarin .post__desc::before {
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: url("/public/images/el.svg") no-repeat;
  background-size: cover;
}

.post--egg .post__desc {
  background-color: var(--color-egg);
}

.post--egg .post__desc::before {
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: url("/public/images/el-2.svg") no-repeat;
  background-size: cover;
}

.post--undpBlue .post__desc {
  background-color: var(--color-undpBlue);
}

.post--undpBlue .post__desc::before {
  right: 50px;
  display: block;
  width: 22%;
  height: 100%;
  background: url("/public/images/el-3.svg") no-repeat;
  background-size: cover;
}

.post .heading:not(:last-child) {
  margin-bottom: 10px;
}

.post .paragraph {
  font-weight: var(--f-weight-normal);
}

@media (min-width: 768px) {
  .post__image {
    height: 150px;
  }
}

@media (min-width: 1000px) {
  .post__image {
    height: 250px;
  }
}

@media (min-width: 1280px) {
  .post {
    min-height: 310px;
    height: 310px;
  }
  .post__link {
    display: flex;
  }
  .post__image {
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
  }
  .post__image .image {
    height: 100%;
  }
  .post__image .image img {
    height: 100%;
  }
  .post__desc {
    justify-content: center;
    width: 100%;
    padding: 50px 56px 60px;
  }
  .post--full .post__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex: 1;
    width: 100%;
  }
  .post--black .post__desc {
    background: linear-gradient(to bottom, rgba(var(--color-blackRgba), 0) 50%, rgba(var(--color-blackRgba), 0.8) 80%);
  }
  .post--mandarin .post__link:hover .post__desc::before, .post--mandarin .post__link:focus .post__desc::before, .post--mandarin .post__link:active .post__desc::before {
    transform: scaleX(-1) scale(1.2);
  }
  .post--mandarin .post__desc::before {
    right: auto;
    left: 0;
    transform: scaleX(-1);
  }
  .post--top .post__link {
    flex-direction: column-reverse;
  }
  .post--top .post__image {
    flex: 1;
    width: 100%;
  }
  .post--top .post__desc {
    padding-top: 25px;
    max-height: 50%;
  }
  .post--left .post__link {
    flex-direction: row-reverse;
  }
}

.publications-list .publication:not(:last-child) {
  margin-bottom: 40px;
}

.publication.secondary .publication__image {
  margin-right: 12px;
}

.publication__desc-head:not(:last-child) {
  margin-bottom: 10px;
}

.publication--secondary .publication__desc {
  display: flex;
  flex-direction: column;
}

.publication--secondary .publication__desc-head .link {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  line-height: 1.1;
  overflow: hidden;
}

.publication--secondary .publication__desc-body:not(:last-child) {
  margin-bottom: 40px;
}

.publication--secondary .publication__desc-bottom .link .icon svg {
  fill: var(--color-black);
  transition: fill .3s;
}

.publication--secondary .publication__desc-bottom .link:hover .icon svg, .publication--secondary .publication__desc-bottom .link:active .icon svg {
  fill: var(--color-unepBlue);
}

.publication--secondary .publication__caption:not(:last-child) {
  margin-bottom: 0;
}

.publication--secondary.publication--row .publication__head:not(:last-child) {
  margin-bottom: 15px;
}

.publication--row {
  display: block;
  width: 100%;
}

.publication--row .publication__image:not(:last-child) {
  margin-bottom: 40px;
}

.publication--row .publication__desc .paragraph:not(:last-child) {
  margin-bottom: 0;
}

.publication--vertical .publication__image {
  width: 100%;
}

.publication--vertical .publication__image--full {
  height: 100%;
}

.publication--vertical .publication__caption:not(:last-child) {
  margin-bottom: 20px;
}

.publication--vertical .btn:not(:first-child) {
  margin-top: 30px;
}

.publication--vertical .publication__desc {
  max-width: 320px;
}

.publication--flagship .publication__desc {
  max-width: 500px;
}

.publication--reverse {
  flex-direction: row-reverse;
}

.publication__caption:not(:last-child) {
  margin-bottom: 15px;
}

.publication__image--normal {
  flex: 0 0 250px;
  width: 250px;
}

.publication__image--big {
  flex: 0 0 250px;
  width: 250px;
}

@media screen and (max-width: 926px) {
  .publication__image--big {
    width: 100%;
  }
}

.publication__image--full {
  width: 100%;
  height: 100%;
}

.publication__image--full .image img {
  width: 100%;
  height: 100%;
}

.publication__image:not(:last-child) {
  margin-bottom: 30px;
}

.publication__image-document {
  display: block;
  width: 100%;
}

.publication__video {
  position: relative;
  height: 250px;
  margin-bottom: 30px;
  overflow: hidden;
}

.publication__details {
  margin-bottom: var(--spacing-xl);
}

.publication .heading:not(:last-child) {
  margin-bottom: 10px;
}

.publication .paragraph {
  line-height: 1.7;
}

.publication .paragraph:not(:last-child) {
  margin-bottom: 25px;
}

.section--highlight .publication {
  align-items: flex-end;
}

.publication--fourth .publication__desc-head:not(:last-child) {
  margin-bottom: 10px;
}

.publication .publication__desc-head:not(:last-child) {
  margin-bottom: 10px;
}

.publications {
  margin: 0 calc(-62px / 2);
}

.publications .cell--third {
  margin: calc(70px / 2) calc(30px / 2);
  padding: 0 15px;
}

.section--half-bg .publication--vertical {
  align-items: flex-start;
}

@media (min-width: 768px) {
  .publications-list .publication:not(:last-child) {
    margin-bottom: 70px;
  }
  .publication--row {
    display: flex;
  }
  .publication--row .publication__head:not(:last-child) {
    margin-bottom: 40px;
  }
  .publication--row .publication__desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .publication--row .publication__desc .paragraph:not(:last-child) {
    margin-bottom: 25px;
  }
  .publication--row .publication__details .paragraph:not(:last-child) {
    margin-bottom: 5px;
  }
  .publication--row .btn {
    margin-top: auto;
  }
  .publication--row .publication__image {
    margin-right: 60px;
  }
  .publication--row .publication__image:not(:last-child) {
    margin-bottom: 0;
  }
  .publication--vertical {
    align-items: flex-end;
  }
  .section--half-bg .publication--vertical .publication__desc {
    margin-top: 155px;
  }
  .publication--secondary .publication__image {
    margin-right: 12px;
  }
  .publication--reverse .publication__image {
    margin-right: 0;
    margin-left: 12px;
  }
  .publication--reverse .publication__image:not(:last-child) {
    margin-bottom: 0;
  }
  .publication__image--half {
    flex: none;
    width: calc(100% - 50%);
  }
  .publication__video {
    flex: 0 0 50%;
    width: 50%;
    margin-bottom: 0;
    margin-left: 50px;
  }
  .publication--third .publication__image {
    margin-left: 100px;
  }
  .publication--third .publication__desc {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
  }
}

@media (min-width: 1000px) {
  .publication--vertical .publication__image:not(.publication__image--normal) {
    height: 460px;
  }
  .publication--vertical .publication__image--normal {
    flex: 0 0 353px;
    width: 250px;
  }
  .publication__image--big {
    flex: none;
    width: calc(100% - 50%);
  }
  .publication__image--half {
    max-width: 510px;
  }
  .publication__video {
    flex: 0 0 calc(100% - 50%);
    width: calc(100% - 50%);
    height: 300px;
  }
  .section--related .publication .publication__desc {
    display: flex;
    flex-direction: column;
  }
  .section--related .publication .publication__desc .btn {
    margin-top: auto;
    align-self: start;
  }
  .publication--third .publication__image {
    margin-left: 150px;
  }
}

@media (min-width: 1280px) {
  .publications-list .publication:not(:last-child) {
    margin-bottom: 100px;
  }
  .publication__video {
    height: 400px;
  }
}

@media (min-width: 1430px) {
  .publication__image--big {
    width: calc(100% - 33.3333%);
  }
  .publication__video {
    flex: 0 0 calc(100% - 33.3333%);
    width: calc(100% - 33.3333%);
    height: 467px;
  }
  .publication__map {
    flex: 0 0 calc(100% - 33.3333%);
    width: calc(100% - 33.3333%);
    height: 400px;
    padding-right: 25px;
  }
  .publication--reverse .publication__image {
    margin-left: 100px;
  }
}

.node-resource img,
.node--type-resource.node--view-mode-teaser img {
  box-shadow: 0 4px 8px 0 var(--color-gray);
}

.range {
  display: flex;
  flex-direction: column;
}

.range__btn {
  margin-bottom: 20px;
  margin-left: auto;
  padding: 0;
  color: var(--color-unepBlue);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: color .3s;
  font-size: var(--f-size-p-xs-font-size);
}

.range__btn:hover, .range__btn:active {
  color: var(--color-undpBlue);
}

.range__scale {
  margin-bottom: 20px;
}

.range__scale.noUi-horizontal {
  height: 10px;
}

.range__scale.noUi-horizontal .noUi-handle {
  top: -12px;
  width: 34px;
  height: 34px;
}

.range__scale.noUi-target {
  border: none;
}

.range__scale .noUi-connects {
  background-color: var(--color-gray);
  border-radius: 0;
}

.range__scale .noUi-connect {
  background-color: var(--color-unepBlue);
}

.range__scale .noUi-handle {
  background-color: var(--color-cream);
  border-color: var(--color-gray);
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

.range__scale .noUi-handle::before, .range__scale .noUi-handle::after {
  top: 50%;
  width: 2px;
  margin-top: -7px;
  background-color: var(--color-gray);
}

.range__scale .noUi-handle::before {
  left: calc(50% - 4px);
}

.range__scale .noUi-handle::after {
  right: calc(50% - 4px);
  left: auto;
}

.range__handle {
  display: flex;
  justify-content: space-between;
}

.range__val {
  font-size: var(--f-size-p-s-font-size);
}

.search {
  display: inline-flex;
}

.search__form {
  display: flex;
  align-items: center;
}

.search .icon:not(:last-child) {
  margin-right: 12px;
}

.search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  transform: scale(1);
  transition: transform .3s;
}

.search__btn:hover, .search__btn:focus, .search__btn:active {
  transform: scale(0.85);
}

.search__btn:not(:last-child) {
  margin-right: 12px;
}

.search__input {
  width: 55px;
  height: 20px;
  padding: 0;
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--color-white);
  background-color: transparent;
  border: none;
  outline: none;
  transition: all .5s;
}

.search__input:focus {
  width: 130px;
  box-shadow: 0 1px 1px var(--color-white);
}

.search__input::-webkit-input-placeholder {
  color: var(--color-white);
  opacity: 1;
}

.search__input:-moz-placeholder {
  color: var(--color-white);
  opacity: 1;
}

.search__input::-moz-placeholder {
  color: var(--color-white);
  opacity: 1;
}

.search__input:-ms-input-placeholder {
  color: var(--color-white);
  opacity: 1;
}

.search--secondary {
  position: relative;
  width: 100%;
}

.search--secondary .search__input {
  width: 100%;
  height: 40px;
  padding: 0 50px 0 20px;
  color: var(--color-black);
  background-color: var(--color-cream);
  border: 1px solid var(--color-gray);
  transition: box-shadow .3s;
}

.search--secondary .search__input::-webkit-input-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.search--secondary .search__input:-moz-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.search--secondary .search__input::-moz-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.search--secondary .search__input:-ms-input-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.search--secondary .search__input:focus {
  box-shadow: 0 1px 5px var(--color-silver);
}

.search--secondary .search__btn {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -9px;
}

.search--secondary .search__btn svg {
  fill: var(--color-black);
}

.search--secondary .search__btn:not(:last-child) {
  margin-right: 0;
}

@media (min-width: 1430px) {
  .search--secondary .search__input {
    height: 56px;
    font-size: var(--f-size-p-sx-font-size);
  }
}

.cover {
  width: 100%;
  height: 470px;
}

.session-document-teaser {
  margin-bottom: 30px;
}

.session-document-teaser .download-section {
  margin-top: 15px;
}

@media (min-width: 1000px) {
  .session-document-teaser {
    display: flex;
    gap: 15px;
  }
  .session-document-teaser .document-data {
    flex: 1 0 60%;
  }
  .session-document-teaser .download-section {
    margin-top: 0;
    flex: 1 0 40%;
  }
}

.session-document-teaser .section-nav {
  margin: 0;
  width: 100%;
}

.session-document-teaser .section-nav .list-item:first-child {
  border-top: none;
}

.session-document-teaser .heading {
  margin-bottom: 15px;
}

.session-document-teaser .link__text {
  word-break: break-all;
}

.session-document-teaser .section-nav__documents .section-nav__list {
  box-shadow: none;
}

.session-document-teaser .section-nav__documents .section-nav__list .section-nav__filter-item {
  position: relative;
  padding-bottom: 0;
}

.session-document-teaser .section-nav__documents .section-nav__list .section-nav__filter-item .section-nav__sub {
  position: absolute;
  background: white;
  padding-left: 30px;
  padding-right: 30px;
  left: -30px;
  z-index: 100;
  top: 61px;
  box-shadow: 0 4px 8px 0 var(--color-gray);
  width: calc(100% + 60px);
}

.view-session-documents .section-nav__sub {
  max-height: unset;
  overflow: visible;
}

.view-session-documents .accordion-item:first-child .accordion-item-head {
  padding-top: 0;
}

.view-session-documents .views-row:not(:last-child) {
  margin-bottom: 45px;
}

.view-unccd-views-countries .section-nav__sub {
  max-height: unset;
}

.view-sessions .views-row {
  margin-bottom: 10px;
}

.view-sessions .pager__items {
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.view-sessions .pager__items > :last-child {
  margin-left: auto;
}

.view-sessions .pager {
  padding-left: 0;
  margin-top: 10px;
}

.view-sessions .pager .pager__item {
  padding-left: 0;
}

.socials {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em;
  font-size: 5.5vw;
}

.socials__item .social-link {
  width: 1.75em;
  height: 1.75em;
}

.socials__item .social-link .icon {
  height: 50%;
}

.socials__item .social-link .icon svg {
  height: 100%;
  width: 100%;
  margin: auto;
}

@media (min-width: 768px) {
  .socials {
    font-size: 28.57143px;
    gap: .7em;
  }
}

.social-widget {
  position: fixed;
  left: 0;
  z-index: 10;
  display: none;
  width: 44px;
  padding: 14px 0;
  background-color: var(--color-grass);
}

.social-widget .link {
  display: flex;
  justify-content: center;
}

.social-widget .link:not(:last-child) {
  margin-bottom: 24px;
}

.social-widget .link .icon {
  transition: transform .3s;
}

.social-widget .link:hover .icon, .social-widget .link:focus .icon, .social-widget .link:active .icon {
  transform: scale(0.8);
}

@media (min-width: 1500px) {
  .social-widget {
    top: 300px;
    display: block;
  }
}

.table {
  width: 100%;
  background-color: var(--color-white);
  border-collapse: collapse;
}

.table__header {
  display: none;
  background-color: var(--color-gray);
}

.table__header th {
  padding: 12px 20px;
  text-align: center;
  font-size: var(--f-size-p-font-size);
  line-height: var(--f-size-p-line-height);
}

.table__header th:first-child {
  max-width: 385px;
  text-align: left;
}

.table__body tr {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-silver);
}

.table__body tr:not(:last-child) {
  margin-bottom: 30px;
}

.table__body tr:not(:last-child) {
  border-bottom: 1px solid var(--color-silver);
}

.table__body td {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 50%;
  padding: 0;
  text-align: left;
  border-bottom: 1px solid var(--color-silver);
}

.table__body td:first-child {
  flex: 0 0 100%;
  text-align: left;
}

.table__body td:last-child {
  border-bottom: none;
}

.table__body td::before {
  content: attr(data-label);
  padding: 5px 10px;
  background-color: var(--color-gray);
  color: var(--color-black);
  font-weight: var(--f-weight-bold);
  font-size: var(--f-size-p-font-size);
  line-height: var(--f-size-p-line-height);
}

.table__body td .link,
.table__body td .paragraph {
  padding: 8px 10px;
}

@media (min-width: 1000px) {
  .table {
    border: 1px solid var(--color-silver);
  }
  .table__header {
    display: table-header-group;
  }
  .table__body tr {
    display: table-row;
  }
  .table__body tr:not(:last-child) {
    margin-bottom: 0;
  }
  .table__body tr:not(:last-child) {
    border-bottom: none;
  }
  .table__body tr:nth-child(even) {
    background-color: var(--color-cream);
  }
  .table__body td {
    display: table-cell;
    flex: none;
    min-width: auto;
    max-width: 385px;
    padding: 12px 20px;
    text-align: center;
    border-bottom: none;
  }
  .table__body td:first-child {
    flex: none;
  }
  .table__body td:last-child {
    border-bottom: none;
  }
  .table__body td::before {
    content: none;
  }
  .table__body td .link,
  .table__body td .paragraph {
    padding: 0;
  }
}

.toolbox-card {
  display: inline-flex;
  width: 100%;
  min-height: 350px;
  margin: 9px 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 6px;
  overflow: hidden;
}

.toolbox-card .heading {
  transition: color .3s;
}

.toolbox-card:hover .heading, .toolbox-card:focus .heading, .toolbox-card:active .heading {
  color: var(--color-unepBlue);
}

.toolbox-card:hover .toolbox-card__descr, .toolbox-card:focus .toolbox-card__descr, .toolbox-card:active .toolbox-card__descr {
  background-color: var(--color-undpBlue);
}

.toolbox-card__link {
  display: block;
  width: 100%;
  position: relative;
}

.toolbox-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 25px 150px;
  text-align: center;
}

.toolbox-card__content .paragraph--caption:not(:last-child) {
  margin-bottom: 10px;
}

.toolbox-card__decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}

.toolbox-card__descr {
  max-width: 170px;
  padding: 11px 24px;
  background-color: var(--color-unepBlue);
  box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.18);
  transition: background-color .3s;
}

.toolbox-card__descr .paragraph {
  margin: 0;
}

.toolbox-card__image {
  position: absolute;
  bottom: 0;
  left: 50%;
  max-height: 133px;
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .toolbox-card {
    width: calc(50% - 18px);
    margin: 9px;
  }
  .toolbox-card__content {
    padding-right: 30px;
    padding-left: 30px;
  }
}

@media (min-width: 1280px) {
  .toolbox-card {
    width: calc(33.3333% - 18px);
  }
  .toolbox-card__content {
    min-height: 420px;
  }
}

@media (min-width: 1430px) {
  .toolbox-card__content {
    padding-right: 45px;
    padding-left: 45px;
  }
}

.block-unccd-toolbox-solutions .form-item label {
  max-width: 100% !important;
  font-weight: bold;
  font-size: 21px;
  margin-bottom: 15px !important;
}

.block-unccd-toolbox-solutions .form-type-select {
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 10px;
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
}

.block-unccd-toolbox-solutions .form-type-select label {
  order: -2;
  max-width: 760px;
}

.block-unccd-toolbox-solutions .form-type-select .description {
  order: -1;
  margin-bottom: 15px;
  max-width: 760px;
}

.block-unccd-toolbox-solutions .select2-container {
  max-width: 760px !important;
}

.block-unccd-toolbox-solutions .btn {
  margin: 15px 0 0 0;
}

.block-unccd-toolbox-solutions .view {
  margin-top: 50px;
}

.block-unccd-toolbox-solutions .head {
  margin-bottom: 10px;
}

.block-unccd-toolbox-solutions .heading {
  font-weight: bold;
}

@media (min-width: 768px) {
  .block-unccd-toolbox-solutions .event__desc, .block-unccd-toolbox-solutions .event__info .link {
    max-width: 760px;
  }
}

.block-unccd-toolbox-solutions .section-nav__sub {
  max-height: 100%;
}

.block-unccd-toolbox-solutions .section-nav__sub .accordion-item-body-inside {
  display: flex;
}

@media (max-width: 767px) {
  .block-unccd-toolbox-solutions .section-nav__sub .accordion-item-body-inside {
    flex-direction: column-reverse;
  }
  .block-unccd-toolbox-solutions .section-nav__sub .accordion-item-body-inside .accordion-body-right {
    margin-bottom: 15px;
  }
}

.block-unccd-toolbox-solutions .section-nav__sub .accordion-body-left {
  margin-right: 15px;
}

@media (min-width: 768px) {
  .block-unccd-toolbox-solutions .section-nav__sub .accordion-body-left {
    max-width: 760px;
    margin-right: 40px;
  }
}

@media (min-width: 768px) {
  .block-unccd-toolbox-solutions .section-nav__sub .accordion-body-right {
    max-width: 260px;
    margin-left: auto;
  }
}

.block-unccd-toolbox-solutions .btn--link {
  background: transparent;
  color: var(--color-unepBlue);
  display: block;
  padding: 0;
  text-transform: none;
  font-weight: normal;
}

.block-unccd-toolbox-solutions .btn--link:hover {
  color: var(--color-undpBlue);
}

.node--type-drought-toolbox-action p:last-child {
  margin-bottom: 0 !important;
}

.node--type-drought-toolbox-action .image img {
  width: auto;
}

.node--type-drought-toolbox-action .field__label {
  margin-bottom: 5px;
}

.node--type-drought-toolbox-action .field {
  margin-bottom: 15px;
}

.node--type-drought-toolbox-action .event.toolbox-solution .event__info {
  max-width: 100%;
}

.tooltip-option {
  display: flex;
  align-items: center;
}

.tooltip-option .select2-tooltip {
  margin-left: 15px;
  background-image: url("/public/images/tooltip.png");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  margin-left: auto;
}

#solutions-container {
  margin-top: 50px;
}

.topic {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.topic--full {
  width: 100%;
}

.topic--half {
  width: 100%;
}

.topic--fourth {
  width: 100%;
}

.topic__image {
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.2);
  height: auto;
}

.topic__image--hover-animate {
  overflow: hidden;
}

.topic__image--round {
  width: 150px;
  height: 150px;
  box-shadow: none;
}

.topic__image--round .image {
  border-radius: 50%;
}

.topic__image:not(:last-child) {
  margin-bottom: 15px;
}

.topic .topic__info .heading {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topic--secondary .topic__image:not(:last-child) {
  margin-bottom: 0;
}

.topic--secondary .topic__image--small img {
  aspect-ratio: 3/2;
}

.topic--secondary .topic__info {
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--color-undpBlue);
}

.topic--secondary .topic__info .heading:not(:last-child) {
  margin-bottom: 14px;
}

.topic--secondary .topic__info .paragraph:not(:last-child) {
  margin-bottom: 50px;
}

.topic--secondary .topic__info .link {
  flex-direction: column;
  align-items: center;
  width: auto;
  margin-top: auto;
}

.topic--secondary .topic__info .link .icon:first-child {
  margin-right: 0;
  margin-bottom: 11px;
}

.topic--secondary .topic__info-content {
  padding: 26px 40px 34px 45px;
}

.topic .paragraph .icon {
  display: inline-block;
}

.topic .paragraph .icon svg {
  fill: var(--color-black);
  transition: fill .3s;
}

.topic--third .topic__image:not(:last-child) {
  margin-bottom: 0;
}

.topic .link {
  align-items: baseline;
}

.topic .link .icon svg {
  fill: var(--color-black);
  transition: fill .3s;
}

.topic .link:hover .icon svg, .topic .link:active .icon svg {
  fill: var(--color-unepBlue);
}

.topic__link .paragraph {
  transition: color .3s;
}

.topic__link .paragraph .icon svg,
.topic__link .paragraph .icon svg path {
  transition: fill .3s;
}

.topic__link .image {
  overflow: hidden;
}

.topic__link .image img {
  transition: transform .5s;
}

.topic__link:hover .image img, .topic__link:focus .image img, .topic__link:active .image img {
  transform: scale(1.2);
}

.topic__link:hover .paragraph, .topic__link:focus .paragraph, .topic__link:active .paragraph {
  color: var(--color-blue);
}

.topic__link:hover .paragraph .icon svg,
.topic__link:hover .paragraph .icon svg path, .topic__link:focus .paragraph .icon svg,
.topic__link:focus .paragraph .icon svg path, .topic__link:active .paragraph .icon svg,
.topic__link:active .paragraph .icon svg path {
  fill: var(--color-blue);
  transition: fill .3s;
}

@media (min-width: 768px) {
  .topic--half {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  .topic__image--round {
    width: 230px;
    height: 230px;
  }
}

.twitter .line:not(:last-child) {
  margin-bottom: 0;
}

.block-unccd-app-agenda-item-calendar,
.block-unccd-app-meeting-agenda-actions {
  text-align: center;
  min-height: 93px;
  padding-top: 26px;
  clear: both;
  float: none;
  overflow: hidden;
}

.block-unccd-app-agenda-item-calendar .left,
.block-unccd-app-meeting-agenda-actions .left {
  float: left;
  width: 40%;
}

.block-unccd-app-agenda-item-calendar .days-listing,
.block-unccd-app-meeting-agenda-actions .days-listing {
  border-left: 1px solid #f0f0f0;
  float: left;
  width: 60%;
}

.block-unccd-app-agenda-item-calendar .days-listing ul,
.block-unccd-app-meeting-agenda-actions .days-listing ul {
  min-width: 100px;
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.block-unccd-app-agenda-item-calendar .days-listing ul li,
.block-unccd-app-meeting-agenda-actions .days-listing ul li {
  display: inline-block;
  align-items: center;
  width: 70px;
  margin-top: 10px;
}

.block-unccd-app-agenda-item-calendar .days-listing ul li a,
.block-unccd-app-meeting-agenda-actions .days-listing ul li a {
  color: black;
  font-size: 15px;
  width: 30px;
  cursor: pointer;
  padding: 5px;
}

.block-unccd-app-agenda-item-calendar .days-listing ul li a:hover,
.block-unccd-app-meeting-agenda-actions .days-listing ul li a:hover {
  border-bottom: 2px solid grey;
}

.block-unccd-app-agenda-item-calendar .days-listing ul li a.current-day,
.block-unccd-app-meeting-agenda-actions .days-listing ul li a.current-day {
  color: white;
  background-color: #00abf1;
  border: 1px solid #00abf1;
  height: 300px;
  width: 300px;
  padding: 5px;
  white-space: nowrap;
}

.block-unccd-app-agenda-item-calendar .current-date,
.block-unccd-app-meeting-agenda-actions .current-date {
  font-size: 19px;
  display: inline-block;
  text-align: left;
  color: #757063;
  float: left;
  width: auto;
}

.block-unccd-app-agenda-item-calendar .navigate-next,
.block-unccd-app-meeting-agenda-actions .navigate-next {
  display: inline-block;
  float: left;
}

.block-unccd-app-agenda-item-calendar .navigate-next a,
.block-unccd-app-meeting-agenda-actions .navigate-next a {
  font-size: 22px;
}

.block-unccd-app-agenda-item-calendar .navigate-previous,
.block-unccd-app-meeting-agenda-actions .navigate-previous {
  display: inline-block;
  float: left;
}

.block-unccd-app-agenda-item-calendar .navigate-previous a,
.block-unccd-app-meeting-agenda-actions .navigate-previous a {
  font-size: 22px;
}

.block-unccd-app-agenda-item-calendar .go-back,
.block-unccd-app-meeting-agenda-actions .go-back {
  float: left;
}

.block-unccd-app-agenda-item-calendar .go-back a,
.block-unccd-app-meeting-agenda-actions .go-back a {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
}

.block-unccd-app-agenda-item-calendar .printable-version,
.block-unccd-app-meeting-agenda-actions .printable-version {
  clear: both;
  font-size: 15px;
  line-height: 27px;
  text-align: left;
  padding-top: 15px;
}

.block-unccd-app-agenda-item-calendar .printable-version a,
.block-unccd-app-meeting-agenda-actions .printable-version a {
  color: #757063;
  padding-left: 32px;
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: left;
  cursor: pointer;
}

#block-unccdagendaitemcalendar {
  padding-top: 2px;
}

ul.agenda-categories {
  padding: 0;
  list-style-type: none;
}

ul.agenda-categories a {
  color: #00abf1;
  display: block;
  padding: 7px;
}

ul.agenda-categories li.current-day,
ul.agenda-categories a.current-day {
  border: 1px solid #00abf1;
  border-radius: 5px;
}

ul.agenda-categories li a .num {
  float: right;
}

ul.menu--meeting-agenda {
  border-top: 1px solid black;
}

ul.menu--meeting-agenda.nav > li > a {
  padding: 7px;
}

.view-meeting-agenda-page .views-row {
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 23px;
  margin-bottom: 7px;
}

.view-meeting-agenda-page h2 {
  margin-top: 0;
  font-size: 19px;
  margin-bottom: 0px;
}

.view-meeting-agenda-page h3 {
  border-bottom: 2px solid #00abf1;
  padding-bottom: 6px;
  padding-top: 52px;
}

.view-meeting-agenda-page .field--name-field-location {
  font-size: 110%;
}

.view-meeting-agenda-page .field--name-field-evt-date {
  font-size: 110%;
  font-weight: bold;
  color: black;
}

.view-meeting-agenda-page .layout--threecol {
  display: flex;
  flex-wrap: wrap;
}

.view-meeting-agenda-page .layout--threecol > .layout__region--first {
  flex: 0 1 18%;
  padding-top: 15px;
  padding-left: 10px;
}

.view-meeting-agenda-page .layout--threecol > .layout__region--middle {
  flex: 0 1 6%;
  padding-top: 15px;
}

.view-meeting-agenda-page .layout--threecol > .layout__region--second {
  flex: 0 1 76%;
  padding-top: 15px;
}

.view-meeting-agenda-page .field--name-field-evt-closed .glyphicon-lock {
  font-size: 9px;
}

.country-page .flag {
  margin-bottom: 30px;
}

.country-page .flag img {
  width: auto;
}

.country-page .info-fields {
  margin-bottom: 30px;
}

.country-page .info-fields .field__label {
  text-transform: uppercase;
}

.country-page .description {
  font-weight: bold;
  font-size: var(--font-size-m);
  margin-bottom: 30px;
}

.country-page .country-section-header {
  margin-bottom: 30px;
}

.block-unccd-country-select .form-item {
  margin: 0;
}

.block-unccd-country-select .select2 {
  max-width: 340px;
}

.block-unccd-country-select .select2-selection {
  display: flex;
  align-items: center;
  padding: 30px 10px;
  border: 1px solid black;
  border-radius: 0;
}

.block-unccd-country-select .select2-selection__rendered {
  color: var(--color-unepBlue) !important;
  font-weight: var(--f-weight-bold);
}

.block-unccd-country-select .select2-selection__arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  width: 10px !important;
  height: 10px !important;
  top: 22px !important;
  right: 20px !important;
}

.block-unccd-country-select .select2-selection__arrow b {
  display: none;
}

.events__item {
  padding: 30px 0;
  border-bottom: 1px solid var(--color-black);
}

.events__item:first-child {
  padding-top: 0;
}

.events__item:last-child {
  border-bottom: 0;
}

.events .event:not(:last-child) {
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .events__item {
    padding: 40px 0;
  }
}

.footer {
  --footer-bg: var(--color-undpBlue);
  background-color: var(--footer-bg);
}

.footer--spacer-top {
  margin-top: 40px;
}

.footer__info {
  padding: 60px 0;
  background-color: var(--color-cream);
  margin-bottom: 30px;
}

.footer__info-contact {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-black);
}

.footer__info-contact .paragraph:not(:last-child) {
  margin-bottom: 30px;
}

.footer__info-contact .link {
  display: block;
}

.footer__info-contact .link:not(:last-child) {
  margin-bottom: 5px;
}

.footer__info-contact-list .paragraph:not(:last-child) {
  margin-bottom: 0;
}

.footer__info-contact-list .link__text {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.footer__info-contact-list .link__text span {
  margin-right: 5px;
  color: var(--color-black);
}

.footer__info-partner:not(:last-child) {
  margin-bottom: 18px;
}

.footer__info-partner .link__text {
  color: var(--color-blue);
}

.footer__top {
  background-color: var(--footer-bg);
  padding: 45px 0;
}

.footer__top .icon svg {
  fill: var(--footer-bg);
}

.footer__top-content .socials {
  flex: 1;
}

.footer__top-content-left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.footer__top-content-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  margin-top: 15px;
}

.footer__top-content-right .footer__nav {
  margin-top: 1.5rem;
}

.footer__nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.footer__nav-item:not(:last-child) {
  margin-bottom: 30px;
}

.footer__nav-item .menu {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5em;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
}

.footer__nav-item .menu .link {
  color: inherit;
  font-size: 3.8vw;
}

.footer__nav-item .menu__item {
  text-align: center;
}

.footer__nav-item .menu__item:not(:last-child) {
  margin-right: 0;
}

.footer__nav-item .menu__item:not(:last-child):not(:nth-child(3)) {
  margin-right: 0;
}

.footer__nav-item .menu__item:not(:last-child):not(:nth-child(3)) .link::after {
  content: '|';
  margin-left: .8em;
  margin-right: .8em;
}

.footer__bottom {
  position: relative;
  z-index: 1;
  background-color: var(--color-unepBlue);
  box-shadow: 0 -5px 3px rgba(0, 0, 0, 0.02);
}

.footer__bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 15px 0;
}

.footer__bottom-content .menu {
  display: none;
}

.footer .logo {
  display: flex;
  justify-content: center;
  max-width: 100%;
  justify-content: center;
}

@media (min-width: 425px) {
  .footer__nav-item .menu {
    max-width: 400px;
  }
  .footer__nav-item .menu .link {
    font-size: var(--f-size-p-s-font-size);
  }
}

@media (min-width: 768px) {
  .footer__top {
    padding: 70px 0;
  }
  .footer__info-partners {
    display: flex;
    padding-top: 40px;
  }
  .footer__info-partner {
    flex: 1;
  }
  .footer__info-partner:not(:last-child) {
    margin-right: 40px;
    margin-bottom: 0;
  }
  .footer__top-content {
    display: flex;
  }
  .footer__top-content-left {
    width: 50%;
  }
  .footer__top-content-right {
    width: 50%;
  }
  .footer__top-content .socials {
    flex: none;
    max-width: 200px;
    justify-content: flex-end;
  }
  .footer__top-content-right {
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .footer__nav {
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
  }
  .footer__nav:not(:last-child) {
    margin-right: 0;
    margin-bottom: 30px;
  }
  .footer__nav-item:not(:last-child) {
    margin-bottom: 0;
    margin-right: 50px;
  }
  .footer__nav-item .menu {
    justify-content: flex-end;
  }
  .footer__bottom-content .menu {
    display: flex;
  }
  .footer .logo__link {
    width: 340px;
    height: 92px;
  }
}

@media (min-width: 1000px) {
  .footer--spacer-top {
    margin-top: 84px;
  }
  .footer.no-margin-top {
    margin-top: 0;
  }
  .footer__info-container {
    display: flex;
  }
  .footer__info-container.reverse {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .footer__info-container.reverse .footer__info-contact {
    padding-right: 0;
    padding-left: 40px;
    border-right: 0;
    margin-left: 250px;
  }
  .footer__info-container.reverse .footer__info-partners {
    padding-right: 40px;
    padding-left: 0;
  }
  .footer__info-container.reverse .footer__info-contact,
  .footer__info-container.reverse .footer__info-partners {
    flex-basis: 50%;
  }
  .footer__info-container.reverse::after {
    content: "";
    height: 240px;
    width: 1px;
    background-color: var(--color-black);
    display: block;
    position: absolute;
    left: 50%;
  }
  .footer__info-contact {
    padding-right: 40px;
    border-bottom: none;
  }
  .footer__info-contact:not(:last-child) {
    border-right: 1px solid var(--color-black);
  }
  .footer__info-partners {
    padding-top: 0;
  }
  .footer__top-content {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .footer__top-content .socials {
    flex: initial;
    width: unset;
    max-width: unset;
  }
  .footer__top-content .socials__item:last-child {
    margin-right: 0;
  }
  .footer__nav:not(:last-child) {
    margin-bottom: 0;
    margin-right: 30px;
  }
}

@media (min-width: 1280px) {
  .footer__nav-item .menu {
    max-width: none;
  }
  .footer__nav-item .menu__item:not(:last-child) .link::after {
    content: '|';
    margin-left: .8em;
    margin-right: .8em;
  }
}

@media (min-width: 1430px) {
  .footer .social-link {
    width: 50px;
    height: 50px;
  }
  .footer__info-contact {
    padding-right: 90px;
  }
  .footer__info-partner:not(:last-child) {
    margin-right: 60px;
  }
  .footer__top {
    padding: 70px 0 60px;
  }
  .footer__top-content {
    min-height: 210px;
  }
  .footer__nav .link {
    font-size: 18px;
  }
  .footer__nav-item .menu .link {
    font-size: var(--font-size-base);
  }
  .footer__bottom-content {
    padding: 20px 0;
  }
  .footer-third {
    min-width: 33%;
  }
  .footer-half {
    min-width: 49%;
  }
}

@media (max-width: 424px) {
  .page-head .heading {
    font-size: var(--font-size-mx);
    line-height: 36px;
  }
}

.page-head .heading:not(:last-child) {
  margin-bottom: 30px;
}

.page-head ul {
  list-style-type: none;
}

.page-head__container {
  display: flex;
}

.page-head__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  padding: 20px 40px;
}

.page-head__info--white {
  background-color: var(--color-white);
}

.page-head__info--black {
  background-color: var(--color-black);
}

.page-head__info--blackRgba {
  background-color: var(--color-blackRgba);
}

.page-head__info--blue {
  background-color: var(--color-blue);
}

.page-head__info--gray {
  background-color: var(--color-gray);
}

.page-head__info--mandarin {
  background-color: var(--color-mandarin);
}

.page-head__info--egg {
  background-color: var(--color-egg);
}

.page-head__info--unepBlue {
  background-color: var(--color-unepBlue);
}

.page-head__info--undpBlue {
  background-color: var(--color-undpBlue);
}

.page-head__info--undpBlueRgba {
  background-color: var(--color-undpBlueRgba);
}

.page-head__info--frog {
  background-color: var(--color-frog);
}

.page-head__info--grass {
  background-color: var(--color-grass);
}

.page-head__info--forest {
  background-color: var(--color-forest);
}

.page-head__info--cream {
  background-color: var(--color-cream);
}

.page-head__info--silver {
  background-color: var(--color-silver);
}

.page-head__info--silverRgba {
  background-color: var(--color-silverRgba);
}

.page-head__info--earthbornBugle {
  background-color: var(--color-earthbornBugle);
}

.page-head__info--fruidSalad {
  background-color: var(--color-fruidSalad);
}

.page-head__info--parFourGreen {
  background-color: var(--color-parFourGreen);
}

.page-head__info--green {
  background-color: var(--color-forest);
}

.page-head__info--orange {
  background-color: var(--color-mandarin);
}

.page-head__info--blue {
  background-color: var(--color-undpBlue);
}

.page-head__info--light-blue {
  background-color: var(--color-unepBlue);
}

.page-head--full .page-head__info {
  flex: 1;
  width: 100%;
}

.page-head .breadcrumb {
  display: none;
}

.page-head__image {
  display: none;
  flex: 0 0 50%;
  width: 50%;
  height: 310px;
}

.page-head__image .image {
  height: 100%;
}

.page-head__image .image img {
  height: 100%;
}

.page-head__link {
  margin-top: 30px;
}

.page-head__info-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

@media (max-width: 424px) {
  .page-head__info-list .hero__info-item {
    display: none;
  }
  .page-head__info-list .hero__info-item:first-child {
    display: block;
  }
  .page-head__info-list .hero__info-item:first-child:before {
    display: none;
  }
}

.page-head__info-item {
  position: relative;
  padding: 0 10px;
}

.page-head__info-item:first-child {
  padding-left: 0;
}

.page-head__info-item:last-child {
  padding-right: 0;
}

.page-head__info-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 27%;
  right: 0;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .page-head__info {
    flex: 1 0 50%;
    width: 50%;
  }
  .page-head__image {
    display: block;
  }
  .page-head .breadcrumb {
    display: flex;
  }
  .page-head__link {
    margin-top: 40px;
  }
  .page-head__info-list {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
  }
  .page-head__info-item {
    position: relative;
    padding: 0 10px;
  }
  .page-head__info-item:first-child {
    padding-left: 0;
  }
  .page-head__info-item:last-child {
    padding-right: 0;
  }
  .page-head__info-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 27%;
    right: 0;
    width: 1px;
    height: 16px;
    margin-top: -8px;
    background-color: var(--color-white);
  }
}

@media (min-width: 1430px) {
  .page-head {
    min-height: 310px;
  }
  .page-head__info {
    padding: 40px 40px 40px 77px;
    height: 310px;
  }
  .page-head__image {
    height: 310px;
  }
  .page-head--full {
    min-height: 240px;
  }
  .page-head--full .page-head__info {
    min-height: 240px;
    height: 100%;
  }
  .page-head--event {
    min-height: 450px;
  }
  .page-head--event .page-head__info {
    flex: 1 0 68%;
    height: 450px;
    padding: 40px 120px 40px 77px;
    width: 68%;
  }
  .page-head--event .page-head__image {
    flex: 0 0 32%;
    height: 450px;
    width: 32%;
  }
  .page-head--event .page-head__image .date--image {
    height: 450px;
  }
  .page-head--event .page-head__image .date--image .date__content {
    height: 190px;
    width: 190px;
  }
  .page-head--event .page-head__image .date--image .date__content strong {
    font-size: var(--f-size-heading-2-font-size);
    line-height: var(--f-size-heading-2-line-height);
  }
  .page-head--event .page-head__image .date--image .date__content strong.small {
    font-size: var(--f-size-heading-2-font-size);
    line-height: var(--f-size-heading-2-line-height);
  }
  .page-head--event .page-head__image .date--image .date__content span {
    font-size: var(--f-size-heading-8-font-size);
    line-height: var(--f-size-heading-8-line-height);
  }
}

@media (max-width: 1670px) {
  .page-head--event .page-head__image {
    height: auto;
  }
  .page-head--event .page-head__image .date--image {
    height: 100%;
  }
}

.header {
  position: relative;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-height: 60px;
  background-color: var(--color-white);
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.2);
}

.header__top {
  display: none;
  padding: 7px 0;
  background-color: var(--color-unepBlue);
}

.header__top-content {
  display: flex;
  justify-content: flex-end;
}

.header__main {
  display: flex;
  flex: 1;
}

.header__main .constrained {
  height: auto;
}

.header__main-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header__mobile {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: -15px;
}

.header__mobile .search {
  position: absolute;
  top: calc(100% + 20px);
  right: 0;
  left: 0;
  padding: 15px;
  background-color: #007dbc;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease,top .3s ease,visibility 0s linear .3s;
}

.header__mobile .search.show {
  top: 100%;
  visibility: visible;
  opacity: 1;
  transition: opacity .3s ease,top .3s ease,visibility 0s linear;
}

.header__mobile .search__form {
  width: 100%;
}

.header__mobile .search__input {
  width: 100%;
  height: 36px;
  border-bottom: 1px solid var(--color-white);
}

.header__mobile .search__input:focus {
  box-shadow: none;
}

.header__btn-search {
  width: 24px;
  height: 24px;
  margin-right: 20px;
  padding: 0;
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}

.header__btn-nav {
  height: 100%;
  padding: 20px;
  background-color: #f5f5f5;
  border: none;
  outline: none;
  cursor: pointer;
}

.header__btn-nav.active .header__btn-line {
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.header__btn-nav.active .header__btn-line::before {
  transform: translate3d(0, 0, 0) scale(0);
  opacity: 0;
}

.header__btn-nav.active .header__btn-line::after {
  transform: translate3d(0, 0, 0) rotate(90deg);
}

.header__btn-line {
  position: relative;
  display: block;
  width: 30px;
  height: 4px;
  background-color: #007dbc;
  border-radius: 2px;
  transition: transform 200ms;
  transform: translate3d(0, 0, 0);
}

.header__btn-line::before, .header__btn-line::after {
  content: "";
  position: absolute;
  left: 0;
  width: 30px;
  height: 4px;
  background-color: #007dbc;
  border-radius: 2px;
  transition: transform 200ms, opacity 200ms;
}

.header__btn-line::before {
  transform: translate3d(0, 10px, 0);
}

.header__btn-line::after {
  transform: translate3d(0, -10px, 0);
}

@media (min-width: 760px) {
  .header__top {
    display: block;
  }
  .header__btn-search {
    display: none;
  }
  .header__btn-nav {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

@media (min-width: 1000px) {
  .header__main-content {
    align-items: baseline;
    padding: 10px 0;
  }
  .header__mobile {
    display: none;
  }
}

@media (min-width: 1435px) {
  .header__main-content {
    min-width: 1400px;
    padding: 30px 10px 20px;
  }
}

.hero {
  position: relative;
  height: 250px;
}

.hero .breadcrumb {
  display: none;
  margin-bottom: 30px;
}

.hero .breadcrumb--margin-bottom-10 {
  margin-bottom: 10px;
}

.hero .breadcrumb--margin-bottom-22 {
  margin-bottom: 22px;
}

.hero .breadcrumb--margin-bottom-40 {
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .hero {
    height: 450px;
  }
  .hero .breadcrumb {
    display: flex;
  }
}

.hero__container {
  position: relative;
  display: flex;
  height: 100%;
}

.hero__info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 40px;
}

@media (max-width: 424px) {
  .hero__info .heading {
    font-size: var(--font-size-mx);
    line-height: 36px;
  }
}

.hero__info .heading:not(:last-child) {
  margin-bottom: 30px;
}

.hero__info-items {
  margin-top: 40px;
}

.hero__info-items p {
  color: var(--color-white);
}

.hero__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hero__image picture {
  width: 66%;
  position: absolute;
  right: 0;
  height: 100%;
}

.hero__image picture img {
  height: 100%;
}

.hero--background-white {
  background-color: var(--color-white);
}

.hero--background-black {
  background-color: var(--color-black);
}

.hero--background-blackRgba {
  background-color: var(--color-blackRgba);
}

.hero--background-blue {
  background-color: var(--color-blue);
}

.hero--background-gray {
  background-color: var(--color-gray);
}

.hero--background-mandarin {
  background-color: var(--color-mandarin);
}

.hero--background-egg {
  background-color: var(--color-egg);
}

.hero--background-unepBlue {
  background-color: var(--color-unepBlue);
}

.hero--background-undpBlue {
  background-color: var(--color-undpBlue);
}

.hero--background-undpBlueRgba {
  background-color: var(--color-undpBlueRgba);
}

.hero--background-frog {
  background-color: var(--color-frog);
}

.hero--background-grass {
  background-color: var(--color-grass);
}

.hero--background-forest {
  background-color: var(--color-forest);
}

.hero--background-cream {
  background-color: var(--color-cream);
}

.hero--background-silver {
  background-color: var(--color-silver);
}

.hero--background-silverRgba {
  background-color: var(--color-silverRgba);
}

.hero--background-earthbornBugle {
  background-color: var(--color-earthbornBugle);
}

.hero--background-fruidSalad {
  background-color: var(--color-fruidSalad);
}

.hero--background-parFourGreen {
  background-color: var(--color-parFourGreen);
}

.hero--gradient, .hero--background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.hero--large {
  height: auto;
}

.hero--large .hero__image picture {
  width: 100%;
}

.hero--large .hero__info {
  flex: 0 0 100%;
  width: 100%;
}

.hero__info-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

@media (max-width: 424px) {
  .hero__info-list .hero__info-item {
    display: none;
  }
  .hero__info-list .hero__info-item:first-child {
    display: block;
  }
  .hero__info-list .hero__info-item:first-child:before {
    display: none;
  }
}

.hero__info-item {
  position: relative;
  padding: 0 10px;
}

.hero__info-item:first-child {
  padding-left: 0;
}

.hero__info-item:last-child {
  padding-right: 0;
}

.hero__info-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 27%;
  right: 0;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background-color: var(--color-white);
}

.hero--bg {
  width: 100%;
  height: auto;
}

.hero--bg .hero__info {
  align-items: flex-start;
}

@media (min-width: 1280px) {
  .hero--bg {
    height: auto;
    min-height: 500px;
  }
}

.hero__decoration {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: none;
  align-items: flex-end;
}

.hero__decoration img {
  display: block;
  object-fit: cover;
  object-position: left;
  width: auto;
  height: 70%;
}

.hero--gradient-white {
  background: var(--color-white);
  background: linear-gradient(90deg, var(--color-white) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-white {
    background: linear-gradient(90deg, var(--color-white) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-black {
  background: var(--color-black);
  background: linear-gradient(90deg, var(--color-black) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-black {
    background: linear-gradient(90deg, var(--color-black) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-blackRgba {
  background: var(--color-blackRgba);
  background: linear-gradient(90deg, rgba(var(--color-blackRgba), 0.6) 43%, rgba(0, 0, 0, 0) 100%);
}

.hero--gradient-blue {
  background: var(--color-blue);
  background: linear-gradient(90deg, var(--color-blue) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-blue {
    background: linear-gradient(90deg, var(--color-blue) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-gray {
  background: var(--color-gray);
  background: linear-gradient(90deg, var(--color-gray) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-gray {
    background: linear-gradient(90deg, var(--color-gray) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-mandarin {
  background: var(--color-mandarin);
  background: linear-gradient(90deg, var(--color-mandarin) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-mandarin {
    background: linear-gradient(90deg, var(--color-mandarin) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-egg {
  background: var(--color-egg);
  background: linear-gradient(90deg, var(--color-egg) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-egg {
    background: linear-gradient(90deg, var(--color-egg) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-unepBlue {
  background: var(--color-unepBlue);
  background: linear-gradient(90deg, var(--color-unepBlue) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-unepBlue {
    background: linear-gradient(90deg, var(--color-unepBlue) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-undpBlue {
  background: var(--color-undpBlue);
  background: linear-gradient(90deg, var(--color-undpBlue) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-undpBlue {
    background: linear-gradient(90deg, var(--color-undpBlue) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-undpBlueRgba {
  background: var(--color-undpBlueRgba);
  background: linear-gradient(90deg, var(--color-undpBlueRgba) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-undpBlueRgba {
    background: linear-gradient(90deg, var(--color-undpBlueRgba) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-frog {
  background: var(--color-frog);
  background: linear-gradient(90deg, var(--color-frog) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-frog {
    background: linear-gradient(90deg, var(--color-frog) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-grass {
  background: var(--color-grass);
  background: linear-gradient(90deg, var(--color-grass) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-grass {
    background: linear-gradient(90deg, var(--color-grass) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-forest {
  background: var(--color-forest);
  background: linear-gradient(90deg, var(--color-forest) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-forest {
    background: linear-gradient(90deg, var(--color-forest) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-cream {
  background: var(--color-cream);
  background: linear-gradient(90deg, var(--color-cream) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-cream {
    background: linear-gradient(90deg, var(--color-cream) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-silver {
  background: var(--color-silver);
  background: linear-gradient(90deg, var(--color-silver) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-silver {
    background: linear-gradient(90deg, var(--color-silver) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-silverRgba {
  background: var(--color-silverRgba);
  background: linear-gradient(90deg, var(--color-silverRgba) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-silverRgba {
    background: linear-gradient(90deg, var(--color-silverRgba) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-earthbornBugle {
  background: var(--color-earthbornBugle);
  background: linear-gradient(90deg, var(--color-earthbornBugle) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-earthbornBugle {
    background: linear-gradient(90deg, var(--color-earthbornBugle) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-fruidSalad {
  background: var(--color-fruidSalad);
  background: linear-gradient(90deg, var(--color-fruidSalad) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-fruidSalad {
    background: linear-gradient(90deg, var(--color-fruidSalad) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

.hero--gradient-parFourGreen {
  background: var(--color-parFourGreen);
  background: linear-gradient(90deg, var(--color-parFourGreen) 37%, rgba(0, 0, 0, 0) 75%);
}

@media (min-width: 768px) {
  .hero--gradient-parFourGreen {
    background: linear-gradient(90deg, var(--color-parFourGreen) 37%, rgba(0, 0, 0, 0) 75%);
  }
}

@media (min-width: 768px) {
  .hero__info {
    flex: auto;
  }
  .hero--bg-medium .hero__info, .hero--bg-small .hero__info {
    flex: 0 0 80%;
    width: 80%;
  }
}

@media (min-width: 1000px) {
  .hero__info {
    flex: 0 0 51%;
    width: 51%;
  }
  .hero__decoration {
    display: flex;
  }
}

@media (min-width: 1280px) {
  .hero__info {
    padding-left: 60px;
  }
  .hero--large {
    height: 600px;
  }
  .hero--large .heading {
    width: 80%;
  }
  .hero--bg-small {
    min-height: 100%;
    height: 310px;
  }
  .hero--bg-medium {
    min-height: 400px;
  }
}

@media (min-width: 1430px) {
  .hero--bg .hero__info {
    flex: 0 0 41%;
    width: 41%;
    padding-top: 90px;
    padding-bottom: 90px;
  }
  .hero--bg-medium .hero__info, .hero--bg-small .hero__info {
    flex: 0 0 60%;
    width: 600%;
  }
  .hero__decoration img {
    height: 100%;
  }
  .hero--bg-small .hero__decoration img {
    height: 92%;
  }
}

.news-latest {
  padding-right: 90px;
}

.related-news .topic__image, .related-news-3col .topic__image {
  height: auto;
}

.basic-type .field {
  max-width: unset !important;
  padding-bottom: 10px;
}

.basic-type .field--label-inline > .field__label {
  box-sizing: border-box;
  display: inline-block;
  float: left;
  padding-right: 16px;
  text-align: right;
  width: 30%;
}

.basic-type .field--label-inline > .field__items,
.basic-type .field--label-inline > .field__item {
  box-sizing: border-box;
  display: inline-block;
  float: right;
  width: 70%;
}

.basic-type .field--label-inline > .field__items .field__item,
.basic-type .field--label-inline > .field__item .field__item {
  display: inline;
}

.basic-type .field--label-inline > .field__items .field__item:not(:last-child)::after,
.basic-type .field--label-inline > .field__item .field__item:not(:last-child)::after {
  content: ",";
}

.basic-type .field--type-language-field .field__item:not(:last-child)::after {
  content: "" !important;
}

.basic-type .field--type-language-field .field__item:not(:last-child) p::after {
  content: ",";
}

.basic-type .field--type-language-field .field__item p {
  display: inline;
}

.basic-type .field--type-image {
  text-align: center;
}

.basic-type .vacancy-document.not-empty-file {
  height: 85vh;
}

.node--view-mode-full .block-layout-builder > .field--label-inline {
  display: flex;
}

.node--view-mode-full .block-layout-builder > .field--label-inline .field__label {
  flex: 0 0 auto;
}

.node--view-mode-full .block-layout-builder > .field--label-inline .field__items {
  display: inline-block;
}

.node--view-mode-full .block-layout-builder > .field--label-inline .field__item {
  display: inline;
}

.node--view-mode-full .block-layout-builder > .field--label-inline .field__item:not(:last-child):after {
  content: ', ';
}

.section-nav {
  width: 100%;
  margin-bottom: 30px;
}

.section-nav__item {
  padding: 24px 32px;
  box-shadow: 0 0 7px 2px rgba(var(--color-blackRgba), 0.2);
}

.section-nav__item .paragraph:not(:last-child) {
  margin-bottom: 20px;
}

.section-nav__item:not(:last-child) {
  margin-bottom: 17px;
}

.section-nav__filter-item.active {
  padding-bottom: 15px;
}

.section-nav__filter-item.active > .section-nav__filter-head::before {
  opacity: 1;
}

.section-nav__filter-item.active > .section-nav__filter-head > .icon {
  transform: rotate(90deg);
}

.section-nav__filter-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--color-gray);
}

.section-nav__filter-head::before {
  content: "";
  position: absolute;
  top: 0;
  right: -32px;
  bottom: 0;
  left: -32px;
  z-index: -1;
  border: 1px solid var(--color-black);
  opacity: 0;
  transition: opacity .3s;
}

.section-nav__documents .section-nav__filter-head::before {
  opacity: 1;
}

.section-nav__filter-head .icon {
  transform-origin: center;
  transition: transform .3s;
}

.section-nav__filter-head .icon svg {
  fill: var(--color-black);
}

.section-nav__filter-head .paragraph:not(:last-child) {
  margin-right: 20px;
  margin-bottom: 0;
}

.section-nav__sub {
  display: none;
  max-height: 330px;
  overflow: auto;
  margin-right: -20px;
  padding-right: 20px;
  margin-top: 15px;
  padding-top: 10px;
}

.section-nav__sub > ul {
  margin-top: -15px;
}

.section-nav__sub::-webkit-scrollbar {
  width: 8px;
}

.section-nav__sub::-webkit-scrollbar-track {
  background: transparent;
}

.section-nav__sub::-webkit-scrollbar-thumb {
  background-color: #d3dbdf;
  border-radius: 20px;
  border: 3px solid transparent;
  height: 40px;
}

.section-nav__sub-item {
  padding: 19px 0;
}

.section-nav__sub-item:not(:last-child) {
  border-bottom: 1px solid var(--color-gray);
}

.section-nav .list-item:not(:last-child) {
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-gray);
}

.section-nav .list-item:not(:last-child).no-border {
  border-bottom: none;
}

.section-nav .list-item:last-child {
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-gray);
}

.section-nav .list-item:last-child.no-border {
  border-bottom: none;
}

.section-nav .link {
  justify-content: space-between;
  width: 100%;
  padding: 19px 0;
}

.section-nav__heading {
  display: none;
  margin-bottom: 30px;
}

.section-nav__heading > .heading {
  color: var(--color-unepBlue);
}

.section-nav .date--image:not(:last-child) {
  margin-bottom: 40px;
}

.section-nav__list:not(:last-child) {
  margin-bottom: 40px;
}

.section-nav__list .heading {
  color: var(--color-black);
}

.section-nav__list .heading--white {
  color: var(--color-white);
}

.section-nav__list .heading--black {
  color: var(--color-black);
}

.section-nav__list .heading--blue {
  color: var(--color-blue);
}

.section-nav__list .heading--gray {
  color: var(--color-gray);
}

.section-nav__list .heading--mandarin {
  color: var(--color-mandarin);
}

.section-nav__list .heading--egg {
  color: var(--color-egg);
}

.section-nav__list .heading--unepBlue {
  color: var(--color-unepBlue);
}

.section-nav__list .heading--undpBlue {
  color: var(--color-undpBlue);
}

.section-nav__list .heading--undpBlueRgba {
  color: var(--color-undpBlueRgba);
}

.section-nav__list .heading--frog {
  color: var(--color-frog);
}

.section-nav__list .heading--grass {
  color: var(--color-grass);
}

.section-nav__list .heading--forest {
  color: var(--color-forest);
}

.section-nav__list .heading--cream {
  color: var(--color-cream);
}

.section-nav__list .heading--silver {
  color: var(--color-silver);
}

.section-nav__list .heading--silverRgba {
  color: var(--color-silverRgba);
}

.section-nav__list .heading--earthbornBugle {
  color: var(--color-earthbornBugle);
}

.section-nav__list .heading--fruidSalad {
  color: var(--color-fruidSalad);
}

.section-nav__list .heading--parFourGreen {
  color: var(--color-parFourGreen);
}

.section-nav__list .heading--invert {
  filter: invert(1);
}

.section-nav__list--white {
  padding: 34px;
  background-color: var(--color-white);
}

.section-nav__list--black {
  padding: 34px;
  background-color: var(--color-black);
}

.section-nav__list--blackRgba {
  padding: 34px;
  background-color: var(--color-blackRgba);
}

.section-nav__list--blue {
  padding: 34px;
  background-color: var(--color-blue);
}

.section-nav__list--gray {
  padding: 34px;
  background-color: var(--color-gray);
}

.section-nav__list--mandarin {
  padding: 34px;
  background-color: var(--color-mandarin);
}

.section-nav__list--egg {
  padding: 34px;
  background-color: var(--color-egg);
}

.section-nav__list--unepBlue {
  padding: 34px;
  background-color: var(--color-unepBlue);
}

.section-nav__list--undpBlue {
  padding: 34px;
  background-color: var(--color-undpBlue);
}

.section-nav__list--undpBlueRgba {
  padding: 34px;
  background-color: var(--color-undpBlueRgba);
}

.section-nav__list--frog {
  padding: 34px;
  background-color: var(--color-frog);
}

.section-nav__list--grass {
  padding: 34px;
  background-color: var(--color-grass);
}

.section-nav__list--forest {
  padding: 34px;
  background-color: var(--color-forest);
}

.section-nav__list--cream {
  padding: 34px;
  background-color: var(--color-cream);
}

.section-nav__list--silver {
  padding: 34px;
  background-color: var(--color-silver);
}

.section-nav__list--silverRgba {
  padding: 34px;
  background-color: var(--color-silverRgba);
}

.section-nav__list--earthbornBugle {
  padding: 34px;
  background-color: var(--color-earthbornBugle);
}

.section-nav__list--fruidSalad {
  padding: 34px;
  background-color: var(--color-fruidSalad);
}

.section-nav__list--parFourGreen {
  padding: 34px;
  background-color: var(--color-parFourGreen);
}

.section-nav__list .section-nav__heading {
  display: block;
}

.section-nav__element:not(:last-child) {
  margin-bottom: 40px;
}

.section-nav__element .publication__image:not(:last-child) {
  margin-bottom: 20px;
}

.section-nav__element .publication__caption:not(:last-child) {
  margin-bottom: 15px;
}

.section-nav__element .event:not(:last-child) {
  margin-bottom: 30px;
}

.section-nav__value {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.section-nav__publication .head {
  margin-bottom: 30px;
}

.section-nav__publication .cta-button {
  margin-top: 30px;
}

.section-nav__element .section-nav__documents {
  width: 100%;
}

.section-nav__documents .section-nav__head {
  background-color: var(--color-mandarin);
  padding: var(--spacing-m) var(--spacing-l);
}

.section-nav__documents .section-nav__head .paragraph {
  color: var(--color-black);
}

.section-nav__documents .section-nav__list {
  box-shadow: 0 4px 8px 0 var(--color-gray);
}

.section-nav__documents .section-nav__list .section-nav__item {
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: unset;
}

.section-nav__documents .section-nav__list .section-nav__filter-head {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .section-nav {
    margin-bottom: 0;
  }
}

@media (min-width: 1000px) {
  .section-nav {
    flex: 0 0 340px;
    width: 340px;
  }
  .section-nav--medium {
    flex: 0 0 400px;
    width: 400px;
  }
  .section-nav__heading {
    display: block;
  }
}

.section-nav__list .link {
  justify-content: space-between;
  width: 100%;
}

.block-unccd-related, .block-unccd-related .section-nav__list, .block-unccd-related .section-nav,
.section-nav.block-unccd-menu-item-block,
.section-nav.block-unccd-menu-item-block .section-nav__list,
.section-nav.block-unccd-menu-item-block .section-nav,
.block-views-blocksessions-recent-sessions,
.block-views-blocksessions-recent-sessions .section-nav__list,
.block-views-blocksessions-recent-sessions .section-nav {
  margin-right: 0;
  margin-left: 0;
  width: 100%;
  flex: 1 0 auto;
}

@media (min-width: 768px) {
  .section-container > .section-nav {
    margin-right: 30px;
    width: auto;
  }
}

@media (min-width: 1430px) {
  .section-container > .section-nav {
    margin-right: 80px;
  }
  .section-container > .section-nav--medium {
    margin-right: 93px;
  }
}

.section-nav-link-list {
  box-shadow: none;
  padding-top: 0;
  padding-bottom: 0;
}

.section-nav-link-list .section-nav__item {
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: none;
}

.section-nav-link-list .section-nav__item .section-nav__filter-item {
  margin: 0 -30px;
  padding-left: 30px;
  padding-right: 30px;
}

.section-nav-link-list .section-nav__item .section-nav__filter-item.active {
  box-shadow: 0 0 7px 2px rgba(var(--color-blackRgba), 0.2);
}

.section-nav-link-list .section-nav__item .section-nav__filter-item.active .section-nav__filter-head .icon {
  transform: rotate(270deg);
}

.section-nav-link-list .section-nav__item .section-nav__filter-item .section-nav__filter-head .icon {
  transform: rotate(90deg);
}

.section-nav-link-list .section-nav__item .section-nav__filter-item .section-nav__filter-head:before {
  opacity: 1;
}

.sidebar {
  width: 100%;
  margin-top: 30px;
}

.sidebar__heading:not(:last-child) {
  margin-bottom: 36px;
}

.sidebar__image {
  width: 100%;
}

.sidebar__image .image {
  height: 300px;
}

.sidebar__image .image:not(:last-child) {
  margin-bottom: 22px;
}

.sidebar__image:not(:last-child) {
  margin-bottom: 50px;
}

.sidebar__list .list-item {
  border-bottom: 1px solid var(--color-gray);
}

.sidebar__list .list-item:first-child {
  border-top: 1px solid var(--color-gray);
}

.sidebar__list .list-item:not(:last-child) {
  margin-bottom: 0;
}

.sidebar__list .link {
  justify-content: space-between;
  width: 100%;
  padding: 19px 0;
}

@media (min-width: 768px) {
  .sidebar {
    flex: 0 0 310px;
    width: 310px;
    margin-top: 0;
    margin-left: 36px;
  }
  .sidebar__list {
    width: 280px;
    margin-left: auto;
  }
}

@media (min-width: 1000px) {
  .sidebar {
    margin-left: 56px;
  }
}

@media (min-width: 1280px) {
  .sidebar {
    flex: 0 0 400px;
    width: 400px;
    margin-left: 56px;
  }
  .sidebar__list {
    width: 340px;
  }
  .sidebar__image .image {
    height: 388px;
  }
  .sidebar__image:not(:last-child) {
    margin-bottom: 100px;
  }
}

.sidebar-exposed-form .form-checkboxes .form-item, .sidebar-exposed-form .form-radios .form-item {
  border-bottom: 1px solid var(--color-gray);
  padding: 19px 0;
}

.sidebar-exposed-form .checkbox {
  margin-bottom: 0;
}

.sidebar-exposed-form .section-nav__sub {
  max-height: 300px;
  overflow: auto;
}

.sidebar-exposed-form .form-item {
  margin: 0;
}

.field + .field--name-description {
  margin-top: var(--spacing-s);
}

.toolbox-cards {
  display: block;
  justify-content: center;
  font-size: 0;
}

@media (min-width: 768px) {
  .toolbox-cards {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -9px;
  }
}

.toolbox-nav {
  width: 100%;
  background-color: var(--color-undpBlue);
}

.toolbox-nav .toolbox-nav__item:not(:last-child) {
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-gray);
}

.toolbox-nav .toolbox-nav__item:not(:last-child).no-border {
  border-bottom: none;
}

.toolbox-nav .toolbox-nav__item:last-child {
  margin-bottom: 0;
  border-bottom: none !important;
}

.toolbox-nav .toolbox-nav__item:last-child.no-border {
  border-bottom: none;
}

.toolbox-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toolbox-nav__item.active .link::before {
  opacity: 1;
}

.toolbox-nav__item .link {
  position: relative;
  z-index: 1;
  display: flex;
  padding: 15px;
  color: var(--color-unepBlue);
  transition: color .3s;
}

.toolbox-nav__item .link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  background-color: var(--color-egg);
  opacity: 0;
  transition: opacity .3s;
}

.toolbox-nav__item .link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #0070b0;
  opacity: 0;
  transition: opacity .3s;
}

.toolbox-nav__item .link .icon {
  height: 30px;
}

.toolbox-nav__item .link .icon svg {
  width: 30px;
  height: 30px;
  transition: fill .3s;
}

.toolbox-nav__item .link:hover, .toolbox-nav__item .link:focus, .toolbox-nav__item .link:active {
  color: var(--color-white);
}

.toolbox-nav__item .link:hover .icon svg, .toolbox-nav__item .link:focus .icon svg, .toolbox-nav__item .link:active .icon svg {
  fill: var(--color-white);
}

.toolbox-nav__item .link:hover::after, .toolbox-nav__item .link:focus::after, .toolbox-nav__item .link:active::after {
  opacity: 1;
}

@media (min-width: 1000px) {
  .toolbox-nav {
    flex: 0 0 240px;
    width: 240px;
  }
  .toolbox-nav__item .link {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 45px 25px;
    text-align: center;
  }
  .toolbox-nav__item .link::before {
    width: 20px;
  }
  .toolbox-nav__item .link .icon {
    height: 48px;
  }
  .toolbox-nav__item .link .icon svg {
    width: 48px;
    height: 48px;
  }
  .toolbox-nav__item .link .icon:first-child {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

.top-post {
  display: flex;
  flex-wrap: wrap;
}

.top-post__item {
  width: 100%;
}

@media (min-width: 320px) {
  .top-post__item:first-child {
    margin-top: 30px;
  }
}

@media (min-width: 768px) {
  .top-post__item:first-child {
    margin-top: 0;
  }
}

.top-post__item:not(:last-child) {
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .top-post--secondary {
    flex-direction: column;
    height: 600px;
  }
  .top-post--secondary .top-post__item {
    height: calc(600px / 2);
  }
  .top-post--secondary .top-post__item .post {
    height: 300px;
  }
  .top-post--secondary .top-post__item .post--full .post__desc {
    justify-content: flex-start;
  }
  .top-post--secondary .top-post__item .post__link {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .top-post--secondary .top-post__item .post__desc {
    flex: 1;
  }
  .top-post--secondary .top-post__item:first-child {
    height: 600px;
  }
  .top-post--secondary .top-post__item:first-child .post {
    height: 100%;
  }
  .top-post--secondary .top-post__item:first-child .post__image {
    height: 450px;
  }
  .top-post__item {
    width: 50%;
  }
  .top-post__item:not(:last-child) {
    margin-bottom: 0;
  }
}

@media (min-width: 1000px) {
  .top-post {
    margin: 0;
  }
  .top-post--secondary .post__image {
    height: 150px;
  }
  .top-post__item {
    width: 50%;
    margin: 0;
  }
  .top-post__item:not(:last-child) {
    margin-bottom: 0;
  }
}

@media (min-width: 1280px) {
  .top-post--secondary {
    height: 620px;
  }
  .top-post--secondary .post__image {
    height: 100%;
  }
  .top-post--secondary .top-post__item {
    height: calc(620px / 2);
  }
  .top-post--secondary .top-post__item .post--full .post__desc {
    justify-content: flex-end;
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(var(--color-blackRgba), 0) 50%, rgba(var(--color-blackRgba), 0.8) 80%);
  }
  .top-post--secondary .top-post__item .post--left .post__link {
    flex-direction: row-reverse;
  }
  .top-post--secondary .top-post__item:first-child {
    height: 620px;
  }
  .top-post--secondary .top-post__item:first-child .post .post__image {
    height: 100%;
  }
  .top-post .post--full .post__desc {
    background-color: transparent;
  }
}

.topic-list {
  display: flex;
  flex-flow: row wrap;
  gap: 36px 24px;
}

.topic-list .topic--spacer-m {
  margin-top: 30px;
  margin-bottom: 30px;
}

.topic-list.rounded .topic__image--round {
  max-width: 100%;
  width: 270px;
  max-height: 270px;
  height: auto;
}

.topic-list.rounded .topic__image--round img {
  aspect-ratio: 1;
}

.topic-list.rounded .topic .link__text {
  text-align: center;
}

@media (min-width: 375px) {
  .topic-list .topic--fourth {
    width: calc(50% - 24px);
  }
  .topic-list.rounded {
    justify-content: space-between;
  }
  .topic-list.rounded .topic__image--round {
    width: 160px;
    max-height: 160px;
  }
  .topic-list.rounded .topic--fourth {
    width: 160px;
    margin: 12px 0;
  }
}

@media (min-width: 768px) {
  .topic-list .topic--full {
    width: 100%;
  }
  .topic-list .topic--half {
    width: calc(50% - 12px);
  }
  .topic-list .topic--fourth {
    width: calc(33.3333% - 12px);
  }
  .topic-list.rounded {
    justify-content: space-between;
  }
  .topic-list.rounded .topic__image--round {
    width: 200px;
    max-height: 200px;
  }
  .topic-list.rounded .topic--fourth {
    width: 200px;
    margin: 12px 0;
  }
}

@media (min-width: 1000px) {
  .topic-list .topic--fourth {
    width: calc(33.3333% - 24px);
  }
  .topic-list.rounded {
    justify-content: space-between;
  }
  .topic-list.rounded .topic__image--round {
    width: 230px;
    max-height: 230px;
  }
  .topic-list.rounded .topic--fourth {
    width: 230px;
    margin-left: 50px;
  }
  .topic-list.rounded .topic--fourth:nth-child(4n + 1) {
    margin-left: 0 !important;
  }
  .topic-list .topic__info {
    min-height: 95px;
  }
  .no-margin {
    margin: 0;
  }
  .no-margin .topic--full {
    margin: 0;
    width: 100%;
  }
  .no-margin .topic--half:not(:last-child) {
    width: calc(50% - 12px);
  }
  .no-margin .topic--half:last-child {
    width: calc(50% - 12px);
  }
}

@media (min-width: 1430px) {
  .topic-list .topic--fourth {
    width: calc(25% - 24px);
  }
  .topic-list.rounded .topic {
    margin-top: 0;
    margin-right: 0;
  }
  .topic-list.rounded .topic__image--round {
    margin: 0 0 15px;
  }
  .topic-list.rounded .topic--fourth {
    max-width: 230px;
  }
  .topic-list.rounded .topic .link {
    display: flex;
    height: 90px;
    align-items: flex-start;
  }
  .topic-list.rounded .topic .link .icon svg {
    fill: var(--color-black);
  }
  .topic-list.rounded .topic .link .icon:first-child {
    margin-right: 8px;
    margin-left: 0;
  }
  .topic-list.rounded .topic .link:hover .icon svg {
    fill: var(--color-unepBlue);
  }
  .topic-list.rounded .topic .link__text {
    text-align: center;
    max-width: fit-content;
  }
}

.app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.constrained {
  width: calc(100% - 30px);
  height: 100%;
  margin: 0 auto;
}

.constrained--large {
  width: calc(100% - 30px);
  margin: 0 auto;
}

.constrained--full {
  width: 100%;
}

.section {
  position: relative;
  z-index: 1;
  display: flex;
  padding: 50px 0;
}

.section.margin-bottom-80px {
  margin-bottom: 80px;
}

.section .absolute-background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.section .absolute-background.partial-background {
  max-height: 510px;
  bottom: -80px;
}

.section--bg {
  background-color: #f7f7f7;
}

.section--half-bg {
  padding-bottom: 80px;
}

.section--half-bg::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: 75%;
  background-color: #f7f7f7;
}

.section--small-bg {
  padding-bottom: 80px;
}

.section--small-bg::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: 400px;
  background-color: #f7f7f7;
}

.section--half-bg-small::before {
  max-height: 400px;
}

.section--half-bg-medium::before {
  max-height: 510px;
}

.section--half-bg-gray::before {
  background-color: var(--color-silver);
}

.section--bg-gray::before {
  background-color: var(--color-silver);
}

.section--bg-white {
  background-color: var(--color-white);
}

.section--color-white {
  color: var(--color-white);
}

.section--bg-black {
  background-color: var(--color-black);
}

.section--color-black {
  color: var(--color-black);
}

.section--bg-blackRgba {
  background-color: var(--color-blackRgba);
}

.section--color-blackRgba {
  color: var(--color-blackRgba);
}

.section--bg-blue {
  background-color: var(--color-blue);
}

.section--color-blue {
  color: var(--color-blue);
}

.section--bg-gray {
  background-color: var(--color-gray);
}

.section--color-gray {
  color: var(--color-gray);
}

.section--bg-mandarin {
  background-color: var(--color-mandarin);
}

.section--color-mandarin {
  color: var(--color-mandarin);
}

.section--bg-egg {
  background-color: var(--color-egg);
}

.section--color-egg {
  color: var(--color-egg);
}

.section--bg-unepBlue {
  background-color: var(--color-unepBlue);
}

.section--color-unepBlue {
  color: var(--color-unepBlue);
}

.section--bg-undpBlue {
  background-color: var(--color-undpBlue);
}

.section--color-undpBlue {
  color: var(--color-undpBlue);
}

.section--bg-undpBlueRgba {
  background-color: var(--color-undpBlueRgba);
}

.section--color-undpBlueRgba {
  color: var(--color-undpBlueRgba);
}

.section--bg-frog {
  background-color: var(--color-frog);
}

.section--color-frog {
  color: var(--color-frog);
}

.section--bg-grass {
  background-color: var(--color-grass);
}

.section--color-grass {
  color: var(--color-grass);
}

.section--bg-forest {
  background-color: var(--color-forest);
}

.section--color-forest {
  color: var(--color-forest);
}

.section--bg-cream {
  background-color: var(--color-cream);
}

.section--color-cream {
  color: var(--color-cream);
}

.section--bg-silver {
  background-color: var(--color-silver);
}

.section--color-silver {
  color: var(--color-silver);
}

.section--bg-silverRgba {
  background-color: var(--color-silverRgba);
}

.section--color-silverRgba {
  color: var(--color-silverRgba);
}

.section--bg-earthbornBugle {
  background-color: var(--color-earthbornBugle);
}

.section--color-earthbornBugle {
  color: var(--color-earthbornBugle);
}

.section--bg-fruidSalad {
  background-color: var(--color-fruidSalad);
}

.section--color-fruidSalad {
  color: var(--color-fruidSalad);
}

.section--bg-parFourGreen {
  background-color: var(--color-parFourGreen);
}

.section--color-parFourGreen {
  color: var(--color-parFourGreen);
}

.section--big {
  min-height: 350px;
}

.section--big .section-content {
  min-height: 350px;
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.section .section-content {
  flex: 1;
}

.section .section-paragraph .heading:not(:last-child) {
  margin-bottom: 20px;
}

.section .section-paragraph .paragraph:not(:last-child) {
  margin-bottom: 0;
}

.section .section-paragraph .paragraph .link {
  display: inline;
}

.section .section-paragraph:not(:last-child) {
  margin-bottom: 38px;
}

.section .section-paragraph iframe {
  width: 100%;
}

.section .section-image .image:not(:last-child) {
  margin-bottom: 0;
}

.section .section-image:not(:last-child) {
  margin-bottom: 38px;
}

.section .section-video:not(:last-child),
.section .section-audio:not(:last-child) {
  margin-bottom: 38px;
}

.section .section-btn {
  display: flex;
  justify-content: center;
}

.section .section-btn:not(:first-child) {
  margin-top: 40px;
}

.section .section-btn--left {
  justify-content: flex-start;
}

.section .section-date {
  margin-bottom: 30px;
}

.section__image {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

.section--image {
  padding-bottom: 100px;
}

.section--image .layout-builder-block {
  background-color: transparent;
}

.section--no-padding {
  padding: 0;
}

.section--no-top-padding {
  padding-top: 0;
}

.section--no-bottom-padding {
  padding-bottom: 0;
}

.indented-content--left {
  padding-left: 0;
}

.indented-content--right {
  padding-right: 0;
}

.section-cover {
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.section-cover .image {
  height: 100%;
}

.section-cover .image picture {
  height: 100%;
}

.section-cover .image picture img {
  height: 100%;
}

@media (min-width: 1280px) {
  .section-cover img {
    animation-direction: normal;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-name: section-cover-move;
  }
}

.section-cover::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.section-item {
  display: flex;
  align-items: center;
}

.section-item:not(:last-child) {
  margin-bottom: 20px;
}

.section-item-img {
  margin-right: 35px;
}

.section-item-img + .paragraph {
  margin: 0;
}

.section-container {
  display: flex;
  flex-direction: column;
}

.section-container .section-nav .list .icon {
  margin-right: 0;
}

.section-content-head:not(:last-child) {
  margin-bottom: 50px;
}

.section-content-head .heading:not(:last-child) {
  margin-bottom: 30px;
}

.section-content__intro:not(:last-child) {
  margin-bottom: 30px;
}

.section-content .paragraph:not(:last-child) {
  margin-bottom: 40px;
}

.work__image {
  height: 240px;
}

.work__info {
  position: relative;
  background-color: var(--color-undpBlue);
  padding: 80px 36px 40px;
}

.work__info .heading {
  margin-bottom: 24px;
}

.work__info .paragraph {
  margin-bottom: 50px;
}

.label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px 20px;
  background-color: var(--color-mandarin);
  font-size: var(--font-size-s);
  text-transform: uppercase;
  color: var(--color-white);
}

.section--work {
  position: relative;
}

.section--work::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: 60%;
  background-color: #f7f7f7;
}

.section--highlight {
  padding-bottom: 70px;
}

.section--highlight::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: 78%;
  background-color: var(--color-gray);
}

.upcoming-events .events {
  display: flex;
  margin: 0 -13px;
}

.upcoming-events .event {
  background-color: var(--color-white);
  margin: 13px;
  padding: 30px;
  width: calc(33.3333% - 16px);
}

.upcoming-events .event:not(:last-child) {
  margin: 13px;
}

.upcoming-btn {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.related-news .topic {
  position: relative;
}

.related-news .topic__info {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 45%;
  padding: 15px 16px;
  background-color: var(--color-white);
}

.related-news .topic__image:not(:last-child) {
  margin-bottom: 0;
}

.partners__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.partners__item {
  align-items: center;
  background-color: var(--color-white);
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 17.5px 20px;
}

.captcha {
  width: 290px;
}

.captcha:not(:last-child) {
  margin-bottom: 40px;
}

.captcha img {
  width: 100%;
}

@media (min-width: 768px) {
  .section-container {
    flex-direction: row;
  }
  .section-container--reverse {
    flex-direction: row-reverse;
  }
  .section-container--reverse .section-nav {
    margin-left: 40px;
    margin-right: 0;
  }
  .section-head {
    width: calc(100% - 350px);
  }
  .captcha {
    width: 350px;
  }
}

@media (min-width: 1000px) {
  .indented-content--left {
    padding-left: 40px;
  }
  .indented-content--right {
    padding-right: 40px;
  }
  .section-head {
    width: calc(100% - 440px);
  }
  .section-content__intro:not(:last-child) {
    margin-bottom: 70px;
  }
}

@media (min-width: 1280px) {
  .constrained {
    width: calc(100% - 100px);
  }
  .constrained--large {
    width: calc(100% - 50px);
  }
  .section--big {
    height: 700px;
  }
  .section--big .section-content {
    min-height: 700px;
  }
  .section--image {
    padding-bottom: 200px;
  }
}

@media (min-width: 1430px) {
  .constrained {
    width: 1240px;
  }
  .constrained--large {
    flex: none;
    width: 1400px;
  }
  .section-head {
    width: calc(100% - 490px);
  }
  .section-container--reverse .section-nav--medium {
    margin-left: 90px;
  }
  .indented-content--left {
    padding-left: 90px;
  }
  .indented-content--right {
    padding-right: 90px;
  }
  .section {
    padding: 80px 0;
  }
  .section--no-padding {
    padding: 0;
  }
  .section--no-top-padding {
    padding-top: 0;
  }
  .section--no-bottom-padding {
    padding-bottom: 0;
  }
  .section .section-btn:not(:first-child) {
    margin-top: 70px;
  }
  .section .section-btn:not(:last-child) {
    margin-bottom: 40px;
  }
}

@keyframes section-cover-move {
  0% {
    object-position: 30% 50%;
  }
  25% {
    object-position: 50% 70%;
  }
  50% {
    object-position: 70% 50%;
  }
  75% {
    object-position: 50% 30%;
  }
  100% {
    object-position: 30% 50%;
  }
}

.hr {
  width: 100%;
  height: 8px;
  background-color: var(--color-grass);
}

.toolbox__nav {
  display: none;
}

.toolbox__nav .block-unccd-menu-item-block.section-container {
  flex-direction: row;
  flex-wrap: wrap;
}

.toolbox__content, .toolbox__sidebar {
  padding: 30px 20px;
}

.toolbox__content {
  order: 1;
}

.toolbox__sidebar {
  order: 0;
}

.toolbox__content-head:not(:last-child) {
  margin-bottom: 18px;
}

.toolbox__content-paragraph:not(:last-child) {
  margin-bottom: 25px;
}

.toolbox--spacer-bottom {
  margin-bottom: 50px;
}

.toolbox__inner {
  background-color: var(--color-cream);
}

.toolbox__inner .nav-content .constrained {
  width: 100%;
}

.toolbox__container {
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .toolbox__content,
  .toolbox__sidebar {
    padding: 40px 70px 70px;
  }
}

@media (min-width: 1000px) {
  .toolbox__container {
    flex-direction: row;
  }
  .toolbox__content {
    order: 0;
    flex: 1 1 auto;
  }
  .toolbox__content + .toolbox__sidebar {
    padding-left: 0;
  }
  .toolbox__sidebar {
    order: 1;
    flex: 1 0 400px;
  }
  .toolbox__nav {
    display: flex;
    flex-wrap: wrap;
  }
  .homepage-latest-section .cell--half:first-child {
    max-width: 500px;
  }
  .homepage-latest-section .cell--half:last-child {
    max-width: 620px;
    margin-left: auto;
  }
}

@media (min-width: 1000px) and (min-width: 1182px) {
  .homepage-latest-section .cell--half:last-child {
    width: 100%;
  }
}

@media (max-width: 999px) {
  .section--mobile-reverse-columns .grid > :last-child {
    order: -1;
  }
}

@media (max-width: 767px) {
  .section--mobile-reverse-columns .section-container > :last-child {
    order: -1;
    margin-bottom: 30px;
  }
}

.section--vertical-align .section-content, .section--vertical-align .constrained {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section--background-padding .constrained {
  padding: 80px;
}

html[dir="rtl"] .page-head__info-item:first-child,
body[dir="rtl"] .page-head__info-item:first-child {
  padding-right: 0;
  padding-left: 10px;
}

html[dir="rtl"] .page-head__info-item:not(:last-child)::before,
body[dir="rtl"] .page-head__info-item:not(:last-child)::before {
  right: auto;
  left: 0;
}

html[dir="rtl"] .page-head__info-item:last-child,
body[dir="rtl"] .page-head__info-item:last-child {
  padding-right: 10px;
  padding-left: 0;
}

html[dir="rtl"] .hero__info-item:first-child,
body[dir="rtl"] .hero__info-item:first-child {
  padding-right: 0;
  padding-left: 10px;
}

html[dir="rtl"] .hero__info-item:not(:last-child)::before,
body[dir="rtl"] .hero__info-item:not(:last-child)::before {
  right: auto;
  left: 0;
}

html[dir="rtl"] .hero__info-item:last-child,
body[dir="rtl"] .hero__info-item:last-child {
  padding-right: 10px;
  padding-left: 0;
}

html[dir="rtl"] .menu__item:not(:last-child),
body[dir="rtl"] .menu__item:not(:last-child) {
  margin-right: 0;
  margin-left: 30px;
}

html[dir="rtl"] .search .icon:not(:last-child),
body[dir="rtl"] .search .icon:not(:last-child) {
  margin-right: 0;
  margin-left: 12px;
}

html[dir="rtl"] .dropdown__select,
body[dir="rtl"] .dropdown__select {
  flex-direction: row-reverse;
}

html[dir="rtl"] .logo,
body[dir="rtl"] .logo {
  margin-right: 0;
  margin-left: 42px;
}

html[dir="rtl"] .header__mobile,
body[dir="rtl"] .header__mobile {
  margin-right: 0;
  margin-left: -15px;
}

html[dir="rtl"] .header__btn-search,
body[dir="rtl"] .header__btn-search {
  margin-right: 0;
  margin-left: 20px;
}

html[dir="rtl"] .nav__item .link .icon,
body[dir="rtl"] .nav__item .link .icon {
  transform: scale(-1);
}

html[dir="rtl"] .nav__item .link .icon:last-child,
body[dir="rtl"] .nav__item .link .icon:last-child {
  margin-right: 8px;
  margin-left: 0;
}

html[dir="rtl"] .nav__item--image .link .icon,
body[dir="rtl"] .nav__item--image .link .icon {
  transform: scale(1);
}

html[dir="rtl"] .social-widget,
body[dir="rtl"] .social-widget {
  right: 0;
  left: auto;
}

html[dir="rtl"] .head::before,
body[dir="rtl"] .head::before {
  right: 0;
  left: auto;
}

html[dir="rtl"] .head--left,
body[dir="rtl"] .head--left {
  text-align: right;
}

html[dir="rtl"] .head--center::before,
body[dir="rtl"] .head--center::before {
  right: auto;
  left: 50%;
}

html[dir="rtl"] .news-latest,
body[dir="rtl"] .news-latest {
  padding-right: 0;
}

html[dir="rtl"] .section-item-img,
body[dir="rtl"] .section-item-img {
  margin-right: 0;
  margin-left: 35px;
}

html[dir="rtl"] .event__link .date:not(:last-child),
body[dir="rtl"] .event__link .date:not(:last-child) {
  margin-right: 0;
  margin-left: 20px;
}

html[dir="rtl"] .sidebar__list .list .icon,
body[dir="rtl"] .sidebar__list .list .icon {
  transform: scale(-1);
}

html[dir="rtl"] .related-news .topic__info,
body[dir="rtl"] .related-news .topic__info {
  right: 0;
  left: auto;
}

html[dir="rtl"] .tag,
body[dir="rtl"] .tag {
  right: 0;
  left: auto;
}

html[dir="rtl"] .list--marked .list-item,
html[dir="rtl"] .list--marked-primary .list-item,
body[dir="rtl"] .list--marked .list-item,
body[dir="rtl"] .list--marked-primary .list-item {
  padding-right: 16px;
  padding-left: 0;
}

html[dir="rtl"] .list--marked .list-item::before,
html[dir="rtl"] .list--marked-primary .list-item::before,
body[dir="rtl"] .list--marked .list-item::before,
body[dir="rtl"] .list--marked-primary .list-item::before {
  right: 0;
  left: auto;
}

html[dir="rtl"] .section-nav__filter-head .paragraph:not(:last-child),
body[dir="rtl"] .section-nav__filter-head .paragraph:not(:last-child) {
  margin-right: 0;
  margin-left: 20px;
}

html[dir="rtl"] .section-nav__filter-head .icon,
body[dir="rtl"] .section-nav__filter-head .icon {
  transform: scale(-1);
}

html[dir="rtl"] .filter-select__delete,
body[dir="rtl"] .filter-select__delete {
  margin-right: 10px;
  margin-left: 0;
}

html[dir="rtl"] .event--secondary .event__breadcrumbs-list .event__breadcrumbs-item .icon,
body[dir="rtl"] .event--secondary .event__breadcrumbs-list .event__breadcrumbs-item .icon {
  margin-right: 0;
  margin-left: 11px;
}

html[dir="rtl"] .event--secondary .event__breadcrumbs-list .event__breadcrumbs-item:not(:last-child),
body[dir="rtl"] .event--secondary .event__breadcrumbs-list .event__breadcrumbs-item:not(:last-child) {
  padding-right: 0;
  padding-left: 16px;
}

html[dir="rtl"] .event--secondary .event__breadcrumbs-list .event__breadcrumbs-item:not(:last-child)::before,
body[dir="rtl"] .event--secondary .event__breadcrumbs-list .event__breadcrumbs-item:not(:last-child)::before {
  right: auto;
  left: 5px;
  line-height: normal;
}

html[dir="rtl"] .event__keyword .keyword:not(:last-child),
body[dir="rtl"] .event__keyword .keyword:not(:last-child) {
  margin-right: 0;
  margin-left: 22px;
}

html[dir="rtl"] .footer .footer__info-partners,
body[dir="rtl"] .footer .footer__info-partners {
  padding-top: 40px;
}

html[dir="rtl"] .section-container .section-nav .list .icon,
body[dir="rtl"] .section-container .section-nav .list .icon {
  margin-right: 10px;
  margin-left: 0;
  transform: scale(-1);
}

html[dir="rtl"] .link .icon:first-child,
body[dir="rtl"] .link .icon:first-child {
  margin-right: 0;
  margin-left: 8px;
}

html[dir="rtl"] .toolbox-nav__item .link::before,
body[dir="rtl"] .toolbox-nav__item .link::before {
  right: 0;
  left: auto;
}

html[dir="rtl"] .checkbox__caption,
html[dir="rtl"] .radio__caption,
body[dir="rtl"] .checkbox__caption,
body[dir="rtl"] .radio__caption {
  margin-right: 10px;
  margin-left: 0;
}

html[dir="rtl"] .footer .logo,
body[dir="rtl"] .footer .logo {
  margin-left: 0;
}

html[dir="rtl"] .logo__slogan,
body[dir="rtl"] .logo__slogan {
  margin-right: 0.6em;
  margin-left: 0;
  padding-right: 0.5em;
  padding-left: 0;
}

html[dir="rtl"] .logo__slogan::before,
body[dir="rtl"] .logo__slogan::before {
  left: 100%;
}

@media (min-width: 768px) {
  html[dir="rtl"] .publication__video,
  body[dir="rtl"] .publication__video {
    margin-right: 50px;
    margin-left: 0;
  }
  html[dir="rtl"] .footer__top-content .socials,
  body[dir="rtl"] .footer__top-content .socials {
    margin: 0 -8px;
  }
  html[dir="rtl"] .footer__top-content .socials__item,
  body[dir="rtl"] .footer__top-content .socials__item {
    width: calc(33.3333% - 20px);
    margin: 10px 10px;
  }
  html[dir="rtl"] .footer__bottom-content .menu--secondary .menu__item:last-child,
  body[dir="rtl"] .footer__bottom-content .menu--secondary .menu__item:last-child {
    padding-right: 20px;
    padding-left: 0;
  }
  html[dir="rtl"] .footer__bottom-content .menu--secondary .menu__item:first-child,
  body[dir="rtl"] .footer__bottom-content .menu--secondary .menu__item:first-child {
    padding-right: 0;
    padding-left: 20px;
  }
  html[dir="rtl"] .footer__bottom-content .menu--secondary .menu__item:not(:last-child),
  body[dir="rtl"] .footer__bottom-content .menu--secondary .menu__item:not(:last-child) {
    margin: 0;
  }
  html[dir="rtl"] .footer__bottom-content .menu--secondary .menu__item:not(:last-child)::after,
  body[dir="rtl"] .footer__bottom-content .menu--secondary .menu__item:not(:last-child)::after {
    right: auto;
    left: 0;
  }
  html[dir="rtl"] .footer .logo,
  body[dir="rtl"] .footer .logo {
    height: auto;
  }
  html[dir="rtl"] .footer .footer__info-partner:not(:last-child),
  body[dir="rtl"] .footer .footer__info-partner:not(:last-child) {
    margin-right: 0;
    margin-left: 40px;
  }
  html[dir="rtl"] .publication--row .publication__image,
  body[dir="rtl"] .publication--row .publication__image {
    margin-right: 0;
    margin-left: 60px;
  }
  html[dir="rtl"] .publication--reverse .publication__image,
  body[dir="rtl"] .publication--reverse .publication__image {
    margin-right: 60px;
    margin-left: 0;
  }
  html[dir="rtl"] .section-nav,
  body[dir="rtl"] .section-nav {
    margin-right: 0;
    margin-left: 40px;
  }
  html[dir="rtl"] .section-container--reverse .section-nav,
  body[dir="rtl"] .section-container--reverse .section-nav {
    margin-right: 40px;
    margin-left: 0;
  }
  html[dir="rtl"] .sidebar,
  body[dir="rtl"] .sidebar {
    margin-left: 0;
    margin-right: 36px;
  }
  html[dir="rtl"] .sidebar__list,
  body[dir="rtl"] .sidebar__list {
    margin-right: auto;
    margin-left: 0;
  }
}

@media (min-width: 1000px) {
  html[dir="rtl"] .nav__item:not(:first-child),
  body[dir="rtl"] .nav__item:not(:first-child) {
    margin-right: 20px;
    margin-left: 0;
  }
  html[dir="rtl"] .nav__item:last-child,
  body[dir="rtl"] .nav__item:last-child {
    margin-right: 0;
  }
  html[dir="rtl"] .nav__item .link .icon,
  body[dir="rtl"] .nav__item .link .icon {
    transform: scale(1);
  }
  html[dir="rtl"] .indented-content--left,
  body[dir="rtl"] .indented-content--left {
    padding-left: 0;
    padding-right: 40px;
  }
  html[dir="rtl"] .footer__top-content .socials__item,
  body[dir="rtl"] .footer__top-content .socials__item {
    width: auto;
    margin: 10px 10px;
  }
  html[dir="rtl"] .footer .footer__info-contact,
  body[dir="rtl"] .footer .footer__info-contact {
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 40px;
  }
  html[dir="rtl"] .footer .footer__info-contact:not(:last-child),
  body[dir="rtl"] .footer .footer__info-contact:not(:last-child) {
    border-right: 0;
    border-left: 1px solid var(--color-black);
  }
  html[dir="rtl"] .footer .footer__info-partners,
  body[dir="rtl"] .footer .footer__info-partners {
    padding-top: 0;
    padding-right: 40px;
    padding-left: 0;
  }
  html[dir="rtl"] .event--secondary .event__info:not(:last-child),
  body[dir="rtl"] .event--secondary .event__info:not(:last-child) {
    margin-right: 0;
    margin-left: 30px;
  }
  html[dir="rtl"] .toolbox-nav__item .link .icon:first-child,
  body[dir="rtl"] .toolbox-nav__item .link .icon:first-child {
    margin-left: 0;
  }
}

@media (min-width: 1280px) {
  html[dir="rtl"] .sidebar,
  body[dir="rtl"] .sidebar {
    margin-right: 56px;
  }
}

@media (min-width: 1430px) {
  html[dir="rtl"] .nav__item:not(:first-child),
  body[dir="rtl"] .nav__item:not(:first-child) {
    margin-right: 43px;
  }
  html[dir="rtl"] .nav__item:last-child,
  body[dir="rtl"] .nav__item:last-child {
    margin-right: 0;
  }
  html[dir="rtl"] .indented-content--left,
  body[dir="rtl"] .indented-content--left {
    padding-right: 90px;
  }
  html[dir="rtl"] .section-nav,
  body[dir="rtl"] .section-nav {
    margin-left: 80px;
  }
  html[dir="rtl"] .section-container--reverse .section-nav,
  body[dir="rtl"] .section-container--reverse .section-nav {
    margin-right: 90px;
    margin-left: 0;
  }
}

.slider .topic .topic__info .heading {
  -webkit-line-clamp: initial;
}

.slider .topic__image--small {
  height: auto;
  aspect-ratio: 3/2;
}

.slider.documents .topic--secondary .topic__info .link {
  bottom: 30px;
  position: absolute;
}

.slider .topic {
  box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.18);
}

.slider .topic__image {
  box-shadow: none;
}

.slider .topic--with-img,
.slider .topic--no-img .topic__info {
  min-height: calc((100vw - 60px));
}

@media (min-width: 768px) {
  .slider .topic--with-img,
  .slider .topic--no-img .topic__info {
    min-height: calc((100vw - 60px) / 2);
  }
}

@media (min-width: 1000px) {
  .slider .topic--with-img,
  .slider .topic--no-img .topic__info {
    min-height: calc((100vw - 60px) / 3);
  }
}

@media (min-width: 1280px) {
  .slider .topic--with-img,
  .slider .topic--no-img .topic__info {
    min-height: 400px;
  }
}

.block-unccd-agenda-item-calendar .printable-version a, .block-unccd-app-meeting-agenda-actions .printable-version a {
  background-image: url("../images/icon-print.svg");
}

.top-margin-0px {
  margin-top: 0px;
}

.bottom-margin-0px {
  margin-bottom: 0px;
}

.left-margin-0px {
  margin-left: 0px;
}

.right-margin-0px {
  margin-right: 0px;
}

.space-0px {
  padding-bottom: 0px;
}

.top-margin-5px {
  margin-top: 5px;
}

.bottom-margin-5px {
  margin-bottom: 5px;
}

.left-margin-5px {
  margin-left: 5px;
}

.right-margin-5px {
  margin-right: 5px;
}

.space-5px {
  padding-bottom: 5px;
}

.top-margin-10px {
  margin-top: 10px;
}

.bottom-margin-10px {
  margin-bottom: 10px;
}

.left-margin-10px {
  margin-left: 10px;
}

.right-margin-10px {
  margin-right: 10px;
}

.space-10px {
  padding-bottom: 10px;
}

.top-margin-15px {
  margin-top: 15px;
}

.bottom-margin-15px {
  margin-bottom: 15px;
}

.left-margin-15px {
  margin-left: 15px;
}

.right-margin-15px {
  margin-right: 15px;
}

.space-15px {
  padding-bottom: 15px;
}

.top-margin-20px {
  margin-top: 20px;
}

.bottom-margin-20px {
  margin-bottom: 20px;
}

.left-margin-20px {
  margin-left: 20px;
}

.right-margin-20px {
  margin-right: 20px;
}

.space-20px {
  padding-bottom: 20px;
}

.top-margin-25px {
  margin-top: 25px;
}

.bottom-margin-25px {
  margin-bottom: 25px;
}

.left-margin-25px {
  margin-left: 25px;
}

.right-margin-25px {
  margin-right: 25px;
}

.space-25px {
  padding-bottom: 25px;
}

.top-margin-30px {
  margin-top: 30px;
}

.bottom-margin-30px {
  margin-bottom: 30px;
}

.left-margin-30px {
  margin-left: 30px;
}

.right-margin-30px {
  margin-right: 30px;
}

.space-30px {
  padding-bottom: 30px;
}

.top-margin-35px {
  margin-top: 35px;
}

.bottom-margin-35px {
  margin-bottom: 35px;
}

.left-margin-35px {
  margin-left: 35px;
}

.right-margin-35px {
  margin-right: 35px;
}

.space-35px {
  padding-bottom: 35px;
}

.top-margin-40px {
  margin-top: 40px;
}

.bottom-margin-40px {
  margin-bottom: 40px;
}

.left-margin-40px {
  margin-left: 40px;
}

.right-margin-40px {
  margin-right: 40px;
}

.space-40px {
  padding-bottom: 40px;
}

.top-margin-45px {
  margin-top: 45px;
}

.bottom-margin-45px {
  margin-bottom: 45px;
}

.left-margin-45px {
  margin-left: 45px;
}

.right-margin-45px {
  margin-right: 45px;
}

.space-45px {
  padding-bottom: 45px;
}

.top-margin-50px {
  margin-top: 50px;
}

.bottom-margin-50px {
  margin-bottom: 50px;
}

.left-margin-50px {
  margin-left: 50px;
}

.right-margin-50px {
  margin-right: 50px;
}

.space-50px {
  padding-bottom: 50px;
}

.top-margin-55px {
  margin-top: 55px;
}

.bottom-margin-55px {
  margin-bottom: 55px;
}

.left-margin-55px {
  margin-left: 55px;
}

.right-margin-55px {
  margin-right: 55px;
}

.space-55px {
  padding-bottom: 55px;
}

.top-margin-60px {
  margin-top: 60px;
}

.bottom-margin-60px {
  margin-bottom: 60px;
}

.left-margin-60px {
  margin-left: 60px;
}

.right-margin-60px {
  margin-right: 60px;
}

.space-60px {
  padding-bottom: 60px;
}

.top-margin-63px {
  margin-top: 63px;
}

.bottom-margin-63px {
  margin-bottom: 63px;
}

.left-margin-63px {
  margin-left: 63px;
}

.right-margin-63px {
  margin-right: 63px;
}

.space-63px {
  padding-bottom: 63px;
}

.top-margin-65px {
  margin-top: 65px;
}

.bottom-margin-65px {
  margin-bottom: 65px;
}

.left-margin-65px {
  margin-left: 65px;
}

.right-margin-65px {
  margin-right: 65px;
}

.space-65px {
  padding-bottom: 65px;
}

.top-margin-70px {
  margin-top: 70px;
}

.bottom-margin-70px {
  margin-bottom: 70px;
}

.left-margin-70px {
  margin-left: 70px;
}

.right-margin-70px {
  margin-right: 70px;
}

.space-70px {
  padding-bottom: 70px;
}

.top-margin-75px {
  margin-top: 75px;
}

.bottom-margin-75px {
  margin-bottom: 75px;
}

.left-margin-75px {
  margin-left: 75px;
}

.right-margin-75px {
  margin-right: 75px;
}

.space-75px {
  padding-bottom: 75px;
}

.top-margin-80px {
  margin-top: 80px;
}

.bottom-margin-80px {
  margin-bottom: 80px;
}

.left-margin-80px {
  margin-left: 80px;
}

.right-margin-80px {
  margin-right: 80px;
}

.space-80px {
  padding-bottom: 80px;
}

.top-margin-85px {
  margin-top: 85px;
}

.bottom-margin-85px {
  margin-bottom: 85px;
}

.left-margin-85px {
  margin-left: 85px;
}

.right-margin-85px {
  margin-right: 85px;
}

.space-85px {
  padding-bottom: 85px;
}

.top-margin-90px {
  margin-top: 90px;
}

.bottom-margin-90px {
  margin-bottom: 90px;
}

.left-margin-90px {
  margin-left: 90px;
}

.right-margin-90px {
  margin-right: 90px;
}

.space-90px {
  padding-bottom: 90px;
}

.top-margin-100px {
  margin-top: 100px;
}

.bottom-margin-100px {
  margin-bottom: 100px;
}

.left-margin-100px {
  margin-left: 100px;
}

.right-margin-100px {
  margin-right: 100px;
}

.space-100px {
  padding-bottom: 100px;
}

.top-margin-110px {
  margin-top: 110px;
}

.bottom-margin-110px {
  margin-bottom: 110px;
}

.left-margin-110px {
  margin-left: 110px;
}

.right-margin-110px {
  margin-right: 110px;
}

.space-110px {
  padding-bottom: 110px;
}

.top-margin-120px {
  margin-top: 120px;
}

.bottom-margin-120px {
  margin-bottom: 120px;
}

.left-margin-120px {
  margin-left: 120px;
}

.right-margin-120px {
  margin-right: 120px;
}

.space-120px {
  padding-bottom: 120px;
}

.top-margin-150px {
  margin-top: 150px;
}

.bottom-margin-150px {
  margin-bottom: 150px;
}

.left-margin-150px {
  margin-left: 150px;
}

.right-margin-150px {
  margin-right: 150px;
}

.space-150px {
  padding-bottom: 150px;
}

#toolbar-administration * {
  z-index: 1001;
}

@media screen and (min-width: 77em) {
  .layout-builder-configure-section .media-library-selection .media-library-item--grid {
    width: 100%;
  }
}

.layout-builder__section .layout-builder__link {
  font-size: var(--f-size-p-font-size);
  line-height: var(--f-size-p-line-height);
  color: var(--color-undpBlue);
  transition: color .3s;
  vertical-align: middle;
}

.layout-builder__section .layout-builder__link:hover {
  color: #005382;
}

#media-library-add-form-wrapper .js-click-to-select-checkbox input {
  height: 20px;
  width: 20px;
}

#media-library-add-form-wrapper input[type="checkbox"] {
  height: 20px;
  width: 20px;
}

.paragraph-hidden {
  display: none;
}

.user-login-form,
.user-register-form,
.user-pass,
.user-pass-reset {
  margin: 0 auto;
  width: 90%;
}

.user-login-form .js-form-item,
.user-register-form .js-form-item,
.user-pass .js-form-item,
.user-pass-reset .js-form-item {
  flex-flow: row wrap;
}

.user-login-form .js-form-item .description,
.user-register-form .js-form-item .description,
.user-pass .js-form-item .description,
.user-pass-reset .js-form-item .description {
  margin-left: 0;
}

.user-login-form #edit-actions,
.user-register-form #edit-actions,
.user-pass #edit-actions,
.user-pass-reset #edit-actions {
  display: flex;
  justify-content: center;
}

.user-login-form .image-widget-data input[type="submit"],
.user-register-form .image-widget-data input[type="submit"],
.user-pass .image-widget-data input[type="submit"],
.user-pass-reset .image-widget-data input[type="submit"] {
  background-color: var(--color-egg);
}

.user-login-form .image-widget-data input[type="submit"]:hover, .user-login-form .image-widget-data input[type="submit"]:focus, .user-login-form .image-widget-data input[type="submit"]:active,
.user-register-form .image-widget-data input[type="submit"]:hover,
.user-register-form .image-widget-data input[type="submit"]:focus,
.user-register-form .image-widget-data input[type="submit"]:active,
.user-pass .image-widget-data input[type="submit"]:hover,
.user-pass .image-widget-data input[type="submit"]:focus,
.user-pass .image-widget-data input[type="submit"]:active,
.user-pass-reset .image-widget-data input[type="submit"]:hover,
.user-pass-reset .image-widget-data input[type="submit"]:focus,
.user-pass-reset .image-widget-data input[type="submit"]:active {
  background-color: #c57808;
}

.user-login-form .details-wrapper label:not(:last-child),
.user-register-form .details-wrapper label:not(:last-child),
.user-pass .details-wrapper label:not(:last-child),
.user-pass-reset .details-wrapper label:not(:last-child) {
  margin-bottom: 0;
  margin-left: 10px;
  max-width: 200px;
}

.ui-dialog .ui-dialog-titlebar,
.user-login-form .ui-dialog-titlebar,
.user-register-form .ui-dialog-titlebar,
.user-pass .ui-dialog-titlebar,
.user-pass-reset .ui-dialog-titlebar {
  background: var(--color-unepBlue);
  border-color: var(--color-undpBlue);
  border-radius: 0;
  border-style: solid;
  border-width: 0 0 1px;
  font-weight: bold;
}

.ui-dialog .ui-dialog-title,
.user-login-form .ui-dialog-title,
.user-register-form .ui-dialog-title,
.user-pass .ui-dialog-title,
.user-pass-reset .ui-dialog-title {
  color: #f5f5f5;
}

.ui-dialog .js-form-item,
.user-login-form .js-form-item,
.user-register-form .js-form-item,
.user-pass .js-form-item,
.user-pass-reset .js-form-item {
  display: flex;
  flex-direction: column;
}

.ui-dialog .js-form-item .description,
.user-login-form .js-form-item .description,
.user-register-form .js-form-item .description,
.user-pass .js-form-item .description,
.user-pass-reset .js-form-item .description {
  flex: 0 0 100%;
  margin-top: 10px;
  width: 100%;
}

.ui-dialog .js-form-item-settings-admin-label,
.user-login-form .js-form-item-settings-admin-label,
.user-register-form .js-form-item-settings-admin-label,
.user-pass .js-form-item-settings-admin-label,
.user-pass-reset .js-form-item-settings-admin-label {
  align-items: normal;
  display: flex;
  flex-flow: row wrap;
}

.ui-dialog .js-form-item-settings-admin-label label,
.user-login-form .js-form-item-settings-admin-label label,
.user-register-form .js-form-item-settings-admin-label label,
.user-pass .js-form-item-settings-admin-label label,
.user-pass-reset .js-form-item-settings-admin-label label {
  font-size: var(--f-size-p-font-size);
  line-height: var(--f-size-p-line-height);
  margin-right: 20px;
}

.ui-dialog summary,
.user-login-form summary,
.user-register-form summary,
.user-pass summary,
.user-pass-reset summary {
  font-size: var(--f-size-p-font-size);
  line-height: var(--f-size-p-line-height);
  background-color: var(--color-cream);
}

.ui-dialog input[type="submit"],
.user-login-form input[type="submit"],
.user-register-form input[type="submit"],
.user-pass input[type="submit"],
.user-pass-reset input[type="submit"] {
  font-size: var(--f-size-p-xxs-font-size);
  align-items: center;
  background-color: var(--color-frog);
  border: none;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-weight: bold;
  justify-content: center;
  min-height: 46px;
  outline: none;
  padding: 5px 25px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .3s;
}

.ui-dialog input[type="submit"]:hover, .ui-dialog input[type="submit"]:focus, .ui-dialog input[type="submit"]:active,
.user-login-form input[type="submit"]:hover,
.user-login-form input[type="submit"]:focus,
.user-login-form input[type="submit"]:active,
.user-register-form input[type="submit"]:hover,
.user-register-form input[type="submit"]:focus,
.user-register-form input[type="submit"]:active,
.user-pass input[type="submit"]:hover,
.user-pass input[type="submit"]:focus,
.user-pass input[type="submit"]:active,
.user-pass-reset input[type="submit"]:hover,
.user-pass-reset input[type="submit"]:focus,
.user-pass-reset input[type="submit"]:active {
  background-color: #1e4c20;
}

select {
  font-size: var(--f-size-p-sx-font-size);
  background-color: var(--color-cream);
  border: 1px solid var(--color-gray);
  color: var(--color-black);
  font-family: Roboto, Helvetica, Arial, sans-serif;
  height: 36px;
  padding: 0 15px;
  width: 100%;
}

.ui-widget.ui-widget-content .ui-widget-header .ui-dialog-title {
  font-size: var(--f-size-p-sx-font-size);
  font-weight: var(--f-weight-bold);
}

.ui-widget.media-library-widget-modal .description {
  font-style: italic;
}

.ui-widget.media-library-widget-modal .form-actions .button {
  font-size: var(--f-size-p-xxs-font-size);
  align-items: center;
  background-color: var(--color-egg);
  border: none;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-weight: bold;
  justify-content: center;
  min-height: 46px;
  outline: none;
  padding: 5px 25px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .3s;
}

.ui-widget.media-library-widget-modal .form-actions .button:hover, .ui-widget.media-library-widget-modal .form-actions .button:focus, .ui-widget.media-library-widget-modal .form-actions .button:active {
  background-color: #c57808;
}

.ui-widget.media-library-widget-modal .ui-widget-header {
  border-color: var(--color-gray);
}

.ui-widget.media-library-widget-modal .ui-widget-header .ui-dialog-title {
  color: var(--color-black);
}

.ui-widget.media-library-widget-modal #media-library-content .js-media-library-add-form .form-item label {
  flex: 0 0 100%;
  width: 100%;
}

.ui-widget.media-library-widget-modal #media-library-content .js-media-library-add-form .form-item label:not(:last-child) {
  margin-bottom: 10px;
  margin-right: 0;
  max-width: 200px;
}

.ui-widget.media-library-widget-modal #media-library-content .view-media-library {
  display: flex;
  flex-flow: row wrap;
}

.ui-widget.media-library-widget-modal #media-library-content .view-media-library .view-header {
  margin: 0;
  order: 2;
}

.ui-widget.media-library-widget-modal #media-library-content .view-media-library .view-filters {
  flex: 1;
  order: 1;
}

.ui-widget.media-library-widget-modal #media-library-content .view-media-library .view-content {
  flex: 0 0 100%;
  order: 3;
  width: 100%;
}

.ui-widget.media-library-widget-modal #media-library-content .view-media-library .pager {
  flex: 0 0 100%;
  order: 4;
  width: 100%;
}

.ui-widget.media-library-widget-modal #media-library-content .view-media-library .views-exposed-form .form--inline {
  align-items: center;
  display: flex;
}

.ui-widget.media-library-widget-modal #media-library-content .view-media-library .views-exposed-form .form-item {
  margin-bottom: 0;
  margin-top: 0;
}

.ui-widget.media-library-widget-modal .media-library-content #media-library-add-form-wrapper .form-wrapper {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: .5rem 1.5rem 1.5rem;
}

.ui-widget.media-library-widget-modal .media-library-content #media-library-add-form-wrapper .form-managed-file {
  align-items: center;
  display: flex;
}

.ui-widget.media-library-widget-modal .media-library-content #media-library-add-form-wrapper .form-item-upload {
  align-items: center;
}

.ui-widget.media-library-widget-modal .media-library-content #media-library-view .view-filters,
.ui-widget.media-library-widget-modal .media-library-content #media-library-view .view-header {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 1.5rem;
  min-height: 80px;
  padding: .5rem 1.5rem 1.5rem;
}

.ui-widget.media-library-widget-modal .media-library-content #media-library-view .view-filters {
  border-right: 0;
}

.ui-widget.media-library-widget-modal .media-library-content #media-library-view .view-header {
  border-left: 0;
}

.ui-widget.media-library-widget-modal .media-library-content #media-library-view .view-content {
  background-color: #fff;
  border: 1px solid var(--color-gray);
  border-radius: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 1.5rem;
  padding: .5rem 1.5rem 1.5rem;
}

.ui-widget #drupal-off-canvas {
  background-color: var(--color-white);
}

.ui-widget #drupal-off-canvas .media-library-form-element {
  font-size: var(--f-size-p-xs-font-size);
  color: var(--color-black);
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
}

.ui-widget #drupal-off-canvas .form-item {
  margin-bottom: 15px;
  margin-top: 15px;
}

.ui-widget #drupal-off-canvas .form-item.form-type-select {
  align-items: baseline;
}

.ui-widget #drupal-off-canvas .form-item.form-type-select label {
  padding-right: 10px;
}

.ui-widget #drupal-off-canvas .form-type-color label:not(:last-child) {
  margin-bottom: 0;
  margin-right: 20px;
  max-width: 200px;
}

.ui-widget #drupal-off-canvas .form-type-color input[type="color"] {
  cursor: pointer;
  height: 20px;
  margin: 0;
  padding: 0;
  width: 20px;
}

.ui-widget #drupal-off-canvas .description {
  color: var(--color-black);
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-style: italic;
}

.ui-widget #drupal-off-canvas label {
  font-size: var(--f-size-p-xs-font-size);
  color: var(--color-black);
  display: block;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: var(--f-weight-normal);
}

.ui-widget #drupal-off-canvas label:not(:last-child) {
  margin-bottom: 10px;
  max-width: 200px;
}

.ui-widget #drupal-off-canvas .form-text {
  font-size: var(--f-size-p-sx-font-size);
  background-color: var(--color-cream);
  border: 1px solid var(--color-gray);
  color: var(--color-black);
  font-family: Roboto, Helvetica, Arial, sans-serif;
  height: 36px;
  outline: none;
  padding: 0 15px;
  transition: box-shadow .3s;
  width: 100%;
}

.ui-widget #drupal-off-canvas .form-text::-webkit-input-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.ui-widget #drupal-off-canvas .form-text:-moz-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.ui-widget #drupal-off-canvas .form-text::-moz-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.ui-widget #drupal-off-canvas .form-text:-ms-input-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.ui-widget #drupal-off-canvas .form-text:focus {
  border-color: var(--color-unepBlue);
  box-shadow: 0 1px 5px var(--color-silver);
  outline-color: var(--color-unepBlue);
  transition: all .3s;
}

.ui-widget #drupal-off-canvas .checkbox + label:not(:last-child) {
  margin-bottom: 0;
}

.ui-widget #drupal-off-canvas .checkbox {
  align-items: center;
  cursor: pointer;
  display: flex;
  margin: auto 0;
  position: relative;
}

.ui-widget #drupal-off-canvas .checkbox:not(:last-child) {
  margin-right: 7px;
}

.ui-widget #drupal-off-canvas .checkbox:hover .checkbox__indicator::before, .ui-widget #drupal-off-canvas .checkbox:focus .checkbox__indicator::before, .ui-widget #drupal-off-canvas .checkbox:active .checkbox__indicator::before {
  transform: scale(0.5);
}

.ui-widget #drupal-off-canvas .checkbox input[type="checkbox"] {
  -webkit-appearance: inherit;
  height: 20px;
  left: 0;
  outline: none;
  position: absolute;
  top: 0;
  width: 20px;
  z-index: 1;
}

.ui-widget #drupal-off-canvas .checkbox input[type="checkbox"]:checked ~ .checkbox__indicator {
  border-color: var(--color-undpBlue);
}

.ui-widget #drupal-off-canvas .checkbox input[type="checkbox"]:checked ~ .checkbox__indicator::before {
  transform: scale(1);
}

.ui-widget #drupal-off-canvas .checkbox input[type="checkbox"][disabled] ~ .checkbox__indicator {
  opacity: .5;
}

.ui-widget #drupal-off-canvas .checkbox__indicator {
  border: 1px solid var(--color-black);
  display: block;
  flex: 0 0 20px;
  height: 20px;
  position: relative;
  transition: all .3s;
  width: 20px;
}

.ui-widget #drupal-off-canvas .checkbox__indicator::before {
  background-color: var(--color-undpBlue);
  content: '';
  height: 10px;
  left: 50%;
  margin-left: -5px;
  margin-top: -5px;
  position: absolute;
  top: 50%;
  transform: scale(0);
  transform-origin: center;
  transition: all .3s;
  width: 10px;
}

.ui-widget #drupal-off-canvas input[type="submit"] {
  font-size: var(--f-size-p-xxs-font-size);
  align-items: center;
  border: none;
  border-radius: 0;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-weight: bold;
  justify-content: center;
  min-height: 46px;
  outline: none;
  padding: 5px 25px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .3s;
}

.ui-widget #drupal-off-canvas input[data-drupal-selector^="edit-layout-settings-background-image-media-library-open-button"] {
  background-color: var(--color-egg);
}

.ui-widget #drupal-off-canvas input[data-drupal-selector^="edit-layout-settings-background-image-media-library-open-button"]:hover, .ui-widget #drupal-off-canvas input[data-drupal-selector^="edit-layout-settings-background-image-media-library-open-button"]:focus, .ui-widget #drupal-off-canvas input[data-drupal-selector^="edit-layout-settings-background-image-media-library-open-button"]:active {
  background-color: #c57808;
}

.ui-widget #drupal-off-canvas input[data-drupal-selector^="edit-layout-settings-background-image-media-library-update-widget"] {
  background-color: var(--color-mandarin);
}

.ui-widget #drupal-off-canvas input[data-drupal-selector^="edit-layout-settings-background-image-media-library-update-widget"]:hover, .ui-widget #drupal-off-canvas input[data-drupal-selector^="edit-layout-settings-background-image-media-library-update-widget"]:focus, .ui-widget #drupal-off-canvas input[data-drupal-selector^="edit-layout-settings-background-image-media-library-update-widget"]:active {
  background-color: #e80700;
}

.ui-widget #drupal-off-canvas input[data-drupal-selector="edit-actions-submit"] {
  background-color: var(--color-frog);
}

.ui-widget #drupal-off-canvas input[data-drupal-selector="edit-actions-submit"]:hover, .ui-widget #drupal-off-canvas input[data-drupal-selector="edit-actions-submit"]:focus, .ui-widget #drupal-off-canvas input[data-drupal-selector="edit-actions-submit"]:active {
  background-color: #1e4c20;
}

.ui-widget #drupal-off-canvas .layout-builder-configure-section details {
  background-color: var(--color-white);
  margin: 0 0 10px;
  border: 1px solid #c4cfd4;
  width: 100%;
}

.ui-widget #drupal-off-canvas .layout-builder-configure-section details[open] summary {
  background-color: #c4cfd4;
  color: var(--color-black);
}

.ui-widget #drupal-off-canvas .layout-builder-configure-section details input[data-drupal-selector^="edit-layout-settings-bg-background-image-media-library-open-button"] {
  background-color: var(--color-egg);
}

.ui-widget #drupal-off-canvas .layout-builder-configure-section details input[data-drupal-selector^="edit-layout-settings-bg-background-image-media-library-open-button"]:hover, .ui-widget #drupal-off-canvas .layout-builder-configure-section details input[data-drupal-selector^="edit-layout-settings-bg-background-image-media-library-open-button"]:focus, .ui-widget #drupal-off-canvas .layout-builder-configure-section details input[data-drupal-selector^="edit-layout-settings-bg-background-image-media-library-open-button"]:active {
  background-color: #c57808;
}

.ui-widget #drupal-off-canvas .layout-builder-configure-section details input[data-drupal-selector^="edit-layout-settings-bg-background-image-media-library-update-widget"],
.ui-widget #drupal-off-canvas .layout-builder-configure-section details input.media-library-item__remove {
  background-color: var(--color-mandarin);
}

.ui-widget #drupal-off-canvas .layout-builder-configure-section details input[data-drupal-selector^="edit-layout-settings-bg-background-image-media-library-update-widget"]:hover, .ui-widget #drupal-off-canvas .layout-builder-configure-section details input[data-drupal-selector^="edit-layout-settings-bg-background-image-media-library-update-widget"]:focus, .ui-widget #drupal-off-canvas .layout-builder-configure-section details input[data-drupal-selector^="edit-layout-settings-bg-background-image-media-library-update-widget"]:active,
.ui-widget #drupal-off-canvas .layout-builder-configure-section details input.media-library-item__remove:hover,
.ui-widget #drupal-off-canvas .layout-builder-configure-section details input.media-library-item__remove:focus,
.ui-widget #drupal-off-canvas .layout-builder-configure-section details input.media-library-item__remove:active {
  background-color: #e80700;
}

.ui-widget #drupal-off-canvas .layout-builder-configure-section details summary {
  background-color: #e8e8e8;
  color: var(--color-black);
}

.ui-widget #drupal-off-canvas .layout-builder-configure-section details summary:hover {
  background-color: #c4cfd4;
}

.ui-widget #drupal-off-canvas .layout-builder-configure-section details summary::marker {
  content: '';
}

.ui-widget #drupal-off-canvas .select2-container {
  flex: 0 0 100%;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  max-width: 100%;
  width: auto !important;
}

.ui-widget #drupal-off-canvas .select2-container--default .selection {
  display: block;
  width: 100%;
}

.ui-widget #drupal-off-canvas .select2-container--default .select2-selection--single {
  font-size: var(--f-size-p-sx-font-size);
  align-items: center;
  background-color: var(--color-cream);
  border: 1px solid var(--color-gray);
  color: var(--color-black);
  display: flex;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  height: 36px;
  padding: 0 15px;
  width: 100%;
}

.ui-widget #drupal-off-canvas .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: var(--f-size-p-sx-font-size);
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

.select2-dropdown li.select2-results__option {
  font-size: var(--f-size-p-sx-font-size);
  color: var(--color-black);
  transition: background-color .3s, color .3s;
}

.select2-dropdown li.select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-undpBlue);
}

.select2-dropdown li.select2-results__option[aria-selected='true'] {
  background-color: var(--color-cream);
  color: var(--color-black);
}

.post--mandarin .post__desc::before {
  background-image: url("../images/el.svg");
}

.post--egg .post__desc::before {
  background-image: url("../images/el-2.svg");
}

.post--undpBlue .post__desc::before {
  background-image: url("../images/el-3.svg");
}

#block-unccd-site-theme-local-tasks .tabs {
  display: flex;
  flex-flow: row wrap;
}

#block-unccd-site-theme-local-tasks .tabs li {
  background-color: var(--color-cream);
  display: block;
  margin: 0;
}

#block-unccd-site-theme-local-tasks .tabs li:hover {
  background-color: gainsboro;
}

#block-unccd-site-theme-local-tasks .tabs li:not(:last-child) {
  border-right: 1px solid var(--color-white);
}

#block-unccd-site-theme-local-tasks .tabs li.is-active {
  background-color: var(--color-unepBlue);
}

#block-unccd-site-theme-local-tasks .tabs li.is-active a {
  color: var(--color-white);
}

#block-unccd-site-theme-local-tasks .tabs li a {
  font-size: var(--f-size-p-font-size);
  line-height: var(--f-size-p-line-height);
  color: var(--color-black);
  padding: 8px 30px;
}

#block-unccd-site-theme-local-tasks .tabs li a.is-active {
  background-color: transparent;
}

#block-unccd-site-theme-local-tasks .tabs li a:hover {
  background-color: transparent;
}

#block-unccd-site-theme-help p {
  font-size: var(--f-size-p-s-font-size);
}

#block-unccd-site-theme-help p a {
  color: var(--color-unepBlue);
}

#block-unccd-site-theme-help p a:hover {
  text-decoration: underline;
}

label.option {
  font-size: var(--f-size-p-s-font-size);
  display: inline-block;
  vertical-align: middle;
}

.vertical-tabs__menu-item-summary {
  color: var(--color-unepBlue);
}

#edit-submit,
#edit-discard-changes,
#edit-revert,
#edit-save-to-library,
#edit-preview {
  font-size: var(--f-size-p-xxs-font-size);
  align-items: center;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-weight: bold;
  justify-content: center;
  min-height: 46px;
  outline: none;
  padding: 5px 25px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .3s;
}

#edit-submit {
  background-color: var(--color-frog);
}

#edit-submit:hover, #edit-submit:focus, #edit-submit:active {
  background-color: #1e4c20;
}

#edit-discard-changes,
#edit-preview {
  background-color: var(--color-egg);
}

#edit-discard-changes:hover, #edit-discard-changes:focus, #edit-discard-changes:active,
#edit-preview:hover,
#edit-preview:focus,
#edit-preview:active {
  background-color: #c57808;
}

#edit-revert {
  background-color: var(--color-mandarin);
}

#edit-revert:hover, #edit-revert:focus, #edit-revert:active {
  background-color: #e80700;
}

#edit-save-to-library {
  background-color: var(--color-unepBlue);
}

#edit-save-to-library:hover, #edit-save-to-library:focus, #edit-save-to-library:active {
  background-color: #003959;
}

.form-item input[type="text"],
.form-item input[type="url"],
.form-item input[type="password"],
.form-item input[type="email"],
.form-item input[type="number"],
.form-item input[type="file"],
.form-item input[type="date"],
.form-item input[type="time"] {
  font-size: var(--f-size-p-sx-font-size);
  background-color: var(--color-cream);
  border: 1px solid var(--color-gray);
  color: var(--color-black);
  font-family: Roboto, Helvetica, Arial, sans-serif;
  height: 36px;
  outline: none;
  padding: 0 15px;
  transition: box-shadow .3s;
  width: 100%;
}

.form-item input[type="text"]::-webkit-input-placeholder,
.form-item input[type="url"]::-webkit-input-placeholder,
.form-item input[type="password"]::-webkit-input-placeholder,
.form-item input[type="email"]::-webkit-input-placeholder,
.form-item input[type="number"]::-webkit-input-placeholder,
.form-item input[type="file"]::-webkit-input-placeholder,
.form-item input[type="date"]::-webkit-input-placeholder,
.form-item input[type="time"]::-webkit-input-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.form-item input[type="text"]:-moz-placeholder,
.form-item input[type="url"]:-moz-placeholder,
.form-item input[type="password"]:-moz-placeholder,
.form-item input[type="email"]:-moz-placeholder,
.form-item input[type="number"]:-moz-placeholder,
.form-item input[type="file"]:-moz-placeholder,
.form-item input[type="date"]:-moz-placeholder,
.form-item input[type="time"]:-moz-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.form-item input[type="text"]::-moz-placeholder,
.form-item input[type="url"]::-moz-placeholder,
.form-item input[type="password"]::-moz-placeholder,
.form-item input[type="email"]::-moz-placeholder,
.form-item input[type="number"]::-moz-placeholder,
.form-item input[type="file"]::-moz-placeholder,
.form-item input[type="date"]::-moz-placeholder,
.form-item input[type="time"]::-moz-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.form-item input[type="text"]:-ms-input-placeholder,
.form-item input[type="url"]:-ms-input-placeholder,
.form-item input[type="password"]:-ms-input-placeholder,
.form-item input[type="email"]:-ms-input-placeholder,
.form-item input[type="number"]:-ms-input-placeholder,
.form-item input[type="file"]:-ms-input-placeholder,
.form-item input[type="date"]:-ms-input-placeholder,
.form-item input[type="time"]:-ms-input-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.form-item input[type="text"]:focus,
.form-item input[type="url"]:focus,
.form-item input[type="password"]:focus,
.form-item input[type="email"]:focus,
.form-item input[type="number"]:focus,
.form-item input[type="file"]:focus,
.form-item input[type="date"]:focus,
.form-item input[type="time"]:focus {
  border-color: var(--color-unepBlue);
  box-shadow: 0 1px 5px var(--color-silver);
  outline-color: var(--color-unepBlue);
  transition: all .3s;
}

.form-item input[type="file"] {
  padding: calc(0.35rem - 1px) calc(1rem - 1px);
}

.form-item textarea {
  font-size: var(--f-size-p-sx-font-size);
  background-color: var(--color-cream);
  border: 1px solid var(--color-gray);
  color: var(--color-black);
  font-family: Roboto, Helvetica, Arial, sans-serif;
  height: 165px;
  padding: 15px;
  resize: none;
  transition: box-shadow .3s;
  width: 100%;
}

.form-item textarea::-webkit-input-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.form-item textarea:-moz-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.form-item textarea::-moz-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.form-item textarea:-ms-input-placeholder {
  color: var(--color-black);
  opacity: 1;
}

.form-item textarea:focus {
  border-color: var(--color-unepBlue);
  box-shadow: 0 1px 5px var(--color-silver);
  outline-color: var(--color-unepBlue);
  transition: all .3s;
}

.form-item label {
  font-size: var(--f-size-p-sx-font-size);
  display: block;
}

.form-item label:not(:last-child) {
  margin-bottom: 10px;
  max-width: 200px;
}

.form-type-checkbox {
  align-items: center;
  display: flex;
}

.checkbox {
  align-items: center;
  cursor: pointer;
  display: flex;
  position: relative;
}

.checkbox:not(:last-child) {
  margin-right: 7px;
}

.checkbox__indicator::before {
  background-image: url("../images/checked.svg");
}

.checkbox:hover .checkbox__indicator::before, .checkbox:focus .checkbox__indicator::before, .checkbox:active .checkbox__indicator::before {
  transform: scale(0.5);
}

.checkbox input[type='checkbox'] {
  height: 20px;
  left: 0;
  outline: none;
  position: absolute;
  top: 0;
  width: 20px;
  z-index: 1;
}

.checkbox input[type='checkbox']:checked ~ .checkbox__indicator {
  border-color: var(--color-undpBlue);
}

.checkbox input[type='checkbox']:checked ~ .checkbox__indicator::before {
  transform: scale(1);
}

.checkbox__indicator {
  border: 1px solid var(--color-black);
  display: block;
  flex: 0 0 20px;
  height: 20px;
  position: relative;
  transition: all .3s;
  width: 20px;
}

.checkbox__indicator::before {
  background-color: var(--color-undpBlue);
  content: '';
  height: 10px;
  left: 50%;
  margin-left: -5px;
  margin-top: -5px;
  position: absolute;
  top: 50%;
  transform: scale(0);
  transform-origin: center;
  transition: all .3s;
  width: 10px;
}

.radio {
  align-items: center;
  cursor: pointer;
  display: flex;
  position: relative;
}

.radio:not(:last-child) {
  margin-right: 7px;
}

.radio:hover .radio__indicator::before, .radio:focus .radio__indicator::before, .radio:active .radio__indicator::before {
  transform: scale(0.5);
}

.radio input[type='radio'] {
  height: 20px;
  left: 0;
  outline: none;
  position: absolute;
  top: 0;
  width: 20px;
  z-index: 1;
}

.radio input[type='radio']:checked ~ .radio__indicator {
  border-color: var(--color-undpBlue);
  border-radius: 50%;
}

.radio input[type='radio']:checked ~ .radio__indicator::before {
  border-radius: 50%;
  transform: scale(1);
}

.radio__indicator {
  border: 1px solid var(--color-black);
  display: block;
  flex: 0 0 20px;
  height: 20px;
  position: relative;
  transition: all .3s;
  width: 20px;
  border-radius: 50%;
}

.radio__indicator::before {
  background-color: var(--color-undpBlue);
  content: '';
  height: 10px;
  left: 50%;
  margin-left: -5px;
  margin-top: -5px;
  position: absolute;
  top: 50%;
  transform: scale(0);
  transform-origin: center;
  transition: all .3s;
  width: 10px;
}

@media (min-width: 768px) {
  .ui-dialog .js-form-item,
  .user-login-form .js-form-item,
  .user-register-form .js-form-item,
  .user-pass .js-form-item,
  .user-pass-reset .js-form-item {
    flex-flow: row wrap;
  }
  .ui-dialog .js-form-item label,
  .user-login-form .js-form-item label,
  .user-register-form .js-form-item label,
  .user-pass .js-form-item label,
  .user-pass-reset .js-form-item label {
    flex: 1;
  }
  .ui-dialog .js-form-item label:not(:last-child),
  .user-login-form .js-form-item label:not(:last-child),
  .user-register-form .js-form-item label:not(:last-child),
  .user-pass .js-form-item label:not(:last-child),
  .user-pass-reset .js-form-item label:not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
    max-width: 200px;
  }
  .ui-dialog input[type="text"],
  .ui-dialog input[type="url"],
  .ui-dialog input[type="password"],
  .ui-dialog input[type="email"],
  .ui-dialog select,
  .user-login-form input[type="text"],
  .user-login-form input[type="url"],
  .user-login-form input[type="password"],
  .user-login-form input[type="email"],
  .user-login-form select,
  .user-register-form input[type="text"],
  .user-register-form input[type="url"],
  .user-register-form input[type="password"],
  .user-register-form input[type="email"],
  .user-register-form select,
  .user-pass input[type="text"],
  .user-pass input[type="url"],
  .user-pass input[type="password"],
  .user-pass input[type="email"],
  .user-pass select,
  .user-pass-reset input[type="text"],
  .user-pass-reset input[type="url"],
  .user-pass-reset input[type="password"],
  .user-pass-reset input[type="email"],
  .user-pass-reset select {
    flex: 1;
    flex-grow: 2;
  }
  .ui-dialog .js-form-item-settings-admin-label label,
  .user-login-form .js-form-item-settings-admin-label label,
  .user-register-form .js-form-item-settings-admin-label label,
  .user-pass .js-form-item-settings-admin-label label,
  .user-pass-reset .js-form-item-settings-admin-label label {
    flex: none;
  }
  .user-login-form,
  .user-register-form,
  .user-pass,
  .user-pass-reset {
    width: 480px;
  }
  .user-login-form .js-form-item,
  .user-register-form .js-form-item,
  .user-pass .js-form-item,
  .user-pass-reset .js-form-item {
    flex-flow: row wrap;
  }
  .user-login-form .js-form-item label,
  .user-register-form .js-form-item label,
  .user-pass .js-form-item label,
  .user-pass-reset .js-form-item label {
    flex: 1;
  }
  .user-login-form .js-form-item label:not(:last-child),
  .user-register-form .js-form-item label:not(:last-child),
  .user-pass .js-form-item label:not(:last-child),
  .user-pass-reset .js-form-item label:not(:last-child) {
    margin-bottom: 10px;
    margin-right: 0;
    max-width: 200px;
  }
  .user-login-form input[type="text"],
  .user-login-form input[type="url"],
  .user-login-form input[type="password"],
  .user-login-form input[type="email"],
  .user-login-form select,
  .user-register-form input[type="text"],
  .user-register-form input[type="url"],
  .user-register-form input[type="password"],
  .user-register-form input[type="email"],
  .user-register-form select,
  .user-pass input[type="text"],
  .user-pass input[type="url"],
  .user-pass input[type="password"],
  .user-pass input[type="email"],
  .user-pass select,
  .user-pass-reset input[type="text"],
  .user-pass-reset input[type="url"],
  .user-pass-reset input[type="password"],
  .user-pass-reset input[type="email"],
  .user-pass-reset select {
    flex: none;
    flex-grow: 1;
  }
  .contact-message-form {
    margin: 0 auto;
    width: 500px;
  }
}

.messages--status {
  height: 100%;
  margin: 0 auto;
  width: calc(100% - 45px);
}

@media (min-width: 1280px) {
  .messages--status {
    width: calc(100% - 115px);
  }
}

@media (min-width: 1430px) {
  .checkbox input {
    height: 24px;
    width: 24px;
  }
  .checkbox__indicator {
    flex: 0 0 24px;
    height: 24px;
    width: 24px;
  }
  .messages--status {
    width: 1224px;
  }
}

.position-center {
  display: flex;
  justify-content: center;
  text-align: center;
}

.position-left {
  display: flex;
  justify-content: flex-start;
  text-align: left;
}

.position-right {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

.publication-sidebar img {
  max-width: 100%;
}

.publication-sidebar picture {
  max-width: 100%;
}

.color-list {
  display: inline-flex !important;
}

.select2-container--open {
  z-index: 1460;
}

.unccd-sat-marker {
  background-image: url("../images/marker-icon.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 40px;
  width: 25px;
}

.image-record {
  display: inline-flex;
}

.image-icon {
  background-color: var(--color-white);
  background-position-y: 50%;
  background-repeat: no-repeat;
  background-size: 120px;
  border: solid 1px #000;
  display: inline-block;
  height: 70px;
  margin-right: 5px;
  width: 120px;
}

.layout-builder-dialog .select2-container--default,
.layout-builder-save-to-library .select2-container--default {
  flex: 1;
  flex-grow: 2;
}

.layout-builder-dialog .select2-container--default .select2-selection--single,
.layout-builder-save-to-library .select2-container--default .select2-selection--single {
  align-items: center;
  background-color: var(--color-cream);
  border: 1px solid var(--color-gray);
  border-radius: 0;
  color: var(--color-black);
  display: flex;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--f-size-p-sx-font-size);
  min-height: 36px;
  padding: 0 15px;
  width: 100%;
}

.layout-builder-dialog .select2-container--default .select2-selection--single .select2-selection__placeholder,
.layout-builder-save-to-library .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-black);
}

.layout-builder-dialog .select2-container--default .select2-selection--single .select2-selection__rendered,
.layout-builder-save-to-library .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-black);
  height: 100%;
  line-height: 34px;
  padding: 0;
  width: 97%;
}

.layout-builder-dialog .select2-container--default .select2-selection--single .select2-selection__arrow,
.layout-builder-save-to-library .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}

.layout-builder-dialog .select2-container--default .select2-selection--single .select2-selection__arrow b,
.layout-builder-save-to-library .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: transparent #000 #000 transparent;
  border-style: solid;
  border-width: 2px;
  height: 8px;
  left: 50%;
  margin-left: -4px;
  margin-top: -6px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 8px;
}

.layout-builder-dialog .select2-container--default .select2-selection--multiple,
.layout-builder-save-to-library .select2-container--default .select2-selection--multiple {
  align-items: center;
  background-color: var(--color-cream);
  border: 1px solid var(--color-gray);
  border-radius: 0;
  color: var(--color-black);
  display: flex;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--f-size-p-sx-font-size);
  min-height: 36px;
  padding: 0 3px;
  width: 100%;
}

.layout-builder-dialog .select2-container--default .select2-selection--multiple .select2-selection__placeholder,
.layout-builder-save-to-library .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: var(--color-black);
}

.layout-builder-dialog .select2-container--default .select2-selection--multiple .select2-selection__choice,
.layout-builder-save-to-library .select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: 0;
}

.layout-builder-dialog .select2-container--default .select2-selection--multiple .select2-search__field,
.layout-builder-save-to-library .select2-container--default .select2-selection--multiple .select2-search__field {
  min-width: 60px;
}

.layout-builder-dialog .select2-container--default .select2-selection--multiple .select2-search__field::placeholder,
.layout-builder-save-to-library .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
  color: var(--color-black);
}

.layout-builder-dialog .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.layout-builder-save-to-library .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: #000 transparent transparent #000;
}

.layout-builder-dialog .image-record-select .select2-container--default .select2-selection--single,
.layout-builder-save-to-library .image-record-select .select2-container--default .select2-selection--single {
  height: 80px;
  padding: 4px 5px;
}

.layout-builder-dialog .image-record-select .select2-container--default .select2-selection--single .select2-selection__clear,
.layout-builder-save-to-library .image-record-select .select2-container--default .select2-selection--single .select2-selection__clear {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

.layout-builder-dialog .image-record-select .image-record,
.layout-builder-save-to-library .image-record-select .image-record {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.layout-builder-dialog .color-record,
.layout-builder-save-to-library .color-record {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.layout-builder-dialog .color-icon,
.layout-builder-save-to-library .color-icon {
  height: 28px;
}

.layout-builder-dialog .form-item .description,
.layout-builder-save-to-library .form-item .description {
  font-style: italic;
}

.layout-builder-dialog .linkit-ui-autocomplete,
.layout-builder-save-to-library .linkit-ui-autocomplete {
  max-width: calc(100% - 254px);
}

.layout-builder-dialog .checkbox:not(:last-child),
.layout-builder-save-to-library .checkbox:not(:last-child) {
  margin-bottom: 0;
}

.layout-builder-dialog .media-library-form-element .fieldset-wrapper,
.layout-builder-save-to-library .media-library-form-element .fieldset-wrapper {
  width: 100%;
}

.layout-builder-dialog .media-library-form-element .fieldset-wrapper .media-library-item--grid,
.layout-builder-save-to-library .media-library-form-element .fieldset-wrapper .media-library-item--grid {
  width: 33%;
}

.layout-builder-dialog .media-library-form-element .fieldset-wrapper .media-library-item--grid .media-library-item__remove,
.layout-builder-save-to-library .media-library-form-element .fieldset-wrapper .media-library-item--grid .media-library-item__remove {
  min-height: 21px;
}

.layout-builder-dialog .media-library-form-element .fieldset-wrapper .media-library-item--grid::before,
.layout-builder-save-to-library .media-library-form-element .fieldset-wrapper .media-library-item--grid::before {
  border: 2px solid var(--color-undpBlue);
  width: calc(100% - 13px);
}

.media-library-item--grid::before {
  border: 1px solid var(--color-gray);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  content: '';
  height: calc(100% - 4px);
  left: .4375rem;
  pointer-events: none;
  position: absolute;
  top: .4375rem;
  transition: border-color .2s, color .2s, background .2s;
  width: calc(100% - 14px);
  z-index: 2;
}

.media-library-item--grid article {
  align-items: center;
  display: flex;
  justify-content: center;
}

.media-library-item--grid article .media-library-item__preview {
  max-width: calc(100% - 2px);
  width: calc(100% - 2px);
}

.media-library-item--grid article .media-library-item__preview img {
  max-width: calc(100% - 2px);
}

.view-media-library .views-view-table tbody {
  text-align: center;
}

.view-media-library .views-view-table tbody td {
  padding: 10px 15px;
}

.image-record-select .select2-container .select2-selection {
  height: 80px;
}

.block-extra-field-blockuserusermember-for .form-item {
  display: inline-flex;
  flex-direction: column;
  margin: 30px 0;
}

.block-extra-field-blockuserusermember-for .form-item .label {
  margin-bottom: 10px;
  position: relative;
}

.element-message,
.element-layout-message {
  display: none;
}

.layout-builder__layout .element-layout-message {
  display: block;
}

.layout-builder__layout .constrained section .constrained.constrained--large,
.layout-builder__layout .constrained div .constrained.constrained--large {
  border: 6px double #f4daa6;
  max-width: 100%;
  padding: 20px;
}

.layout-builder__layout .constrained section .constrained.constrained--large .element-message,
.layout-builder__layout .constrained div .constrained.constrained--large .element-message {
  background-position-y: 50%;
  display: block;
  font-size: 14px;
  font-style: italic;
  margin-bottom: 20px;
  margin-left: 10px;
  padding: 20px 20px 20px 30px;
}

.layout-builder__layout .block-unccd-highlighted-info {
  background-color: transparent;
}

.sitemap .sitemap-item {
  margin-bottom: 0;
}

.sitemap ul,
.sitemap .menu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 5px 0 5px 30px;
  border-left: 1px solid var(--color-silver);
}

.sitemap li,
.sitemap .menu-item {
  position: relative;
  display: flex;
  flex-direction: column;
}

.sitemap li::before,
.sitemap .menu-item::before {
  content: "";
  position: absolute;
  top: 17px;
  left: -30px;
  width: 20px;
  height: 1px;
  background-color: var(--color-silver);
}

.sitemap li ul,
.sitemap li .menu,
.sitemap .menu-item ul,
.sitemap .menu-item .menu {
  margin-left: 18px;
}

@media screen and (min-width: 77em) {
  .path-user .layout-content .region-content {
    min-height: 300px;
  }
}

.mapboxgl-marker.project-marker {
  max-height: 70px;
  max-width: 50px;
}

.editor-image-dialog .js-form-item .js-form-submit {
  margin: 10px 0 0;
}

.editor-image-dialog .js-form-item .js-form-required {
  align-items: center;
  display: flex;
}

.editor-image-dialog .js-form-item .fieldset-legend {
  font-size: var(--f-size-p-sx-font-size);
  font-weight: normal;
}

.editor-image-dialog .js-form-item .js-form-type-radio .radio {
  font-size: 13px;
  margin-bottom: 0;
}

.editor-image-dialog .js-form-type-checkbox .checkbox {
  font-size: 13px;
  margin-bottom: 0;
}

.layout-builder-save-to-library .media-library-form-element {
  font-size: var(--f-size-p-xs-font-size);
  color: var(--color-black);
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
}

.layout-builder-save-to-library .media-library-form-element input[type="submit"] {
  font-size: var(--f-size-p-xxs-font-size);
  align-items: center;
  border: none;
  border-radius: 0;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-weight: bold;
  justify-content: center;
  min-height: 46px;
  outline: none;
  padding: 5px 25px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .3s;
}

.layout-builder-save-to-library .media-library-form-element input[data-drupal-selector^="edit-image-media-library-open-button"] {
  background-color: var(--color-egg);
}

.layout-builder-save-to-library .media-library-form-element input[data-drupal-selector^="edit-image-media-library-open-button"]:hover, .layout-builder-save-to-library .media-library-form-element input[data-drupal-selector^="edit-image-media-library-open-button"]:focus, .layout-builder-save-to-library .media-library-form-element input[data-drupal-selector^="edit-image-media-library-open-button"]:active {
  background-color: #c57808;
}

.layout-builder-save-to-library .media-library-form-element input[data-drupal-selector^="edit-image-media-library-update-widget"] {
  background-color: var(--color-mandarin);
}

.layout-builder-save-to-library .media-library-form-element input[data-drupal-selector^="edit-image-media-library-update-widget"]:hover, .layout-builder-save-to-library .media-library-form-element input[data-drupal-selector^="edit-image-media-library-update-widget"]:focus, .layout-builder-save-to-library .media-library-form-element input[data-drupal-selector^="edit-image-media-library-update-widget"]:active {
  background-color: #e80700;
}

@media (min-width: 768px) {
  .mailchimp-signup-subscribe-form.newsletter-form select,
  .mailchimp-signup-subscribe-form.newsletter-form input {
    height: 50px;
  }
  .mailchimp-signup-subscribe-form.newsletter-form .fieldgroup select,
  .mailchimp-signup-subscribe-form.newsletter-form .fieldgroup input {
    height: 20px;
  }
  .mailchimp-signup-subscribe-form.newsletter-form .mailchimp-newsletter-mergefields {
    margin-bottom: 60px;
  }
  .mailchimp-signup-subscribe-form.newsletter-form .fieldset-legend {
    font-weight: normal;
  }
  .mailchimp-signup-subscribe-form.newsletter-form legend {
    margin-bottom: 30px;
  }
  .mailchimp-signup-subscribe-form.newsletter-form .checkbox {
    margin-bottom: 0;
  }
  .mailchimp-signup-subscribe-form.newsletter-form .form-type-checkbox {
    margin-bottom: 20px;
  }
  .mailchimp-signup-subscribe-form.newsletter-form .checkbox__indicator {
    border: 0;
  }
}

body {
  top: 0 !important;
}

#goog-gt-tt,
.goog-te-banner-frame,
#google_translate_element2 {
  display: none !important;
}

.goog-te-menu-value:hover {
  text-decoration: none !important;
}

.skiptranslate .dropdown {
  z-index: 1;
}

.split .link__text {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.split .link__text span {
  color: var(--color-black);
  margin-right: 5px;
}

.node-layout-builder-form .checkbox {
  margin-bottom: 0;
}

@media (max-width: 424px) {
  .heading--heading-1 {
    font-size: 34px;
  }
}

@media screen and (max-width: 926px) {
  .block-unccd-cta-block .cta-button {
    margin-bottom: 0;
    opacity: 1;
    transform: none;
  }
  .block-views-blockhp-hpe-hp-publication .views-element-container > div > div,
  .block-views-blockhp-hpe-hp-events .views-element-container > div > div,
  [data-aos^=zoom][data-aos^=zoom],
  [data-aos^=fade][data-aos^=fade] {
    margin-bottom: 0;
    opacity: 1;
    transform: none;
  }
  .topic__image:not(:last-child) {
    margin-bottom: 30px;
  }
  .left-margin-90px {
    margin-left: 0;
  }
  .related-news .topic__info {
    max-height: 196px;
    max-width: 55%;
    overflow: hidden;
  }
  .newsletter-form .form-type-checkbox {
    align-items: normal;
  }
  .social-widget {
    display: none;
  }
  .page-head .breadcrumb,
  .hero .breadcrumb {
    display: flex;
  }
}

@media screen and (max-width: 1370px) {
  .block-unccd-site-core-hero .heading--heading-2 {
    font-size: 44px;
  }
  .block-unccd-site-core-hero .page-head__image {
    height: auto;
  }
  .block-unccd-site-core-hero .page-head__image .date--image {
    height: 100%;
  }
}

.field--name-body {
  line-height: 30px;
}

@media (min-width: 768px) {
  .publication__map {
    flex: 0 0 calc(100% - 33.333%);
    padding-right: 25px;
    width: calc(100% - 33.333%);
  }
}

.block-unccd-highlighted-info {
  margin-bottom: 0;
}

.hero__info .paragraph .link {
  color: var(--color-white);
}

.hero__info .paragraph .link:hover, .hero__info .paragraph .link:active {
  color: var(--color-blue);
}

.hero__info .paragraph .link:focus {
  color: var(--color-blue);
  outline: none;
}

.media-library-widget-modal [data-drupal-selector="edit-media"] div[data-drupal-selector="edit-preview"] {
  max-width: 300px;
}

.media-library-widget-modal [data-drupal-selector="edit-media"] .vertical-tabs {
  display: flex;
  margin: 0;
  width: 100%;
}

.view-unccd-resources .cell--third {
  margin: 0 15px 60px;
  padding: 0 15px;
}

.view-unccd-resources .paragraph--ms {
  font-size: 18px;
  line-height: 30px;
}

.view-unccd-resources .link--ms {
  font-size: 20px;
  line-height: 24px;
}

.topic__info {
  max-height: 100%;
  overflow: hidden;
}

.block-unccd-menu-item-block.section-container,
.block-views-blocksessions-recent-sessions.section-container {
  flex-direction: column;
}

.block-unccd-menu-item-block.section-nav .list-item:last-child .link,
.block-views-blocksessions-recent-sessions.section-nav .list-item:last-child .link {
  padding: 19px 0;
}

.block-unccd-menu-item-block .head.head--text,
.block-views-blocksessions-recent-sessions .head.head--text {
  padding-top: 0;
}

.block-unccd-menu-item-block .heading,
.block-views-blocksessions-recent-sessions .heading {
  margin-bottom: 15px;
}

.block-unccd-menu-item-block .head--right::before,
.block-views-blocksessions-recent-sessions .head--right::before {
  left: unset;
  right: 0;
}

.block-unccd-menu-item-block .list .list-item:last-child,
.block-views-blocksessions-recent-sessions .list .list-item:last-child {
  border-bottom: none;
}

.block-unccd-related .section-nav__list--mandarin .list-item:last-child {
  border-bottom: none;
}

@media (min-width: 1240px) {
  .block-layout-builder .field--name-body {
    max-width: 1100px;
  }
  .cell--eighth .block-layout-builder .field--name-body,
  .cell--ninth .block-layout-builder .field--name-body,
  .section-content .block-layout-builder .field--name-body {
    max-width: 760px;
  }
}

.skiptranslate.goog-te-gadget ul {
  display: table;
}

.intro-text-2 {
  margin-bottom: 1em;
  font-weight: bold;
  font-size: var(--f-size-p-mx-font-size);
  line-height: var(--f-size-p-mx-line-height);
}

.paragraph--event-text {
  margin-bottom: 0;
}

img.align-left {
  margin-right: 1em;
}

.field--name-body, .cke_editable {
  word-break: break-word;
}

.field--name-body .paragraph--mx, .cke_editable .paragraph--mx {
  font-weight: bold;
}

.field--name-body img, .cke_editable img {
  height: auto;
  max-width: 100%;
}

.field--name-body p:not([class]), .field--name-body ul:not([class]), .cke_editable p:not([class]), .cke_editable ul:not([class]) {
  margin-bottom: 1em;
}

.field--name-body p[class=""], .field--name-body ul[class=""], .cke_editable p[class=""], .cke_editable ul[class=""] {
  margin-bottom: 1em;
}

.field--name-body p.no-margin, .field--name-body ul.no-margin, .cke_editable p.no-margin, .cke_editable ul.no-margin {
  margin-bottom: 0 !important;
}

.field--name-body p.paragraph, .field--name-body ul.paragraph, .cke_editable p.paragraph, .cke_editable ul.paragraph {
  margin-bottom: 1em;
}

.field--name-body p.heading--heading-7, .field--name-body p.heading--heading-8, .field--name-body p.heading--heading-9, .field--name-body ul.heading--heading-7, .field--name-body ul.heading--heading-8, .field--name-body ul.heading--heading-9, .cke_editable p.heading--heading-7, .cke_editable p.heading--heading-8, .cke_editable p.heading--heading-9, .cke_editable ul.heading--heading-7, .cke_editable ul.heading--heading-8, .cke_editable ul.heading--heading-9 {
  margin: 1em 0;
  display: block;
}

.field--name-body h1, .field--name-body h2, .field--name-body h3, .field--name-body h4, .field--name-body h5, .field--name-body h6, .cke_editable h1, .cke_editable h2, .cke_editable h3, .cke_editable h4, .cke_editable h5, .cke_editable h6 {
  margin: 1em 0;
  display: block;
}

#contact-message-feedback-form .checkbox {
  margin-bottom: 0 !important;
}

.goog-te-gadget .dropdown__select .dropdown__text {
  font-size: var(--f-size-p-xs-font-size);
}

.goog-te-gadget .dropdown:hover .dropdown__list, .goog-te-gadget .dropdown:focus .dropdown__list, .goog-te-gadget .dropdown:active .dropdown__list {
  top: 100%;
  transition: unset;
}

.goog-te-gadget .dropdown .dropdown__list {
  transition: unset;
}

.block-unccd-document .section-nav__sub {
  overflow: unset;
}

.block-unccd-document .section-nav__sub .link__text {
  word-break: break-all;
}

.ckeditor-accordion-container dl {
  border: none;
}

.ckeditor-accordion-container dl:after {
  display: block;
  border-bottom: 1px solid;
  margin-top: 5px;
}

.ckeditor-accordion-container dl dt:not(:first-child) {
  border-top: 1px solid black;
}

.ckeditor-accordion-container dl dt a {
  cursor: pointer;
  -webkit-transition: background-color 300ms;
  transition: background-color 300ms;
  background: transparent;
  color: var(--color-undpBlue);
  padding: 15px 0;
  border-radius: 0;
  display: flex;
  border: none;
  font-weight: bold;
  font-size: 1.17em;
}

.ckeditor-accordion-container dl dt a .ckeditor-accordion-toggle {
  right: 0;
  left: unset;
}

.ckeditor-accordion-container dl dt a .ckeditor-accordion-toggle:before {
  background: #00abf1;
  height: 3px;
}

.ckeditor-accordion-container dl dt a .ckeditor-accordion-toggle:after {
  background: #00abf1;
  height: 3px;
}

.ckeditor-accordion-container dl dt a:hover {
  background-color: initial;
}

.ckeditor-accordion-container dl dt.active a {
  background-color: initial;
}

.footer__info-contact .footer__info-contact-list:nth-last-of-type(1) {
  margin-bottom: 30px;
}

.empty-heading .heading {
  margin-bottom: 5px;
}

.empty-heading .section-nav__list {
  margin-top: 10px;
}

.empty-heading .section-nav__list .heading {
  display: none;
}

.empty-heading.section-nav .list-item:first-child {
  border-top: none;
}

.block-unccd-document .section-nav__filter-item.active {
  padding-bottom: 0;
}

.block-unccd-document .section-nav .list-item:last-child {
  border-bottom: none;
}

.block-unccd-document .section-nav .list-item:last-child .link {
  padding-bottom: 19px;
}

.block-unccd-document .section-nav .list-item .link:hover .cls-1 {
  fill: var(--color-blue);
}

.block-unccd-document .section-nav .section-nav__sub {
  max-height: unset;
}

.tooltip-option {
  display: flex;
  align-items: center;
}

.tooltip-option .select2-tooltip {
  margin-left: 15px;
  background-image: url("../images/tooltip.png");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  margin-left: auto;
}

.background--highlight--highlight1 {
  background-image: url("../images/select/highlight/highlight1.png");
}

.background--highlight--highlight2 {
  background-image: url("../images/select/highlight/highlight2.png");
}

.background--highlight--highlight3 {
  background-image: url("../images/select/highlight/highlight3.png");
}

.background--highlight--highlight4 {
  background-image: url("../images/select/highlight/highlight4.png");
}

.background--highlight--highlight5 {
  background-image: url("../images/select/highlight/highlight5.png");
}

.background--highlight--highlight6 {
  background-image: url("../images/select/highlight/highlight6.png");
}

.background--highlight--highlight7 {
  background-image: url("../images/select/highlight/highlight7.png");
}

.background--highlight--highlight8 {
  background-image: url("../images/select/highlight/highlight8.png");
}

.background--highlight--highlight9 {
  background-image: url("../images/select/highlight/highlight9.png");
}

.background--highlight--highlight10 {
  background-image: url("../images/select/highlight/highlight10.png");
}

.background--highlight--highlight_map {
  background-image: url("../images/select/highlight/highlight_map.png");
}

.background--highlight--highlight_map_reverse {
  background-image: url("../images/select/highlight/highlight_map_reverse.png");
}

.background--cta--button {
  background-image: url("../images/select/cta/button.png");
}

.background--cta--image {
  background-image: url("../images/select/cta/image.png");
}

.background--cta--image-text {
  background-image: url("../images/select/cta/image-text.png");
}

.background--document--slider {
  background-image: url("../images/select/document/slider.png");
}

.background--document--list {
  background-image: url("../images/select/document/list.png");
}

.background--hero--small {
  background-image: url("../images/select/hero/small.png");
}

.background--hero--large {
  background-image: url("../images/select/hero/large.png");
}

.background--hero--head {
  background-image: url("../images/select/hero/head.png");
}

.background--hero--gradient {
  background-image: url("../images/select/hero/gradient.png");
}

.background--hero--head_only {
  background-image: url("../images/select/hero/head_only.png");
}

.background--hero--image_dark {
  background-image: url("../images/select/hero/image_dark.png");
}

.background--hero--image {
  background-image: url("../images/select/hero/image.png");
}

.background--hero--only_image_dark {
  background-image: url("../images/select/hero/only_image_dark.png");
}

.background--hero--only_image {
  background-image: url("../images/select/hero/only_image.png");
}

.background--hero--event {
  background-image: url("../images/select/hero/event.png");
}

.background--hero--drought {
  background-image: url("../images/select/hero/drought.png");
}

.background--map--countries {
  background-image: url("../images/select/map/countries.png");
}

.background--map--projects {
  background-image: url("../images/select/map/projects.png");
}

.background--partner--logos {
  background-image: url("../images/select/partner/logos.png");
}

.background--partner--titles {
  background-image: url("../images/select/partner/titles.png");
}

.background--related--news_one {
  background-image: url("../images/select/related/news_one.png");
}

.background--related--news_two {
  background-image: url("../images/select/related/news_two.png");
}

.background--related--news_three {
  background-image: url("../images/select/related/news_three.png");
}

.background--related--news_video_one {
  background-image: url("../images/select/related/news_video_one.png");
}

.background--related--news_video_three {
  background-image: url("../images/select/related/news_video_three.png");
}

.background--related--documents {
  background-image: url("../images/select/related/documents.png");
}

.background--related--documents_one {
  background-image: url("../images/select/related/documents_one.png");
}

.background--related--content_slider {
  background-image: url("../images/select/related/content_slider.png");
}

.background--related--further_reading {
  background-image: url("../images/select/related/further_reading.png");
}

.background--related--horizontal_menu {
  background-image: url("../images/select/related/horizontal_menu.png");
}

.background--menu--vertical {
  background-image: url("../images/select/menu/vertical.png");
}

.background--menu--vertical_with_color {
  background-image: url("../images/select/menu/vertical_with_color.png");
}

.background--menu--toolbox {
  background-image: url("../images/select/menu/toolbox.png");
}

.background--menu--horizontal {
  background-image: url("../images/select/menu/horizontal.png");
}

.background--menu--further_reading {
  background-image: url("../images/select/menu/further_reading.png");
}

.background--menu--other_links {
  background-image: url("../images/select/menu/other_links.png");
}

.background--primary {
  background-color: var(--color-mandarin);
}

.background--primary:hover, .background--primary:focus, .background--primary:active {
  background-color: #e80700;
}

.background--tertiary {
  background-color: var(--color-grass);
}

.background--tertiary:hover, .background--tertiary:focus, .background--tertiary:active {
  background-color: #007450;
}

.background--secondary {
  background-color: var(--color-frog);
}

.background--secondary:hover, .background--secondary:focus, .background--secondary:active {
  background-color: #00763c;
}