.safewebkey-red-building{
    position: absolute;
    top:29%;
    z-index: 0;
    opacity: 0;
    animation:safewebkey-big-red-building 1s 12s linear forwards;
}
@-webkit-keyframes safewebkey-big-red-building{
    0%{ 
      opacity: 0;
    }
    25%{
      opacity: 0.25;                 
    }
    50%{
      opacity: 0.50;
    }
    75%{
      opacity: 0.75;
    }
    100%{
      opacity: 1;
    }
  }
  .safewebkey-logo{
    top: 12%;
    width: 57%;
    left: 25%;
    opacity: 0;
    animation:safewebkey-logo 1s 10s linear forwards,
    safewebkey-logo-small 1s 12s linear forwards;
  }
  @-webkit-keyframes safewebkey-logo{
    from{ 
      opacity: 0;
      left:0;
    }
    to{
      opacity: 1;
      left:25%;
    }
  }
  @-webkit-keyframes safewebkey-logo-small {
    0%{
      opacity: 0;  
      width: 62%;
    }
    25%{
    opacity: 0.25;
    }
    50%{
  opacity: 0.50;
    }
    75%{
  opacity: 0.75;
    }
  100%{
      left: 74%;
      width: 22%;
      opacity: 1;
    }
  } 
  .safewebkey-bottom-man{
    bottom: -28%;
    width: 42%;
    z-index: 11;
   left: 50%;
   opacity: 0;
   transform: translate(-50%, -50%);
   animation:safewebkey-bottom-man 1s 12s linear forwards;
  }
  .safewebkey-bottom-man1{
    bottom: -28%;
    width: 42%;
    z-index: 11;
   left: 50%;
   opacity: 0;
   transform: translate(-50%, -50%);
   animation:safewebkey-bottom-man1 1s 12s linear forwards;
  }
  @-webkit-keyframes safewebkey-bottom-man1 {
    0%{
      opacity: 0;  
      bottom:-44%;
    }
    25%{
    opacity: 0.25;
    }
    50%{
  opacity: 0.50;
    }
    75%{
  opacity: 0.75;
    }
  100%{
    bottom: -28%;
      opacity: 1;
    }
  }
  @-webkit-keyframes safewebkey-bottom-man {
    0%{
      opacity: 0;  
      bottom:-44%;
    }
    25%{
    opacity: 0.25;
    }
    50%{
  opacity: 0.50;
    }
    75%{
  opacity: 0.75;
    }
  100%{
    bottom: -28%;
      opacity: 1;
    }
  } 
  .safewebkey-left{
    width: 7%;
    bottom: 66%;
    left: 63%;
    opacity: 0;
    z-index: 0;
    animation:safewebkey-left 1s 12s linear forwards;
  }
  @-webkit-keyframes safewebkey-left {
    0%{
      opacity: 0;  
      bottom: 63%;
    }
    25%{
    opacity: 0.25;
    }
    50%{
  opacity: 0.50;
    }
    75%{
  opacity: 0.75;
    }
  100%{
    bottom: 66%;
      opacity: 1;
    }
  } 
  .safewebkey-right{
    bottom: 68%;
  width: 15%;
  left: 41%;
  opacity: 0;
  animation:safewebkey-right 1s 12s linear forwards;
}
@-webkit-keyframes safewebkey-right {
  0%{
    opacity: 0;  
    bottom: 60%;
  }
  25%{
  opacity: 0.25;
  }
  50%{
opacity: 0.50;
  }
  75%{
opacity: 0.75;
  }
100%{
  bottom: 68%;
    opacity: 1;
  }
} 
.safewebkey-top{
  opacity: 0;
  bottom: 66%;
  width: 11%;
  left: 21%;
  animation:safewebkey-top 1s 12s linear forwards;
}
@-webkit-keyframes safewebkey-top {
  0%{
    opacity: 0;  
    bottom: 60%;
  }
  25%{
  opacity: 0.25;
  }
  50%{
opacity: 0.50;
  }
  75%{
opacity: 0.75;
  }
100%{
  bottom: 66%;
    opacity: 1;
  }
}