#zoo-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: auto;
    background: white;
    z-index: 1000;
    animation: fadein 2s normal forwards , index 1.5s normal forwards;
    animation-delay: 3s;
    animation-iteration-count: 1;
    }


#zoobox {
  position: fixed;
  top: 45%;
  left: 50%;
  margin-top: -33px;
  margin-left: -33px;
  height: 68px;
  width: 68px;


}

#zooloader {
    position:relative;
    width: 64px;
    height: 64px;
    animation: preloader_Z 1.4s infinite linear;
}
#zooloader span{
    width:20px;
    height:20px;
    position:absolute;
    display:block;
    animation: preloader_Z_span 2s infinite linear;
}
#zooloader span:nth-child(1){
  background:black;
}
#zooloader span:nth-child(2){
left:22px;
background:black;
    animation-delay: .2s;

}
#zooloader span:nth-child(3){
left:44px;
background:black;
    animation-delay: .4s;
}
#zooloader span:nth-child(4){
top:29px;
width: 0;
height: 0;
border-bottom: 13px solid black;
border-left: 20px solid transparent;
    animation-delay: 1s;
    z-index: 999;
}
#zooloader span:nth-child(5){
  background: black;
   height: 20px;
   margin-left: 8px;
   margin-top: 11px;
     position: relative;
     width: 20px;
     top:22px;
     left:14px;
     animation-delay: 0.8s;
     }
 #zooloader span:nth-child(9):before{
   border-bottom: 7px solid white;
   border-left: 10px solid transparent;
   border-right: 0px solid transparent;
   content: "";
   height: 0;
   top: -8px;
   left: -12px;
   position: absolute;
   width: 0;
   z-index: 112;
    }
#zooloader span:nth-child(5):before{
      border-top: 6px solid white;
      border-left: 0px solid transparent;
      border-right: 9px solid transparent;
      content: "";
      height: 0;
      left: 0;
      position: absolute;
      top: 0px;
      width: 0;
      z-index: 112;
       animation: off;
       }

#zooloader span:nth-child(6){
top:22px;
left:44px;
width: 0;
height: 0;
border-top: 13px solid black;
border-right: 20px solid transparent;
    animation-delay: .6s;
    z-index: 999;
}

#zooloader span:nth-child(7){
top:44px;
    animation-delay: 1.2s;
    background:black;
}
#zooloader span:nth-child(8){
top:44px;
left:22px;
background:black;
    animation-delay: 1.4s;
}

#zooloader span:nth-child(9){
top:44px;
left:44px;
background:black;
    animation-delay: 1.6s;
}


@keyframes preloader_Z_span {
   0% { opacity: 1; }
   50% { opacity:0.5; }
   100% { opacity:1;}
}


@keyframes fadein {
  from { opacity: 1; }
  to   { opacity: 0; }
}


@keyframes index {
  from { z-index: 1000; }
  to { z-index: -1; }
}