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


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

    .animation {
      zoom: 1;
      
  }
}

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

    .animation {
      zoom: 1;
      
  }
}

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

    .animation {
      zoom: .85;
      
  }
}

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

    .animation {
      zoom: .65;
      
      
  }


  }

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

    .animation {
      zoom: .5;
      margin-left: 5rem;
      
  }
  .btn-gold {

    margin-top:3rem;

  }


  }


  .container {
    z-index: -1;

  }

  .animation .main {
      display: block;
  }
  
  .animation h1 {
   color: #a39161;
   text-transform: uppercase;
   font-family: Arial, sans-serif;

   font-size: 28px;
   margin-bottom:3rem;

  }
  
  .animation p {
   font-family: Arial, sans-serif;
  }
  
  .animation #list {
   width: 215px;
   text-align: right;
   position:absolute;   
  }
  
  #list ul {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
  }

  #list ul li {
    font-size: 13px;
  }
  
  .show {
    opacity: 1;
    transform: translateX(0%);
  }

  .show_item {
    opacity: 1;
    transform: translateX(0%);
    font-family: Arial, sans-serif;
    margin-bottom:3px;
  }
  
  #rectangle {
     width: 200px; 
     height: 30px; 
     background: #444444;
     position:absolute;
     margin-left:350px;
  }
  
  #rectangle span {
      text-transform: uppercase;
      color:white;
      width: 205px;
      font-size: 75%;
      padding: 8px;
      font-family: Arial, sans-serif;
      position: absolute;
      margin-left: 2px;
      z-index:4;
      letter-spacing: 0.03em;
  }
  
.line, .list_item, .invis, .line-bottom, .box, .pe {
    transform: translateX(-100%);
    transition: transform 0.5s, opacity 1s;
    opacity: 0;
  }
  
  #vl7 {
    border-left: 1px solid #444444;
    height: 168px;
    position: absolute;
    transform: rotate(52deg);
    margin-left:282px;
    margin-top:-6px;
  }
  
  #vl6 {
    border-left: 1px solid #444444;
    height: 158px;
    position: absolute;
    transform: rotate(58deg);
    margin-left:282px;
    margin-top:-10px;
    
  }
  
  #vl5 {
    border-left: 1px solid #444444;
    height: 144px;
    position: absolute;
    transform: rotate(65deg);
    margin-left:282px;
    margin-top:-13px;
  }
  
  #vl4 {
    border-left: 1px solid #444444;
    height: 137px;
    position: absolute;
    transform: rotate(70deg);
    margin-left:282px;
    margin-top:-18px;
  
  }
  
  #vl2 {
    border-left: 1px solid #444444;
    height: 128px;
    position: absolute;
    transform: rotate(88deg);
    margin-left:282px;
    margin-top:-33px;
    
  }
  
  #vl1 {
    border-left: 1px solid #444444;
    height: 130px;
    position: absolute;
    transform: rotate(97deg);
    margin-left:282px;
    margin-top:-45px;
  }
  
  #vl3 {
    border-left: 1px solid #444444;
    height: 130px;
    position: absolute;
    transform: rotate(81deg);
    margin-left:282px;
    margin-top:-25px;
  }
  
  #vl8 {
    border-left: 1px solid #444444;
    height: 180px;
    position: absolute;
    transform: rotate(45deg);
    margin-left:280px;
    margin-top:0px;
  }
  
  #circle {
    height: 200px;
    width: 200px;
    background-color: #a39161;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    margin-left:347px;
    margin-top:26px;
  }
  
  #down-triangle { 
     width: 0; 
     height: 0;
     border-top: 30px solid #444444;
     border-left: 54px solid transparent; 
     border-right: 54px solid transparent; 
     position:absolute;
     margin-left:393px;
     margin-top:25px; 
     z-index:4;
  }
  
  #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; 
  }
  
  #circle span {
      text-transform: uppercase;
      color:white;
      width: 155px;
      font-size: 95%;
      padding: 8px;
      font-family: Arial, sans-serif;
      position: absolute;
      margin-left: 16px;
      margin-top: 60px;
      text-align:center;
      z-index:4;
      font-weight:700;
      letter-spacing: 0.1em;
  }
  
  #vg1 {
    border-left: 2px solid #a39161;
    height: 260px;
    position: absolute;
    transform: rotate(70deg);
    margin-left:280px;
    margin-top:80px;
  }
  
  #vg2 {
    border-left: 2px solid #a39161;
    height: 75px;
    position: absolute;
    transform: rotate(50deg);
    margin-left: 360px;
    margin-top:190px;
  }
  
  #vg3 {
    border-left: 2px solid #a39161;
    height: 75px;
    position: absolute;
    transform: rotate(130deg);
    margin-left:520px;
    margin-top:190px;
  }
  
  #vg4 {
    border-left: 2px solid #a39161;
    height: 260px;
    position: absolute;
    transform: rotate(110deg);
    margin-left:600px;
    margin-top:80px;
  }
  
  .dot {
    height: 12px;
    width: 12px;
    background-color: #a39161;
    border-radius: 50%;
    display: inline-block;
  }
  
  #dot1 {
    position: absolute;
    margin-left:155px;
    margin-top:248px;
  }
  
  #dot2 {
    position: absolute;
    margin-left:325px;
    margin-top:248px;
  }
  
  #dot3 {
    position: absolute;
    margin-left:545px;
    margin-top:248px;
  }
  
  #dot4 {
    position: absolute;
    margin-left:715px;
    margin-top:248px;
  }
  
  .process_eng {
    color: #a39161;
    font-weight: 700;
    text-align: center;
    font-family: Arial, sans-serif;
  }
  
  #pe1 {
    position: absolute;
    margin-left:670px;
    margin-top:265px;
    white-space: nowrap;
  }
  
  #pe2 {
    position: absolute;
    margin-left:480px;
    margin-top:265px;
    white-space: nowrap;
  }
  
  #pe3 {
    position: absolute;
    margin-left:250px;
    margin-top:265px;
    white-space: nowrap;
  }
  
  #pe4 {
    position: absolute;
    margin-left:60px;
    margin-top:265px;
    white-space: nowrap;
  }
  
  .bottom-box {
     width: 170px; 
     height: 60px; 
     background: #444444;
     font-size:12px;
     text-align:center;
     color: white;
     font-family: Arial, sans-serif;
  }
  
  #box1 {
    position:absolute;
    margin-left:675px;
    margin-top:300px;
    padding-top:10px;
    
  }
  
  #box2 {
    position:absolute;
    margin-left:485px;
    margin-top:300px;
    padding-top:10px;
  }
  
  #box3 {
    position:absolute;
    margin-left:255px;
    margin-top:300px;
    padding-top:10px;
  }
  
  #box4 {
    position:absolute;
    margin-left:65px;
    margin-top:300px;
    padding-top:10px;
  }
  
  
  
  