.scene{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    background: white;
    animation: invisible 1s 5s linear,disa 5s 6s infinite;
}

.structure{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.structure .algeria{
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: invisible 3s ease-out;
}

.structure .img1{
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate-center 1s linear reverse;
}

.structure .img2{
    width: 250px;
    position: absolute;
    top: 52%;
    left: 51%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: flip-scale-up-hor 1s ease-in reverse, visible 1s linear infinite;
    animation-delay: 2s;
}

.structure .img3{
    width: 360px;
    position: absolute;
    top: 110px;
    left: 49%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: slide-bottom 3s 1s ease, visible 1s 3s linear infinite;
}

.structure .img4{
    width: 325px;
    position: absolute;
    bottom: -25px;
    left: 48%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: slide-top 3s 1s ease , visible 1s 3s linear infinite;
}

.structure .img5{
    width: 54px;
    position: absolute;
    top: 72px;
    left: 30px;
    opacity: 0;
    animation: rotate-scale-up 0.5s 3.5s ease-in,visible 1s 3.8s linear infinite;
}

 @-webkit-keyframes rotate-center {
    0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
              top: 46px;
              left: 0;
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
              top: 46px;
              left: 0;
    }
  }
  @keyframes rotate-center {
    0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
              top: 46px;
              left: 0;
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
              top: 46px;
              left: 0;
    }
  }

@-webkit-keyframes slide-bottom {
    0% {
      -webkit-transform: translate(-50%,-100%);
              transform: translate(-50%,-100%);
              opacity: 0;
    }
    100% {
      -webkit-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
              opacity: 1;
    }
  }

  @keyframes slide-bottom {
    0% {
      -webkit-transform: translate(-50%,-100%);
              transform: translate(-50%,-100%);
              opacity: 0;
    }
    100% {
      -webkit-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
              opacity: 1;
    }
  }

  @-webkit-keyframes slide-top {
    0% {
      -webkit-transform: translate(-50%,50%);
              transform: translate(-50%,50%);
              opacity: 0;
    }
    100% {
      -webkit-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
              opacity: 1;
    }
  }

  @keyframes slide-top{
    0% {
      -webkit-transform: translate(-50%,50%);
              transform: translate(-50%,50%);
              opacity: 0;
    }
    100% {
      -webkit-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
              opacity: 1;
    }
  }

 @-webkit-keyframes flip-scale-up-hor {
    0% {
      -webkit-transform: scale(1) rotateX(0) translate(-50%,-50%);
              transform: scale(1) rotateX(0) translate(-50%,-50%);
              opacity: 1;
    }
    50% {
      -webkit-transform: scale(2.5) rotateX(-90deg);
              transform: scale(2.5) rotateX(-90deg);
    }
    100% {
      -webkit-transform: scale(1) rotateX(-180deg);
              transform: scale(1) rotateX(-180deg);
              opacity: 1;
    }
  }
  @keyframes flip-scale-up-hor {
    0% {
      -webkit-transform: scale(1) rotateX(0) translate(-50%,-50%);
              transform: scale(1) rotateX(0) translate(-50%,-50%);
              opacity: 1;
    }
    50% {
      -webkit-transform: scale(2.5) rotateX(-90deg);
              transform: scale(2.5) rotateX(-90deg);
    }
    100% {
      -webkit-transform: scale(1) rotateX(-180deg);
              transform: scale(1) rotateX(-180deg);
              opacity: 1;
    }
  }

 @-webkit-keyframes rotate-scale-up {
    0% {
      -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
            opacity: 0;
    }
    50% {
      -webkit-transform: scale(1.8) rotateZ(180deg);
              transform: scale(1.8) rotateZ(180deg);
    }
    100% {
      -webkit-transform: scale(1) rotateZ(360deg);
              transform: scale(1) rotateZ(360deg);
            opacity: 1;
    }
  }
  @keyframes rotate-scale-up {
    0% {
      -webkit-transform: scale(1) rotateZ(0);
              transform: scale(1) rotateZ(0);
              opacity: 0;
    }
    50% {
      -webkit-transform: scale(1.8) rotateZ(180deg);
              transform: scale(1.8) rotateZ(180deg);
    }
    100% {
      -webkit-transform: scale(1) rotateZ(360deg);
              transform: scale(1) rotateZ(360deg);
              opacity: 1;
    }
  }

  @keyframes invisible{
    0% {
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
  }

  @keyframes disa{
    0% {
        opacity: 0;
        z-index: -1;
    }
    100%{
        opacity: 0;
        z-index: -1;
    }
  }
  

  @keyframes visible {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
  }