main {
    position: relative;
}

.st0 {
    fill: none;
    stroke: var(--primarygreen);
    stroke-width: 2.5px;
    stroke-miterlimit: 10;
  }

svg {
    position: relative;
    margin: auto;
    top: 4rem;
    left: 0;
    right: 0;
    bottom: 0;
    width: 1080px;
    height: 4000px;
}

.timeline-contents{
    position: absolute;
    width: 100%;
    top: 100%;
}

.timeline-contents section {
    opacity: 0;
    transition: all 1.75s;
    overflow: visible;
    height: 800px;
    display: inline-block; /* this is important to delete the useless space between each section */
    position: relative;
    width: 100%;
}

.timeline-contents section>div {
    display: flex;
    gap: 5rem;
    margin-top: 6rem;
    margin-left: 2rem;
    margin-right: 2rem;
    width: auto;
}

.timeline-contents section>div > *{
    flex: 1;
}

.timeline-contents section:nth-of-type(even) > div {
    margin-top: 10rem;
}

.timeline-contents section.cover > div {
    display: block;
    gap: 5rem;
    margin-top: 0rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

/* section.cover:nth-of-type(even) h3{
    position: absolute;
    right: -25px 
} */

.timeline-contents section h3 { /* the years */
  color: var(--primarygreen);
  font-size: 1.5rem;
  line-height: .8;
  font-weight: 500;
  width: 125px;
  height: 102px;
  display: grid;
  place-content: center;
  margin-top: 2px;
  text-align: center;
}

section:nth-of-type(even) h3{
    float: right;
}

.timeline-contents section.txt-img >div {
    flex-direction: row-reverse;
}

/* incase there are no imags uploaded */  
.timeline-contents section>div:not(:has(.images)) {
    display: block;
}

.images {
    position: relative;
}

.images .layer1,
.images .layer2,
.images .layer3{
    position:absolute;
    top: -50%;
}

.img-txt .layer1 {
    left: 0px;
}

.txt-img .layer1 {
    right: 0px;
}

section.cover .images p {
    position: relative;
    text-align: center;
    margin: 0px;
    margin-top: -4rem;
    margin-bottom: 2rem;
}

section.cover .content p {
    text-align: center;
}

section.cover .images .layer1 img{
  width:auto;
  max-height:20rem;
}

section:not(.cover) .content p {
    display: inline;
}

.images img {
    border-radius: 5px;
    max-width: 100%;
    height: auto;
    max-height: 28rem;
    width:auto;
}

rect {
    width: 125px;
    height: 105px;
}

/**
*  js_off
*/
body.js_off svg{
display:none;
}

body.js_off .timeline-contents section{
    opacity:1; 
}

body.js_off .timeline-contents {
    position: relative;
}

.images .mobile {
    display: none;
}

#timeline_50185 .layer1{
    top: -35%;
}

#timeline_50186 .layer1 {
    top: -25%;
}

#timeline_50197 .layer1{
    top: -150%;
}

#timeline_50187 .images p:not(.mobile){
    text-align: center;
}

#timeline_50187 .images p:not(.mobile) img {
    max-height: 24rem;
}

#timeline_50229 .images p:not(.mobile){
    margin-top: -5rem;
}

#timeline_50230 .layer1{
    top: -25%;
}

#timeline_50233 .images p:not(.mobile){
    text-align: center;
}

#timeline_50232 .images p:not(.mobile),
#timeline_50188 .images p:not(.mobile){
    margin-top: 4rem;
}

#timeline_50189 .images p:not(.mobile){
    margin-top: -5rem;
}

#timeline_50188 .images p:not(.mobile) img {
    max-width: 51rem;
}

#timeline_50181 .layer1{
    top: -150px;
}

#timeline_50184 .layer1{
    right: 5rem;
    top: -25%;
}

#timeline_50184 .layer1 img {
    transform: rotate(-10deg);
}

#timeline_50184 .layer2{
    width: 45%;
    top: -4%;
    z-index: 2;
    left: 4%;
}

#timeline_50184 .layer3{
    width: 40%;
    top: 159px;
    left: 11%;
    z-index: 1;
}

