.load{
	padding: 2rem 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.loadContainer{
    background-color:#efece9;
    padding: 1rem;
    height: 150px;
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 8px 0px 10px 1px rgba(0, 0, 0, 0.3);
    z-index: 10;
}
.book{
    position: relative;
    margin: 0 auto;
    border: 5px solid #64ac5f;
    width: 100px;
    height: 60px;
    background-color: #fff;
}
.book__page{
    position: absolute;
    left: 50%;
    top: -5px;
    margin: 0 auto;
    border-top: 5px solid #64ac5f;
    border-bottom: 5px solid #63ab5e;
    border-right: 5px solid #63ab5e;
    background: #efece9;
    width: 50px;
    height: 60px;
    transform-origin: 0% 50%;
    animation: flip 0.6s infinite linear;
        animation-fill-mode: none;
    animation-fill-mode: forwards;
}

@keyframes flip {
  0%{
      transform: perspective( 600px )
      rotateY( -0deg );
  }
  
  20%{
    background:darken(#efece9,10%);
  }
  
  29.9%{
      background:darken(#efece9,10%);
  }
  30%{
      transform: perspective( 200px )
      rotateY( -90deg );
      background:#efece9;
  }
  
  54.999%{
    opacity:1;
  }
  55%{
    opacity:0;
  }
  
  60%{
    transform: perspective( 200px )
    rotateY( -180deg );
    background:#efece9;
  }
  
  100%{
    transform: perspective( 200px )
    rotateY( -180deg );
    background:#efece9;
  }
}