@font-face {
  font-family: AccidenzCommons;
  src: url(https://static.igem.wiki/teams/5054/ccaccidenzcommons-medium.otf);
}
@font-face {
  font-family: SourceSansPro;
  src: url(https://static.igem.wiki/teams/5054/sourcesans3-variablefont-wght.ttf);
}
.homepage-holder{
    margin: 0 auto;
    width: max(100%, 1300px);
    height: 14500px;
    background-color: #C6EBE8;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: space-around;
}


#roadmap {
  position: absolute;
  z-index: 5;
  top: 11400px;
}

.homepage-subtitle-style{
    margin: 0 auto;
    text-align: left;
    color: #05BE85;
    font-family: SourceSansPro;
    font-size: 100px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.homepage-contents-style {
  margin: 0 auto;
  margin-top: 20px;
  text-align: left;
  color: #185a4f;
  font-family: AccidenzCommons, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.homepage-contents-style2 {
  margin: 0 auto;
  margin-top: 20px;
  text-align: left;
  color: #185a4f;
  font-family: AccidenzCommons, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.homepage-elements{
    position: absolute;
    z-index: 9;
}


.homepage-maintitle{
    top: 260px;
    width: 1300px;
    height: 400px;
}
.homepage-maintitle-name{
    margin: 0 auto;
    margin-top: 10px;
    width: 1300px;
    height: 200px;
    color: #185A4F;
    text-align: center;
    font-family: SourceSansPro;
    font-size: 200px;
    font-style: normal;
    font-weight: 1000;
}
.homepage-maintitle-subtitle {
  margin: 0 auto;
  margin-top: 20px;
  text-align: left;
  color: #185a4f;
  font-family: AccidenzCommons, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.shelter-for-canvas-start{
    position: absolute;
    width: 200px;
    height: 400px;
    top: 950px;
    z-index: 6;
    transform: translateX(-150%);
    background-color: #C6EBE8;
}

.homepage-bg-img4 {
  position: absolute;
  width: 500px;
  height: 500px;
  flex-shrink: 0;
  top: 5500px;
  /* opacity: 1; */
  box-shadow: inset 0px 0px 40px 20px #c6ebe8;
  background: url(https://static.igem.wiki/teams/5054/plants-fixing.svg),
    50% / cover no-repeat;
}


.homepage-content-img {
    /* position: relative; */
    top: 0px;
    transform: translateX(0%);
    width: 500px;
    height: 500px;
    flex-shrink: 0;
    border-radius: 33.854px;
    background: url(https://static.igem.wiki/teams/5054/tu-delft-logo-svg.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
    transition: all 0.5s linear;
}

.homepage-content-img1 {
  top: 1200px;
  transform: translateX(-70%);
  width: 349.375px;
  height: 526.094px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url(https://static.igem.wiki/teams/5054/78.svg),
    50% / cover no-repeat;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  transition: all 0.5s linear;
}

.homepage-content-img2 {
  top: 1300px;
  transform: translateX(40%) translateY(-10%);
  width: 500px;
  height: 600px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url(https://static.igem.wiki/teams/5054/cute-sweet-corn-business-shop-logo.png),
    60% no-repeat;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content-img3 {
    top: 2400px;
    transform: translateX(0%);
    width: 1200px;
    height: 700px;
    flex-shrink: 0;
    /* border: 0.677px solid #FFF; */
    border-radius: 33.854px;
    background: url(https://static.igem.wiki/teams/5054/population-growth.gif);
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: bottom 63px right 30px;
    /* background-color: black; */
    opacity: 0;
    transition: all 0.5s linear;
}

.homepage-content-img4 {
  top: 3900px;
  transform: translateX(0%);
  width: 600px;
  height: 700px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url(https://static.igem.wiki/teams/5054/angryfarmer.png),
    50% / cover no-repeat;
  opacity: 0;
  background-size: 100%;
  transition: all 0.5s linear;
}

.homepage-content-img5 {
  top: 4700px;
  transform: translateX(0%);
  width: 600px;
  height: 500px;
  flex-shrink: 0;
  border-radius: 33.854px;
  background: url(https://static.igem.wiki/teams/5054/eutrophication.png),
    50% / cover no-repeat;
  opacity: 0;
  background-size: 100%;
  transition: all 0.5s linear;
}
.homepage-content-img6 {
  top: 6300px;
  width: 1100px;
  height: 650px;
  flex-shrink: 0;
  background: url(https://static.igem.wiki/teams/5054/co2emissionsupdated.gif);
  transition: all 0.8s linear;
}

.homepage-content-img7 {
  top: 8000px;
  width: 1200px;
  height: 550px;
  overflow: hidden;
  background: url(https://static.igem.wiki/teams/5054/logo-met-tekst-kleur.png);
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 8;
  transform: translateX(0.8px);
  background-size: cover;
}
.homepage-content-img8 {
  top: 8600px;
  width: 500px;
  height: 500px;
  flex-shrink: 0;
  transform: translateX(80%);
  background: linear-gradient(180deg, rgba(198, 235, 232, 0) 0%, rgba(198, 235, 232, 0.3) 100%), url(https://static.igem.wiki/teams/5054/bigelowii.svg), 0px / 124.243% 105.026% no-repeat;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content-img10 {
  top: 8950px;
  width: 500px;
  height: 500px;
  transform: translateX(-60.5%);
  background: url(https://static.igem.wiki/teams/5054/endosymbiosis-ucyna-bigelowii.gif);
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-content-img11 {
  top: 10200px;
  width: 1000px;
  height: 600px;
  flex-shrink: 0;
  /* border-radius: 33.854px; */
  background: url(https://static.igem.wiki/teams/5054/transplantation.gif),
    50% / cover no-repeat;
  opacity: 0;
  transition: all 0.5s linear;
  background-size: cover;
}

.homepage-link1 {
    top: 11900px;
    transform: translateX(-410px);
    width: 400px;
    height: 500px;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.5s linear;
}
.homepage-link-img1 {
    margin: 0 auto;
    width: 400px;
    height: 300px;
    background: url("https://static.igem.wiki/teams/5054/step-1-roadmap.svg");
    background-repeat: no-repeat;
    background-size: 91%;
    background-position: center;
    transition: all 0.1s linear;
    transform: translateX(30px);
}

.homepage-link-style {
  margin: 0 auto;
  text-align: center;
  color: #05be85;
  font-family: SourceSansPro;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  display: block;
  width: 100%;
  text-decoration: none;
}

.homepage-link2 {
    top: 12500px;
    width: 400px;
    height: 500px;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.5s linear;
    transform: translateX(410px);
}

.homepage-link-img2 {
    margin: 0 auto;
    width: 400px;
    height: 300px;
    background: url("https://static.igem.wiki/teams/5054/step-2-roadmap.svg");
    background-repeat: no-repeat;
    background-size: 91%;
    background-position: center;
    transition: all 0.1s linear;
    transform: translateX(30px);
}

.homepage-link3 {
    top: 13100px;
    transform: translateX(-410px);
    width: 400px;
    height: 500px;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.5s linear;
}
.homepage-link1 > a {
  text-decoration: none;
}
.homepage-link2 > a {
  text-decoration: none;
}
.homepage-link3 > a {
  text-decoration: none;
}
.homepage-link4 > a {
  text-decoration: none;
}
.homepage-link5 > a {
  text-decoration: none;
}


.homepage-link-img3{
    margin: 0 auto;
    width: 400px;
    height: 300px;
    background: url("https://static.igem.wiki/teams/5054/insertion.png");
    background-repeat: no-repeat;
    background-size: 91%;
    background-position: center;
    transition: all 0.1s linear;
    transform: translateX(30px);
} 
.homepage-link4 {
    top: 13700px;
    transform: translateX(410px);
    width: 400px;
    height: 500px;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.5s linear;
}

.homepage-link-img4{
    margin: 0 auto;
    width: 400px;
    height: 300px;
    background: url("https://static.igem.wiki/teams/5054/step-4-roadmap.svg");
    background-repeat: no-repeat;
    background-size: 91%;
    background-position: center;
    transition: all 0.1s linear;
    transform: translateX(30px);
} 

.homepage-link5{
    top: 14200px;
    transform: translateY(-100px);
    width: 500px;
    height: 500px;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.5s linear;
}

.homepage-link-img5{
    margin: 0 auto;
    width: 400px;
    height: 300px;
    background: url("https://static.igem.wiki/teams/5054/step-5-roadmap.svg");
    background-repeat: no-repeat;
    background-size: 91%;
    background-position: center;
    transition: all 0.1s linear;
    transform: translateX(30px);
} 

/* content boxes style: */
.homepage-content1 {
  top: 900px;
  transform: translateX(0%);
  width: 440px;
  height: 450px;
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-content2 {
  top: 1788px;
  transform: translateX(-80%);
  width: 415px;
  height: 200px;
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-content3 {
  top: 3500px;
  width: 1500px;
  height: 200px;
  transform: translateX(10%);
  font-family: SourceSansPro;
  font-size: 135.417px;
  font-style: normal;
  font-weight: 600;
  color: #185a4f;
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content4 {
  top: 3650px;
  width: 415px;
  height: 120px;
  transform: translateX(-60%);
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-content5 {
  top: 3350px;
  width: 1000px;
  height: 120px;
  transform: translateX(5%);
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-content6 {
  top: 5200px;
  width: 1000px;
  height: 100px;
  font-family: SourceSansPro;
  font-size: 100px;
  font-style: normal;
  font-weight: 600;
  /* color: transparent; */
  -webkit-text-stroke: 2px #05be85;
  opacity: 0;
  transition: all 0.7s linear;
}
.homepage-content7 {
  top: 6000px;
  width: 1000px;
  height: 65px;
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-content8 {
  top: 7000px;
  width: 1000px;
  height: 65px;
  /* transform: translateX(-110%); */
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content9 {
  top: 7500px;
  width: 900px;
  height: 400px;
  font-family: SourceSansPro;
  font-size: 135px;
  font-style: normal;
  font-weight: 600;
  -webkit-text-stroke: 5px #05be85;
  text-align: left;
  transform: translateX(7%);
  opacity: 0;
  transition: all 0.5s linear;
  color: #05be85;
}

.homepage-content10 {
  top: 8600px;
  width: 1000px;
  height: 28px;
  flex-shrink: 0;
}
.homepage-content11 {
  top: 8690px;
  width: 500px;
  height: 200px;
  transform: translateX(-30%);
  opacity: 0;
  transition: all 0.5s linear;
}

.homepage-content12 {
  top: 9000px;
  width: 400px;
  height: 200px;
  transform: translateX(60.5%);
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-content13 {
  top: 9400px;
  width: 340px;
  height: 200px;
  transform: translateX(-70%);
  opacity: 0;
  transition: all 0.5s linear;
}
.homepage-content14 {
  top: 9800px;
  width: 1200px;
  height: 200px;
  transform: translateX(0%);
  opacity: 0;
  transition: all 0.5s linear;
  justify-content: center;
  text-align: center;
}
.homepage-content15 {
  top: 11000px;
  width: 1100px;
  height: 200px;
  text-align: center;
  font-family: SourceSansPro;
  font-size: 135px;
  font-style: normal;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px #185a4f;
  opacity: 0;
  transition: all 0.5s linear;
}