/* start of animation */
.anim_m036,.anim_m036:hover {
    position:relative;
    animation: moveRRL 10s infinite;
}

.anim_m360,.anim_m360:hover {
    position:relative;
    animation: moveLR 10s infinite;
}

.anim_m603,.anim_m603:hover {
    position:relative;
    animation: moveLRR 10s infinite;
}

@keyframes moveRRL {
    0% {position:relative;
        left: 0%
    }

    10% {
        left: 0%
    }

    20% {
        left: 30%
    }

    30% {
        left: 30%
    }

    40% {
        left: 60%
    }

    50% {
        left: 60%
    }

    60% {
        left: 60%
    }

    70% {
        left: 60%
    }

    100% {position:relative;
        left: 0%
    }
}

@keyframes moveLR {
    0% {position:relative;
        left: 0%
    }

    10% {
        left: 0%
    }

    20% {
        left: -30%
    }

    30% {
        left: -30%
    }

    40% {
        left: 0%
    }

    50% {
        left: 0%
    }

    60% {
        left: -30%
    }

    70% {
        left: -30%
    }

    100% {position:relative;
        left: 0%
    }
}

@keyframes moveLRR {
    0% {position:relative;
        left: 0%
    }

    10% {
        left: 0%
    }

    20% {
        left: 0%
    }

    30% {
        left: 0%
    }

    40% {
        left: -60%
    }

    50% {
        left: -60%
    }

    60% {
        left: -30%
    }

    70% {
        left: -30%
    }

    100% {position:relative;
        left: 0%
    }
}

.vticker,.vticker:hover{
    animation-name:vticker6;
}

