/**
 * Default Variables.

 */
@font-face {
  font-family: "Akrobat Regular";
  font-style: normal;
  font-weight: normal;
  src: local("Akrobat Regular"), url("../..//assets/fonts/Akrobat-Regular.woff") format("woff");
}
@font-face {
  font-family: "Akrobat Light";
  font-style: normal;
  font-weight: normal;
  src: local("Akrobat Light"), url("../..//assets/fonts/Akrobat-Light.woff") format("woff");
}
@font-face {
  font-family: "Akrobat ExtraLight";
  font-style: normal;
  font-weight: normal;
  src: local("Akrobat ExtraLight"), url("../..//assets/fonts/Akrobat-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Akrobat SemiBold";
  font-style: normal;
  font-weight: normal;
  src: local("Akrobat SemiBold"), url("../..//assets/fonts/Akrobat-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Akrobat Bold";
  font-style: normal;
  font-weight: normal;
  src: local("Akrobat Bold"), url("../..//assets/fonts/Akrobat-Bold.woff") format("woff");
}
@font-face {
  font-family: "Akrobat ExtraBold Regular";
  font-style: normal;
  font-weight: normal;
  src: local("Akrobat ExtraBold Regular"), url("../..//assets/fonts/akrobat-extrabold-webfont.woff") format("woff");
}
@font-face {
  font-family: "Akrobat Black";
  font-style: normal;
  font-weight: normal;
  src: local("Akrobat Black"), url("../..//assets/fonts/Akrobat-Black.woff") format("woff");
}
/*--------------------------------------------------*/
ul {
  list-style: none;
  font-size: 19px;
  line-height: 1.558571429;
}

ul.reduced {
  font-size: 13.3px;
}

/*-------P--------*/
p {
  font-weight: normal;
  -text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-size: 19px;
  line-height: 1.558571429;
  margin: 0 0 33.785px 0;
}

.reduced {
  font-size: 14.25px;
  line-height: 1.6365000005;
}

.back_brand_primary p {
  color: #fff;
}

/*------HEADINGS-----*/
h1, h2, h3, h4, h5 {
  display: inline-block;
  font-weight: bold;
  line-height: 1.25;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  margin-top: 0;
  margin-bottom: 14.5px;
}

h1 {
  font-family: "Akrobat ExtraBold Regular", sans-serif;
  font-size: 46px;
}

h2 {
  font-family: "Akrobat ExtraBold Regular", sans-serif;
  font-size: 45px;
}

.back_grey h2,
.back_white h2 {
  color: #00ACD8;
}

h3 {
  font-family: "Akrobat ExtraBold Regular", sans-serif;
  font-size: 35px;
}

h4 {
  font-family: "Akrobat ExtraBold Regular", sans-serif;
  font-size: 31px;
}

h5 {
  font-family: "Akrobat ExtraBold Regular", sans-serif;
  font-size: 29px;
}

h6 {
  font-family: "Akrobat SemiBold", sans-serif;
  font-size: 15px;
}

/*------HEADINGS-----*/
.back_brand_primary h1,
.back_brand_primary h2,
.back_brand_primary h3,
.back_brand_primary h4,
.back_brand_primary h5 {
  color: #fff;
}

/*------SPECIAL-------*/
h1.extra {
  display: inline-block;
  font-size: 62px;
  line-height: 73px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
}

@media only screen and (max-width: 980px) {
  h1.extra {
    font-size: 50px;
    line-height: 59px;
  }
}
@media only screen and (max-width: 980px) {
  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 23px;
  }

  p {
    font-size: 18.05px;
    line-height: 1.5196071433;
  }
}
* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  font-family: "Akrobat Regular", sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  text-align: center;
  color: #fff;
  background: #000;
  line-height: 1.558571429;
  overflow-x: hidden;
}

.wrap,
.back_default,
.sticky-nav {
  background: #000;
}

.back_brand_primary {
  background-color: #00ACD8;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto !important;
  display: block;
}

.fixed {
  position: fixed;
}

.clear {
  clear: both;
}

.left {
  float: left;
}

.right {
  float: right;
}

.text_left {
  text-align: left;
}

.text_center {
  text-align: center;
}

.text_right {
  text-align: right;
}

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

iframe {
  z-index: 2000;
  max-width: 100%;
  border: none;
}

.hidden {
  display: none;
}

.visible {
  visibility: visible;
}

.backstage {
  position: fixed;
  left: -3000px;
  opacity: 0;
}

.tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.4;
  filter: alpha(opacity=40);
  z-index: 0;
}

.z-1 {
  z-index: 1 !important;
}

.z-200 {
  z-index: 200 !important;
}

.relative {
  position: relative !important;
}

.fixed_section {
  position: fixed !important;
  width: 100%;
  z-index: 2000 !important;
  top: 72px;
  top: 0;
}

.position_sticky {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}
.mobile_only {
  display: none;
}

/*--------------------------------------------

COLORS

---------------------------------------------*/
.brand_primary {
  color: #00ACD8;
}

.back_brand_primary {
  background-color: brand-primary;
}

.brand_secondary {
  color: #96C7EB;
}

.back_brand_secondary {
  background-color: brand-secondary;
}

.brand_secondary_light {
  color: #F4F9FD;
}

.back_brand_secondary_light {
  background-color: #F4F9FD;
}

.back_white {
  background-color: white;
}

.back_grey {
  background-color: #eeeeee;
}

.back_grey_dark {
  background-color: #333333;
}

.text_light {
  color: white;
}

/*--------------------------------------------

LINKS

---------------------------------------------*/
a {
  color: #00ACD8;
  text-decoration: underline;
  font-weight: bold;
}

a:hover {
  text-decoration: none;
}

a.button {
  display: inline-block;
  padding: 25px 35px;
  font-size: 19px;
  line-height: 1.558571429;
  color: #fff;
  text-decoration: none;
  background: #00ACD8;
  border-radius: 12px;
  transition: all 0.5s ease;
}

a.button:hover {
  background: black;
}

/*--------------------------------------------

STRUCTURE [GRID ESTABLISHED IN CSS DIRECTORY]

---------------------------------------------*/
/*wraps the grid*/
#wrap {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  z-index: 1000;
  text-align: left;
}

.wrap {
  /*position:relative;*/
  min-width: 100%;
}

