/* =Measurements
================================================ */
/* =Colors
================================================ */
/* =Breakpoints
================================================ */
/* =Fonts
================================================ */
@font-face {
  src: url("../fonts/SofiaPro-Regular.woff2") format("woff2");
  font-family: "SofiaPro";
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  src: url("../fonts/SofiaPro-Bold.woff2") format("woff2");
  font-family: "SofiaPro";
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@font-face {
  src: url("../fonts/OpenSans-Regular.woff2") format("woff2");
  font-family: "OpenSans";
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  src: url("../fonts/OpenSans-Italic.woff2") format("woff2");
  font-family: "OpenSans";
  font-weight: normal;
  font-style: italic;
  font-display: swap; }

@font-face {
  src: url("../fonts/OpenSans-Bold.woff2") format("woff2");
  font-family: "OpenSans";
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@keyframes flicker {
  0% {
    opacity: 0.8; }
  100% {
    opacity: 1; } }

.accordion {
  width: 100%;
  font-size: 1rem;
  color: #000;
  text-align: left;
  line-height: 1.5;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
  border: none;
  outline: none;
  transition: 0.4s;
  padding: 18px 12px;
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2); }
  .accordion:after {
    float: right;
    content: "\02795";
    font-size: 0.5rem;
    color: rgba(0, 0, 0, 0.5);
    line-height: 3;
    margin-left: 6px; }
  .accordion.active, .accordion:hover {
    background-color: #a2ffa2; }
  .accordion.active:after {
    content: "\2796"; }

.panel {
  display: none;
  background-color: #fff;
  padding: 12px;
  overflow: hidden; }

.article {
  display: flex;
  padding: 0 0 59px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
  .article:not(:first-of-type) {
    padding-top: 60px; }
  @media only screen and (max-width: 760px) {
    .article {
      flex-direction: column; } }
  .article > a {
    position: relative;
    flex-shrink: 0;
    overflow: hidden; }
    @media only screen and (max-width: 760px) {
      .article > a {
        margin-bottom: 24px; } }
    @media only screen and (min-width: 761px) {
      .article > a {
        margin-right: 24px; } }
    .article > a img,
    .article > a .placeholder {
      background: #808080; }
      @media only screen and (max-width: 760px) {
        .article > a img,
        .article > a .placeholder {
          width: 318px;
          height: 200px; } }
      @media only screen and (min-width: 761px) {
        .article > a img,
        .article > a .placeholder {
          width: 380px;
          height: 252px; } }
    .article > a:hover img {
      opacity: 1;
      animation: flicker 2s; }
  .article div h3 {
    font-size: 2rem;
    color: #00a200;
    padding: 12px 0; }
    .article div h3 a {
      text-decoration: none; }
  .article div .date {
    font-family: "SofiaPro";
    color: rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    line-height: 36px; }
  .article div p {
    font-family: "OpenSans"; }

#article-image {
  width: 100%;
  height: auto;
  margin-bottom: 36px; }

#banner {
  position: relative;
  background: #00a200; }
  #banner > div {
    box-sizing: border-box;
    max-width: 1200px;
    padding: 0 12px;
    margin: 0 auto;
    position: relative;
    background-image: url("../images/banner/0.jpg");
    background-repeat: no-repeat;
    padding-top: 48px;
    padding-bottom: 48px; }
    #banner > div.about {
      background-image: url("../images/banner/1.jpg"); }
    #banner > div.news {
      background-image: url("../images/banner/2.jpg"); }
    #banner > div.photos {
      background-image: url("../images/banner/3.jpg"); }
    #banner > div.downloads {
      background-image: url("../images/banner/4.jpg"); }
    #banner > div.contact {
      background-image: url("../images/banner/5.jpg"); }
    @media only screen and (max-width: 760px) {
      #banner > div {
        background-position: center center;
        background-size: cover; } }
    @media only screen and (min-width: 761px) {
      #banner > div {
        background-position: right 12px center;
        background-size: auto 100%; } }
    #banner > div h1 {
      color: #fff; }

