/*
 * .-----------------------------------------------------.
 * |                        FONTS                        |
 * '-----------------------------------------------------'
 */

@font-face {
  font-family: 'WorkSansLight';
  src: url('fonts/work-sans-light.woff2') format('woff2'), url('fonts/work-sans-light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'WorkSansMedium';
  src: url('fonts/work-sans-medium.woff2') format('woff2'), url('fonts/work-sans-medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'WorkSansBold';
  src: url('fonts/work-sans-bold.woff2') format('woff2'), url('fonts/work-sans-bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'WorkSansExtraBold';
  src: url('fonts/work-sans-extra-bold.woff2') format('woff2'), url('fonts/work-sans-extra-bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'WorkSansLightItalic';
  src: url('fonts/work-sans-light-italic.woff2') format('woff2'), url('fonts/work-sans-light-italic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Default font. */
.swop21,
.swop21 .l-font {
  font-family: 'WorkSansLight', sans-serif;
  font-weight: normal;
  font-style: normal;
}

.swop21 .med-font {
  font-family: 'WorkSansMedium', sans-serif;
  font-weight: normal;
  font-style: normal;
}

.swop21 .b-font {
  font-family: 'WorkSansBold', sans-serif;
  font-weight: normal;
  font-style: normal;
}

.swop21 .eb-font {
  font-family: 'WorkSansExtraBold', sans-serif;
  font-weight: normal;
  font-style: normal;
}

.swop21 .em-font {
  font-family: 'WorkSansLightItalic', sans-serif;
  font-weight: normal;
  font-style: normal;
}

.swop21 * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * .-----------------------------------------------------.
 * |            COMPATIBILITY WITH UNFPA SITE            |
 * '-----------------------------------------------------'
 */

body {
  min-width: 320px;
}

body.toolbar-drawer {
  padding-top: 0!important;
}

.max_wrapper {
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
}

body #main .breadcrumb,
.btn.btn-primary,
#page-title,
#toolbar,
.tabs-wrapper,
.block-workbench {
  display: none !important;
}

.messages {
  max-width: 100%;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* --- Resets --- */

body strong {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.swop21 * {
  font-family: inherit;
  font-weight: normal;
  font-style: normal;
}

.swop21 h1,
.swop21 h2,
.swop21 h3,
.swop21 h4,
.swop21 h5,
.swop21 h6 {
  color: inherit;
}

.swop21 blockquote {
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  border: 0;
  background: none;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.swop21 button {
  padding: 0;
  border: 0;
  background: none;
  outline: 0 none;
  color: #fff;
}

/*
 * .-----------------------------------------------------.
 * |                       GENERAL                       |
 * '-----------------------------------------------------'
 */

html body {
  background: #000;
}

.swop21 {
  min-width: 320px;
  width: 100%;
  color: #fff;
  font-size: 22px;
  line-height: 32px;
  overflow: hidden;
}

.swop21 * {
  outline: 0 none !important;
}

body .swop21 a {
  color: inherit;
  text-decoration: none;
}

.swop21 h2,
.swop21 h3,
.swop21 h4,
.swop21 p {
  margin: 0;
}

.swop21-uppercase {
  text-transform: uppercase;
}

.swop21-invisible {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.swop21-side-padd {
  padding-left: 12px;
  padding-right: 12px;
}

@media all and (min-width: 640px) {
  .swop21-side-padd {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media all and (min-width: 1000px) {
  .swop21-side-padd {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/*
 * .-----------------------------------------------------.
 * |                      EFFECTS                        |
 * '-----------------------------------------------------'
 */

/* --- Animated Lines --- */

.swop21-line-relative {
  position: relative;
}

.swop21-line {
  position: absolute;
  width: 0;
  height: 0;
}

.swop21-line-horiz {
  width: 100%;
  border-bottom: 1px solid #767676;
}

.swop21-line-vertic {
  height: 100%;
  border-right: 1px solid #767676;
}

html.js .swop21-line {
  width: 0;
  height: 0;
}

html.js .swop21-line-horiz.triggered {
  -webkit-animation: line-horiz 0.5s ease-out forwards;
  animation: line-horiz 0.5s ease-out forwards;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

html.js .swop21-line-vertic.triggered {
  -webkit-animation: line-vertic 1s ease-out forwards;
  animation: line-vertic 1s ease-out forwards;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

@-webkit-keyframes line-horiz {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes line-horiz {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@-webkit-keyframes line-vertic {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

@keyframes line-vertic {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

/* --- Fade Up --- */

html.js .swop21-fadeup {
  opacity: 0;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
}

html.js .swop21-fadeup.triggered {
  -webkit-animation: fadeup 1s ease-out forwards;
  animation: fadeup 1s ease-out forwards;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

@-webkit-keyframes fadeup {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeup {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/*
 * .-----------------------------------------------------.
 * |                       COLORS                        |
 * '-----------------------------------------------------'
 */

.swop21-font-outline,
.swop21-font-outline-hover {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  -webkit-text-fill-color: transparent;
}

a:hover .swop21-font-outline-hover {
  -webkit-text-fill-color: #fff;
}

/*---------*/
.path-sowp-2021 .container-fluid.page {
  padding: 0;
}
.swop21-subg-img-1 img {
  max-width: 100%;
}

.swop21 p {
  line-height: 1.5;
}
.swop21 ul {
  margin: 0 1.5em 1.5em 0;
  padding-left: 1.5em;
}
.swop21-front-title {
  padding: 1em 0 0.5em 0;
}
.path-sowp-2021 .footer-pad {
  margin: 0 !important;
}
.swop21-sdg-stat-platform .swop21-sdg-stat-prefix {
  font-size: 22px;
  line-height: 26px;
  margin-bottom: 7px;
  margin-top: 10px;
}

@media (max-width: 420px) {
  .lang-fr h2.swop21-intro-title {
    font-size: 42px;
    line-height: 46px;
  }
}