.masthead {
  margin-top: 70px;
}

.main {
  text-align: left;
}

.col .inner,
.inner {
  padding: 30px;
}

.bottom_0 .col {
  margin-bottom: 0 !important;
}

.top_0 .col {
  margin-top: 0 !important;
}

.padded,
.section.padded {
  padding: 75px 0;
}

.padded_half,
.section.padded_half {
  padding: 75px 0;
}

.padded_bottom,
.section.padded_bottom {
  padding: 0 0 75px 0;
}

.padded_top,
.section.padded_top {
  padding: 75px 0 0 0;
}

@media only screen and (max-width: 980px) {
  /*----MAIN---*/
  .mobile_only,
img.mobile_only {
    display: inline-block !important;
  }

  .mobile_only.mobile_block {
    display: block !important;
  }

  .mobile_hide,
img.mobile_hide {
    display: none !important;
  }

  #wrap,
div.main-wrap,
div.section,
.section.flush .col,
.guttered .col,
.guttered_deep .col,
.col {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
/*----------

LIFT EFFECT 

------------*/
.lift {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, 150px, 0px);
  -webkit-transform: translate3d(0px, 150px, 0px);
  -o-transform: translate(0px, 150px);
  -ms-transform: translate(0px, 150px);
  transform: translate3d(0px, 200, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 
.lift {
    -webkit-transform: translateY(-50px);    
}	
 */
.lift.no_fade {
  opacity: 1;
}

.lift.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

/*----------

Bounce

------------*/
@keyframes bounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.bounce {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.bounce:hover {
  animation-name: bounce;
  -moz-animation-name: bounce;
}

a.tooltip {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 300px;
  min-height: 100px;
  padding: 0 0 0 110px;
  color: #D54B32;
  font-size: 17.1px;
  line-height: 1.3247857147;
  text-decoration: none;
  background: url("../..//assets/img/measure.png") 0 0 no-repeat;
  background-size: 100px;
  text-align: center;
  transition: all 1200ms ease-out;
  transform-origin: bottom left;
  z-index: 10;
}

a.tooltip.animated {
  -webkit-animation: lever-animation 1s 2;
  /* Safari 4+ */
  -moz-animation: lever-animation 1s 2;
  /* Fx 5+ */
  -o-animation: lever-animation 1s 2;
  /* Opera 12+ */
  animation: lever-animation 1s 2;
  /* IE 10+, Fx */
}

@-webkit-keyframes lever-animation {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
a.tooltip span {
  text-align: left;
  display: block;
  margin-top: 35px;
}

.ui-widget.ui-widget-content,
.ui-widget-shadow,
.ui-widget-content {
  text-align: left;
  border: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  border-radius: 0;
  -webkit-border-radius: 0;
}

#powerTip {
  width: 500px;
  height: auto;
  font-weight: 600;
  background: #DD1567;
  border-color: #DD1567;
  white-space: normal;
}

#powerTip p {
  font-size: 14.25px;
  color: white;
  padding: 20px;
  text-align: left;
}

@media only screen and (max-width: 650px) {
  #powerTip {
    width: 80%;
  }

  #powerTip p {
    font-size: 11.4px;
    color: white;
    padding: 10px;
  }
}
ul.toggle-wrap li {
  display: inline;
}

/* The switch - the box around the toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The toggle */
.toggle {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid black;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.toggle:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 3px;
  background-color: black;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .toggle:before {
  -webkit-transform: translateX(44px);
  -ms-transform: translateX(44px);
  transform: translateX(44px);
}

/* Rounded toggles */
.toggle.round {
  border-radius: 34px;
}

.toggle.round:before {
  border-radius: 50%;
}

ul.dropdown-wrap {
  background: #96C7EB;
  list-style: none;
  margin: 0;
  padding-left: 0;
  text-transform: uppercase;
}

ul.dropdown-wrap li {
  background: #96C7EB;
  display: block;
  float: left;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}

ul.dropdown-wrap li:hover,
ul.dropdown-wrap li:focus-within {
  cursor: pointer;
}

li:focus-within a {
  outline: none;
}

ul.dropdown-wrap li ul.dropdown {
  background: #96C7EB;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 0;
  left: 0;
  display: none;
}

ul.dropdown-wrap li:hover > ul,
ul.dropdown-wrap li:focus-within > ul,
ul.dropdown-wrap li ul:hover,
ul.dropdown-wrap li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul.dropdown-wrap li ul li {
  clear: both;
  width: 100%;
}

/*  SOCIAL  ============================================================================= */
ul.social {
  display: table;
  padding: 0;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin: 45px 0 0 0;
  text-align: left;
}

ul.social li {
  display: table-cell;
  vertical-align: middle;
  padding: 0 35px 0 0;
}

ul.social li a {
  font-size: 22px;
  color: #00ACD8;
}

ul.social li a:hover {
  color: #fff;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 0 10px 0;
  z-index: 5000;
  background: white;
  border-bottom: solid 2px white;
}

header ul.logos {
  float: left;
  display: inline-block;
  margin-top: 5px;
  margin-left: 0;
}

header ul.logos li {
  display: inline-block;
  margin: 0 0 0 0;
}

header,
header ul,
header ul.logos li a,
header #nav-toggle {
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

header a.unep_logo {
  float: left;
  display: inline-block;
  width: 70px;
  height: 53px;
  background: url("../..//assets/img/unep_logo.png") 0 0 no-repeat;
  background-size: 100%;
}

/*-------------------------------------
language-specific header & logos
*/
body.ar header a.unep_logo,
body.cn header a.unep_logo {
  width: 135px;
}

body.ru header a.unep_logo {
  width: 80px;
}

body:not(.en) header {
  padding: 5px 0;
}

body:not(.en) header a.unep_logo,
body:not(.en) header nav {
  margin-top: 5px;
}

body.ar header a.unep_logo {
  background: url("../..//assets/img/unep_logos/unep_ar.svg") 0 0 no-repeat;
  background-size: 100%;
}

body.cn header a.unep_logo {
  background: url("../..//assets/img/unep_logos/unep_cn.svg") 0 0 no-repeat;
  background-size: 100%;
}

body.es header a.unep_logo {
  background: url("../..//assets/img/unep_logos/unep_es.svg") 0 0 no-repeat;
  background-size: 100%;
}

body.fr header a.unep_logo {
  background: url("../..//assets/img/unep_logos/unep_fr.svg") 0 0 no-repeat;
  background-size: 100%;
}

body.pt header a.unep_logo {
  background: url("../..//assets/img/unep_logos/unep_pt.svg") 0 0 no-repeat;
  background-size: 100%;
}

body.ru header a.unep_logo {
  background: url("../..//assets/img/unep_logos/unep_ru.svg") 0 0 no-repeat;
  background-size: 100%;
}

/*-------------------------------------*/
header ul.language-switcher {
  display: inline-block;
  float: right;
  margin-top: 15px;
}

*[dir=rtl] header ul.language-switcher {
  padding: 0;
}

header ul.language-switcher li {
  display: inline;
  margin: 0 0 0 30px;
}

header nav.mobile ul.language-switcher {
  text-transform: uppercase;
  display: none;
}

header nav.mobile ul.language-switcher li {
  margin: 0 0 0 35px;
}

header ul.language-switcher li a {
  color: #00ACD8;
  font-size: 15.3px;
  font-weight: normal;
  text-decoration: none;
}

header ul.language-switcher li a:hover {
  color: #D54B32;
}

header a.download {
  text-decoration: none;
  font-weight: normal;
  text-decoration: none;
  float: right;
  padding: 5px 10px;
  border: solid 1px #00ACD8;
  border-radius: 10px;
  margin: 15px 0 0 0px;
  display: none;
}

header a.download:hover {
  color: white;
  background: #00ACD8;
}

/*--------------*/
@media only screen and (max-width: 1200px) {
  header ul.language-switcher li {
    display: inline;
    margin: 0 0 0 20px;
  }
}
@media only screen and (max-width: 980px) {
  header ul.language-switcher {
    display: none;
  }

  *[dir=rtl] header.raised ul.logos li {
    margin: 0 90% 0 0px;
  }
}
@media only screen and (max-width: 1200px) {
  header ul.language-switcher li {
    display: inline;
    margin: 0 0 0 20px;
  }
}
@media only screen and (max-width: 980px) {
  header ul.language-switcher li {
    display: inline;
  }
}
@media only screen and (max-width: 980px) {
  header nav ul.language-switcher {
    display: none;
  }

  header nav.mobile ul.language-switcher {
    display: block;
  }
}
@media only screen and (max-width: 650px) {
  header nav.mobile ul.language-switcher li,
*[dir=rtl] header nav.mobile ul.language-switcher li {
    display: inline;
    margin: 0 0 0 12px;
  }
}
@media only screen and (max-width: 674px) {
  header nav.mobile {
    margin-top: 0;
  }
}
#landing {
  position: relative;
  width: 100%;
  min-width: 100%;
  background: #000033 radial-gradient(circle, #0d3e64 1%, #000033 34%) center center no-repeat;
  background-size: 90%;
  color: white;
}

#landing .col {
  margin: 0;
}

