@import url(fontface.css);
@import url(header.css);
@import url(footer.css);
@import url(infinite-slider.css);
@import url(card.css);
@import url(media-queries.css);
@import url(news.css);
@import url(initiatives.css);
@import url(main.css);
@import url(about.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Helvetica", sans-serif;
}

:root {
  --text-size-content-parag: 24px;
  --text-size-content-parag-var2: 18px;
  --text-size-content-title: 40px;
  --text-size-header-primary: 50px;
  --text-size-header-secondary: 30px;
  --text-size-page-titles: 100px;
  --text-size-content-emphasis: 27px;
  --text-size-anchor: 20px;
  --text-size-photo-credits: 14px;
}

/* Intro Animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  animation: fadeIn .4s ease-in-out;
}

.header,
.banner-card,
.infinite-slider {
  animation: fadeIn .3s ease-in-out;
  animation-fill-mode: both;
}

.banner-card {
  animation-delay: .2s;
  background-color: #eeeeee;

}

.infinite-slider {
  animation-delay: 1.5s;
}