@charset "UTF-8";

#loading {
    width: 100%;
    height: 100%;
    transition: all 1s;
    background-color:rgba(255,255,255,0.8);

    position: absolute;
    left: 0;
    z-index: 9999;
    
  }

  #loading.loaded {
    opacity: 0;
    visibility: hidden;
  }

  .spinner {
    width: 70px;
    height: 70px;
    background-color: #333;
  
    margin: 0 auto;
    position: relative;
    top: calc(50% - 35px);

    /* -webkit-animation: sk-rotateplane 2s infinite ease-in-out; */
    animation: sk-rotateplane 2s infinite ease-in-out;
  }
/*   
  @-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform:rotateY(0deg);}
    25% { -webkit-transform: rotateY(180deg);}
    50% { -webkit-transform: rotateY(0deg) rotateX(0deg); }
    75% { -webkit-transform: rotateX(180deg);}
    100% { -webkit-transform:rotateX(0deg)}
  } */
  
  @keyframes sk-rotateplane {
    0% { 
      transform: rotateY(0deg);
      -webkit-transform: rotateY(0deg);
      
    } 25% { 
      transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
      
    } 50% { 
      transform: rotateY(0deg) rotateX(0deg);
      -webkit-transform: rotateY(0deg) rotateX(0deg);
      
    } 75% { 
      transform:  rotateX(180deg);
      -webkit-transform:  rotateX(180deg);
      
    } 100% { 
      transform: rotateX(0deg);
      -webkit-transform: rotateX(0deg);
      
    }
  }