#landing .heading-wrap {
  margin: 11.5vh auto 0 auto;
  max-width: 66%;
}

#landing .heading-wrap img {
  max-width: 175px;
  margin: 0 auto;
}

#landing h1 {
  color: #e5b450;
  margin-bottom: 5px;
  display: block;
}

#landing h3 {
  font-family: "Akrobat Regular", sans-serif;
  font-size: 32.3px;
}

@media only screen and (max-width: 720px) {
  #landing h1 {
    font-size: 30.4px;
  }

  #landing h3 {
    font-size: 24.7px;
  }
}
#landing span#landing-label {
  font-size: 34.2px;
  font-weight: bold;
}

#landing p {
  font-size: 20.9px;
  margin-bottom: 30px;
}

#landing p strong {
  font-size: 34.2px;
  font-weight: bold;
}

#landing p a:hover {
  color: white;
}

#landing .center {
  z-index: 2;
}

/*must perform an 'initial zoom' for Safari, else scaled images will be pixelated, regardless of size*/
#map-sticky-wrap {
  width: 100%;
  height: auto;
  z-index: 1;
  transition: all 700ms ease-out;
  z-index: 1;
}

#map-wrap {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 87px;
  left: 0;
  z-index: 0;
  overflow-x: hidden;
  text-align: center;
  background: #000033;
}

#map {
  position: relative;
  display: block;
  width: 4200px;
  height: 300vh;
  margin: 0 calc(50vw - 700px);
  background: url("../..//assets/img/world_map.svg") center -100px no-repeat;
  background-size: 95%;
  overflow-x: hidden;
  z-index: -1;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  transform-origin: top left;
  transform: translateZ(1px);
}
@media only screen and (max-width: 980px) {
  #map {
    width: 300vw;
    margin: 0;
    background-position: center -50px;
  }
}

div#pins {
  width: 115px;
  height: 115px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: url("../..//assets/img/pins.svg") center -100px no-repeat;
  background-size: 95%;
  z-index: 10;
  transition: all 500ms ease-out;
  transform-origin: bottom center;
  opacity: 1;
}
@media only screen and (max-width: 980px) {
  div#pins {
    width: 300vw;
    margin: 0;
    background-position: center -50px;
  }
}

#pins.active {
  opacity: 0;
}

/*
Zooms
-----
1. Atlantic Forest region and maybe also the Amazon (NE SA)
2. Abu Dhabi
3. North of Africa
	a. Burkina Faso and Niger
4. India / Ganges Basin
5. Kyrgyzstan, Serbia, Uganda/Rwanda/DR Congo
	a. Kyrgyzstan
	b. Serbia
	c. Uganda/Rwanda/DRC border 
6. Vanuatu, Comoros, Saint Lucia
	a. Vanuatu
	b. Comoros
	c. Saint Lucia
7. Central Asian
8. Costa Rica, El Salvador, Guatemala, Honduras, Nicaragua and Panama
9. Indonesia
10. China
*/
#map,
#map.zoom_0 {
  transform: translate(0%, 0%) scale(0.3333333333) translateZ(1px);
  /*scale down from initial zoom*/
}

#map.zoom_1 {
  transform: translate(-39%, -108.3333333333%) scale(1.85) translateZ(1px);
}
@media only screen and (max-width: 980px) {
  #map.zoom_1 {
    transform: translate(-39%, -86.6666666667%) scale(1.85) translateZ(1px);
  }
}

