html, body{

  margin:0px;
  padding:0px;
  

 
}
body{
  padding: 0;
  margin: 0px 0px;
  --nav-height:calc(80px + .5vw);
  padding-top:var(--nav-height);
  background-color: #e9b872;
   
}

img{

  pointer-events: none;

}
@keyframes image-load {

    0% {
                opacity: 0;
                transform:translate(-30%, 0);
            }

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



@media (max-width:900px){


.extra_image img:nth-child(2){
  display:none;
}


.text_nav_history{

  background-color: #e9b872;
  margin:0px;
  padding-top:2%;
  text-align:right;
  padding-right:5%;
  padding-bottom:20%;


}

.timeline_content_top h1{


  font-size:3vw;
  font-family:inconsolata;
  color:#fff0d9;
  font-weight:400;


}

.timeline_content_top b{

  color:#ffffff;

}

.timeline_content_top a:link{

  color:#fff0d9;
  text-decoration: underline;

}

.timeline_content_top a:visited{

  color:#fff0d9;
}

.timeline_content_top a:hover{

  color:#ffffff;
}


.timeline_content_top img{

    width:85%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:20%;

  }

.timeline_intro{

  background-color:#e9b872;
  font-family:fira sans;
  color: #ffffff;
  font-weight:300;
  line-height:1.5;
  padding-bottom:25%;

}


.timeline_intro p{

  margin:0px;
  margin-right:15%;
  margin-left:15%;
  font-size:3.5vw;

  

}

.text_nav_history{

  background-color: #e9b872;
  margin:0px;
  padding-top:2%;
  text-align:right;
  padding-right:5%;
  padding-bottom:20%;


}

.timeline_content_top h1{


  font-size:3vw;
  font-family:inconsolata;
  color:#fff0d9;
  font-weight:400;


}

.timeline_content_top b{

  color:#ffffff;

}

.timeline_content_top a:link{

  color:#fff0d9;
  text-decoration: underline;

}

.timeline_content_top a:visited{

  color:#fff0d9;
}

.timeline_content_top a:hover{

  color:#ffffff;
}


.timeline_content_top img{

    width:85%;
    display:block;
    margin-left:auto;
    margin-right:auto;
   
    padding-bottom:20%;

  }

.timeline_intro{

  background-color:#e9b872;
  font-family:fira sans;
  color: #ffffff;
  font-weight:300;
  line-height:1.5;
  padding-bottom:25%;

}


.timeline_intro p{

  margin:0px;
  margin-right:15%;
  margin-left:15%;
  font-size:3.5vw;
}




/*this is the horizontal scrolling portion*/

.items.active {
 
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1);
}


.items{

  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap:0px;
  width:100%;
  height:100%;
  overflow-x:auto;
  column-gap:15%;
  background-color: #6494aa;
  font-family:Inconsolata;
  padding-top:15%;
  padding-bottom:15%;
  user-select: none;
  position: relative;
  
  transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  scrollbar-color: #ffffff #6494aa;
  cursor: pointer;
}



/*part 1*/

.item1{

  width: 100vw; /* Make sure it uses all the available width of the parent */
margin-left: 10%;
margin-right:10%;
margin-top:0%;
margin-bottom:10%;

}

.item1 h2{
  font-weight: 300;
  color:#ffffff;
  font-size: 6vw;



}

.item1 i{

  font-size:3vw;
  line-height: 0;
}

   @keyframes arrow-load {
            0% {
                opacity: 0;
            }

            75% {
                opacity: 1;
                transform:translate(100%, 0);
            }
             100% {
                opacity: 0;
                transform:translate(200%, 0);
            }

        }

        .arrow-body {
          

        }

        .arrow1 {
            width: 5%;
            height: 0;
            max-width: 500px;
            border-top: 0.3vw solid #ffffff;
            position: relative;
            margin-top: 10%;
            float: left;
            margin-left:-5%;
            margin-right:15%;
            animation: arrow-load 5s infinite;
           
        }

        .arrow1::after {
            content: "";
            position: absolute;
            right: -1vw;
            top: -1.2vw;
            border-top: 1.2vw solid transparent;
            border-bottom: 1.2vw solid transparent;
            border-left: 1.5vw solid #ffffff;
        }
.item1 {
 
}  

.item2 {
 
  width:600px;

}
.item2 img:nth-child(1){
  
  width:30%;
  margin-left:0%;
  margin-top:15%;
   opacity: 0; /* Initially hidden */
   transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item2 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item2 h2{

 
  color:#a63d40;
  font-size:4.5em;
  margin:0;
  width:100%;
  height:1em;
  margin-left:20%;
  margin-top:-6%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item2 img:nth-child(4){
  width:40%;
  margin-top:6%;
  margin-left:50%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item2 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item2 p {
 
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-top:-50%;
  width:30%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #e9b872;
  margin-bottom:0%;
  margin-left:35%;
  white-space: normal;
}
  
  

.item2 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}
  
.item3 {
 
  width:300px;

}

.item3 img{
  width:80%;
  margin-top:6%;
   opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item3 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item3 p {
 
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-top:0%;
  width:50%;
  padding: 10% 10%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #e9b872;
  margin-bottom:0%;
  margin-left:-18%;
  white-space: normal;
}
  
  

.item4 {

  width:500px;
  margin-left:0%;

  
}

.item4 img{

  width:35%;
  margin-top:-23%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item4 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}
.item4 h2{
  margin:0px;
  font-size:4.5em;
  color:#151515;
  height:1em;
  margin-left:40%;
  margin-top:20%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item4 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item5 {
 
  width:200px;

}

.item5 img{
  width:10%;
  visibility:hidden;
}

.item4 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  width:35%;
  height:auto;
  margin-left:40%;
  margin-top:-18%;
  background-color: #a63d40;


}

.item6 {

  width:800px;
}

.item6 p:nth-child(2){
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  margin-bottom:0px;
  background-color: #90a959;
  width:30%;
  margin-left:10%;
  margin-top:-10%;
 
}
  .item6 p{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin:0;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #151515;
  width:40%;
    margin-top:0%;
    margin-left:47%;

 
}

.item6 h2{

  color:#e9b872;
  font-size:4.5em;
  margin:0px;
  padding-top:0;
  height:1em; 
  width:2em;
  margin-top:-5%;
  margin-bottom:0px;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



.item6 img:nth-child(4){

  width:35%;
  margin-left:65%;
  margin-top:-16%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item6 img:nth-child(5){

  width:20%;
  margin-left:40%;
  margin-top:-14%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



  


.item8 {

 
}

.item9 {

   margin-left:0%;
  width:1000px;
}

.item9 img:nth-child(1){
  width:25%;
  margin-top:10%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  .item9 img:nth-child(5){
  width:30%;
  margin-left:39%;
  margin-top:-5%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item9 h1{
  color:#90a959;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  width:100vw;
  margin-top:4%;
  margin-left:1%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 h1.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  
.item9 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 3% 3%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #a63d40;
  width:20%;
  margin-left:23.5%;
  margin-top:-21%;


}

.item9 p:nth-child(4){
 font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:24%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #90a959;
  margin-top:-25%;
  margin-left:62%;
  
  
}

.item10 {

}

.item11 {

  margin-left:500px;
}

.item12 {

  margin-left:0px;
  width:750px;
  
  
}

.item12 p:nth-child(1){

    font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  width:22%;
  margin-left:5%;
  margin-top:10%;
  color:#ffffff;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #e9b872;

}

.item12 h2{


  color:#a63d40;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  margin-top:-33%;
  margin-left:68%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 img:nth-child(4){
  width:23%;
  margin-top:-11%;
  margin-left:40%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 img:nth-child(2){
  width:20%;
  margin-top:-100%;
  margin-left:80%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 p:nth-child(5){
   font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-left:50%;
  margin-top:3%;
  width:25%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #a63d40;

}




.item15 {

 
  margin-right:0px;
  width:500px;
}

.item15 img{

  width:55%;
  margin-top:10%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item15 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


  .item15 h2{

  color:#90a959;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  margin-left:58%;
  margin-top:-29%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item15 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


.item15 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item15 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:35%;
  margin-left:50%;
  margin-top:2%;
  padding: 8% 8%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #151515;


}


.item17 {

  width:550px;
}

.item17 h2:nth-child(1){
 
  color:#e9b872;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  margin-top:-3%;
}

.item17 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:30%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #90a959;
  margin-top:-6%;
  margin-left:15%;


}

 .item17 p:nth-child(3) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:35%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #e9b872;
   margin-top:-10%;
   margin-left:50%;


}

.item17 h2:nth-child(4){
   color:#151515;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  margin-left:74%;
  margin-top:-9%;
  
}

.item17 h2{
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}
  
.item17 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item18 {

    margin-left:1000px;
}

.item19 {

 
  width:650px;
}

.item19 img:nth-child(3){

 width:25%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 h2{

  color:#a63d40;
  font-size:4.5em;
  margin:0;
  margin-top:4%;
  margin-left:20%;
  padding-top:0;
  height:1em;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item19 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 img:nth-child(4){

 width:35%;
  margin-top:-10%;
  margin-left:65%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  .item19 img:nth-child(5){

 width:40%;
  margin-top:-18%;
  margin-left:17%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:25%;
  margin-top:-15%;
  margin-left:55%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #151515;

}

.item19 p:nth-child(3) {
  font-family: 'fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:35%;
  margin-top:-14%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #90a959;

}



.item22 {
  
  margin-left:0px;
  width:500px;
}

.item22 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
    width:30%;
  padding: 10% 10%; /* Padding inside the text box */
  font-size: 1em;
  margin-left:50%;
  background-color: #a63d40;

}

.item22 img{
  width:60%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;

  
}

.item22 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


.item22 h2{

  color:#90a959;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  margin-top:-22%;
  margin-left:65%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item22 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



.item23 {

  width:750px;
  padding-right:75px;
}
  
  .item23 h2{

  color:#151515;
  font-size:4.5em;
  margin:0;
    margin-top:-43%;
    margin-left:41%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease; 
  
}

.item23 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item23 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 4% 4%; /* Padding inside the text box */
  font-size:1em;
  background-color: #e9b872;
  width:20%;
  margin-left:69%;
  margin-top:-11%;
  

}


.item23 p:nth-child(5) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  width:20%;
  margin-left:20%;
  margin-top:-5%;
  background-color: #90a959;


}

.item23 img:nth-child(1){

  width:27%;
}

.item23 img:nth-child(3){
  width:34%;
  margin-left:47%;
  margin-top:-4%;
  
}

.item23 img{
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease; 
  
}

.item23 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



}

@media (max-width:900px) and (min-width:450px){

.text_nav_history{

  background-color: #e9b872;
  margin:0px;
  padding-top:2%;
  text-align:right;
  padding-right:5%;
  padding-bottom:20%;


}

.timeline_content_top h1{


  font-size:3vw;
  font-family:inconsolata;
  color:#fff0d9;
  font-weight:400;


}

.timeline_content_top b{

  color:#ffffff;

}

.timeline_content_top a:link{

  color:#fff0d9;
  text-decoration: underline;

}

.timeline_content_top a:visited{

  color:#fff0d9;
}

.timeline_content_top a:hover{

  color:#ffffff;
}


.timeline_content_top img{

    width:85%;
    display:block;
    margin-left:10%;
    margin-right:10%;
    padding-bottom:20%;

  }

.timeline_intro{

  background-color:#e9b872;
  font-family:fira sans;
  color: #ffffff;
  font-weight:300;
  line-height:1.5;
  padding-bottom:25%;

}


.timeline_intro p{

  margin:0px;
  margin-right:15%;
  margin-left:15%;
  font-size:3.5vw;

  

}

.text_nav_history{

  background-color: #e9b872;
  margin:0px;
  padding-top:2%;
  text-align:right;
  padding-right:5%;
  padding-bottom:20%;


}

.timeline_content_top h1{


  font-size:2vw;
  font-family:inconsolata;
  color:#fff0d9;
  font-weight:400;


}

.timeline_content_top b{

  color:#ffffff;

}

.timeline_content_top a:link{

  color:#fff0d9;
  text-decoration: underline;

}

.timeline_content_top a:visited{

  color:#fff0d9;
}

.timeline_content_top a:hover{

  color:#ffffff;
}


.timeline_content_top img{

    width:75%;
    display:block;
    margin-left:auto;
    margin-right:auto;
   
    padding-bottom:15%;

  }

.timeline_intro{

  background-color:#e9b872;
  font-family:fira sans;
  color: #ffffff;
  font-weight:300;
  line-height:1.5;
  padding-bottom:25%;

}


.timeline_intro p{

  margin:0px;
  margin-right:20%;
  margin-left:20%;
  font-size:2.5vw;
}




/*this is the horizontal scrolling portion*/

.items.active {
 
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1);
}


.items{

  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap:0px;
  width:100%;
  height:100%;
  overflow-x:auto;
  column-gap:15%;
  background-color: #6494aa;
  font-family:Inconsolata;
  padding-top:15%;
  padding-bottom:15%;
  user-select: none;
  position: relative;
  scrollbar-color: #ffffff #6494aa;
  cursor: pointer;
  transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



/*part 1*/

.item1{

  width: 100vw; /* Make sure it uses all the available width of the parent */
margin-left: 15%;
margin-right:15%;
margin-top:0%;
margin-bottom:10%;

}

.item1 h2{
  font-weight: 300;
  color:#ffffff;
  font-size: 4vw;



}

.item1 i{

  font-size:2vw;
  line-height: 0;
}

   @keyframes arrow-load {
            0% {
                opacity: 0;
            }

            75% {
                opacity: 1;
                transform:translate(100%, 0);
            }
             100% {
                opacity: 0;
                transform:translate(200%, 0);
            }

        }

        .arrow-body {
          

        }

        .arrow1 {
            width: 8%;
            height: 0;
            max-width: 500px;
            border-top: 0.2vw solid #ffffff;
            position: relative;
            margin-top: 15%;
            
            margin-left:-8%;
            animation: arrow-load 5s infinite;
           
        }

        .arrow1::after {
            content: "";
            position: absolute;
            right: -.8vw;
            top: -.8vw;
            border-top: .8vw solid transparent;
            border-bottom: .8vw solid transparent;
            border-left: 1.3vw solid #ffffff;
        }
.item1 {
 
}  

.item2 {
 
  width:800px;

}
.item2 img:nth-child(1){
  
  width:30%;
  margin-left:0%;
  margin-top:15%;
   opacity: 0; /* Initially hidden */
   transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item2 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item2 h2{

 
  color:#a63d40;
  font-size:4.5em;
  margin:0;
  width:100%;
  height:1em;
  margin-left:20%;
  margin-top:-6%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item2 img:nth-child(4){
  width:40%;
  margin-top:6%;
  margin-left:50%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item2 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item2 p {
 
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-top:-50%;
  width:30%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #e9b872;
  margin-bottom:0%;
  margin-left:35%;
  white-space: normal;
}
  
  

.item2 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}
  
.item3 {
 
  width:400px;

}

.item3 img{
  width:80%;
  margin-top:6%;
   opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item3 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item3 p {
 
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-top:0%;
  width:50%;
  padding: 10% 10%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #e9b872;
  margin-bottom:0%;
  margin-left:-18%;
  white-space: normal;
}
  
  

.item4 {

  width:600px;
  margin-left:0%;
  margin-top:-10%;

  
}

.item4 img{

  width:35%;
  margin-top:-23%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item4 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}
.item4 h2{
  margin:0px;
  font-size:4.5em;
  color:#151515;
  height:1em;
  margin-left:40%;
  margin-top:20%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item4 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item5 {
 
  width:300px;

}

.item5 img{
  width:10%;
  visibility:hidden;
}

.item4 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  width:35%;
  height:auto;
  margin-left:40%;
  margin-top:-18%;
  background-color: #a63d40;


}

.item6 {

  width:900px;
}

.item6 p:nth-child(2){
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  margin-bottom:0px;
  background-color: #90a959;
  width:30%;
  margin-left:10%;
  margin-top:-10%;
 
}
  .item6 p{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin:0;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #151515;
  width:40%;
    margin-top:0%;
    margin-left:47%;

 
}

.item6 h2{

  color:#e9b872;
  font-size:4.5em;
  margin:0px;
  padding-top:0;
  height:1em; 
  width:2em;
  margin-top:-5%;
  margin-bottom:0px;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



.item6 img:nth-child(4){

  width:35%;
  margin-left:69%;
  margin-top:-14%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item6 img:nth-child(5){

  width:20%;
  margin-left:40%;
  margin-top:-14%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



  


.item8 {

 
}

.item9 {

   margin-left:5%;
  width:1100px;
}

.item9 img:nth-child(1){
  width:25%;
  margin-top:10%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  .item9 img:nth-child(5){
  width:30%;
  margin-left:39%;
  margin-top:-3%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item9 h1{
  color:#90a959;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  width:100vw;
  margin-top:4%;
  margin-left:1%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 h1.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  
.item9 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 3% 3%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #a63d40;
  width:20%;
  margin-left:23.5%;
  margin-top:-21%;


}

.item9 p:nth-child(4){
 font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:24%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #90a959;
  margin-top:-25%;
  margin-left:62%;
  
  
}

.item10 {

}

.item11 {

  margin-left:500px;
}

.item12 {

  margin-left:0px;
  width:850px;
  
  
}

.item12 p:nth-child(1){

    font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  width:22%;
  margin-left:5%;
  margin-top:10%;
  color:#ffffff;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #e9b872;

}

.item12 h2{


  color:#a63d40;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  margin-top:-33%;
  margin-left:68%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 img:nth-child(4){
  width:23%;
  margin-top:-11%;
  margin-left:40%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 img:nth-child(2){
  width:20%;
  margin-top:-100%;
  margin-left:80%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 p:nth-child(5){
   font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-left:50%;
  margin-top:3%;
  width:25%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #a63d40;

}




.item15 {

 margin-top:-5%;
  margin-right:0px;
  width:700px;
}

.item15 img{

  width:55%;
  margin-top:10%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item15 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


  .item15 h2{

  color:#90a959;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  margin-left:58%;
  margin-top:-29%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item15 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


.item15 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item15 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:35%;
  margin-left:50%;
  margin-top:2%;
  padding: 8% 8%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #151515;


}


.item17 {

  width:650px;
}

.item17 h2:nth-child(1){
 
  color:#e9b872;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  margin-top:-3%;
}

.item17 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:30%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #90a959;
  margin-top:-4%;
  margin-left:15%;


}

 .item17 p:nth-child(3) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:35%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #e9b872;
   margin-top:-10%;
   margin-left:50%;


}

.item17 h2:nth-child(4){
   color:#151515;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  margin-left:74%;
  margin-top:-6%;
  
}

.item17 h2{
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}
  
.item17 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item18 {

    margin-left:1000px;
}

.item19 {

   margin-top:-3%;
  width:750px;
}

.item19 img:nth-child(3){

 width:25%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 h2{

  color:#a63d40;
  font-size:4.5em;
  margin:0;
  margin-top:4%;
  margin-left:20%;
  padding-top:0;
  height:1em;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item19 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 img:nth-child(4){

 width:35%;
  margin-top:-10%;
  margin-left:65%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  .item19 img:nth-child(5){

 width:40%;
  margin-top:-18%;
  margin-left:17%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:25%;
  margin-top:-15%;
  margin-left:55%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #151515;

}

.item19 p:nth-child(3) {
  font-family: 'fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:35%;
  margin-top:-9%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #90a959;

}



.item22 {
  
  margin-left:0px;
  width:600px;
}

.item22 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
    width:30%;
  padding: 10% 10%; /* Padding inside the text box */
  font-size: 1em;
  margin-left:50%;
  background-color: #a63d40;

}

.item22 img{
  width:60%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;

  
}

.item22 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


.item22 h2{

  color:#90a959;
  font-size:4.5em;
  margin:0;
  padding-top:0;
  margin-top:-22%;
  margin-left:65%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item22 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



.item23 {

  width:850px;
  padding-right:100px;
}
  
  .item23 h2{

  color:#151515;
  font-size:4.5em;
  margin:0;
    margin-top:-43%;
    margin-left:41%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease; 
  
}

.item23 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item23 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 4% 4%; /* Padding inside the text box */
  font-size:1em;
  background-color: #e9b872;
  width:20%;
  margin-left:69%;
  margin-top:-11%;
  

}


.item23 p:nth-child(5) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1em;
  width:20%;
  margin-left:20%;
  margin-top:0%;
  background-color: #90a959;


}

.item23 img:nth-child(1){

  width:27%;
}

.item23 img:nth-child(3){
  width:34%;
  margin-left:47%;
  margin-top:-4%;
  
}

.item23 img{
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease; 
  
}

.item23 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



}

@media (min-width:900px) and (max-width:1920px) {

.text_nav_history{

  background-color: #e9b872;
  margin:0px;
  padding-top:2%;
  text-align:right;
  padding-right:5%;
  padding-bottom:20%;


}

.timeline_content_top h1{


  font-size:3vw;
  font-family:inconsolata;
  color:#fff0d9;
  font-weight:400;


}

.timeline_content_top b{

  color:#ffffff;

}

.timeline_content_top a:link{

  color:#fff0d9;
  text-decoration: underline;

}

.timeline_content_top a:visited{

  color:#fff0d9;
}

.timeline_content_top a:hover{

  color:#ffffff;
}


.timeline_content_top img{

    width:85%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:10%;

  }


.timeline_intro{
  display:grid;
  grid-template-columns:1fr 2fr;
  background-color:#e9b872;
  font-family:fira sans;
  color: #ffffff;
  font-weight:300;
  line-height:1.5;
  padding-bottom:25%;
  margin-left:10%;
  margin-right:10%;

}


.timeline_intro p{

  margin:0px;

  margin-left:0px;
  font-size:3.5vw;

  

}

.text_nav_history{

  background-color: #e9b872;
  margin:0px;
  padding-top:2%;
  text-align:right;
  padding-right:5%;
  padding-bottom:10%;


}

.timeline_content_top h1{


  font-size:1.2vw;
  font-family:inconsolata;
  color:#fff0d9;
  font-weight:400;


}

.timeline_content_top b{

  color:#ffffff;

}

.timeline_content_top a:link{

  color:#fff0d9;
  text-decoration: underline;

}

.timeline_content_top a:visited{

  color:#fff0d9;
}

.timeline_content_top a:hover{

  color:#ffffff;
}


.timeline_content_top img{

    width:120%;
    display:block;

  }

.timeline_intro{

  background-color:#e9b872;
  font-family:fira sans;
  color: #ffffff;
  font-weight:300;
  line-height:1.5;
  padding-bottom:25%;

}


.timeline_intro p{

  margin:0px;
  margin-left:20%;
  font-size:1.5vw;
}




/*this is the horizontal scrolling portion*/

.items.active {
 
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1);
}


.items{

  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap:0px;
  width:100%;
  height:100%;
  overflow-x:auto;
  column-gap:20%;
  background-color: #6494aa;
  font-family:Inconsolata;
  padding-top:10%;
  padding-bottom:10%;
  user-select: none;
  position: relative;
  scrollbar-color: #ffffff #6494aa;
  cursor: pointer;
  transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



/*part 1*/

.item1{

  width: 100vw; /* Make sure it uses all the available width of the parent */
margin-left: 15%;
margin-right:15%;
margin-top:0%;
margin-bottom:10%;

}

.item1 h2{
  font-weight: 300;
  color:#ffffff;
  font-size: 3vw;



}

.item1 i{

  font-size:1.5vw;
  line-height: 0;
}

   @keyframes arrow-load {
            0% {
                opacity: 0;
            }

            75% {
                opacity: 1;
                transform:translate(100%, 0);
            }
             100% {
                opacity: 0;
                transform:translate(200%, 0);
            }

        }

        .arrow-body {
          

        }

        .arrow1 {
            width: 7%;
            height: 0;
            max-width: 500px;
            border-top: 0.2vw solid #ffffff;
            position: relative;
            margin-top: 10%;
            float: left;
            margin-left:-7%;
            margin-right:15%;
            animation: arrow-load 5s infinite;
           
        }

        .arrow1::after {
            content: "";
            position: absolute;
            right: -.7vw;
            top: -.7vw;
            border-top: .7vw solid transparent;
            border-bottom: .7vw solid transparent;
            border-left: 1vw solid #ffffff;
        }
.item1 {
 
}  

.item2 {
 
  width:800px;

}
.item2 img:nth-child(1){
  
  width:30%;
  margin-left:0%;
  margin-top:15%;
   opacity: 0; /* Initially hidden */
   transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item2 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item2 h2{

 
  color:#a63d40;
  font-size:5.5em;
  margin:0;
  width:100%;
  height:1em;
  margin-left:20%;
  margin-top:-6%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item2 img:nth-child(4){
  width:40%;
  margin-top:6%;
  margin-left:50%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item2 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item2 p {
 
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-top:-50%;
  width:30%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.1em;
  background-color: #e9b872;
  margin-bottom:0%;
  margin-left:35%;
  white-space: normal;
}
  
  

.item2 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}
  
.item3 {
 
  width:500px;

}

.item3 img{
  width:80%;
  margin-top:6%;
   opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item3 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item3 p {
 
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-top:0%;
  width:50%;
  padding: 10% 10%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #e9b872;
  margin-bottom:0%;
  margin-left:-18%;
  white-space: normal;
}
  
  

.item4 {

  width:700px;
  margin-left:0%;

  
}

.item4 img{

  width:35%;
  margin-top:-23%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item4 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}
.item4 h2{
  margin:0px;
  font-size:5.5em;
  color:#151515;
  height:1em;
  margin-left:40%;
  margin-top:20%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item4 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item5 {
 
  width:200px;

}

.item5 img{
  width:10%;
  visibility:hidden;
}

.item4 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.1em;
  width:35%;
  height:auto;
  margin-left:40%;
  margin-top:-18%;
  background-color: #a63d40;


}

.item6 {

  width:1000px;
}

.item6 p:nth-child(2){
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.1em;
  margin-bottom:0px;
  background-color: #90a959;
  width:30%;
  margin-left:10%;
  margin-top:-10%;
 
}
  .item6 p{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin:0;
  padding: 6% 6%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #151515;
  width:30%;
    margin-top:0%;
    margin-left:47%;

 
}

.item6 h2{

  color:#e9b872;
  font-size:5.5em;
  margin:0px;
  padding-top:0;
  height:1em; 
  width:2em;
  margin-top:-5%;
  margin-bottom:0px;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



.item6 img:nth-child(4){

  width:35%;
  margin-left:65%;
  margin-top:-16%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item6 img:nth-child(5){

  width:20%;
  margin-left:40%;
  margin-top:-14%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



  


.item8 {

 
}

.item9 {

   margin-left:0%;
  width:1200px;
}

.item9 img:nth-child(1){
  width:25%;
  margin-top:10%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  .item9 img:nth-child(5){
  width:30%;
  margin-left:39%;
  margin-top:-3%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item9 h1{
  color:#90a959;
  font-size:5.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  width:100vw;
  margin-top:2%;
  margin-left:1%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 h1.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  
.item9 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 3% 3%; /* Padding inside the text box */
  font-size: 1.1em;
  background-color: #a63d40;
  width:20%;
  margin-left:23.5%;
  margin-top:-21%;


}

.item9 p:nth-child(4){
 font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:24%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1.1em;
  background-color: #90a959;
  margin-top:-25%;
  margin-left:62%;
  
  
}

.item10 {

}



.item12 {

  margin-left:0px;
  width:950px;
  
  
}

.item12 p:nth-child(1){

    font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  width:22%;
  margin-left:5%;
  margin-top:10%;
  color:#ffffff;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1.1em;
  background-color: #e9b872;

}

.item12 h2{


  color:#a63d40;
  font-size:5.5em;
  margin:0;
  padding-top:0;
  margin-top:-33%;
  margin-left:68%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 img:nth-child(4){
  width:23%;
  margin-top:-11%;
  margin-left:40%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 img:nth-child(2){
  width:20%;
  margin-top:-100%;
  margin-left:80%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 p:nth-child(5){
   font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-left:50%;
  margin-top:3%;
  width:25%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1.1em;
  background-color: #a63d40;

}




.item15 {

 
  margin-right:0px;
  width:700px;
}

.item15 img{

  width:55%;
  margin-top:10%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item15 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


  .item15 h2{

  color:#90a959;
  font-size:5.5em;
  margin:0;
  padding-top:0;
  margin-left:58%;
  margin-top:-29%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item15 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


.item15 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item15 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:35%;
  margin-left:50%;
  margin-top:2%;
  padding: 8% 8%; /* Padding inside the text box */
  font-size: 1.1em;
  background-color: #151515;


}


.item17 {

  width:750px;
}

.item17 h2:nth-child(1){
 
  color:#e9b872;
  font-size:5.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  margin-top:-3%;
}

.item17 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:30%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.1em;
  background-color: #90a959;
  margin-top:-6%;
  margin-left:15%;


}

 .item17 p:nth-child(3) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:35%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.1em;
  background-color: #e9b872;
   margin-top:-10%;
   margin-left:50%;


}

.item17 h2:nth-child(4){
   color:#151515;
  font-size:5.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  margin-left:76%;
  margin-top:-7%;
  
}

.item17 h2{
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}
  
.item17 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item18 {

    margin-left:1000px;
}

.item19 {

 
  width:850px;
}

.item19 img:nth-child(3){

 width:25%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 h2{

  color:#a63d40;
  font-size:5.5em;
  margin:0;
  margin-top:4%;
  margin-left:20%;
  padding-top:0;
  height:1em;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item19 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 img:nth-child(4){

 width:35%;
  margin-top:-9%;
  margin-left:65%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  .item19 img:nth-child(5){

 width:40%;
  margin-top:-18%;
  margin-left:17%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:25%;
  margin-top:-15%;
  margin-left:55%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.1em;
  background-color: #151515;

}

.item19 p:nth-child(3) {
  font-family: 'fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:30%;
  margin-top:-9%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.1em;
  background-color: #90a959;

}



.item22 {
  
  margin-left:0px;
  width:700px;
}

.item22 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
    width:30%;
  padding: 10% 10%; /* Padding inside the text box */
  font-size: 1.1em;
  margin-left:50%;
  background-color: #a63d40;

}

.item22 img{
  width:60%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;

  
}

.item22 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


.item22 h2{

  color:#90a959;
  font-size:5.5em;
  margin:0;
  padding-top:0;
  margin-top:-22%;
  margin-left:65%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item22 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



.item23 {

  width:950px;
  padding-right:75px;
}
  
  .item23 h2{

  color:#151515;
  font-size:5.5em;
  margin:0;
    margin-top:-43%;
    margin-left:41%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease; 
  
}

.item23 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item23 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 4% 4%; /* Padding inside the text box */
  font-size:1.1em;
  background-color: #e9b872;
  width:20%;
  margin-left:69%;
  margin-top:-11%;
  

}


.item23 p:nth-child(5) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.1em;
  width:20%;
  margin-left:20%;
  margin-top:-.5%;
  background-color: #90a959;


}

.item23 img:nth-child(1){

  width:27%;
}

.item23 img:nth-child(3){
  width:34%;
  margin-left:47%;
  margin-top:-4%;
  
}

.item23 img{
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease; 
  
}

.item23 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



}
@media   (min-width:1920px) {

.text_nav_history{

  background-color: #e9b872;
  margin:0px;
  padding-top:2%;
  text-align:right;
  padding-right:5%;
  padding-bottom:20%;


}

.timeline_content_top h1{


  font-size:3vw;
  font-family:inconsolata;
  color:#fff0d9;
  font-weight:400;


}

.timeline_content_top b{

  color:#ffffff;

}

.timeline_content_top a:link{

  color:#fff0d9;
  text-decoration: underline;

}

.timeline_content_top a:visited{

  color:#fff0d9;
}

.timeline_content_top a:hover{

  color:#ffffff;
}


.timeline_content_top img{

    width:75%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:20%;

  }

.timeline_intro{

  display:grid;
  grid-template-columns: 1.5fr 2fr;
  background-color:#e9b872;
  font-family:fira sans;
  color: #ffffff;
  font-weight:300;
  line-height:1.5;
  padding-bottom:25%;

}


.timeline_intro p{

  margin:0px;
  margin-right:25%;
  margin-left:15%;
  font-size:3.5vw;

  

}

.text_nav_history{

  background-color: #e9b872;
  margin:0px;
  padding-top:2%;
  text-align:right;
  padding-right:5%;
  padding-bottom:10%;


}

.timeline_content_top h1{


  font-size:1.2vw;
  font-family:inconsolata;
  color:#fff0d9;
  font-weight:400;


}

.timeline_content_top b{

  color:#ffffff;

}

.timeline_content_top a:link{

  color:#fff0d9;
  text-decoration: underline;

}

.timeline_content_top a:visited{

  color:#fff0d9;
}

.timeline_content_top a:hover{

  color:#ffffff;
}


.timeline_content_top img{

    width:100%;
    display:block;
   
    padding-bottom:10%;

  }

.timeline_intro{
  display:grid;
  grid-template-columns: 1.3fr 2fr;
  background-color:#e9b872;
  font-family:fira sans;
  color: #ffffff;
  font-weight:300;
  line-height:1.5;
  padding-bottom:25%;
  margin-left:10%;
  margin-right:10%;

}


.timeline_intro p{

  margin:0px;
  margin-left:10%;
  font-size:1.2vw;
}




/*this is the horizontal scrolling portion*/

.items.active {
 
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1);
}


.items{

  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap:0px;
  width:100%;
  height:100%;
  overflow-x:auto;
  column-gap:10%;
  background-color: #6494aa;
  font-family:Inconsolata;
  padding-top:10%;
  padding-bottom:10%;
  user-select: none;
  position: relative;
  scrollbar-color: #ffffff #6494aa;
  cursor: pointer;
  transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



/*part 1*/

.item1{

  width: 100vw; /* Make sure it uses all the available width of the parent */
margin-left: 15%;
margin-right:20%;
margin-top:0%;
margin-bottom:10%;

}

.item1 h2{
  font-weight: 300;
  color:#ffffff;
  font-size: 2.5vw;



}

.item1 i{

  font-size:1vw;
  line-height: 0;
}

   @keyframes arrow-load {
            0% {
                opacity: 0;
            }

            75% {
                opacity: 1;
                transform:translate(100%, 0);
            }
             100% {
                opacity: 0;
                transform:translate(200%, 0);
            }

        }

        .arrow-body {
          

        }

        .arrow1 {
            width: 7%;
            height: 0;
            max-width: 500px;
            border-top: 0.09vw solid #ffffff;
            position: relative;
            margin-top: 10%;
            float: left;
            margin-left:-7%;
            margin-right:15%;
            animation: arrow-load 5s infinite;
           
        }

        .arrow1::after {
            content: "";
            position: absolute;
            right: -.5vw;
            top: -.5vw;
            border-top: .5vw solid transparent;
            border-bottom: .5vw solid transparent;
            border-left: .8vw solid #ffffff;
        }
.item1 {
 
}  

.item2 {
 
  width:1000px;

}
.item2 img:nth-child(1){
  
  width:30%;
  margin-left:0%;
  margin-top:15%;
   opacity: 0; /* Initially hidden */
   transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item2 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item2 h2{

 
  color:#a63d40;
  font-size:6.5em;
  margin:0;
  width:100%;
  height:1em;
  margin-left:20%;
  margin-top:-6%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item2 img:nth-child(4){
  width:40%;
  margin-top:6%;
  margin-left:50%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item2 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item2 p {
 
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-top:-50%;
  width:30%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.3em;
  background-color: #e9b872;
  margin-bottom:0%;
  margin-left:35%;
  white-space: normal;
}
  
  

.item2 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}
  
.item3 {
 
  width:700px;

}

.item3 img{
  width:80%;
  margin-top:6%;
   opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item3 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item3 p {
 
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-top:0%;
  width:50%;
  padding: 10% 10%; /* Padding inside the text box */
  font-size: 1em;
  background-color: #e9b872;
  margin-bottom:0%;
  margin-left:-18%;
  white-space: normal;
}
  
  

.item4 {

  width:900px;
  margin-left:0%;

  
}

.item4 img{

  width:35%;
  margin-top:-23%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item4 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}
.item4 h2{
  margin:0px;
  font-size:6.5em;
  color:#151515;
  height:1em;
  margin-left:40%;
  margin-top:20%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item4 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item5 {
 
  width:200px;

}

.item5 img{
  width:10%;
  visibility:hidden;
}

.item4 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.3em;
  width:35%;
  height:auto;
  margin-left:40%;
  margin-top:-18%;
  background-color: #a63d40;


}

.item6 {

  width:1200px;
}

.item6 p:nth-child(2){
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.3em;
  margin-bottom:0px;
  background-color: #90a959;
  width:30%;
  margin-left:10%;
  margin-top:-10%;
 
}
  .item6 p{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin:0;
  padding: 6% 6%; /* Padding inside the text box */
  font-size: 1.3em;
  background-color: #151515;
  width:30%;
    margin-top:0%;
    margin-left:47%;

 
}

.item6 h2{

  color:#e9b872;
  font-size:6.5em;
  margin:0px;
  padding-top:0;
  height:1em; 
  width:2em;
  margin-top:-5%;
  margin-bottom:0px;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



.item6 img:nth-child(4){

  width:35%;
  margin-left:65%;
  margin-top:-16%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item6 img:nth-child(5){

  width:20%;
  margin-left:40%;
  margin-top:-14%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item6 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



  


.item8 {

 
}

.item9 {

   margin-left:0%;
  width:1400px;
}

.item9 img:nth-child(1){
  width:25%;
  margin-top:10%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  .item9 img:nth-child(5){
  width:30%;
  margin-left:39%;
  margin-top:-4%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item9 h1{
  color:#90a959;
  font-size:6.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  width:100vw;
  margin-top:4%;
  margin-left:1%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}

.item9 h1.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  
.item9 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 3% 3%; /* Padding inside the text box */
  font-size: 1.3em;
  background-color: #a63d40;
  width:20%;
  margin-left:23.5%;
  margin-top:-21%;


}

.item9 p:nth-child(4){
 font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:24%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1.3em;
  background-color: #90a959;
  margin-top:-25%;
  margin-left:62%;
  
  
}

.item10 {

}



.item12 {

  margin-left:0px;
  width:1150px;
  
  
}

.item12 p:nth-child(1){

    font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  width:22%;
  margin-left:5%;
  margin-top:10%;
  color:#ffffff;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1.3em;
  background-color: #e9b872;

}

.item12 h2{


  color:#a63d40;
  font-size:6.5em;
  margin:0;
  padding-top:0;
  margin-top:-33%;
  margin-left:68%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 img:nth-child(4){
  width:23%;
  margin-top:-11%;
  margin-left:40%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 img:nth-child(2){
  width:20%;
  margin-top:-100%;
  margin-left:80%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item12 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item12 p:nth-child(5){
   font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  margin-left:50%;
  margin-top:3%;
  width:25%;
  padding: 4% 4%; /* Padding inside the text box */
  font-size: 1.3em;
  background-color: #a63d40;

}




.item15 {

 
  margin-right:0px;
  width:900px;
}

.item15 img{

  width:55%;
  margin-top:10%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item15 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


  .item15 h2{

  color:#90a959;
  font-size:6.5em;
  margin:0;
  padding-top:0;
  margin-left:58%;
  margin-top:-29%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item15 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


.item15 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item15 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:35%;
  margin-left:50%;
  margin-top:2%;
  padding: 8% 8%; /* Padding inside the text box */
  font-size: 1.3em;
  background-color: #151515;


}


.item17 {

  width:950px;
}

.item17 h2:nth-child(1){
 
  color:#e9b872;
  font-size:6.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  margin-top:-3%;
}

.item17 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:30%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.3em;
  background-color: #90a959;
  margin-top:-6%;
  margin-left:15%;


}

 .item17 p:nth-child(3) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:35%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.3em;
  background-color: #e9b872;
   margin-top:-10%;
   margin-left:50%;


}

.item17 h2:nth-child(4){
   color:#151515;
  font-size:5.5em;
  margin:0;
  padding-top:0;
  height:1em; 
  margin-left:76%;
  margin-top:-7%;
  
}

.item17 h2{
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
}
  
.item17 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item18 {

    margin-left:1000px;
}

.item19 {

 
  width:1050px;
}

.item19 img:nth-child(3){

 width:25%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 h2{

  color:#a63d40;
  font-size:6.5em;
  margin:0;
  margin-top:4%;
  margin-left:20%;
  padding-top:0;
  height:1em;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item19 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 img:nth-child(4){

 width:35%;
  margin-top:-9%;
  margin-left:65%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

  .item19 img:nth-child(5){

 width:40%;
  margin-top:-18%;
  margin-left:17%;
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
 
}

.item19 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item19 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:25%;
  margin-top:-15%;
  margin-left:55%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.3em;
  background-color: #151515;

}

.item19 p:nth-child(3) {
  font-family: 'fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  width:30%;
  margin-top:-9%;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.3em;
  background-color: #90a959;

}



.item22 {
  
  margin-left:0px;
  width:900px;
}

.item22 p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
    width:30%;
  padding: 10% 10%; /* Padding inside the text box */
  font-size: 1.3em;
  margin-left:50%;
  background-color: #a63d40;

}

.item22 img{
  width:60%;
opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;

  
}

.item22 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}


.item22 h2{

  color:#90a959;
  font-size:6.5em;
  margin:0;
  padding-top:0;
  margin-top:-22%;
  margin-left:65%;
  height:1em; 
  opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease;
  
}

.item22 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



.item23 {

  width:1150px;
  padding-right:275px;
}
  
  .item23 h2{

  color:#151515;
  font-size:6.5em;
  margin:0;
    margin-top:-43%;
    margin-left:41%;
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease; 
  
}

.item23 h2.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}

.item23 p:nth-child(2) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 4% 4%; /* Padding inside the text box */
  font-size:1.3em;
  background-color: #e9b872;
  width:20%;
  margin-left:69%;
  margin-top:-11%;
  

}


.item23 p:nth-child(5) {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color:#ffffff;
  padding: 5% 5%; /* Padding inside the text box */
  font-size: 1.3em;
  width:20%;
  margin-left:20%;
  margin-top:-.5%;
  background-color: #90a959;


}

.item23 img:nth-child(1){

  width:27%;
}

.item23 img:nth-child(3){
  width:34%;
  margin-left:47%;
  margin-top:-4%;
  
}

.item23 img{
 opacity: 0; /* Initially hidden */
  transform: translateX(-30%); /* Move off-screen horizontally */
  transition: opacity 2s ease, transform 2s ease; 
  
}

.item23 img.visible {
    animation: image-load 2s ease forwards; /* Apply animation when 'show' class is added */
}



}

.item a{

  color:#ffffff;
}

.item a:link{

  color:#ffffff;
}

.item a:visited{

  color:#ffffff;
}