body{
        height: 1500px;
        direction: rtl;
      }
    
      #allSite {
        width: 1000px;
        margin: 0 auto;
      }

   div#allSite>.flip{
      margin: 10px;
      width: 200px;
      height: 340px;
      float: left; 
      cursor: pointer;
      }
   
      div.flip>.back {
      width: 200px;
      height: 340px;
      position: absolute;
      transform: perspective(600px) rotateY(180deg);
      transition: transform 0.9s linear;
      background-color: black;
      backface-visibility: hidden;
      color: white;
      font-size: 27px;
      text-align:right;
      overflow: hidden;
    }

    div.flip>.front {
      position: absolute;
      width: 200px;
      height: 340px;
      transform: perspective(600px) rotateY(0deg);
      transition: transform 0.9s linear;
      backface-visibility: hidden;
      text-align: center;
    }

    div.front>img  {
      width: 200px;
      height:260px;
    }
    div.front>p{
      display: block;
      margin: 0px;
      width: 200;
      height:40px;
      line-height: 40px;
       font-size: 25px;
     background-color: black;
     color: aliceblue;
    }

    .flip:hover>.front {
      transform: perspective(600px) rotateY(-180deg);
    }
    .flip:hover>.back {
      transform: perspective(600px) rotateY(0deg);
    }
    button{
      position: fixed;
      bottom: 54px;
      right: 5px;
    }
    .footer{
      height: 50px;
      line-height: 50px;
      bottom: 0;
      width: 100%;
      position: fixed;
    }
    
    
    #pre-loader{
      position: fixed;
      padding: 0;
      margin: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: aliceblue;
      opacity: 0.9;
      display: none;
    }
    .spinner {
      width: 40px;
      height: 40px;
      background-color: #333;
      margin: 100px auto;
      -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
      animation: sk-rotateplane 1.2s infinite ease-in-out;
    }
    
    @-webkit-keyframes sk-rotateplane {
      0% { -webkit-transform: perspective(120px) }
      50% { -webkit-transform: perspective(120px) rotateY(180deg) }
      100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
    }
    
    @keyframes sk-rotateplane {
      0% { 
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
      } 50% { 
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
      } 100% { 
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      }
    }