#bottom {
  background: #676767;
  padding: 24px 0; }
  #bottom > div {
    box-sizing: border-box;
    max-width: 1200px;
    padding: 0 12px;
    margin: 0 auto; }
    #bottom > div ul {
      display: flex;
      justify-content: space-between;
      padding: 0; }
      #bottom > div ul li {
        color: #fff;
        list-style: none; }
        #bottom > div ul li a {
          color: #00d500; }
          #bottom > div ul li a:hover {
            color: #09ff09; }

#categories {
  list-style: none; }
  #categories li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: -1px; }
    #categories li a {
      text-decoration: none; }
      #categories li a.current {
        color: #000;
        cursor: default; }

#downloads {
  padding: 0; }
  @media only screen and (min-width: 761px) {
    #downloads {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; } }
  #downloads li {
    position: relative;
    box-sizing: border-box;
    list-style: none;
    padding: 6px 12px 6px 3rem;
    margin-bottom: 24px; }
    @media only screen and (min-width: 761px) {
      #downloads li {
        width: 48.45%; } }
    #downloads li:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 2.25rem;
      height: 100%;
      content: "";
      background-color: #00a200;
      background-image: url("../images/icons/download.svg");
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: 50%; }

#footer {
  color: #fff;
  background: #808080;
  padding: 72px 0; }
  #footer > div {
    box-sizing: border-box;
    max-width: 1200px;
    padding: 0 12px;
    margin: 0 auto; }
    @media only screen and (min-width: 761px) {
      #footer > div {
        display: flex;
        justify-content: space-between; } }
    @media only screen and (max-width: 760px) {
      #footer > div section {
        width: 100%;
        margin-bottom: 48px; } }
    @media only screen and (min-width: 761px) {
      #footer > div section {
        width: 23.47%; } }
    #footer > div section h2:before, #footer > div section h2:after {
      background: #fff; }
    #footer > div section ul {
      padding: 0; }
      #footer > div section ul li {
        list-style: none;
        padding: 6px 0; }
        #footer > div section ul li a {
          position: relative;
          color: #fff;
          text-decoration: none; }
          #footer > div section ul li a:hover {
            color: rgba(255, 255, 255, 0.5); }
          #footer > div section ul li a.icon {
            padding-left: 36px; }
            #footer > div section ul li a.icon:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 24px;
              height: 24px;
              content: "";
              background-color: rgba(0, 0, 0, 0.25);
              background-position: center center;
              background-repeat: no-repeat;
              background-size: auto 60%;
              border-radius: 50%; }
            #footer > div section ul li a.icon.facebook:before {
              background-image: url("../images/icons/facebook.svg"); }
            #footer > div section ul li a.icon.instagram:before {
              background-image: url("../images/icons/instagram.svg"); }
            #footer > div section ul li a.icon.twitter:before {
              background-image: url("../images/icons/twitter.svg"); }
            #footer > div section ul li a.icon.youtube:before {
              background-image: url("../images/icons/youtube.svg"); }
    #footer > div section dl dt img {
      width: auto;
      max-width: 100%;
      height: 48px;
      margin-bottom: 12px; }
      #footer > div section dl dt img:hover {
        opacity: 0.75;
        transition: 0.25s; }
    #footer > div section dl dd {
      font-size: 0.5rem;
      color: rgba(255, 255, 255, 0.5); }