#map.zoom_2 {
  transform: translate(-380%, -280%) scale(6.6666666667) translateZ(1px);
}
@media only screen and (max-width: 980px) {
  #map.zoom_2 {
    transform: translate(-240%, -186.6666666667%) scale(4.3333333333) translateZ(1px);
  }
}

#map.zoom_3 {
  transform: translate(-26.6666666667%, -36.6666666667%) scale(1) translateZ(1px);
}
@media only screen and (max-width: 980px) {
  #map.zoom_3 {
    transform: translate(-43.3333333333%, -46.6666666667%) scale(1.3333333333) translateZ(1px);
  }
}

#map.zoom_3_a {
  transform: translate(-43.3333333333%, -43.3333333333%) scale(1.3333333333) translateZ(1px);
}

#map.zoom_4 {
  transform: translate(-187.6666666667%, -125%) scale(3.1666666667) translateZ(1px);
}
@media only screen and (max-width: 980px) {
  #map.zoom_4 {
    transform: translate(-198.6666666667%, -131.6666666667%) scale(3.1666666667) translateZ(1px);
  }
}

#map.zoom_5 {
  transform: translate(-20%, -15%) scale(0.7666666667) translateZ(1px);
}

#map.zoom_5_a {
  transform: translate(-18.3333333333%, -11.6666666667%) scale(0.75) translateZ(1px);
}

#map.zoom_5_b {
  transform: translate(-18.3333333333%, -11.6666666667%) scale(0.75) translateZ(1px);
}

#map.zoom_5_c {
  transform: translate(-18.3333333333%, -11.6666666667%) scale(0.75) translateZ(1px);
}

#map.zoom_6 {
  transform: translate(12%, 10%) scale(0.2333333333) translateZ(1px);
  transform: translate(0%, 0%) scale(0.3333333333) translateZ(1px);
  /*scale down from initial zoom*/
}

#map.zoom_6_a {
  transform: translate(-41.6666666667%, -91.6666666667%) scale(2.3333333333) translateZ(1px);
}

#map.zoom_6_b {
  transform: translate(-41.6666666667%, -91.6666666667%) scale(2.3333333333) translateZ(1px);
}

#map.zoom_6_c {
  transform: translate(-41.6666666667%, -91.6666666667%) scale(2.3333333333) translateZ(1px);
}

#map.zoom_7 {
  transform: translate(-126%, -58.3333333333%) scale(2.3333333333) translateZ(1px);
}
@media only screen and (max-width: 980px) {
  #map.zoom_7 {
    transform: translate(-128.3333333333%, -83.3333333333%) scale(2.3333333333) translateZ(1px);
  }
}

#map.zoom_8 {
  transform: translate(-50%, -144.3333333333%) scale(3.2) translateZ(1px);
}
@media only screen and (max-width: 980px) {
  #map.zoom_8 {
    transform: translate(-50%, -137.6666666667%) scale(3.2) translateZ(1px);
  }
}

#map.zoom_9 {
  transform: translate(-216.6666666667%, -173.3333333333%) scale(3.2) translateZ(1px);
}
@media only screen and (max-width: 980px) {
  #map.zoom_9 {
    transform: translate(-220%, -150%) scale(3.2) translateZ(1px);
  }
}

#map.zoom_10 {
  transform: translate(-77.3333333333%, -37.6666666667%) scale(1.4416666667) translateZ(1px);
}
@media only screen and (max-width: 980px) {
  #map.zoom_10 {
    transform: translate(-81.6666666667%, -45%) scale(1.5083333333) translateZ(1px);
  }
}

#map.zoom_1 {
  background-position: center center;
  background-size: 100%;
  top: -87px;
  /*offset #map sticky top*/
}

#map.zoom_2 {
  background-position: center center;
  background-size: 100%;
  top: -87px;
  /*offset #map sticky top*/
}

#map.zoom_3 {
  background-position: center center;
  background-size: 100%;
  top: -87px;
  /*offset #map sticky top*/
}

#map.zoom_4 {
  background-position: center center;
  background-size: 100%;
  top: -87px;
  /*offset #map sticky top*/
}

#map.zoom_5 {
  background-position: center center;
  background-size: 100%;
  top: -87px;
  /*offset #map sticky top*/
}

#map.zoom_6 {
  background-position: center center;
  background-size: 100%;
  top: -87px;
  /*offset #map sticky top*/
}

#map.zoom_7 {
  background-position: center center;
  background-size: 100%;
  top: -87px;
  /*offset #map sticky top*/
}

#map.zoom_8 {
  background-position: center center;
  background-size: 100%;
  top: -87px;
  /*offset #map sticky top*/
}

#map.zoom_9 {
  background-position: center center;
  background-size: 100%;
  top: -87px;
  /*offset #map sticky top*/
}

#map.zoom_10 {
  background-position: center center;
  background-size: 100%;
  top: -87px;
  /*offset #map sticky top*/
}

ul.map-nav {
  position: fixed;
  top: 135px;
  left: 20px;
  width: 35px;
  z-index: 1000;
  transition: all 400ms;
}

@media only screen and (max-height: 640px) {
  ul.map-nav,
ul.map-nav.active {
    top: 80px;
    transform: scale(0.9);
  }
}
@media only screen and (max-height: 570px) {
  ul.map-nav,
ul.map-nav.active {
    top: 50px;
    transform: scale(0.8);
  }
}
@media only screen and (max-height: 440px) {
  ul.map-nav,
ul.map-nav.active {
    top: 20px;
    transform: scale(0.7);
  }
}
@media only screen and (max-width: 980px), screen and (max-height: 1px) {
  ul.map-nav,
ul.map-nav.active {
    left: -125px;
    opacity: 0;
  }
}

ul.map-nav li {
  display: inline-block;
  width: 100%;
  margin: 0 0 5px 0;
  text-align: center;
  padding-bottom: 2px;
}

ul.map-nav li a {
  display: inline-block;
  width: 100%;
  padding: 5px 0;
  color: white;
  text-decoration: none;
  transition: all 700ms ease-out;
}