@keyframes vticker3 {
    0%   {margin-top: 0%;}
	33%  {margin-top: -100%;}
	66%  {margin-top: -200%;}
	99%  {margin-top: -300%;}
  100% {margin-top: 0%;}
  }




  @keyframes hticker2 {
    0%   {margin-left: 0%;}
	99% {margin-left:-100%;}
100%{margin-left:0%;}
  }
  @keyframes hticker3 {
    0%   {margin-left: 0%;}
	50%  {margin-left: -100%;}
  99% {margin-left:-200%;}
100%{margin-left:0%;}
  }
  @keyframes hticker4 {
    0%   {margin-left: 0%;}
	33%  {margin-left: -100%;}
	66%  {margin-left: -200%;}
	99%  {margin-left: -300%;}
100%{margin-left:0%;}
  }
  @keyframes hticker5 {
    0%   {margin-left: 0%;}
	25%  {margin-left: -100%;}
	50%  {margin-left: -200%;}
	75%  {margin-left: -300%;}
  99% {margin-left:-400%;}
100%{margin-left:0%;}
  }
  @keyframes hticker6 {
    0%   {margin-left: 0%;}
	20%  {margin-left: -100%;}
	40%  {margin-left: -200%;}
	60%  {margin-left: -300%;}
  80% {margin-left:-400%;}

  99% {margin-left:-500%;}
100%{margin-left:0%;}
  } 
  @keyframes hticker10 {
    0%   {margin-left: 0px;}
	5%  {margin-left: -10%;}
	10%  {margin-left: -20%;}
	15%  {margin-left: -30%;}
  20% {margin-left:-40%;}
  25% {margin-left:-50%;}
  30% {margin-left:-60%;}
  35% {margin-left:-70%;}
  40% {margin-left:-80%;} 
  45% {margin-left:-90%;}
  49.9% {opacity:0;display:block;width:100%}
  
  50% {opacity:1;display:inline-block;width:auto;margin-left:100%;}
  55% {margin-left:80%;}
  60% {margin-left:70%;}
  65% {margin-left:60%;}
  70% {margin-left:50%;}
  75% {margin-left:40%;}
  80% {margin-left:30%;}
  85% {margin-left:20%;}
  90% {margin-left:10%;}
100%{margin-left:0%;}

  }

  
  @keyframes vticker510 {
    0%   {margin-top: 0;}
	20%  {margin-top: -10vh;}
	40%  {margin-top: -20vh;}
	60%  {margin-top: -30vh;}
	80%  {margin-top: -40vh;}
    100% {margin-top: -50vh;}
  }
  @keyframes vticker520 {
    0%   {margin-top: 0;}
	20%  {margin-top: -20vh;}
	40%  {margin-top: -40vh;}
	60%  {margin-top: -60vh;}
	80%  {margin-top: -80vh;}
    100% {margin-top: -100vh;}
  }
  @keyframes vticker705 {
    0%   {margin-top: 0;}
	15%  {margin-top: -5vh;}
	30%  {margin-top: -10vh;}
	45%  {margin-top: -15vh;}
	60%  {margin-top: -20vh;}
  75%  {margin-top: -25vh;}
  90%  {margin-top: -30vh;}
  100% {margin-top: -35vh;}
  }


  
 /* .pp-anim-fading,pp-anim-fading:hover {animation:fading 3s 5;}*/

  
 
 /* .pp-anim-top{position:relative;animation:animatetop 1s infinite;animation-play-state: paused;}*/
 @keyframes pp-from-top{from{position:relative;top:-200%;opacity:0} to{position:relative;top:0;opacity:1}};
 @keyframes pp-from-left{from{position:relative;left:-100%;opacity:0} to{position:relative;left:0%;opacity:1}}
 @keyframes pp-from-right{from{position:relative;right:-300%;opacity:0} to{right:0;opacity:1}}
 @keyframes pp-from-bottom{from{position:relative;bottom:-200%;opacity:0} to{bottom:0;opacity:1}}
 @keyframes pp-fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
 @keyframes pp-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
 @keyframes pp-zoom{from{transform:scale(0)} to{transform:scale(1)}}
 
 @keyframes pp-skew-from-left{
    0% {position:relative;left:-100%;transform:skew(70deg)}
     /*30% {position:relative;left:-100%;transform:skew(60deg)}
     60% {position:relative;left:-50%;transform:skew(60deg)}  
     90% {position:relative;left:0%;transform:skew(30deg)} */  
     100% {position:relative;left:0%;transform:skew(0)}
}
@keyframes jittery {
    10% {
        transform: translate(-2px, -3px) scale(1.01, 1.01);
    }
    20% {
        transform: translate(3px, 2px) scale(.99, .99);
    }
    30% {
        transform: translate(-4px, -5px) scale(1.01, 1.01);
    }
    40% {
        transform: translate(2px, 3px) scale(1, 1);
    }
    50% {
        transform: translate(-1px, -2px) scale(.98, .98);
    }
    60% {
        transform: translate(0px, 3px) scale(1.02, 1.02);
    }
    70% {
        transform: translate(-2px, -4px) scale(1, 1);
    }
    80% {
        transform: translate(3px, 5px) scale(.99, .99);
    }
    90% {
        transform: translate(-5px, -3px) scale(1.1, 1.1);
    }
    100% {
        transform: translate(3px, 1px) scale(.95, .95);
    }
}

  .pp-anim-input{transition:width 0.4s ease-in-out}
  .pp-anim-input:focus{width:100%}


  

  .pp-animate:hover{position:relative ;animation-iteration-count:infinite ;}
  .pp-circ-static  {
    /*--s: 280px; /* control the size */
  
    display: inline-block ;
    
    /*width: var(--s);*/
    width:100%;
    aspect-ratio: 1 / 1;
   /* border-radius: 50%;*/
    overflow:scroll;
    white-space:nowrap;
    padding:0rem;
    
  }
  .pp-circ-static>div{
    display:inline-block ;
    margin:0px;
    padding:0px;
    border:0px;
    border-radius: 50%;
    
    aspect-ratio: 1/1;
    vertical-align: top;

      /* grid-area: 1 / 1;*/
  }

  .pp-circ-static>div>p{
    margin:0px;
    padding:0px;
    width:100%;
    border-radius: 50%;
    aspect-ratio:1;
  }
  .pp-circ-static>div>p>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    }

  
  .pp-circ-anim {
    /*--s: 280px; /* control the size */
  
    display: grid;
    /*width: var(--s);*/
    aspect-ratio: 1 / 1;
    /*padding: calc(var(--s) / 20); /* we will see the utility of this later */
    border-radius: 50%;
    overflow:hidden;
    inset:0;
    

  }
  
  /*.pp-gallery::after {
    content: "";
    /*position: absolute;*/
  /*  inset:0;
    padding: inherit; /* Inherits the same padding */
  /*  border-radius: 50%;
    background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
    mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
  .pp-gallery::after,*/

  .pp-circ-anim>div{
    /*display:inline-block;*/
    inset:0;
    margin:0px;
    border-radius: inherit;
    animation: pp_rotate 8s 1 cubic-bezier(.5, -0.2, .5, 1.2);
    /*animation-iteration-count:3;*/
    aspect-ratio: 1/1;
    grid-area: 1 / 1; 
  }
  .pp-circ-anim>p{
    height:1rem;
    border-radius: inherit;
    font-size:1rem;

  }

  .pp-circ-anim>div>p{
    margin:0px;
    padding:0px;
    width:100%;
    border-radius: inherit;

    
    aspect-ratio:1;
  }
  


  .pp-circ-anim>div>p>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  }
  
  .pp-circ-anim > div:nth-child(2) {animation-delay: -6s;transform-origin: 50% 120.7%;} /* -1 * 8s / 4 */
  
  .pp-circ-anim > div:nth-child(3) { animation-delay: -4s;transform-origin: 50% 120.7%;} /* -1 * 8s / 4 */
  
  .pp-circ-anim > div:nth-child(4) { animation-delay: -2s;transform-origin: 50% 120.7%;} /* -2 * 8s / 4 */
  
  .pp-circ-anim > div:nth-child(5) { animation-delay: 0s;transform-origin: 50% 120.7%;} 
  
  
  
  @keyframes pp_rotate {
    /*100% { transform: rotate(-360deg);
      transform-origin: 50% 120.7%;
         }*/
         0%  { transform: rotate(0);}
         25% { transform: rotate(-90deg);}
         50% { transform: rotate(-180deg);}
         75% { transform: rotate(-270deg);}
         100% { transform: rotate(-360deg);}
  }

  




  @keyframes puffIn {
    0% {
      opacity: 0;
      transform-origin: 50% 50%;
      transform: scale(2, 2);
      filter: blur(2px);
    }
    100% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: scale(1, 1);
      filter: blur(0px);
    }
  }
 
  
 
  @keyframes puffOut {
    0% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: scale(1, 1);
      filter: blur(0px);
    }
    100% {
      opacity: 0;
      transform-origin: 50% 50%;
      transform: scale(2, 2);
      filter: blur(2px);
    }
  }
  
  
  @keyframes vanishIn {
    0% {
      opacity: 0;
      transform-origin: 50% 50%;
      transform: scale(2, 2);
      filter: blur(90px);
    }
    100% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: scale(1, 1);
      filter: blur(0px);
    }
  }
  
  
  @keyframes vanishOut {
    0% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: scale(1, 1);
      filter: blur(0px);
    }
    100% {
      opacity: 0;
      transform-origin: 50% 50%;
      transform: scale(2, 2);
      filter: blur(20px);
    }
  }
 
  
 
  @keyframes boingInUp {
    0% {
      opacity: 0;
      transform-origin: 50% 0%;
      transform: perspective(800px) rotateX(-90deg);
    }
    50% {
      opacity: 1;
      transform-origin: 50% 0%;
      transform: perspective(800px) rotateX(50deg);
    }
    100% {
      opacity: 1;
      transform-origin: 50% 0%;
      transform: perspective(800px) rotateX(0deg);
    }
  }
 
  
  @keyframes boingOutDown {
    0% {
      opacity: 1;
      transform-origin: 100% 100%;
      transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    }
    20% {
      opacity: 1;
      transform-origin: 100% 100%;
      transform: perspective(800px) rotateX(0deg) rotateY(10deg);
    }
    30% {
      opacity: 1;
      transform-origin: 0% 100%;
      transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    }
    40% {
      opacity: 1;
      transform-origin: 0% 100%;
      transform: perspective(800px) rotateX(10deg) rotateY(10deg);
    }
    100% {
      opacity: 0;
      transform-origin: 100% 100%;
      transform: perspective(800px) rotateX(90deg) rotateY(0deg);
    }
  }
  
  
 
  @keyframes bombLeftOut {
    0% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: rotate(0deg);
      filter: blur(0px);
    }
    50% {
      opacity: 1;
      transform-origin: -100% 50%;
      transform: rotate(-160deg);
      filter: blur(0px);
    }
    100% {
      opacity: 0;
      transform-origin: -100% 50%;
      transform: rotate(-160deg);
      filter: blur(20px);
    }
  }
 
  
 
  @keyframes bombRightOut {
    0% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: rotate(0deg);
      filter: blur(0px);
    }
    50% {
      opacity: 1;
      transform-origin: 200% 50%;
      transform: rotate(160deg);
      filter: blur(0px);
    }
    100% {
      opacity: 0;
      transform-origin: 200% 50%;
      transform: rotate(160deg);
      filter: blur(20px);
    }
}
  

  @keyframes magic {
    0% {
      opacity: 1;
      transform-origin: 100% 200%;
      transform: scale(1, 1) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform-origin: 200% 500%;
      transform: scale(0, 0) rotate(270deg);
    }
  }
 
  
 
  @keyframes swap {
    0% {
      opacity: 0;
      transform-origin: 0 100%;
      transform: scale(0, 0) translate(-700px, 0px);
    }
    100% {
      opacity: 1;
      transform-origin: 100% 100%;
      transform: scale(1, 1) translate(0px, 0px);
    }
  }
 
  
 
  @keyframes twisterInDown {
    0% {
      opacity: 0;
      transform-origin: 0 100%;
      transform: scale(0, 0) rotate(360deg) translateY(-100%);
    }
    30% {
      transform-origin: 0 100%;
      transform: scale(0, 0) rotate(360deg) translateY(-100%);
    }
    100% {
      opacity: 1;
      transform-origin: 100% 100%;
      transform: scale(1, 1) rotate(0deg) translateY(0%);
    }
  }
  
 
  @keyframes twisterInUp {
    0% {
      opacity: 0;
      transform-origin: 100% 0;
      transform: scale(0, 0) rotate(360deg) translateY(100%);
    }
    30% {
      transform-origin: 100% 0;
      transform: scale(0, 0) rotate(360deg) translateY(100%);
    }
    100% {
      opacity: 1;
      transform-origin: 0 0;
      transform: scale(1, 1) rotate(0deg) translateY(0);
    }
  }
 
  

  @keyframes foolishIn {
    0% {
      opacity: 0;
      transform-origin: 50% 50%;
      transform: scale(0, 0) rotate(360deg);
    }
    20% {
      opacity: 1;
      transform-origin: 0% 100%;
      transform: scale(0.5, 0.5) rotate(0deg);
    }
    40% {
      opacity: 1;
      transform-origin: 100% 100%;
      transform: scale(0.5, 0.5) rotate(0deg);
    }
    60% {
      opacity: 1;
      transform-origin: 0%;
      transform: scale(0.5, 0.5) rotate(0deg);
    }
    80% {
      opacity: 1;
      transform-origin: 0% 0%;
      transform: scale(0.5, 0.5) rotate(0deg);
    }
    100% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: scale(1, 1) rotate(0deg);
    }
  }
 
  
 
  @keyframes foolishOut {
    0% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: scale(1, 1) rotate(360deg);
    }
    20% {
      opacity: 1;
      transform-origin: 0% 0%;
      transform: scale(0.5, 0.5) rotate(0deg);
    }
    40% {
      opacity: 1;
      transform-origin: 100% 0%;
      transform: scale(0.5, 0.5) rotate(0deg);
    }
    60% {
      opacity: 1;
      transform-origin: 0%;
      transform: scale(0.5, 0.5) rotate(0deg);
    }
    80% {
      opacity: 1;
      transform-origin: 0% 100%;
      transform: scale(0.5, 0.5) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform-origin: 50% 50%;
      transform: scale(0, 0) rotate(0deg);
    }
  }
 
  @keyframes holeOut {
    0% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: scale(1, 1) rotateY(0deg);
    }
    100% {
      opacity: 0;
      transform-origin: 50% 50%;
      transform: scale(0, 0) rotateY(180deg);
    }
  }
 
  
 
  @keyframes swashIn {
    0% {
      opacity: 0;
      transform-origin: 50% 50%;
      transform: scale(0, 0);
    }
    90% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: scale(0.9, 0.9);
    }
    100% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: scale(1, 1);
    }
  }
  
  
 
  @keyframes swashOut {
    0% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: scale(1, 1);
    }
    80% {
      opacity: 1;
      transform-origin: 50% 50%;
      transform: scale(0.9, 0.9);
    }
    100% {
      opacity: 0;
      transform-origin: 50% 50%;
      transform: scale(0, 0);
    }
  }
 
  
 
  @keyframes spaceInDown {
    0% {
      opacity: 0;
      transform-origin: 50% 100%;
      transform: scale(0.2) translate(0%, 200%);
    }
    100% {
      opacity: 1;
      transform-origin: 50% 100%;
      transform: scale(1) translate(0%, 0%);
    }
  }
  
 
  @keyframes spaceInLeft {
    0% {
      opacity: 0;
      transform-origin: 0% 50%;
      transform: scale(0.2) translate(-200%, 0%);
    }
    100% {
      opacity: 1;
      transform-origin: 0% 50%;
      transform: scale(1) translate(0%, 0%);
    }
  }
 
  
 
  @keyframes spaceInRight {
    0% {
      opacity: 0;
      transform-origin: 100% 50%;
      transform: scale(0.2) translate(200%, 0%);
    }
    100% {
      opacity: 1;
      transform-origin: 100% 50%;
      transform: scale(1) translate(0%, 0%);
    }
  }
  
 
  @keyframes spaceInUp {
    0% {
      opacity: 0;
      transform-origin: 50% 0%;
      transform: scale(0.2) translate(0%, -200%);
    }
    100% {
      opacity: 1;
      transform-origin: 50% 0%;
      transform: scale(1) translate(0%, 0%);
    }
  }
 
  
 
  @keyframes spaceOutDown {
    0% {
      opacity: 1;
      transform-origin: 50% 100%;
      transform: scale(1) translate(0%, 0%);
    }
    100% {
      opacity: 0;
      transform-origin: 50% 100%;
      transform: scale(0.2) translate(0%, 200%);
    }
  }
 
  

  @keyframes spaceOutLeft {
    0% {
      opacity: 1;
      transform-origin: 0% 50%;
      transform: scale(1) translate(0%, 0%);
    }
    100% {
      opacity: 0;
      transform-origin: 0% 50%;
      transform: scale(0.2) translate(-200%, 0%);
    }
  }
 
  
 
  @keyframes spaceOutRight {
    0% {
      opacity: 1;
      transform-origin: 100% 50%;
      transform: scale(1) translate(0%, 0%);
    }
    100% {
      opacity: 0;
      transform-origin: 100% 50%;
      transform: scale(0.2) translate(200%, 0%);
    }
  }
 
  

  @keyframes spaceOutUp {
    0% {
      opacity: 1;
      transform-origin: 50% 0%;
      transform: scale(1) translate(0%, 0%);
    }
    100% {
      opacity: 0;
      transform-origin: 50% 0%;
      transform: scale(0.2) translate(0%, -200%);
    }
  }
 
  
 
  @keyframes perspectiveDown {
    0% {
      transform-origin: 0 100%;
      transform: perspective(800px) rotateX(0deg);
    }
    100% {
      transform-origin: 0 100%;
      transform: perspective(800px) rotateX(-180deg);
    }
  }
 
  
 
  @keyframes perspectiveDownReturn {
    0% {
      transform-origin: 0 100%;
      transform: perspective(800px) rotateX(-180deg);
    }
    100% {
      transform-origin: 0 100%;
      transform: perspective(800px) rotateX(0deg);
    }
  }
 
  
 
  @keyframes perspectiveLeft {
    0% {
      transform-origin: 0 0;
      transform: perspective(800px) rotateY(0deg);
    }
    100% {
      transform-origin: 0 0;
      transform: perspective(800px) rotateY(-180deg);
    }
  }
 
  
 
  @keyframes perspectiveLeftReturn {
    0% {
      transform-origin: 0 0;
      transform: perspective(800px) rotateY(-180deg);
    }
    100% {
      transform-origin: 0 0;
      transform: perspective(800px) rotateY(0deg);
    }
  }
 
  
 
  @keyframes perspectiveRight {
    0% {
      transform-origin: 100% 0;
      transform: perspective(800px) rotateY(0deg);
    }
    100% {
      transform-origin: 100% 0;
      transform: perspective(800px) rotateY(180deg);
    }
  }
 
  
 
  @keyframes perspectiveRightReturn {
    0% {
      transform-origin: 100% 0;
      transform: perspective(800px) rotateY(180deg);
    }
    100% {
      transform-origin: 100% 0;
      transform: perspective(800px) rotateY(0deg);
    }
  }
 
  

  @keyframes perspectiveUp {
    0% {
      transform-origin: 0 0;
      transform: perspective(800px) rotateX(0deg);
    }
    100% {
      transform-origin: 0 0;
      transform: perspective(800px) rotateX(180deg);
    }
  }
 
  

  @keyframes perspectiveUpReturn {
    0% {
      transform-origin: 0 0;
      transform: perspective(800px) rotateX(180deg);
    }
    100% {
      transform-origin: 0 0;
      transform: perspective(800px) rotateX(0deg);
    }
  }
 
  
 
  @keyframes rotateDown {
    0% {
      opacity: 1;
      transform-origin: 0 0;
      transform: perspective(800px) rotateX(0deg) translateZ(0px);
    }
    100% {
      opacity: 0;
      transform-origin: 50% 100%;
      transform: perspective(800px) rotateX(-180deg) translateZ(300px);
    }
  }
  
  
 
  @keyframes rotateLeft {
    0% {
      opacity: 1;
      transform-origin: 0 0;
      transform: perspective(800px) rotateY(0deg) translateZ(0px);
    }
    100% {
      opacity: 0;
      transform-origin: 50% 0;
      transform: perspective(800px) rotateY(-180deg) translateZ(300px);
    }
  }
 
  
 
  @keyframes rotateRight {
    0% {
      opacity: 1;
      transform-origin: 0 0;
      transform: perspective(800px) rotateY(0deg) translate3d(0px);
    }
    100% {
      opacity: 0;
      transform-origin: 50% 0;
      transform: perspective(800px) rotateY(180deg) translateZ(150px);
    }
  }
 
  
 
  @keyframes rotateUp {
    0% {
      opacity: 1;
      transform-origin: 0 0;
      transform: perspective(800px) rotateX(0deg) translateZ(0px);
    }
    100% {
      opacity: 0;
      transform-origin: 50% 0;
      transform: perspective(800px) rotateX(180deg) translateZ(100px);
    }
  }
 
  

  @keyframes slideDown {
    0% {
      transform-origin: 0 0;
      transform: translateY(0%);
    }
    100% {
      transform-origin: 0 0;
      transform: translateY(100%);
    }
  }
 
  

  @keyframes slideDownReturn {
    0% {
      transform-origin: 0 0;
      transform: translateY(100%);
    }
    100% {
      transform-origin: 0 0;
      transform: translateY(0%);
    }
  }
 
  

  @keyframes slideLeft {
    0% {
      transform-origin: 0 0;
      transform: translateX(0%);
    }
    100% {
      transform-origin: 0 0;
      transform: translateX(-100%);
    }
  }

  
 
  @keyframes slideLeftReturn {
    0% {
      transform-origin: 0 0;
      transform: translateX(-100%);
    }
    100% {
      transform-origin: 0 0;
      transform: translateX(0%);
    }
  }
 
  

  @keyframes slideRight {
    0% {
      transform-origin: 0 0;
      transform: translateX(0%);
    }
    100% {
      transform-origin: 0 0;
      transform: translateX(100%);
    }
  }
 
  
 
  @keyframes slideRightReturn {
    0% {
      transform-origin: 0 0;
      transform: translateX(100%);
    }
    100% {
      transform-origin: 0 0;
      transform: translateX(0%);
    }
  }
 
  

  @keyframes slideUp {
    0% {
      transform-origin: 0 0;
      transform: translateY(0%);
    }
    100% {
      transform-origin: 0 0;
      transform: translateY(-100%);
    }
  }
 
  

  @keyframes slideUpReturn {
    0% {
      transform-origin: 0 0;
      transform: translateY(-100%);
    }
    100% {
      transform-origin: 0 0;
      transform: translateY(0%);
    }
  }
 
  
 
  @keyframes openDownLeft {
    0% {
      transform-origin: bottom left;
      transform: rotate(0deg);
      
      animation-timing-function: ease-out;
    }
    100% {
      transform-origin: bottom left;
      transform: rotate(-110deg);
      
      animation-timing-function: ease-in-out;
    }
  }
 
  
 
  @keyframes openDownLeftReturn {
    0% {
      transform-origin: bottom left;
      transform: rotate(-110deg);
     
      animation-timing-function: ease-in-out;
    }
    100% {
      transform-origin: bottom left;
      transform: rotate(0deg);
      
      animation-timing-function: ease-out;
    }
  }
 
  

  @keyframes openDownRight {
    0% {
      transform-origin: bottom right;
      transform: rotate(0deg);
      
      animation-timing-function: ease-out;
    }
    100% {
      transform-origin: bottom right;
      transform: rotate(110deg);
      
      animation-timing-function: ease-in-out;
    }
  }
 
  
 
  @keyframes openDownRightReturn {
    0% {
      transform-origin: bottom right;
      transform: rotate(110deg);
      
      animation-timing-function: ease-in-out;
    }
    100% {
      transform-origin: bottom right;
      transform: rotate(0deg);
      
      animation-timing-function: ease-out;
    }
  }
 
  
 
  @keyframes openUpLeft {
    0% {
      transform-origin: top left;
      transform: rotate(0deg);
      
      animation-timing-function: ease-out;
    }
    100% {
      transform-origin: top left;
      transform: rotate(110deg);
      
      animation-timing-function: ease-in-out;
    }
  }
 
  

  @keyframes openUpLeftReturn {
    0% {
      transform-origin: top left;
      transform: rotate(110deg);
      
      animation-timing-function: ease-in-out;
    }
    100% {
      transform-origin: top left;
      transform: rotate(0deg);
     
      animation-timing-function: ease-out;
    }
  }
 
  
 
  @keyframes openUpRight {
    0% {
      transform-origin: top right;
      transform: rotate(0deg);
      
      animation-timing-function: ease-out;
    }
    100% {
      transform-origin: top right;
      transform: rotate(-110deg);
      
      animation-timing-function: ease-in-out;
    }
  }
 
  
 
  @keyframes openUpRightReturn {
    0% {
      transform-origin: top right;
      transform: rotate(-110deg);
      
      animation-timing-function: ease-in-out;
    }
    100% {
      transform-origin: top right;
      transform: rotate(0deg);
      
      animation-timing-function: ease-out;
    }
  }
 
  
 
  @keyframes openDownLeftOut {
    0% {
      opacity: 1;
      transform-origin: bottom left;
      transform: rotate(0deg);
      
      animation-timing-function: ease-out;
    }
    100% {
      opacity: 0;
      transform-origin: bottom left;
      transform: rotate(-110deg);
      
      animation-timing-function: ease-in-out;
    }
  }
  
  
 
  @keyframes openDownRightOut {
    0% {
      opacity: 1;
      transform-origin: bottom right;
      transform: rotate(0deg);
      
      animation-timing-function: ease-out;
    }
    100% {
      opacity: 0;
      transform-origin: bottom right;
      transform: rotate(110deg);
      
      animation-timing-function: ease-in-out;
    }
  }
  
  
 
  @keyframes openUpLeftOut {
    0% {
      opacity: 1;
      transform-origin: top left;
      transform: rotate(0deg);
      
      animation-timing-function: ease-out;
    }
    100% {
      opacity: 0;
      transform-origin: top left;
      transform: rotate(110deg);
      
      animation-timing-function: ease-in-out;
    }
  }
 
  
 
  @keyframes openUpRightOut {
    0% {
      opacity: 1;
      transform-origin: top right;
      transform: rotate(0deg);
      
      animation-timing-function: ease-out;
    }
    100% {
      opacity: 0;
      transform-origin: top right;
      transform: rotate(-110deg);
      
      animation-timing-function: ease-in-out;
    }
  }
  
  
  
  @keyframes tinDownIn {
    0% {
      opacity: 0;
      transform: scale(1, 1) translateY(900%);
    }
    50%, 70%, 90% {
      opacity: 1;
      transform: scale(1.1, 1.1) translateY(0);
    }
    60%, 80%, 100% {
      opacity: 1;
      transform: scale(1, 1) translateY(0);
    }
  }
 
  
 
  @keyframes tinDownOut {
    0%, 20%, 40%, 50% {
      opacity: 1;
      transform: scale(1, 1) translateY(0);
    }
    10%, 30% {
      opacity: 1;
      transform: scale(1.1, 1.1) translateY(0);
    }
    100% {
      opacity: 0;
      transform: scale(1, 1) translateY(900%);
    }
  }
 
  

  @keyframes tinLeftIn {
    0% {
      opacity: 0;
      transform: scale(1, 1) translateX(-900%);
    }
    50%, 70%, 90% {
      opacity: 1;
      transform: scale(1.1, 1.1) translateX(0);
    }
    60%, 80%, 100% {
      opacity: 1;
      transform: scale(1, 1) translateX(0);
    }
  }
 
  
 
  @keyframes tinLeftOut {
    0%, 20%, 40%, 50% {
      opacity: 1;
      transform: scale(1, 1) translateX(0);
    }
    10%, 30% {
      opacity: 1;
      transform: scale(1.1, 1.1) translateX(0);
    }
    100% {
      opacity: 0;
      transform: scale(1, 1) translateX(-900%);
    }
  }
 
  
 
  @keyframes tinRightIn {
    0% {
      opacity: 0;
      transform: scale(1, 1) translateX(900%);
    }
    50%, 70%, 90% {
      opacity: 1;
      transform: scale(1.1, 1.1) translateX(0);
    }
    60%, 80%, 100% {
      opacity: 1;
      transform: scale(1, 1) translateX(0);
    }
  }
 
  
 
  @keyframes tinRightOut {
    0%, 20%, 40%, 50% {
      opacity: 1;
      transform: scale(1, 1) translateX(0);
    }
    10%, 30% {
      opacity: 1;
      transform: scale(1.1, 1.1) translateX(0);
    }
    100% {
      opacity: 0;
      transform: scale(1, 1) translateX(900%);
    }
  }
 
  
 
  @keyframes tinUpIn {
    0% {
      opacity: 0;
      transform: scale(1, 1) translateY(-900%);
    }
    50%, 70%, 90% {
      opacity: 1;
      transform: scale(1.1, 1.1) translateY(0);
    }
    60%, 80%, 100% {
      opacity: 1;
      transform: scale(1, 1) translateY(0);
    }
  }
 
  
 
  @keyframes tinUpOut {
    0%, 20%, 40%, 50% {
      opacity: 1;
      transform: scale(1, 1) translateY(0);
    }
    10%, 30% {
      opacity: 1;
      transform: scale(1.1, 1.1) translateY(0);
    }
    100% {
      opacity: 0;
      transform: scale(1, 1) translateY(-900%);
    }
  }
 
  
  @media (print), (prefers-reduced-motion) {
    .magictime {
      
              animation: unset ;
      transition: none ;
    }
  }

  .pp-3Drotator{
    perspective:1000px;
  }
  .pp-3Drotator div,p{
    transform-style:preserve-3d;
    
  }
  .pp-3Drotator:hover>div>div{
    transform : translateZ(200px) rotateZ(-45deg);
  }  
  
  .pp-cube-200-scene {
    width: 200px;
    height: 200px;
    perspective: 600px;
  }
  
  
  
  
  .pp-cube-200,
  .pp-cube-300,
  .pp-cube-400 {
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    
    width: 100%;
    height: 100%;
    perspective: none;
    /*perspective-origin:100% 100%;
    
    /*line-height: 260px;*/
    /*color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;*/
    /*-webkit-backface-visibility: hidden;
    backface-visibility: hidden;*/
  }
  /*
  .pp-cube-200 {transform:translateZ(-100px)}
  .pp-cube-300 {transform:translateZ(-150px)}
  .pp-cube-400 {transform:translateZ(-200px)}
  */


  .pp-cube-200>div,
  .pp-cube-300>div,
  .pp-cube-400>div {
    position: absolute ;
    width: 100%;
    height: 100%;
    border: 2px solid black;
    /*line-height:200px;
    font-size:40px;*/
    
    
    
    
  
  }
  
  
  .pp-cube-200 > div:nth-child(2){
     transform: rotateY(  0deg) translateZ(100px) ;
  }
  .pp-cube-200 > div:nth-child(3){
     transform: rotateY(  90deg) translateZ(100px) ; 
  }
  .pp-cube-200 > div:nth-child(4){
     transform: rotateY(  180deg) translateZ(100px); 
  }
  .pp-cube-200 > div:nth-child(5){
    transform: rotateY(  -90deg) translateZ(100px); 
  }
  .pp-cube-200 > div:nth-child(6){
     transform: rotateX(  90deg) translateZ(100px); 
  }
  .pp-cube-200 > div:nth-child(7){
    transform: rotateX(  -90deg) translateZ(100px); 
  }
  
  .pp-cube-300 > div:nth-child(2){
    transform: rotateY(  0deg) translateZ(150px) ;
 }
 .pp-cube-300 > div:nth-child(3){
    transform: rotateY(  90deg) translateZ(150px) ; 
 }
 .pp-cube-300 > div:nth-child(4){
    transform: rotateY(  180deg) translateZ(150px); 
 }
 .pp-cube-300 > div:nth-child(5){
   transform: rotateY(  -90deg) translateZ(150px); 
 }
 .pp-cube-300 > div:nth-child(6){
    transform: rotateX(  90deg) translateZ(150px); 
 }
 .pp-cube-300 > div:nth-child(7){
   transform: rotateX(  -90deg) translateZ(150px); 
 }
 

  .pp-cube-400 > div:nth-child(2){
    transform: rotateY(  0deg) translateZ(200px) ;
 }
 .pp-cube-400 > div:nth-child(3){
    transform: rotateY(  90deg) translateZ(200px) ; 
 }
 .pp-cube-400 > div:nth-child(4){
    transform: rotateY(  180deg) translateZ(200px); 
 }
 .pp-cube-400 > div:nth-child(5){
   transform: rotateY(  -90deg) translateZ(200px); 
 }
 .pp-cube-400 > div:nth-child(6){
    transform: rotateX(  90deg) translateZ(200px); 
 }
 .pp-cube-400 > div:nth-child(7){
   transform: rotateX(  -90deg) translateZ(200px); 
 }
 
 .pp-carousel-9-scene {
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 1000px;
}

