.section_timeline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 1199px) {
  .section_timeline .container_timeline {
    max-width: 1100px;
  }
}

.section_timeline .container_timeline {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: auto;
  display: -ms-grid;
  display: grid;
  margin-bottom: 10rem;
  -ms-grid-columns: (minmax(350px, 400px))[2];
      grid-template-columns: repeat(2, minmax(350px, 400px));
  grid-auto-rows: minmax(120px, auto);
  grid-gap: 4.5%;
  justify-content: center;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  padding-left: 11%;
  padding-right: 11%;
  /* unvisited link */
  /* visited link */
  /* mouse over link */
  /* selected link */
  /* ######## COLOR CODING FOR TILES ######### */
  /*
      NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW 
      NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW 
      NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW
      NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW NEW 
      */
}

@media only screen and (max-width: 806px) {
  .section_timeline .container_timeline {
    -ms-grid-columns: (minmax(200px, auto))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(200px, auto));
  }
}

@media screen and (max-width: 666px) {
  .section_timeline .container_timeline {
    padding-left: 4%;
    padding-right: 4%;
  }
}

.section_timeline .container_timeline a:link {
  color: whitesmoke;
  cursor: pointer;
}

.section_timeline .container_timeline a:visited {
  color: whitesmoke;
}

.section_timeline .container_timeline a:hover {
  color: white;
}

.section_timeline .container_timeline a:active {
  color: white;
}

.section_timeline .container_timeline .music .tilecover {
  background-color: var(--music);
  background-blend-mode: luminosity;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.section_timeline .container_timeline .music .tiledescription .readmoretext p {
  color: var(--music);
}

.section_timeline .container_timeline .sound .tilecover {
  background-color: var(--sound);
  background-blend-mode: luminosity;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.section_timeline .container_timeline .sound .tiledescription .readmoretext p {
  color: var(--sound);
}

.section_timeline .container_timeline .travel .tilecover {
  background-color: var(--travel);
  background-blend-mode: luminosity;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.section_timeline .container_timeline .travel .tiledescription .readmoretext p {
  color: var(--travel);
}

.section_timeline .container_timeline .visual .tilecover {
  background-color: var(--visual);
  background-blend-mode: luminosity;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.section_timeline .container_timeline .visual .tiledescription .readmoretext p {
  color: var(--visual);
}

.section_timeline .container_timeline .timelinetile {
  aspect-ratio: 1;
  position: relative;
  -webkit-transition: 0.14s;
  transition: 0.14s;
  text-decoration: none;
}

.section_timeline .container_timeline .timelinetile:hover {
  scale: 101%;
}

.section_timeline .container_timeline .timelinetile:hover .tilecover {
  background-blend-mode: normal;
  border-top-width: 14px;
  border-left-width: 0px;
  border-right-width: 0px;
}

.section_timeline .container_timeline .timelinetile:hover .tiletexthover {
  opacity: 0;
}

.section_timeline .container_timeline .timelinetile:hover .tilereadmore {
  opacity: 1;
}

.section_timeline .container_timeline .timelinetile:hover .readmoretext {
  font-size: 115%;
  scale: 1.02;
}

@media only screen and (max-width: 1024px) {
  .section_timeline .container_timeline .timelinetile .tilereadmore {
    opacity: 0.92;
  }
}

@media only screen and (max-width: 1024px) {
  .section_timeline .container_timeline .timelinetile .tilecover {
    background-blend-mode: normal;
  }
}

.section_timeline .container_timeline .timelinetile .tiletitle {
  padding-left: 2.5em;
  padding-right: 2.5em;
  padding-top: 6%;
  background-color: black;
  color: whitesmoke;
}

.section_timeline .container_timeline .timelinetile .tiletitle p {
  font-size: 1.5em;
  text-align: right;
}

.section_timeline .container_timeline .timelinetile .tiledescription {
  padding-left: 2.5em;
  padding-right: 2.5em;
  padding-top: 4%;
  padding-bottom: 6%;
  line-height: 1.5;
  background-color: black;
  color: whitesmoke;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
}

.section_timeline .container_timeline .timelinetile .tiledescription p {
  font-size: 1.1em;
  text-align: left;
}

.section_timeline .container_timeline .timelinetile .tiledescription .readmoretext {
  -webkit-transition: 0.6s;
  transition: 0.6s;
  font-size: 110%;
}

.section_timeline .container_timeline .timelinetile .tilecover {
  background-position: top center;
  background-size: cover;
  -webkit-transition: all ease-out 200ms;
  transition: all ease-out 200ms;
  padding-top: 100%;
  border-top-right-radius: 18px;
  border-top-left-radius: 18px;
}

.section_timeline .container_timeline .timelinetile .tilereadmore {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 3em;
  border-radius: 0px;
  right: 0%;
  top: 0em;
  opacity: 0;
  padding: 2%;
  line-height: 1.4;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-shadow: 3px 3px 34px 3px rgba(0, 0, 0, 0.25);
          box-shadow: 3px 3px 34px 3px rgba(0, 0, 0, 0.25);
  -webkit-transition: all ease-out 200ms;
  transition: all ease-out 200ms;
}

.section_timeline .container_timeline .timelinetile .tilereadmore p {
  font-size: 110%;
}

.section_timeline .container_timeline .elementYEAR {
  aspect-ratio: 2.5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--stickerneon);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  top: 0;
  left: 0;
  border-style: solid;
  border-radius: 8px;
  border-color: transparent;
  /* makes year span over */
}

@media (max-width: 1024px) {
  .section_timeline .container_timeline .elementYEAR {
    background-attachment: local;
  }
}

@media (min-width: 450px) {
  .section_timeline .container_timeline .elementYEAR {
    grid-column: span 2;
  }
}

.section_timeline .container_timeline .elementYEAR .yeartext {
  border-style: solid;
  border-radius: 8px;
  border-color: transparent;
  padding-left: 20px;
  padding-right: 20px;
  background-color: var(--stickerneon);
  color: var(--customblack);
  font-size: 4em;
  text-shadow: 1px 1px 1px black 0.9;
}

.section_timeline .suggestiontimeline {
  color: var(--accent-col);
  /* unvisited link */
  /* visited link */
  /* mouse over link */
  /* selected link */
}

.section_timeline .suggestiontimeline a:link {
  color: var(--accent-col);
  cursor: pointer;
}

.section_timeline .suggestiontimeline a:visited {
  color: var(--accent-col);
}

.section_timeline .suggestiontimeline a:hover {
  color: var(--accent-col);
}

.section_timeline .suggestiontimeline a:active {
  color: var(--accent-col);
}
/*# sourceMappingURL=timeline.css.map */