.animation2 {
    zoom: 1;
    -moz-transform: scale(0.95);
    display: block;
    margin-top:4rem;
    margin-bottom:10rem;
    height:500px;
    z-index: 5;
    margin-left: -7rem;
    
  }

  @media only screen and (min-width:1400px) {
    .animation2 {
      zoom: 1;
  }
 }

  @media only screen and (min-width:1200px) and (max-width:1400px) {

    .animation2 {
      zoom: .85;
  }
 }

  @media only screen and (min-width:1000px) and (max-width:1200px){

    .animation2 {
      zoom: .7;
  }
 }

  @media only screen and (min-width:780px) and (max-width:1000px){

    .animation2 {
      zoom: .5;
  }
 }

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

    .animation2 {
      zoom: .5;
      margin-left: 5rem;
  }
 }

  .container {
    z-index: -1;
  }

  .animation2 .main {
      display: block;
  }
  
  .animation2 h1 {
   color: #a39161;
   text-transform: uppercase;
   font-family: Arial, sans-serif;
   margin-top:-50px;
   margin-bottom:3rem;
   font-size: 28px;
  }
  
  .animation2 p {
   font-family: Arial, sans-serif;
  }
  
  .animation2 #list2 {
   width: 215px;
   text-align: right;
   position:absolute;   
    padding: 0; /* Remove padding */
    margin-left: 50px; /* Remove margins */
    list-style-position: inside;
    width: 320px;
    list-style-type: none;
    margin-top: 1rem;
  }

  .animation2 #list2 li {
    font-size: 0.9rem;
    text-align: left;
    color: black;
    padding-top:12px;
    font-family: Arial, sans-serif;
  }

  .animation2 #list2 li a {
    cursor: pointer;
    color: black;
    text-decoration: none;
  }

  .animation2 #mechanism {
  list-style-type: none;
  margin: none;
  position: absolute;
  margin-left: 360px;
  margin-top:-120px;
}

.animation2 #mechanism li {
  color: black;
  font-size: 0.8rem;
}
.animation2 #list2 li a:hover {
    cursor: pointer;
    font-weight: 600;
  }

  .animation2  #bottom-button {
    background-color: #a39161;
    width: 310px;
    height: 40px;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    margin: auto;
    text-align: center;
    padding-top: 7px;
    position:absolute;
    margin-left: 65px;
    margin-top: 300px;
    text-transform: uppercase;
  }

  .animation2 #arrow {
    position:absolute;
    margin-left: 725px;
    margin-top: 35px;
    width:40px;
  }

  .animation2 .show {
    opacity: 1;
    transform: translateX(0%);
  }

  .animation2 .show_item {
    opacity: 1;
    transform: translateX(0%);
    font-family: Arial, sans-serif;
    margin-bottom:3px;
  }
  
  .animation2 #rectangle {
     width: 290px; 
     height: 70px; 
     background: #444444;
     position:absolute;
     margin-left:60px;
     margin-top: -20px;
  }
  
  .animation2 #rectangle span {
      text-align: center;
      color:white;
      width: 270px;
      font-size: 75%;
      padding: 8px;
      font-family: Arial, sans-serif;
      position: absolute;
      margin-top: 5px;
      z-index:4;
      letter-spacing: 0.03em;
      font-size: 1rem;
  }

  
  
.line, .list_item, .bullet, .invis, .line-bottom, .box, .pe {
    transform: translateX(-100%);
    transition: transform 0.5s, opacity 1s;
    opacity: 0;
  }
  
  .animation2 #circle2 {
    height: 450px;
    width: 450px;
    border: 3px solid #a39161;
    background-color: none;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    margin-left:400px;
    margin-top:80px;
  }
  
  .animation2 #triangle, #triangle2, #triangle3 { 
     width: 0; 
     height: 0;
     border-top: 20px solid #a39161;
     border-left: 15px solid transparent; 
     border-right: 15px solid transparent; 
     position:absolute;
     transform: rotate(-90deg);
  }

  .animation2 #triangle {
    margin-left:55px;
     margin-top:75px; 

  }

  .animation2 #triangle2 {
    margin-left:475px;
     margin-top:5px; 

  }

  .animation2 #triangle3 {
    margin-left:600px;
     margin-top:5px;
  }

  .animation2 #needs {
    margin-left:520px;
     margin-top:-3px;
     position:absolute;
     font-size: 1.4rem;
     font-family: Arial, sans-serif;
     font-weight: lighter;
  }

  .animation2 #roadmap {
    margin-left:650px;
    width:380px;
    margin-top:-5px;
    position:absolute;
    font-size: 1.5rem;
    font-family: Arial, sans-serif;
    font-weight: lighter;
  }

  .animation2 #text-1 {
    margin-left:100px;
    margin-top:105px;
    color: #a39161;
    width: 250px;
    text-align: center;
    font-size: 1rem; 
    font-weight: 600;
    font-family: Arial, sans-serif;
  }
  
  .animation2 #down-triangle-white { 
     width: 0; 
     height: 0;
     border-top: 30px solid white;
     border-left: 54px solid transparent; 
     border-right: 54px solid transparent; 
     position:absolute;
     margin-left:393px;
     margin-top:30px;
     z-index:3; 
  }
  
  .animation2 #inner {
      width: 420px;
      font-size: 1.8rem;
      padding: 8px;
      font-family: Arial, sans-serif;
      position: absolute;
      margin-left: 10px;
      margin-top: 150px;
      text-align:center;
      z-index:4;
      font-weight:lighter;
      letter-spacing: 0.1em;
  }


  .animation2 #circle2 #number {
    width: 540px;
    font-size: 3em;
    padding: 8px;
    font-family: Arial, sans-serif;
    position: absolute;
    margin-left: -60px;
    margin-top: 70px;
    text-align:center;
    z-index:4;
    font-weight:700;
    letter-spacing: 0.1em;
}
    
.animation2 .dot {
    height: 12px;
    width: 12px;
    background-color: #a39161;
    border-radius: 50%;
    display: inline-block;
  }
  
  .animation2 #dot1 {
    position: absolute;
    margin-left:155px;
    margin-top:248px;
  }
  
  .animation2 #dot2 {
    position: absolute;
    margin-left:325px;
    margin-top:248px;
  }
  
  .animation2 #dot3 {
    position: absolute;
    margin-left:545px;
    margin-top:248px;
  }
  
  .animation2 #dot4 {
    position: absolute;
    margin-left:715px;
    margin-top:248px;
  }
  
  .animation2 .process_eng {
    color: #a39161;
    font-weight: 700;
    text-align: center;
    font-family: Arial, sans-serif;
  }