form {
  width: 100%;
  overflow: auto;
  margin-bottom: 48px; }
  form label {
    float: left;
    display: block;
    width: 100%;
    font-size: 1rem;
    font-family: "SofiaPro";
    color: #000;
    letter-spacing: 0.1em;
    margin: 12px 0; }
    form label input[type="text"],
    form label input[type="email"],
    form label textarea {
      float: left;
      box-sizing: border-box;
      font-size: 1rem;
      font-family: "OpenSans";
      background: rgba(0, 0, 0, 0.05);
      -webkit-appearance: none;
      padding: 0 6px;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(0, 0, 0, 0.05);
      border: none;
      border-radius: 0; }
      @media only screen and (max-width: 760px) {
        form label input[type="text"],
        form label input[type="email"],
        form label textarea {
          width: 100%; } }
      form label input[type="text"]:focus,
      form label input[type="email"]:focus,
      form label textarea:focus {
        outline: 0;
        box-shadow: inset 0 0 0 2px #00a200; }
    form label input[type="text"],
    form label input[type="email"] {
      height: 36px; }
      @media only screen and (min-width: 761px) {
        form label input[type="text"],
        form label input[type="email"] {
          width: 48.47%; } }
    form label textarea {
      padding-top: 6px;
      padding-bottom: 6px;
      height: 216px; }
      @media only screen and (min-width: 761px) {
        form label textarea {
          width: 87.18%; } }
  form p {
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 24px; }
  form input[type="submit"] {
    display: inline-block;
    font-family: "SofiaPro";
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    background-color: #00a200;
    padding: 6px 48px;
    border-radius: 18px;
    border: none;
    -webkit-appearance: none; }
    form input[type="submit"]:hover, form input[type="submit"]:active {
      color: #fff;
      background-color: #008900; }
    form input[type="submit"]:active {
      box-shadow: inset 0 2px 1px 1px rgba(0, 0, 0, 0.25); }

#grid {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1000%;
  z-index: 9999;
  background-image: repeating-linear-gradient(to right, darkturquoise, transparent 1px, transparent 76px, darkturquoise 76px, transparent 77px, transparent 100px, darkturquoise 100px), repeating-linear-gradient(to right, transparent, transparent 1175px, darkturquoise 1176px), repeating-linear-gradient(to bottom, transparent, transparent 11px, darkturquoise 12px);
  margin: 0 auto; }
  @media only screen and (min-width: 761px) {
    #grid {
      width: 1176px; } }

#header > div {
  box-sizing: border-box;
  max-width: 1200px;
  padding: 0 12px;
  margin: 0 auto;
  position: relative;
  padding-top: 12px;
  padding-bottom: 12px; }
  @media only screen and (min-width: 761px) {
    #header > div {
      display: flex;
      justify-content: space-between;
      align-items: center; } }
  #header > div #logo img {
    width: auto;
    height: 48px; }
    @media only screen and (max-width: 760px) {
      #header > div #logo img {
        margin-bottom: 12px; } }
  #header > div #navigation-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    display: block;
    width: 48px;
    height: 48px;
    background-image: url("../images/icons/menu.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; }
    @media only screen and (min-width: 761px) {
      #header > div #navigation-toggle {
        display: none; } }
  #header > div #navigation {
    display: flex;
    flex-wrap: wrap;
    padding: 0; }
    @media only screen and (max-width: 760px) {
      #header > div #navigation {
        flex-direction: column; } }
    #header > div #navigation li {
      list-style: none;
      font-family: "SofiaPro";
      font-size: 1.2rem; }
      @media only screen and (min-width: 761px) {
        #header > div #navigation li {
          padding-left: 24px; } }
      #header > div #navigation li a {
        display: block;
        color: #000;
        text-decoration: none; }
        @media only screen and (max-width: 760px) {
          #header > div #navigation li a {
            width: 100%;
            line-height: 36px; } }
        #header > div #navigation li a.current, #header > div #navigation li a:hover {
          color: #00a200; }

#milestones li {
  list-style: none;
  padding: 12px 0;
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1); }

.pagination {
  display: flex;
  width: 100%; }
  .pagination * {
    display: block;
    font-size: 1rem;
    padding: 6px; }

#photos {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0; }
  #photos li {
    list-style: none;
    margin-bottom: 12px; }
    #photos li a img {
      width: 176px;
      height: 176px;
      padding-bottom: 4px; }
    #photos li a:hover img {
      opacity: 1;
      animation: flicker 2s; }