#timeline_50190 .layer1 {
    top: -55%;
    left: 14%;
    width: 80%;
}

#timeline_50190 .layer2 {
    z-index: 1;
    width: 35%;
    top: 87%;
}

#timeline_50190 .layer2 img {
    cursor: pointer;
    transform: rotate(-10deg);
}


#timeline_50190 .layer3 {
    top: 87%;
    width: 33%;
    left: 70%;
    z-index: 1;
}

#timeline_50190 .layer3 img {
    cursor: pointer;
    transform: rotate(10deg);
}

#timeline_50191 .layer1 {
    top: -76%;
}

#timeline_50191 .layer2 {
    width: 50%;
    top: 56%;
}

#timeline_50191 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50192 .layer1 {
    width: 65%;
    top: -27%;
    left: 30%;
}

#timeline_50192 .layer2 {
    width: 45%;
    top: 35%;
}

#timeline_50192 .layer1 img {
    transform: rotate(10deg);
}

#timeline_50192 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50193 .layer1 img {
    transform: rotate(10deg);
}

#timeline_50193 .layer1 {
    top: -55%;
}

#timeline_50193 .layer2 {
    width: 35%;
    top: 53%;
    z-index: 1;
}

#timeline_50193 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50194 .layer2 {
    z-index: 1;
    width: 40%;
    top: 50%;
    left: 30%;
}

#timeline_50194 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50195 .layer1 {
    top: -75%;
    width: 85%;
}

#timeline_50195 .layer1 img {
    transform: rotate(9deg);
}

#timeline_50195 .layer2 {
    width: 38%;
    z-index: 1;
    top: 50%;
}

#timeline_50195 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50196 .layer1{
    top: -35%;
}

#timeline_50196 .layer2 {
    width: 40%;
    top: 55%;
}

#timeline_50196 .layer3 {
    width: 50%;
    top: 58%;
    z-index: 1;
    left: 55%;
}

#timeline_50196 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50196 .layer3 img {
    transform: rotate(20deg);
}

#timeline_50199 .layer1 {
    top: -35%;
}

#timeline_50199 .layer2 {
    width: 65%;
    z-index: 1;
    top: 59%;
}

#timeline_50199 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50200 .layer1{
    top: -75%;
}

#timeline_50203 .images p:not(.mobile){
    margin-top: 4rem;
}

#timeline_50200 .layer2 {
    width: 55%;
    z-index: 1;
    top: 55%;
    left: -10%;
}

#timeline_50200 .layer3 {
    width: 45%;
    z-index: 1;
    right: 3%;
    top: 45%;
}

#timeline_50200 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50200 .layer3 img {
    transform: rotate(10deg);
}

#timeline_50201 .layer2 {
    width: 45%;
    z-index: 1;
    top: 38%;
    left: 10%;
}

#timeline_50201 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50204 .layer1{
    width: 55%;
}

#timeline_50204 .layer2{
    width: 35%;
}

#timeline_50204 .layer1 img {
    transform: rotate(10deg);
}

#timeline_50204 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50205 .layer1 {
    top: -113%;
}

#timeline_50205 .layer2 {
    width: 50%;
    z-index: 1;
    top: 107%;
}

#timeline_50205 .layer3 {
    width: 50%;
    z-index: 1;
    top: 107%;
    left: 60%;
}

#timeline_50205 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50205 .layer3 img {
    transform: rotate(10deg);
}

#timeline_50206 .layer1{
    top: -90%;
    width: 70%;
}

#timeline_50206 .layer2{
    width: 50%;
    z-index: 1;
    top: 70%;
    left: 0%;
}

#timeline_50206 .layer3 {
    width: 46%;
    z-index: 1;
    top: 86%;
    right: -4%;
}

#timeline_50206 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50206 .layer3 img {
    transform: rotate(10deg);
}

#timeline_50207 .layer1{
    top: -45%;
}

#timeline_50209 .layer2{
    top: -20%;
}

#timeline_50207 .layer2{
    width: 37%;
    z-index: 1;
    top: 58%;
    left: 60%;
}