ul.map-nav li:nth-of-type(1) a img,
ul.map-nav li:nth-of-type(10) a img {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

ul.map-nav li:nth-of-type(1) a,
ul.map-nav li:nth-of-type(10) a {
  width: 57%;
}

ul.map-nav li:nth-of-type(5) a {
  width: 110%;
}

ul.map-nav li:nth-of-type(3) a,
ul.map-nav li:nth-of-type(9) a {
  width: 73%;
}

ul.map-nav li:nth-of-type(2) a,
ul.map-nav li:nth-of-type(8) a {
  width: 84%;
}

ul.map-nav li a img {
  display: block;
  width: 100%;
  height: auto;
}

ul.map-nav li:hover,
ul.map-nav li.active {
  padding-bottom: 0;
  border-bottom: solid 2px #e5b450;
}

#flagships-wrap {
  width: 100%;
  margin: 0 auto;
  color: #000;
  background: #000033;
  z-index: 2;
}

#flagships-wrap .tint {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: #000033;
  opacity: 0;
  transition: all 500ms ease-out;
}

#flagships-wrap .tint.light {
  background: #fff;
}

#flagships-wrap .tint.active {
  opacity: 0.7;
}

#flagships {
  margin-top: -290vh;
}
#flagships .intro {
  display: block;
  width: 33%;
  position: relative;
  margin-bottom: 50vh;
  background: #00a7de;
  z-index: 1;
  transition: all 500ms ease-out;
}
#flagships .intro p {
  margin-bottom: 15px;
}

@media only screen and (max-width: 720px) {
  #flagships {
    margin-top: -280vh;
  }
}
#flagships .intro p a {
  color: white;
  text-decoration: underline;
}

#flagships .intro p a:hover {
  text-decoration: none;
}

#flagships .intro a.scroll {
  display: inline-block;
  padding: 10px;
  color: black;
  text-decoration: none;
  background: #e5b450;
  transition: all 500ms ease-out;
}

#flagships .intro a.scroll:hover {
  color: white;
  background: black;
}

#flagships .center {
  width: 1245px;
}

#flagships .section.region {
  min-height: 100vh;
  margin-bottom: 75vh;
}

#flagships #region-10 {
  margin-bottom: 100vh;
}

#flagships div.card {
  width: 600px;
  height: auto;
  background: #fff;
  border-top: solid 2px white;
  box-shadow: 2px 2px 11px -3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 2px 11px -3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 11px -3px rgba(0, 0, 0, 0.2);
  overflow-x: hidden;
}

#flagships .position_sticky {
  top: 87px;
  top: 0;
}

#flagships .section.region .title-wrap {
  z-index: 102;
}

body:not(.en) #flagships .section.region .title-wrap .card span.supertitle,
body:not(.en) #flagships .section.region .title-wrap .card h4 {
  max-width: 80%;
}

@media only screen and (max-width: 720px) {
  body:not(.ar) #flagships .section.region .title-wrap .card span.supertitle,
body:not(.ar) #flagships .section.region .title-wrap .card h4 {
    float: left;
    max-width: 70%;
  }
}

body.ar #flagships .section.region .title-wrap .card span.supertitle,
body.ar #flagships .section.region .title-wrap .card h4 {
  max-width: 75%;
  margin-right: 20%;
  float: right;
}
@media only screen and (max-width: 1360px) {
  body.ar #flagships .section.region .title-wrap .card span.supertitle,
body.ar #flagships .section.region .title-wrap .card h4 {
    max-width: 65%;
    margin-right: 30%;
  }
}
@media only screen and (max-width: 720px) {
  body.ar #flagships .section.region .title-wrap .card span.supertitle,
body.ar #flagships .section.region .title-wrap .card h4 {
    max-width: 60%;
    margin-right: 40%;
  }
}

body.fr #flagships .section.region .title-wrap .card span.supertitle {
  float: left;
  max-width: 80%;
}

#flagships .section.region .center.content-center {
  z-index: 101;
}
@media only screen and (max-width: 980px) {
  #flagships .section.region .center.content-center {
    z-index: 10;
  }
}

div.content-box {
  display: block;
  width: 600px;
  border-radius: 0 0 30px 30px;
  margin-top: 30px;
  background: white;
}

div.content-box.position_sticky {
  top: 87px;
}

div.content-box p {
  font-family: "Roboto", sans-serif;
  font-size: 18.05px;
  margin-bottom: 20px;
}

/*-------------------------------------*/
.stat {
  display: inline-block;
  width: calc(80% - 60px);
  padding: 20px 30px;
}
.stat ul {
  padding: 10px 0;
}
.stat ul li {
  color: #00a7de;
  font-family: "Akrobat Black", sans-serif;
  font-size: 22.8px;
  line-height: 1.25;
}
.stat ul li span {
  color: grey;
}

.stat::before,
.stat::after {
  display: block;
  content: "";
  width: 100%;
  height: 20px;
  background: url("../..//assets/img/swirl.svg") center center no-repeat;
  background-size: 100%;
}

/*-------------------------------------*/
#flagships #region-2 .stat,
#flagships #region-4 .stat {
  width: calc(95% - 40px);
  padding: 20px 20px;
}

/*-------------------------------------*/
#flagships-wrap a.cta {
  position: relative;
  display: block;
  width: 250px;
  padding: 15px 30px;
  color: white;
  text-decoration: none;
  background: #00a7de;
  border-radius: 25px;
  transition: all 500ms ease-out;
  cursor: pointer;
  z-index: 101;
  margin: 25px 0 0 145px;
  text-align: center;
}

#flagships-wrap a.cta:hover {
  background: black;
}