#slider {
  display: flex;
  justify-content: space-between;
  height: 120px;
  margin-bottom: 24px; }
  #slider .side {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center; }
    @media only screen and (max-width: 760px) {
      #slider .side {
        width: 38px; } }
    @media only screen and (min-width: 761px) {
      #slider .side {
        width: 76px; } }
    #slider .side button {
      display: inline-block;
      font-family: "SofiaPro";
      font-size: 1rem;
      font-weight: bold;
      color: #fff;
      line-height: 1.5;
      text-decoration: none;
      cursor: pointer;
      background-color: #00a200;
      padding: 6px 48px;
      border-radius: 18px;
      border: none;
      -webkit-appearance: none;
      display: block;
      position: absolute;
      background-color: #00a200;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 50%;
      padding: 0;
      border-radius: 50%; }
      #slider .side button:hover, #slider .side button:active {
        color: #fff;
        background-color: #008900; }
      #slider .side button:active {
        box-shadow: inset 0 2px 1px 1px rgba(0, 0, 0, 0.25); }
      @media only screen and (max-width: 760px) {
        #slider .side button {
          width: 24px;
          height: 24px; } }
      @media only screen and (min-width: 761px) {
        #slider .side button {
          width: 48px;
          height: 48px; } }
      #slider .side button#prev {
        left: 0;
        background-image: url("../images/icons/prev.svg"); }
      #slider .side button#next {
        right: 0;
        background-image: url("../images/icons/next.svg"); }
  #slider ul {
    display: flex;
    flex-grow: 0;
    align-items: center;
    width: 100%; }
    #slider ul li {
      width: 25%;
      list-style: none;
      text-align: center; }
      #slider ul li a {
        display: block;
        position: relative; }
        #slider ul li a img {
          width: auto;
          filter: grayscale(100%);
          height: 100%; }
          @media only screen and (max-width: 760px) {
            #slider ul li a img {
              max-height: 60px; } }
          @media only screen and (min-width: 761px) {
            #slider ul li a img {
              max-height: 120px; } }
          #slider ul li a img:hover {
            transition: 0.25s;
            filter: grayscale(0%); }
        #slider ul li a span {
          visibility: hidden;
          position: absolute;
          width: 100%;
          box-sizing: border-box;
          bottom: -36px;
          left: 0;
          font-size: 0.5rem;
          text-align: center;
          vertical-align: top;
          padding: 6px; }
          @media only screen and (max-width: 760px) {
            #slider ul li a span {
              display: none; } }
        #slider ul li a:hover span {
          visibility: visible; }

#stage {
  position: relative;
  background-color: #00a200;
  background-image: url("../images/stage.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%; }
  #stage > div {
    box-sizing: border-box;
    max-width: 1200px;
    padding: 0 12px;
    margin: 0 auto;
    position: relative;
    padding-top: 48px;
    padding-bottom: 48px; }
    #stage > div h1 {
      color: #fff; }
    #stage > div > a {
      display: block;
      color: #fff;
      margin-bottom: 60px; }

@media only screen and (min-width: 761px) {
  #teasers {
    display: flex;
    justify-content: space-between; } }

#teasers li {
  display: inline-block;
  list-style: none; }
  @media only screen and (max-width: 760px) {
    #teasers li {
      margin-bottom: 48px; } }
  @media only screen and (min-width: 761px) {
    #teasers li {
      width: 31.9%; } }
  #teasers li a img,
  #teasers li a .placeholder {
    height: auto;
    max-height: 252px;
    background: #808080;
    margin-bottom: 12px; }
    @media only screen and (max-width: 760px) {
      #teasers li a img,
      #teasers li a .placeholder {
        width: 288px; } }
    @media only screen and (min-width: 761px) {
      #teasers li a img,
      #teasers li a .placeholder {
        width: 100%; } }
  #teasers li a:hover img {
    opacity: 1;
    animation: flicker 2s; }

