@font-face {
  font-family: "Gilroy";
  src: url("../images/gilroy-regular-ttf.ttf") format("truetype");
}

@font-face {
  font-family: "Gilroy Heavy";
  src: url("../images/gilroy-heavy-ttf.ttf") format("truetype");
}

@font-face {
  font-family: "Gilroy Bold";
  src: url("../images/Gilroy-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Gilroy Extra Bold";
  src: url("../images/Gilroy-ExtraBold.ttf") format("truetype");
}

/* ======================== loader: START ========================= */

dcc-map.dcc-map {
  background: #000072;
  z-index: 2;
}
dcc-map.dcc-map[maptype="energy"],
dcc-map.dcc-map[maptype="mobility"] {
  background: #fff;
  z-index: 2;
}
dcc-map.dcc-map center#map_loader {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: #000072;
  top: 0;
  z-index: 9999;
}
dcc-map.dcc-map center#map_loader[maptype="energy"],
dcc-map.dcc-map[maptype="mobility"] {
  background: #fff;
}

dcc-map.dcc-map center#map_loader img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* ======================== loader: END ========================= */

/* ======================== dcc-map: START ========================= */

dcc-map.dcc-map {
  position: relative;
  display: flex;
  width: 100%;
  position: relative;
  font-family: "Source Sans Pro", Arial, sans-serif;
  box-sizing: border-box;
}

/* ======================== dcc-map: END ========================= */

/* ======================== map: START ========================= */

dcc-map.dcc-map .jvectormap-marker {
  cursor: pointer;
  opacity: 0;
}

dcc-map.dcc-map .marker_div {
  max-width: 0;
  position: absolute;
  /* z-index: 1; */
  z-index: -1;
  background: transparent;
  opacity: 0;
  visibility: visible;
  transition: 0.7s all ease-in-out;
  width: 0;
}

.dcc-map .marker_div.open {
  visibility: hidden;
  opacity: 0;
  width: 100px;
  /* max-width: 200px; */
  max-width: 160px;
  transition: 0.7s all ease-in-out;
}

dcc-map.dcc-map .white_div {
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0px 10px;
  box-sizing: border-box;
  align-items: flex-start;
  gap: 5px;
}
dcc-map.dcc-map[maptype="energy"] .white_div,
dcc-map.dcc-map[maptype="mobiliity"] .white_div{
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* shadow */
}


dcc-map.dcc-map .white_div * {
  opacity: 0;
  transition: 0.8s all ease-in-out;
  transition-delay: 0.3s;
}

.dcc-map .marker_div.open .white_div * {
  opacity: 1;
  transition: 0.8s all ease-in-out;
  transition-delay: 0.3s;
}
dcc-map.dcc-map .marker_div_clip {
  min-width: 20px;
  width: 100%;
  height: 22px;
  background-color: rgb(252, 252, 252);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}