#timeline_50207 .layer3{
    width: 36%;
    z-index: 1;
    top: 58%;
    left: 5%;
}

#timeline_50207 .layer2 img{
    transform: rotate(10deg);
}

#timeline_50207 .layer3 img{
    transform: rotate(-10deg);
}

#timeline_50208 .layer1 img {
    transform: rotate(-5deg);
}

#timeline_50208 .layer1{
    top: -100%;
    width: 80%;
    right: 25%;
}

#timeline_50208 .layer2{
    width: 60%;
    z-index: 1;
    top: 190%;
    left: -38%;
}

#timeline_50208 .layer3{
    width: 60%;
    z-index: 1;
    top: 65%;
    right: 0%;
}

#timeline_50208 .layer2 img{
    transform: rotate(-10deg);
}

#timeline_50208 .layer3 img {
    transform: rotate(10deg);
}

#timeline_50210 .layer1{
    top: -94%;
    right: 0px;
}

#timeline_50210 .layer1 img {
    transform: rotate(5deg);
}

#timeline_50210 .layer2{
    width: 38%;
    z-index: 1;
    top: 63%;
    left: 25%;
}

#timeline_50210 .layer2 img {
    transform:rotate(-5deg)
}

#timeline_50212 .layer1 {
    top: -80%;
}

#timeline_50212 .layer2 {
    width: 50%;
    z-index: 1;
    top: 178%;
}

#timeline_50212 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50212 .layer3 {
    width: 50%;
    z-index: 1;
    top: 180%;
    left: 64%;
}

#timeline_50212 .layer3 img {
    transform: rotate(10deg);
}

#timeline_50213 .layer1{
    width: 78%;
  top: -24%;
  right: 25%;
}

#timeline_50213 .layer2{
    width: 50%;
    z-index: 1;
    top: 50%;
    left: -10%;
}

#timeline_50213 .layer3{
    width: 50%;
    z-index: 1;
    top: 50%;
    right: 0%;
}

#timeline_50213 .layer2 img{
    transform: rotate(-10deg);
}

#timeline_50213 .layer3 img{
    transform: rotate(10deg);
}

#timeline_50213 > div {
    margin-top: 8rem
}

#timeline_50215 .layer1{
    width: 80%;
    top: -65%;
    left: 30%;
}

#timeline_50215 .layer2{
    width: 65%;
    z-index: 1;
    top: 20%;
}

#timeline_50215 .layer1 img{
    transform: rotate(10deg);
}

#timeline_50215 .layer2 img{
    transform: rotate(-10deg);
}

#timeline_50216 .images p:not(.mobile){
    margin-top: 4rem;
}

#timeline_50220 .images p:not(.mobile){
    margin-top: 3rem;
}

#timeline_50220 .images p:not(.mobile) img {
    max-height:27rem
}

#timeline_50217 .layer1{
    top: -125%;
    width: 62%;
    right: -15%;
}

#timeline_50217 .layer2{
    width: 60%;
    z-index: 1;
    top: -121%;
    left: -9%;
}

#timeline_50217 .layer3{
    width: 58%;
    z-index: 1;
    top: 72%;
    right: 48%;
}

#timeline_50217 .layer2 img{
    transform: rotate(-10deg);
}

#timeline_50217 .layer3 img{
    transform: rotate(10deg);
}

#timeline_50218 .layer1{
    top: -70%;
}

#timeline_50218 .layer2{
    width: 50%;
    z-index: 1;
    top: 129%;
}

#timeline_50218 .layer3{
    width: 38%;
    z-index: 1;
    top: 112%;
    right: 0%;
}

#timeline_50218 .layer2 img{
    transform: rotate(-10deg);
}

#timeline_50218 .layer3 img{
    transform: rotate(10deg);
}

#timeline_50219 .layer1 {
    top: -75%;
}

#timeline_50219 .layer2 {
    width: 55%;
    z-index: 1;
    top: 73%;
    left: -25%;
}

#timeline_50219 .layer3 {
    width: 55%;
    z-index: 1;
    top: 67%;
    right: 0%;
}

