.shadow {
    -webkit-filter: drop-shadow( 0px 0px 8px rgba(0, 0, 0, .2));
    filter: drop-shadow( 0px 0px 8px rgba(0, 0, 0, .2));
  }
  
  #logo {
    position:relative;
    top :40%;
  /*  left: 50%;
    transform: translate(-50%, -50%);*/
    animation: fill .5s ease forwards 3.5s;
    
  }
 
  #logo path:nth-child(1) {
    stroke-dasharray:1377.2342529296875px;
    stroke-dashoffset: 1377.2342529296875px;
    animation: line-anim 3s ease forwards;
    
  }
  
  #logo path:nth-child(2)
  {
    stroke-dasharray: 753.037353515625px;
    stroke-dashoffset: 753.037353515625px;
    animation: line-anim 3s ease forwards 0.3s;
  }
  
  #logo path:nth-child(3)
  {
    stroke-dasharray: 415.5861511230469px;
    stroke-dashoffset: 415.5861511230469px;
    animation: line-anim 3s ease forwards 0.6s;
  }
  
  #logo path:nth-child(4)
  {
    stroke-dasharray: 843.8720703125px;
    stroke-dashoffset: 843.8720703125px;
    animation: line-anim 3s ease forwards 0.9s;
  }
  
  #logo path:nth-child(5)
  {
    stroke-dasharray: 732.147338867187px;
    stroke-dashoffset: 732.147338867187px;
    animation: line-anim 3s ease forwards 1.2s;
  }
  
  #logo path:nth-child(6)
  {
    stroke-dasharray: 434.3360498046875px;
    stroke-dashoffset:434.3360498046875px;
    animation: line-anim 3s ease forwards 1.5s;
  }
  
  #logo path:nth-child(7)
  {
    stroke-dasharray: 434.3360498046875px;
    stroke-dashoffset: 434.3360498046875px;
    animation: line-anim 3s ease forwards 1.8s;
  }
  
  #logo path:nth-child(8)
  {
    stroke-dasharray: 753.0374755859375px;
    stroke-dashoffset: 753.0374755859375px;
    animation: line-anim 3s ease forwards 2.1s;
  }
  
  @keyframes line-anim{
    to {
      stroke-dashoffset:0px;
    }
    
  }

  @keyframes fill{
    from {
      fill: transparent;
    }
    to {
      fill: white;
    }
  }

/* second svg animation */ 
/************************/
  #sublogo {
    position:relative;
    top :70%;
    
    animation: fill 1.5s ease forwards 3.6s;
    
  }
 
  #sublogo path:nth-child(1) {
    stroke-dasharray:837.8180541992188px;
    stroke-dashoffset: 837.8180541992188px;
    animation: line-anim 2s ease forwards;
    
  }
  
  #sublogo path:nth-child(2)
  {
    stroke-dasharray: 403.9892272949219px;
    stroke-dashoffset: 403.9892272949219px;
    animation: line-anim 2s ease forwards 0.2s;
  }
  
  #sublogo path:nth-child(3)
  {
    stroke-dasharray: 691.2913208007812px;
    stroke-dashoffset: 691.2913208007812px;
    animation: line-anim 2s ease forwards 0.4s;
  }
  
  #sublogo path:nth-child(4)
  {
    stroke-dasharray: 859.1007080078125px;
    stroke-dashoffset: 859.1007080078125px;
    animation: line-anim 2s ease forwards 0.6s;
  }
  
  #sublogo path:nth-child(5)
  {
    stroke-dasharray: 759.75244140625px;
    stroke-dashoffset: 759.75244140625px;
    animation: line-anim 2s ease forwards 0.8s;
  }
  
  #sublogo path:nth-child(6)
  {
    stroke-dasharray: 403.9918212890625px;
    stroke-dashoffset:403.9918212890625px;
    animation: line-anim 2s ease forwards 1.0s;
  }
  
  #sublogo path:nth-child(7)
  {
    stroke-dasharray: 507.4589538574219px;
    stroke-dashoffset: 507.4589538574219px;
    animation: line-anim 2s ease forwards 1.2s;
  }
  
  #sublogo path:nth-child(8)
  {
    stroke-dasharray: 702.7386474609375px;
    stroke-dashoffset: 702.7386474609375px;
    animation: line-anim 2s ease forwards 1.4s;
  } 

  #sublogo path:nth-child(9)
  {
    stroke-dasharray: 630.3607177734375px;
    stroke-dashoffset: 630.3607177734375px;
    animation: line-anim 2s ease forwards 1.6s;
  }
     
  #sublogo path:nth-child(10)
  {
    stroke-dasharray: 404.01019287109375px;
    stroke-dashoffset: 404.01019287109375px;
    animation: line-anim 2s ease forwards 1.8s;
  }
   
  #sublogo path:nth-child(11)
  {
    stroke-dasharray: 682.9680175781255px;
    stroke-dashoffset: 682.968017578125px;
    animation: line-anim 2s ease forwards 2.0s;
  }
     
  #sublogo path:nth-child(12)
  {
    stroke-dasharray: 711.7737426757812px;
    stroke-dashoffset: 711.7737426757812px;
    animation: line-anim 2s ease forwards 2.2s;
  }
     
  #sublogo path:nth-child(13)
  {
    stroke-dasharray: 507.4450378417969px;
    stroke-dashoffset: 507.4450378417969px;
    animation: line-anim 2s ease forwards 2.4s;
  }
    
  @keyframes line-anim{
    to {
      stroke-dashoffset:0px;
    }
    
  }

  @keyframes fill{
    from {
      fill: transparent;
      
    }
    to {
      fill: rgb(255, 255, 255);
      stroke-opacity: 0.0;
    }
  }