/*-------------------------------------*/
#flagships #region-1 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_1/1.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-1 div.illustrations span:nth-of-type(2) {
  background: url("../..//assets/img/regions/region_1/2.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-1 div.illustrations span:nth-of-type(3) {
  background: url("../..//assets/img/regions/region_1/3.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-1 div.illustrations span:nth-of-type(4) {
  background: url("../..//assets/img/regions/region_1/4.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-2 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_2/1.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-2 div.illustrations span:nth-of-type(2) {
  background: url("../..//assets/img/regions/region_2/2.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-2 div.illustrations span:nth-of-type(3) {
  background: url("../..//assets/img/regions/region_2/3.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-2 div.illustrations span:nth-of-type(4) {
  background: url("../..//assets/img/regions/region_2/4.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-3 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_3/1.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-3 div.illustrations span:nth-of-type(2) {
  background: url("../..//assets/img/regions/region_3/2.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-3 div.illustrations span:nth-of-type(3) {
  background: url("../..//assets/img/regions/region_3/3.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-3 div.illustrations span:nth-of-type(4) {
  background: url("../..//assets/img/regions/region_3/4.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-4 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_4/1.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-4 div.illustrations span:nth-of-type(2) {
  background: url("../..//assets/img/regions/region_4/2.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-4 div.illustrations span:nth-of-type(3) {
  background: url("../..//assets/img/regions/region_4/3.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-4 div.illustrations span:nth-of-type(4) {
  background: url("../..//assets/img/regions/region_4/4.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-5 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_5/1.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-5 div.illustrations span:nth-of-type(2) {
  background: url("../..//assets/img/regions/region_5/2.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-5 div.illustrations span:nth-of-type(3) {
  background: url("../..//assets/img/regions/region_5/3.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-5 div.illustrations span:nth-of-type(4) {
  background: url("../..//assets/img/regions/region_5/4.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-6 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_6/1.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-6 div.illustrations span:nth-of-type(2) {
  background: url("../..//assets/img/regions/region_6/2.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-6 div.illustrations span:nth-of-type(3) {
  background: url("../..//assets/img/regions/region_6/3.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-6 div.illustrations span:nth-of-type(4) {
  background: url("../..//assets/img/regions/region_6/4.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-7 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_7/1.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-7 div.illustrations span:nth-of-type(2) {
  background: url("../..//assets/img/regions/region_7/2.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-7 div.illustrations span:nth-of-type(3) {
  background: url("../..//assets/img/regions/region_7/3.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-7 div.illustrations span:nth-of-type(4) {
  background: url("../..//assets/img/regions/region_7/4.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-8 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_8/1.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-8 div.illustrations span:nth-of-type(2) {
  background: url("../..//assets/img/regions/region_8/2.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-8 div.illustrations span:nth-of-type(3) {
  background: url("../..//assets/img/regions/region_8/3.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-8 div.illustrations span:nth-of-type(4) {
  background: url("../..//assets/img/regions/region_8/4.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-9 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_9/1.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-9 div.illustrations span:nth-of-type(2) {
  background: url("../..//assets/img/regions/region_9/2.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-9 div.illustrations span:nth-of-type(3) {
  background: url("../..//assets/img/regions/region_9/3.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-9 div.illustrations span:nth-of-type(4) {
  background: url("../..//assets/img/regions/region_9/4.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-10 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_10/1.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-10 div.illustrations span:nth-of-type(2) {
  background: url("../..//assets/img/regions/region_10/2.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-10 div.illustrations span:nth-of-type(3) {
  background: url("../..//assets/img/regions/region_10/3.svg") 0 bottom no-repeat;
  background-size: 100%;
}

#flagships #region-10 div.illustrations span:nth-of-type(4) {
  background: url("../..//assets/img/regions/region_10/4.svg") 0 bottom no-repeat;
  background-size: 100%;
}

/*-------------------------------------
Small Island Developing States, 
language-specific image
*/
body.ar #flagships #region-6 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_6/1_ar.svg") 0 bottom no-repeat;
}

body.cn #flagships #region-6 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_6/1_cn.svg") 0 bottom no-repeat;
}

body.es #flagships #region-6 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_6/1_es.svg") 0 bottom no-repeat;
}

body.fr #flagships #region-6 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_6/1_fr.svg") 0 bottom no-repeat;
}

body.pt #flagships #region-6 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_6/1_pt.svg") 0 bottom no-repeat;
}

body.ru #flagships #region-6 div.illustrations span:nth-of-type(1) {
  background: url("../..//assets/img/regions/region_6/1_ru.svg") 0 bottom no-repeat;
}

/*-------------------------------------*/
#flagships #reset {
  float: left;
  display: inline-block;
  width: 100%;
  margin-top: 200vh;
}

/*-------------------------------------*/
@media only screen and (min-width: 980px) {
  #flagships #region-3 h4 {
    font-size: 32.3px;
    max-width: 75%;
  }
}
/*-------------------------------------*/
@media only screen and (max-width: 1360px) {
  #flagships .intro,
#flagships div.card.col:first-child,
#flagships div.card.col.col_first,
div.content-box {
    margin-left: 60px !important;
  }

  #flagships a.cta {
    margin-left: 205px;
  }
}
@media only screen and (max-width: 980px) {
  #flagships div.card.col:first-child,
#flagships div.card.col.col_first {
    margin-left: 0px !important;
  }

  #flagships .intro,
#flagships .center,
#flagships div.card,
div.content-box,
#flagships .position_sticky {
    width: 95%;
    margin: 0 2.5% !important;
    padding-left: 0;
    padding-right: 0;
  }

  #flagships .intro {
    margin: 0 2.5% 2.5vh 2.5% !important;
  }

  #flagships .position_sticky .center {
    width: 100%;
  }

  #flagships .center.padded {
    padding-left: 0;
    padding-right: 0;
  }

  #flagships div.card {
    border-radius: 0;
  }

  #flagships .stat {
    width: calc(100% - 60px);
  }

  #flagships a.cta {
    margin: 25px auto;
  }
}
@media only screen and (max-width: 720px) {
  #flagships .section.region .title-wrap .card h4 {
    font-size: 20.9px;
  }
}

@media only screen and (max-width: 650px) {
  #flagships div.card .inner {
    padding: 30px 30px 15px 30px;
  }
}
/*-----------------------*/
body.ar #flagships .intro,
body.ar #flagships div.card,
body.ar div.content-box {
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}

/*-----------------------------

Mascot

*/
#flagships div.card span.mascot {
  position: absolute;
  width: 200px;
  height: 200px;
}

/*-------------------------------------*/
#flagships #region-1 div.card span.mascot {
  background: url("../..//assets/img/regions/region_1/mascot.svg") 0 0 no-repeat;
}

#flagships #region-2 div.card span.mascot {
  background: url("../..//assets/img/regions/region_2/mascot.svg") 0 0 no-repeat;
}

#flagships #region-3 div.card span.mascot {
  background: url("../..//assets/img/regions/region_3/mascot.svg") 0 0 no-repeat;
}

#flagships #region-4 div.card span.mascot {
  background: url("../..//assets/img/regions/region_4/mascot.svg") 0 0 no-repeat;
}

#flagships #region-5 div.card span.mascot {
  background: url("../..//assets/img/regions/region_5/mascot.svg") 0 0 no-repeat;
}

#flagships #region-6 div.card span.mascot {
  background: url("../..//assets/img/regions/region_6/mascot.svg") 0 0 no-repeat;
}