#timeline_50219 .layer2 img{
    transform: rotate(-10deg);
}

#timeline_50219 .layer3 img {
    transform: rotate(10deg);
}

#timeline_50221 .layer1{
    top: -43%;
    left: 15%;
    width: 80%;
}

#timeline_50221 .layer2{
    width: 53%;
    z-index: 1;
    top: 61%;
}

#timeline_50221 .layer3{
    width: 55%;
    z-index: 1;
    top: 64%;
    right: -12%;
}

#timeline_50221 .layer1 img{
    transform: rotate(5deg);
}

#timeline_50221 .layer2 img{
    transform: rotate(-10deg);
}

#timeline_50221 .layer3 img{
    transform: rotate(10deg);
}

#timeline_50222 .layer1{
    width: 88%;
    top: -37%;
    right: 8%;
}

#timeline_50222 .layer2{
    width: 67%;
    z-index: 1;
    top: 63%;
    left: -25%;
}

#timeline_50222 .layer1 img{
    transform: rotate(10deg);
}

#timeline_50222 .layer2 img{
    transform: rotate(-10deg);
}

#timeline_50223 .layer1{
    top: -30%;
    width: 90%;
    left: 15%;
}

#timeline_50223 .layer2{
    width: 55%;
    z-index: 1;
    top: 82%;
}

#timeline_50223 .layer3{
    width: 53%;
    z-index: 1;
    top: 87%;
    right: -13%;
}

#timeline_50223 .layer1 img{
    transform: rotate(5deg);
}

#timeline_50223 .layer2 img{
    transform: rotate(-10deg);
}

#timeline_50223 .layer3 img{
    transform: rotate(10deg);
}

#timeline_50225 .layer1 {
    top: -95%;
    right: 0%;
}

#timeline_50225 .layer2 {
    width: 70%;
    z-index: 1;
    top: 80%;
    left: -3%;
}

#timeline_50225 .layer1 img{
    transform: rotate(10deg);
}

#timeline_50225 .layer2 img{
    transform: rotate(-10deg);
}

#timeline_50226 .layer1{
    top: -35%;
}

#timeline_50226 .layer2{
    width: 50%;
    z-index: 1;
    top: 69%;
}

#timeline_50226 .layer3{
    width: 55%;
    z-index: 1;
    top: 69%;
    right: -10%;
}

#timeline_50226 .layer2 img{
    transform: rotate(-10deg);
}

#timeline_50226 .layer3 img{
    transform: rotate(10deg);
}

#timeline_50227 .layer1 {
    top: -75%;
}

#timeline_50227 .layer2 {
    width: 60%;
    z-index: 1;
    top: 78%;
    left: -29%;
}

#timeline_50227 .layer3 {
    width: 65%;
    z-index: 1;
    right: -5%;
    top: 70%;
}

#timeline_50227 .layer2 img {
    transform: rotate(-10deg);
}

#timeline_50227 .layer3 img {
    transform: rotate(10deg);
}

#timeline_50232 .images p:not(.mobile) img {
    max-height: 23rem;
}

#timeline_50233 .images p:not(.mobile) img {
    max-height: 26rem;
}

#timeline_50211 .images p:not(.mobile){
margin-top:4rem;
}

#timeline_50223 .images p:not(.mobile){
margin-top: 0rem;
}

#timeline_50228 .images p:not(.mobile){
    margin-top: 4rem;
}

#timeline_50223 .images p:not(.mobile) img {
    max-height: 25rem;
}

#timeline_50224 .images p:not(.mobile) {
    margin-top: 3rem;
}

#timeline_50224 .images p:not(.mobile) img {
    max-height: 26rem;
}

@media screen and (min-width:982px) and (max-width:1080px){
    .timeline-contents p {
        font-size: 1.2rem;
    }

}