dcc-map.dcc-map .marker_div_name {
  color: var(--Navy, var(--Navy, #000072));
  /* Desktop/Bold-Body M */
  font-family: "Gilroy Heavy";
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 18px; /* 137.5% */
  width: 100%;
  border-bottom: 1px solid;
  padding-bottom: 5px;
}

dcc-map.dcc-map .marker_div_content {
  color: var(--Navy, var(--Navy, #000072));
  /* Desktop/Body M */
  font-family: Gilroy;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px; /* 137.5% */
}
dcc-map.dcc-map .marker_div_content ul {
  padding-left: 24px;
  list-style: disc;
}
dcc-map.dcc-map .marker_div .str {
  color: var(--Navy, var(--Navy, #000072));

  /* Desktop/H5 */
  font-family: "Gilroy Heavy";
  font-size: 26px;
  font-style: normal;
  font-weight: 900;
  line-height: 23px; /* 88.462% */
  text-transform: uppercase;
}

dcc-map.dcc-map[maptype="mobility"] .marker_div .str {
  color: var(--Navy, var(--Navy, #00D8EA));
}

dcc-map.dcc-map[maptype="energy"] .marker_div .str {
  color: var(--Navy, var(--Navy, #A500FF));
}

dcc-map.dcc-map .marker_div .num {
  color: var(--Navy, var(--Navy, #000072));

  /* Desktop/H3 */
  font-family: "Gilroy Heavy";
  font-size: 36px;
  font-style: normal;
  font-weight: 900;
  line-height: 32px;
  text-transform: uppercase;
}

dcc-map.dcc-map[maptype="mobility"] .marker_div .num {
  color: var(--Navy, var(--Navy, #00D8EA));
}

dcc-map.dcc-map[maptype="energy"] .marker_div .num {
  color: var(--Navy, var(--Navy, #A500FF));
}

dcc-map.dcc-map .map {
  position: relative;
  height: inherit;
}

dcc-map.dcc-map .big_map {
  width: 100%;
  height: 486px;
  z-index: 3;
}

dcc-map.dcc-map .jvectormap-container {
  height: inherit;
}

dcc-map.dcc-map .small_maps {
  width: 100%;
  background-color: #000072;
  border-top: 6px solid white;
}

dcc-map.dcc-map[maptype="energy"] .small_maps,
dcc-map.dcc-map[maptype="mobility"] .small_maps {
  background-color: #fff;
}

dcc-map.dcc-map .small_maps .map {
  height: 270px !important;
  background-color: #000072;
  /* border-top: solid 6px #ffffff; */
}
dcc-map.dcc-map[maptype="energy"] .small_maps .map,
dcc-map.dcc-map[maptype="mobility"] .small_maps .map {
  background-color: #fff;
}
dcc-map.dcc-map .small_maps .map::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  z-index: 4;
  display: block;
  height: 6px;
  width: 100%;
  background: white;
}
dcc-map.dcc-map .small_maps .map:last-of-type:before {
  display: none;
}
dcc-map.dcc-map .line {
  border: 3px solid white;
}

dcc-map.dcc-map .blank {
  width: auto;
}

dcc-map.dcc-map .container-fluid [class*="col-"] {
  padding: 0;
}
/* dcc-map.dcc-map .container-fluid .col-12.col-xl-3{
  z-index: 2;
} */
dcc-map.dcc-map .map-content {
  font-feature-settings: "clig" off, "liga" off;
  font-family: Gilroy;
  padding-top: 40px;
  padding-left: 15px;
  padding-right: 15px;
  height: 100%;
}
dcc-map.dcc-map[maptype="energy"] .map-content {
	height: fit-content;
}

dcc-map.dcc-map[maptype="healthcare"] .map-content > .region-countries-wrapper{
display: none;
}

dcc-map.dcc-map .header {
  font-family: "Gilroy Heavy";
  color: #fff;
  font-size: 36px;
  font-style: normal;
  font-weight: 900;
  line-height: 32px;
  text-transform: uppercase;
  margin-bottom: 30px;
}
dcc-map.dcc-map[maptype="energy"] .header,
dcc-map.dcc-map[maptype="mobility"] .header {
  color: #000072;
}

dcc-map.dcc-map .sub_header {
  font-family: "Gilroy Heavy";
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 22px;
  margin-bottom: 12px;
}

dcc-map.dcc-map[maptype="energy"] .sub_header,
dcc-map.dcc-map[maptype="mobility"] .sub_header {
  color: #000072;
}

dcc-map.dcc-map .para {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  margin-bottom: 30px;
}

dcc-map.dcc-map[maptype="energy"] .para,
dcc-map.dcc-map[maptype="mobility"] .para {
  color: #000072;
}

dcc-map.dcc-map .para .text-icon {
  width: auto;
  height: 1.2em;
  vertical-align: text-bottom;
}
dcc-map.dcc-map .countries {
  font-family: "Gilroy";
  display: grid;
  grid-template-columns: repeat(3, auto);
  column-gap: 12px;
  margin-top: 12px;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px; /* 137.5% */
  text-transform: capitalize;
  min-width: 240px;
}
dcc-map.dcc-map[maptype="healthcare"] .countries {
  grid-template-columns: repeat(2, auto);
}
dcc-map.dcc-map .rest-countries .countries {
  grid-template-columns: repeat(1, auto);
}
dcc-map.dcc-map .rest-countries .countries br {
  display: none;
}
dcc-map.dcc-map .region {
  font-family: "Gilroy Heavy";
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 14px; /* 87.5% */
  text-transform: uppercase;
}

dcc-map.dcc-map[maptype="energy"] .region,
dcc-map.dcc-map[maptype="mobility"] .region {
  color: #000072;
}

dcc-map.dcc-map .big_region {
  bottom: 70px;
}

dcc-map.dcc-map .small_region {
  left: 16px;
  bottom: 16px;
  position: absolute;
  max-width: 170px;
  font-size: 22px;
  line-height: 20px;
  font-weight: 900;
  font-family: "Gilroy Heavy";
}

dcc-map.dcc-map .jvectormap-tip {
  font-family: "Source Sans Pro", Arial, sans-serif;
}
dcc-map .jvectormap-marker.open {
  position: relative;
}

.marker-line {
  position: absolute;
  width: 100px;
  height: 1px;
  left: -61px;
  top: 30px;
  z-index: -1;
}
.marker-line {
  opacity: 0;
  transition: 0.8s;
  transition-delay: 0.2s;
}
.marker_div.open .marker-line {
  opacity: 1;
  transition: 0.8s;
  transition-delay: 0.2s;
}
.marker-dot {
  width: 100%;
  height: 1px;
  background: #fff;
  z-index: 2;
  position: relative;
}

.marker-line::before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: #000072;
  position: absolute;
  border-radius: 100%;
  top: -15px;
  left: -14px;
}

dcc-map.dcc-map[maptype="energy"] .marker-line::before{
  background-color: #A500FF;
}

dcc-map.dcc-map[maptype="mobility"] .marker-line::before{
  background-color: #00D8EA;
}

.marker-line::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  position: absolute;
  border-radius: 100%;
  top: -5px;
  left: -4px;
}

.marker-line.line-right {
  left: auto;
  right: -60px;
  /* right: -77px; */
}

.marker-line.line-right::before {
  left: auto;
  right: -15px;
}

.marker-line.line-right::after {
  left: auto;
  right: -5px;
}

dcc-map.dcc-map .white_div::after {
  content: "";
  width: 100%;
  height: 22px;
  background-color: #ffffff;
  position: absolute;
  left: 0;
  bottom: -21px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}
dcc-map.dcc-map[maptype="energy"] .white_div::after,
dcc-map.dcc-map[maptype="mobility"] .white_div::after{
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* shadow */
}

dcc-map.dcc-map .white_div::before {
  content: "";
  width: 100%;
  height: 22px;
  background-color: #ffffff;
  position: absolute;
  left: 0;
  bottom: -22px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}
dcc-map.dcc-map .region-countries-wrapper {
  flex-direction: column;
  gap: 30px;
  display: flex;
}
dcc-map.dcc-map .big_region_title.region {
  left: 16px;
  bottom: 16px;
  right: auto;
  position: absolute;
  max-width: fit-content;
  max-width: 160px;
  text-align: center;
}
.dcc-map .marker_div.down .marker-line {
  transform: rotate(90deg);
  left: -20px;
  top: 60px;
  opacity: 0;
  transition: 0.5s left ease-in-out;
  transition: 0.5s top ease-in-out;
  /* transition-delay: 0.5s; */
}
.dcc-map .marker_div.down.open .marker-line {
  left: -20px;
  top: -40px;
  opacity: 1;
  transition: 0.5s all ease-in-out;
  /* transition-delay: 0.5s; */
}
.dcc-map .marker_div.down .marker-line.line-right {
  transform: rotate(-90deg);
  right: -10px;
  top: 60px;
  left: auto;
  opacity: 0;
  transition: 0.5s right ease-in-out;
  transition: 0.5s top ease-in-out;
  /* transition-delay: 0.5s; */
}
.dcc-map .marker_div.down.open .marker-line.line-right {
  right: -10px;
  top: -40px;
  opacity: 1;
  transition: 0.5s all ease-in-out;
  /* transition-delay: 0.5s; */
}
.dcc-map .marker_div.down .white_div {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
}

.dcc-map .marker_div.down.open .white_div {
  max-height: 1000px;
  transition: max-height 1s ease-in-out;
}

.dcc-map .marker_div.down {
  max-width: 160px;
  width: 100% !important;
}

.dcc-map .marker_div.down.open {
  max-width: 160px;
}

.dcc-map[maptype="energy"] .small_maps #map3 .jvectormap-container {
  display: none;
}
.dcc-map[maptype="energy"] .small_maps #map3 {
  background: url("../images/hk-macau.svg") no-repeat;
  background-size: cover;
  background-position: 0px -115px;
}


.dcc-map[maptype="healthcare"] .column-1, .dcc-map[maptype="healthcare"] .column-2, .dcc-map[maptype="healthcare"] .column-3 {
  min-width: 170px;
  margin-right: 7px;
}
.dcc-map[maptype="healthcare"] .column-1{
  min-width: 120px;
}
.dcc-map[maptype="healthcare"] .europe-rest-of-world-data .row-1{
  border-bottom: 1px solid #00D8EA;
  margin-bottom: 30px;
  width: fit-content;
}
.dcc-map[maptype="healthcare"]  .column-2 .sub_header,
.dcc-map[maptype="healthcare"]  .column-3 .sub_header{
  margin-bottom: 30px;
}
.dcc-map[maptype="healthcare"] .row-1 .column-1{
  padding-top: 40px;
}
.dcc-map[maptype="healthcare"] .row-1 .column-3 p.para{
  margin-top: -10px;
}
.dcc-map[maptype="healthcare"] .row-2 .column-3{
  align-self: center;
}

/* ======================== map: END ========================= */

/* ======================== legends: START ========================= */

/* ======================== legends: END ========================= */

/* ======================== Content: START ========================= */

/* ======================== Content: END ========================= */

/*===========MEDIA QUERIES STARTS===============*/
@media (min-width: 768px) {
  dcc-map.dcc-map .region-countries-wrapper {
    flex-direction: column;
    gap: 30px;
  }
  dcc-map.dcc-map .small_maps {
    border-top: solid 6px #ffffff;
  }
  dcc-map.dcc-map .big_region_title.region {
    right: 36px;
    bottom: 36px;
    left: auto;
    position: absolute;
  }
  dcc-map.dcc-map[maptype="mobility"] .big_region_title.region{
    bottom: 32%;
  }

  dcc-map.dcc-map .small_maps .map {
    border: none;
    height: 250px !important;
    width: 50%;
    border-right: solid 6px #ffffff;
  }
  /* dcc-map.dcc-map[maptype="energy"] .small_maps .map{
    left: 25%;
  } */
  dcc-map.dcc-map .small_maps .map:last-of-type {
    border-right: none;
  }
  dcc-map.dcc-map .map-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    max-width: 380px;
  }

  dcc-map.dcc-map .big_map {
    width: 400px;
    height: 630px;
    align-self: flex-end;
  }
  dcc-map.dcc-map .region-countries-wrapper {
    /* display: flex; */
    gap: 44px;
    display: grid;
  }
  dcc-map.dcc-map .region-countries-wrapper {
    position: absolute;
    bottom: 40px;
  }
  dcc-map.dcc-map .region {
    font-size: 28px;
    line-height: 25px; /* 87.5% */
    width: 100%;
    max-width: 320px;
  }
  dcc-map.dcc-map .small_region {
    left: 30px;
    bottom: 30px;
    max-width: 200px;
    font-size: 28px;
    line-height: 25px;
  }
  dcc-map.dcc-map .small_maps .map::before {
    display: none;
  }

  dcc-map.dcc-map .small_region {
    top: 30px;
    bottom: auto;
  }
  dcc-map.dcc-map[maptype="energy"] .small_region {
    top:auto;
    bottom: 30px;
  }
  .dcc-map[maptype="energy"] .small_maps #map3 {
    background-position: 0px -90px;
  }
}
@media (min-width: 767px) and (max-width: 992px){
  .dcc-map[maptype="healthcare"] .europe-rest-of-world-data{
    display: flex;
  }
  .dcc-map[maptype="healthcare"] .row-1 .column-1{
    padding-top: 0;
  }
  .dcc-map[maptype="healthcare"] .europe-rest-of-world-data .row-1{
    border:none;
  }
}
@media only screen and (max-width: 767px) {
  dcc-map.dcc-map[maptype="mobility"] .big_region_title.region {
    left: auto;
    bottom: 15%;
    right: 25px;
    position: absolute;
    max-width: fit-content;
    max-width: 160px;
    text-align: center;
  }
  dcc-map.dcc-map[maptype="energy"] .jvectormap-marker,
  dcc-map.dcc-map[maptype="mobility"] .jvectormap-marker{
    width: 45px;
  }
  
  .dcc-map .marker_div.down.open .marker-line {
    left: -28px;
    top: -38px;
  }
  .dcc-map .marker_div.down.open .marker-line.line-right{
    right: -3px;
    top: -37px;
    left: unset;
  }
}
@media (min-width: 992px) {
  .dcc-map .marker_div.open {
    max-width: 200px;
  }
  dcc-map.dcc-map .big_map {
    width: 450px;
  }
  dcc-map.dcc-map .white_div {
    padding: 10px 20px 0 20px;
  }
  dcc-map.dcc-map .white_div::after {
    content: "";
    width: 100%;
    height: 22px;
    background-color: #ffffff;
    position: absolute;
    left: 0;
    bottom: -21px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
  }
  dcc-map.dcc-map .white_div::before {
    content: "";
    width: 100%;
    height: 22px;
    background-color: #ffffff;
    position: absolute;
    left: 0;
    bottom: -22px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
  }
  dcc-map.dcc-map .marker_div {
    max-width: 200px;
  }
  dcc-map.dcc-map .marker_div_name {
    font-size: 16px;
    line-height: 22px;
  }
  dcc-map.dcc-map .marker_div .num {
    font-size: 48px;
    line-height: 44px;
  }
  dcc-map.dcc-map .region-countries-wrapper {
    flex-direction: row;
    gap: 44px;
    grid-template-columns: repeat(2, auto);
  }
  .dcc-map[maptype="energy"] .small_maps #map3 {
    background-position: 0px -150px;
  }
}
@media (min-width: 1200px) {
  dcc-map.dcc-map .big_map {
    width: 650px;
    height: 720px;
    z-index: 2;
  }
  .dcc-map[maptype="healthcare"] .big_map{
    width: 400px;
  }

  dcc-map.dcc-map .region-countries-wrapper {
    position: absolute;
    bottom: 70px;
  }
  dcc-map.dcc-map .small_maps {
    height: 100%;
    border-left: solid 6px #ffffff;
    border-top: none;
  }
  dcc-map.dcc-map .small_maps .map {
    border: none;
    height: 357px !important;
    width: 100%;
    border-right: none;
    /* border-top: solid 6px white; */
  }
  dcc-map.dcc-map[maptype="energy"] .small_maps .map {
    border: none;
    height: 505px !important;
    width: 100%;
    border-right: none;
    /* border-top: solid 6px white; */
  }
  dcc-map.dcc-map .small_maps .map::before {
    content: "";
    display: block;
    position: relative;
    display: block;
    height: 6px;
    width: 100%;
    background: white;
  }
  dcc-map.dcc-map .small_maps .map:first-of-type {
    /* border-top: none; */
  }
 
  dcc-map.dcc-map[maptype="energy"] .small_maps .map:first-of-type {
    /* border-top: none; */
    margin-top: 50%;
  }
  dcc-map.dcc-map .small_maps .map:first-of-type::before {
    display: none;
  }
  dcc-map.dcc-map .small_maps .map:last-of-type::before {
    display: block;
  }
  dcc-map.dcc-map[maptype="energy"] .small_maps .map:last-of-type::before {
    display: none;
  }
  dcc-map.dcc-map[maptype="technology"] .small_maps .map {
    height: 356px !important;
  }

  dcc-map.dcc-map .map-content {
    max-width: 460px;
    z-index: 3;
  }
  dcc-map.dcc-map .header {
    font-size: 64px;
    line-height: 56px;
    width: 600px;
  }
  dcc-map.dcc-map .sub_header {
    font-size: 22px;
    line-height: 24px;
  }
  dcc-map.dcc-map .para {
    max-width: 380px;
  }
  dcc-map.dcc-map .countries {
    max-width: 380px;
  }
  dcc-map.dcc-map .region {
    font-size: 36px;
    line-height: 32px; /* 87.5% */
  }
  dcc-map.dcc-map .big_region {
    font-size: 16px;
    line-height: 22px;
  }
  dcc-map.dcc-map .small_region {
    max-width: 240px;
  }
  .dcc-map[maptype="energy"] .small_maps #map3 {
    background-position: -30px -40px;
    background-size: 110%;
  }
  dcc-map.dcc-map .small_region {
    top: auto;
    bottom: 30px;
  }
  .dcc-map[maptype="healthcare"] .column-2 .sub_header{
    margin-bottom: 45px;
  }
}

@media (max-width: 1249px) and (min-width: 768px) {
  
}
@media (min-width: 1250px) {
}
@media (min-width: 1681px) {
}
/* only for ipad portrait & landscape for year navigation overflow... */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  .europe-rest-of-world-data{
    display: flex;
  }
  .dcc-map[maptype="healthcare"] .europe-rest-of-world-data .row-1,
  .dcc-map[maptype="healthcare"] .europe-rest-of-world-data .row-2{
    width: 50%;
  }
  .dcc-map[maptype="healthcare"] .europe-rest-of-world-data .row-1{
    border: none;
  }
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
  .dcc-map[maptype="healthcare"] .column-2 .sub_header, .dcc-map[maptype="healthcare"] .column-3 .sub_header{
    display: block !important;
  }
  .europe-rest-of-world-data{
    display: flex;
    width: 100%;
  }
  .dcc-map[maptype="healthcare"] .europe-rest-of-world-data .row-1,
  .dcc-map[maptype="healthcare"] .europe-rest-of-world-data .row-2{
    width: 50%;
    display: block !important;
  }
  .dcc-map[maptype="healthcare"] .europe-rest-of-world-data .row-1{
    border:none;
  }
  
}

/* IE10+ CSS styles go here */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
/*===========MEDIA QUERIES END===============*/
.container-fluid {
  max-width: 1342px;
}

[data-animate] {
  visibility: hidden;
}

.animate {
  visibility: visible;
}

.animate--fade-in {
  -webkit-animation: fade-in 1s ease-in both;
  animation: fade-in 1s ease-in both;
}

.animate--jump-marker {
  animation: markerJump 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transform-origin: center center;
}

@keyframes markerJump {
  from {
    opacity: 0;
    height: 10px;
    transform: translateY(120px) scale(0.8) translateX(-10px);
  }
  to {
    opacity: 1;
    height: 79px;
    transform: translateY(0px) scale(1) translateX(0px);
  }
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animate[data-animation-delay="100"] {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

.animate[data-animation-delay="200"] {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.animate[data-animation-delay="300"] {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}

.animate[data-animation-delay="400"] {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}

.animate[data-animation-delay="500"] {
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}

.animate[data-animation-delay="600"] {
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}

.animate[data-animation-delay="700"] {
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}

.animate[data-animation-delay="800"] {
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
}

.animate[data-animation-delay="900"] {
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
}

.animate[data-animation-delay="1000"] {
  -webkit-animation-delay: 1000ms;
  animation-delay: 1000ms;
}

.animate[data-animation-delay="1200"] {
  -webkit-animation-delay: 1200ms;
  animation-delay: 1200ms;
}

.animate[data-animation-delay="1400"] {
  -webkit-animation-delay: 1400ms;
  animation-delay: 1400ms;
}

.animate[data-animation-delay="1600"] {
  -webkit-animation-delay: 1600ms;
  animation-delay: 1600ms;
}