#flagships #region-7 div.card span.mascot {
  background: url("../..//assets/img/regions/region_7/mascot.svg") 0 0 no-repeat;
}

#flagships #region-8 div.card span.mascot {
  background: url("../..//assets/img/regions/region_8/mascot.svg") 0 0 no-repeat;
}

#flagships #region-9 div.card span.mascot {
  background: url("../..//assets/img/regions/region_9/mascot.svg") 0 0 no-repeat;
}

#flagships #region-10 div.card span.mascot {
  background: url("../..//assets/img/regions/region_10/mascot.svg") 0 0 no-repeat;
}

/*-------------------------------------*/
#flagships #region-1 div.card span.mascot {
  top: 95px;
  left: 42%;
  width: 140px;
  height: 370px;
  background-size: 80%;
}

#flagships #region-2 div.card span.mascot {
  top: 105px;
  left: 460px;
  background-size: 66%;
}

body.ar #flagships #region-2 div.card span.mascot {
  left: 475px;
  background-size: 63%;
}

#flagships #region-3 div.card span.mascot {
  top: 125px;
  left: 37%;
  background-size: 78%;
}

body.ar #flagships #region-3 div.card span.mascot {
  left: 39%;
  background-size: 76%;
}

#flagships #region-4 div.card span.mascot {
  top: 95px;
  left: 35%;
  background-size: 88%;
}

#flagships #region-5 div.card span.mascot {
  top: 120px;
  left: 37%;
  background-size: 92%;
}

body.ar #flagships #region-5 div.card span.mascot {
  left: 39%;
  background-size: 88%;
}

#flagships #region-6 div.card span.mascot {
  top: 105px;
  left: 38%;
  background-size: 83%;
}

body.ar #flagships #region-6 div.card span.mascot {
  left: 40%;
  background-size: 86%;
}

#flagships #region-7 div.card span.mascot {
  top: 110px;
  left: 38%;
  background-size: 84%;
}

#flagships #region-8 div.card span.mascot {
  top: 95px;
  left: 38%;
  background-size: 77%;
}

body.cn #flagships #region-8 div.card span.mascot {
  top: 95px;
  left: 40%;
  background-size: 75%;
}

#flagships #region-9 div.card span.mascot {
  top: 90px;
  left: 37%;
  background-size: 55%;
}

#flagships #region-10 div.card span.mascot {
  top: 95px;
  left: 40%;
  width: 150px;
  height: 360px;
  background-size: 77%;
}

@media only screen and (max-width: 1360px) {
  #flagships #region-1 div.card span.mascot {
    left: 48%;
  }

  #flagships #region-5 div.card span.mascot,
#flagships #region-6 div.card span.mascot {
    left: 41%;
    background-size: 88%;
  }

  #flagships #region-7 div.card span.mascot,
#flagships #region-8 div.card span.mascot {
    left: 42%;
    background-size: 85%;
  }

  #flagships #region-10 div.card span.mascot {
    left: 45%;
  }

  body:not(.en) #flagships #region-2 div.card span.mascot {
    left: 45%;
    background-size: 60%;
  }

  body:not(.en) #flagships #region-3 div.card span.mascot {
    top: 135px;
    left: 41%;
    background-size: 60%;
  }

  body:not(.en) #flagships #region-8 div.card span.mascot {
    left: 45%;
    background-size: 58%;
  }
}
@media only screen and (max-width: 980px) {
  #flagships div.card span.mascot {
    left: auto !important;
    right: 3%;
    width: 150px;
    height: 150px;
    background-position: right top;
  }

  #flagships #region-1 div.card span.mascot {
    right: 0 !important;
    height: 210px !important;
    transform: scale(0.87);
  }

  #flagships #region-10 div.card span.mascot {
    right: 0 !important;
    height: 180px !important;
    transform: scale(0.88);
  }
}
@media only screen and (max-width: 720px) {
  #flagships div.card span.mascot {
    top: 150px;
    left: auto;
    right: 5%;
    width: 100px !important;
    height: 100px !important;
    background-position: right top;
  }

  #flagships #region-1 div.card span.mascot,
#flagships #region-10 div.card span.mascot {
    right: 2%;
  }

  #flagships div.card h4 {
    max-width: 75%;
  }
}
/*-----------------------------

Illustrations

*/
#flagships div.illustrations {
  width: 100%;
  height: 465px;
  position: absolute;
  top: 25vh;
  right: -2.5vw;
  z-index: -1;
  opacity: 0;
  transition: all 500ms ease-out;
}

#flagships div.illustrations.active {
  opacity: 1;
}

/*-----------------------------*/
#flagships #region-1 div.illustrations {
  right: -4.5vw;
  transform: scale(0.9);
}
#flagships #region-2 div.illustrations {
  height: 475px;
}
@media only screen and (min-height: 850px) {
  #flagships #region-2 div.illustrations {
    top: 30vh;
  }
}
@media only screen and (min-height: 900px) {
  #flagships #region-2 div.illustrations {
    top: 40vh;
  }
}
#flagships #region-3 div.illustrations {
  top: 18vh;
  right: -10vw;
  transform: scale(0.82);
}
#flagships #region-4 div.illustrations {
  right: -20vh;
  height: 490px;
  transform: scale(0.9);
}
@media only screen and (min-height: 850px) {
  #flagships #region-4 div.illustrations {
    top: 39vh;
  }
}
#flagships #region-5 div.illustrations {
  top: 13vh;
  right: -11.5vw;
  height: 650px;
  transform: scale(0.8);
}
@media only screen and (min-height: 850px) {
  #flagships #region-5 div.illustrations {
    top: 20vh;
  }
}
#flagships #region-6 div.illustrations {
  top: 13vh;
  right: -45vw;
  height: 600px;
}
#flagships #region-6 div.illustrations span {
  background-size: 50% !important;
}
#flagships #region-7 div.illustrations {
  top: 25vh;
  right: -10vw;
  height: 550px;
  transform: scale(0.9);
}
#flagships #region-8 div.illustrations {
  top: 5vh;
  right: -5vw;
  height: 660px;
  transform: scale(0.95);
}
#flagships #region-9 div.illustrations {
  top: 26vh;
  right: -8vw;
  height: 600px;
}
#flagships #region-10 div.illustrations {
  top: 29vh;
  right: -13vw;
  height: 520px;
  transform: scale(0.88);
}
@media only screen and (min-height: 850px) {
  #flagships #region-10 div.illustrations {
    top: 35vh;
  }
}
@media only screen and (min-height: 900px) {
  #flagships #region-10 div.illustrations {
    top: 45vh;
  }
}