#timeline {
  background: rgba(0, 0, 0, 0.25);
  padding: 36px 48px;
  border-radius: 48px; }
  #timeline ul {
    position: relative;
    display: flex;
    height: 12px;
    border-radius: 6px;
    background: #fff;
    padding: 0;
    margin-right: 6px; }
    #timeline ul li {
      position: absolute;
      width: 24px;
      height: 24px;
      list-style: none;
      background: #00a200;
      border-radius: 50%;
      margin-top: -6px;
      margin-left: -12px; }
      #timeline ul li.complete {
        background-color: #00a200; }
      #timeline ul li.incomplete {
        background-color: #fff; }
      #timeline ul li:after {
        position: absolute;
        top: 30px;
        width: 36px;
        font-size: 0.5rem;
        font-family: "SofiaPro";
        color: #fff;
        text-transform: uppercase;
        content: attr(data-label); }
      #timeline ul li a {
        position: relative;
        display: block;
        width: 50%;
        height: 50%;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 50%;
        margin: 25%;
        transition: 0.25s; }
        #timeline ul li a:before {
          transition: 0.25s;
          position: absolute;
          top: -42px;
          left: -60px;
          width: 120px;
          visibility: hidden;
          font-size: 0.75rem;
          font-family: "SofiaPro";
          color: #fff;
          text-align: center;
          content: attr(data-tooltip);
          background: rgba(0, 0, 0, 0.5);
          padding: 6px;
          border-radius: 6px;
          overflow: hidden;
          z-index: 9999; }
        #timeline ul li a:hover {
          background: rgba(0, 0, 0, 0.5); }
          #timeline ul li a:hover:before {
            visibility: visible; }

#tools {
  position: absolute;
  top: 0;
  right: 12px;
  display: flex; }
  #tools #languages {
    display: flex;
    padding: 0;
    margin-right: 12px; }
    #tools #languages li {
      list-style: none;
      line-height: 36px;
      padding: 0 6px; }
      #tools #languages li a {
        color: #fff; }
        #tools #languages li a:hover {
          color: rgba(255, 255, 255, 0.75); }
        #tools #languages li a.current {
          text-decoration: none;
          cursor: default; }
  #tools #flag {
    width: auto;
    height: 36px; }
    #tools #flag:hover {
      opacity: 0.75;
      transition: 0.25s; }

* {
  padding: 0;
  margin: 0; }

html {
  line-height: 1.5;
  scroll-behavior: smooth; }
  @media only screen and (max-width: 760px) {
    html {
      font-size: 12px; } }
  @media only screen and (min-width: 761px) {
    html {
      font-size: 16px; } }

img {
  vertical-align: top; }

body {
  font-family: "OpenSans";
  font-size: 1rem;
  color: #000; }

h1 {
  font-family: "SofiaPro";
  font-size: 3rem; }

h2 {
  position: relative;
  font-family: "SofiaPro";
  font-size: 1rem;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 24px;
  z-index: 1;
  overflow: hidden; }
  h2:before, h2:after {
    position: absolute;
    top: 45%;
    width: 50%;
    height: 1px;
    content: "\a0";
    background: #000;
    overflow: hidden; }
  h2:before {
    margin-left: -50%;
    text-align: right; }

h3 {
  font-family: "SofiaPro";
  font-size: 2rem; }

p,
ul {
  padding-bottom: 24px; }

a {
  color: #00a200;
  transition: 0.25s; }
  a:hover {
    color: #006f00; }

.big {
  font-size: 1.5rem;
  padding-bottom: 24px; }

#content > div {
  box-sizing: border-box;
  max-width: 1200px;
  padding: 0 12px;
  margin: 0 auto; }
  #content > div section {
    padding: 48px 0; }

@media only screen and (min-width: 761px) {
  .columns {
    display: flex;
    justify-content: space-between; } }

@media only screen and (min-width: 761px) {
  .columns .main {
    width: 66%;
    word-wrap: break-word; } }

@media only screen and (min-width: 761px) {
  .columns .aside {
    width: 31.98%; } }

.button {
  display: inline-block;
  font-family: "SofiaPro";
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  background-color: #00a200;
  padding: 6px 48px;
  border-radius: 18px;
  border: none;
  -webkit-appearance: none; }
  .button:hover, .button:active {
    color: #fff;
    background-color: #008900; }
  .button:active {
    box-shadow: inset 0 2px 1px 1px rgba(0, 0, 0, 0.25); }

.date {
  float: right; }