.pp-carousel-9 {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

.pp-carousel-9 > div {
  position: absolute;
  width: 190px;
  height: 120px;
  left: 10px;
  top: 10px;
}
.pp-carousel-9 > div:nth-child(2) { transform: rotateY(  0deg) translateZ(288px); }
.pp-carousel-9 > div:nth-child(3) { transform: rotateY(  40deg) translateZ(288px); }
.pp-carousel-9 > div:nth-child(4) { transform: rotateY(  80deg) translateZ(288px); }
.pp-carousel-9 > div:nth-child(5) { transform: rotateY(  120deg) translateZ(288px); }
.pp-carousel-9 > div:nth-child(6) { transform: rotateY(  160deg) translateZ(288px); }
.pp-carousel-9 > div:nth-child(7) { transform: rotateY(  200deg) translateZ(288px); }
.pp-carousel-9 > div:nth-child(8) { transform: rotateY(  240deg) translateZ(288px); }
.pp-carousel-9 > div:nth-child(9) { transform: rotateY(  280deg) translateZ(288px); }
.pp-carousel-9 > div:nth-child(10) { transform: rotateY( 320deg) translateZ(288px); }


@keyframes ppGradientAnimation {
  0% {
      background: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(0, 255, 0, 1));
  }
  50% {
      background: linear-gradient(to left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 1));
  }
  100% {
      background: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(0, 255, 0, 1));
  }
}

@keyframes ppSlide25 {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

@keyframes ppZoomIn {
  0% {
    /*transform: scale(1);*/
    background-size:cover;
  }
  100% {
    /*transform: scale(1.2);*/
    background-size:auto;

  }
}

/* deprecated */
.pp-animate-all div:hover{animation-iteration-count:infinite ;}