/*-----------------------------*/
div.illustration_mobile {
  width: 95%;
  height: 140px;
  position: absolute;
  top: calc(100vh - 140px);
  left: 0;
  z-index: 2;
  box-shadow: 2px -4px 28px 2px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 2px -4px 28px 2px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 2px -4px 28px 2px rgba(0, 0, 0, 0.16);
}

@media only screen and (max-width: 980px) {
  #flagships .center {
    position: relative;
  }

  #flagships #region-1 {
    position: relative;
  }

  #flagships #region-1 div.illustration_mobile {
    background: #000033 url("../..//assets/img/regions/region_1/mobile.svg") center top no-repeat;
    background-size: 100%;
  }

  #flagships #region-2 {
    position: relative;
  }

  #flagships #region-2 div.illustration_mobile {
    background: #000033 url("../..//assets/img/regions/region_2/mobile.svg") center top no-repeat;
    background-size: 100%;
  }

  #flagships #region-3 {
    position: relative;
  }

  #flagships #region-3 div.illustration_mobile {
    background: #000033 url("../..//assets/img/regions/region_3/mobile.svg") center top no-repeat;
    background-size: 100%;
  }

  #flagships #region-4 {
    position: relative;
  }

  #flagships #region-4 div.illustration_mobile {
    background: #000033 url("../..//assets/img/regions/region_4/mobile.svg") center top no-repeat;
    background-size: 100%;
  }

  #flagships #region-5 {
    position: relative;
  }

  #flagships #region-5 div.illustration_mobile {
    background: #000033 url("../..//assets/img/regions/region_5/mobile.svg") center top no-repeat;
    background-size: 100%;
  }

  #flagships #region-6 {
    position: relative;
  }

  #flagships #region-6 div.illustration_mobile {
    background: #000033 url("../..//assets/img/regions/region_6/mobile.svg") center top no-repeat;
    background-size: 100%;
  }

  #flagships #region-7 {
    position: relative;
  }

  #flagships #region-7 div.illustration_mobile {
    background: #000033 url("../..//assets/img/regions/region_7/mobile.svg") center top no-repeat;
    background-size: 100%;
  }

  #flagships #region-8 {
    position: relative;
  }

  #flagships #region-8 div.illustration_mobile {
    background: #000033 url("../..//assets/img/regions/region_8/mobile.svg") center top no-repeat;
    background-size: 100%;
  }

  #flagships #region-9 {
    position: relative;
  }

  #flagships #region-9 div.illustration_mobile {
    background: #000033 url("../..//assets/img/regions/region_9/mobile.svg") center top no-repeat;
    background-size: 100%;
  }

  #flagships #region-10 {
    position: relative;
  }

  #flagships #region-10 div.illustration_mobile {
    background: #000033 url("../..//assets/img/regions/region_10/mobile.svg") center top no-repeat;
    background-size: 100%;
  }
}
/*-----------------------------*/
#flagships div.illustrations span {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

#flagships div.illustrations span {
  opacity: 0;
  transition: all 500ms ease-out;
}

#flagships div.illustrations span.active {
  opacity: 1;
}
/* Dates for the interactive */
#footer .publishing_info{
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);  
  text-align: center;
  width: 100% !important;
  border: none;
  max-width: none;
}

#footer .publishing_info span.publishing_info_latest_update{
  margin-left: 0.5rem;
}
#footer .publishing_info span.publishing_info_latest_update:before {
  content: "|";
  margin-right: 0.5rem;
}


#footer {
  display: block;
  width: 100%;
  min-height: 250px;
  padding-top: 50px;
  color: #e5b450;
  background: #000033;
  z-index: 1000;
  position: relative;
}

body.ar #footer {
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}

#footer::before {
  display: block;
  position: absolute;
  top: -18px;
  width: 100%;
  height: 38px;
  background: url("../..//assets/img/swirl.svg") 0 top repeat-x;
}

#footer h2 {
  margin-bottom: 0px;
}

#footer a.cta {
  text-decoration: none;
  font-size: 33.25px;
}

#footer .links a:hover {
  text-decoration: underline;
}

#footer a.unep_logo {
  display: inline-block;
  width: 133px;
  height: 110px;
  background: url("../..//assets/img/unep_logo.png") center 0 no-repeat;
  background-size: 75%;
  margin: 0 auto;
  float: right;
}

#footer span.disclaimer {
  display: block;
  margin-top: 50px;
  font-size: 15.2px;
  color: rgba(255, 255, 255, 0.4);
}

@media only screen and (max-width: 650px) {
  #footer .links a {
    text-decoration: none;
    font-size: 19px;
  }
}
#footer-logos .center {
  width: 500px;
}

#footer-logos .img_col {
  float: left;
  text-align: center;
}

#footer-logos .img_col .img_wrap {
  width: 100%;
}

#footer-logos .img_wrap svg {
  display: inline-block;
  margin: auto;
}

#footer-logos #logo-unep svg {
  transform: scale(0.4);
  margin-top: -15px;
}

#footer-logos #logo-fao svg {
  margin-top: 15px;
  margin-left: 10px;
}

#footer-logos .img_wrap .inner {
  padding: 10px;
}

@media only screen and (max-width: 650px) {
  #footer-logos .center {
    width: 90%;
    margin: 0 auto;
  }

  #footer-logos .img_col img,
#footer-logos .img_col svg {
    max-width: 66%;
    margin: 0 auto;
  }

  #footer-logos #logo-fao svg {
    margin-top: 5px;
  }
}

/*# sourceMappingURL=style.css.map */