@media screen and (min-width:982px) and (max-width:1032px){
   
    #timeline_50193 .layer1 {
        top: -44%;
    }
    #timeline_50193 .layer2 {
        width: 35%;
        top: 43%;
        z-index: 1;
    }

    #timeline_50195 .layer1 {
        top: -54%;
        width: 85%;
    }

    #timeline_50196 .layer3 {
        width: 50%;
        top: 48%;
        z-index: 1;
        left: 55%;
    }

    #timeline_50196 .layer2 {
        width: 40%;
        top: 43%;
    }

    #timeline_50199 .layer1 {
        top: -20%;
    }

    #timeline_50199 .layer2 {
        width: 65%;
        z-index: 1;
        top: 53%;
    }

    .img-txt .layer1 {
        left: 0px;
        top: -35%;
    }
    #timeline_50201 .layer2 {
        width: 45%;
        z-index: 1;
        top: 45%;
        left: 10%;
    }

    #timeline_50205 .layer1 {
        top: -58%;
    }

    #timeline_50206 .layer3 {
        width: 50%;
        z-index: 1;
        top: 72%;
        right: -4%;
    }

    #timeline_50206 .layer2 {
        width: 48%;
        z-index: 1;
        top: 62%;
        left: -3%;
    }

    #timeline_50207 .layer1 {
        top: -29%;
    }

    #timeline_50212 .layer2 {
        width: 50%;
        z-index: 1;
        top: 108%;
    }

    #timeline_50212 .layer3 {
        width: 50%;
        z-index: 1;
        top: 110%;
        left: 64%;
    }

    #timeline_50213 .layer1 {
        width: 83%;
        top: -8%;
        right: 18%;
    }

    #timeline_50215 .layer1 {
        width: 80%;
        top: -55%;
        left: 30%;
    }

    #timeline_50218 .layer1 {
        top: -40%;
    }

    #timeline_50219 .layer1 {
        top: -45%;
    }

    #timeline_50221 .layer1 {
        top: -23%;
        left: 15%;
        width: 80%;
    }
    #timeline_50222 .layer1 {
        width: 88%;
        top: -27%;
        right: 8%;
    }

    #timeline_50225 .layer1 {
        top: -55%;
        right: 0%;
    }
    #timeline_50226 .layer1 {
        top: -15%;
    }

    #timeline_50227 .layer1 {
        top: -45%;
    }

    #timeline_50231 .images img {
        max-height: 26rem;
    }

    #timeline_50190 .layer1 {
        top: -34%;
        left: 14%;
        width: 80%;
    }
    #timeline_50191 .layer1 {
        top: -46%;
    }
}

@media screen and (max-width:981px){

    main{
        position: relative;
    }

        svg {
            top: 4.7rem;
        }


    div#preview_document{
        left: 50%;
        translate: -52% -50%!important;
        width: 85%!important;
    }

    div#preview_document img {
        width: 100%!important;
        max-width: inherit!important;
        max-height: inherit!important;
    }

    section.cover:nth-of-type(2n) h3{
        position: relative;
    }

    #timeline_50213 > div {
        margin-top: 0rem
    }

    .timeline-contents section{
        height: auto;
        padding-bottom: 0rem;
    }

    section:nth-of-type(even) h3 {
        margin-right: 0px;
        margin-left: 0px
    }

    .timeline-contents section h3{
        width: 100px;
        height: 90px;
        font-size: 1.25rem;
        margin-top:0px;
    }

    rect {
        width: 100px;
        height: 90px;
    }

    section.cover:nth-of-type(even) h3{
        right: 0px;
        z-index: 9;
    }

    p.mobile{
        margin:0px;
    }

    section:not(.cover) .content p{
        display: block;
    }

    .timeline-contents section.txt-img >div {
        flex-direction: column;
    }

    section.cover .images p{
        margin-top: 0rem;
    }

  .timeline-contents section>div {
      display: inline-block;
      gap: 5rem;
      margin-top: 0rem;
      margin-left: 0rem!important;
      margin-right: 0rem!important;
      width: 92%;
      padding: 0px 1rem;
      }
      .timeline-contents section:nth-of-type(even) > div {
        margin-top: 0rem;
      }

      .images .mobile {
        display: block;
        text-align: center;
    }

    .images .layer1,
    .images .layer2,
    .images .layer3,
    .images p:not(.mobile){
        display: none;
    }
}