:root {
  --f7-page-swipeback-transition-duration: 300ms;
  --f7-page-parallax-transition-duration: 500ms;
  --f7-page-cover-transition-duration: 450ms;
  --f7-page-dive-transition-duration: 500ms;
  --f7-page-fade-transition-duration: 500ms;
  --f7-page-flip-transition-duration: 700ms;
  --f7-page-push-transition-duration: 500ms;
  --f7-page-transition-duration: 400ms;
}

.f7-ios::view-transition-old(root) {
  animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
}
.f7-ios::view-transition-new(root) {
  animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
}
.f7-ios.router-vta-back::view-transition-old(root) {
  z-index: 2;
  animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
}
.f7-ios.router-vta-back::view-transition-new(root) {
  z-index: 1;
  animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
}


.f7-md::view-transition-new(root) {
  animation: md-page-next-to-current var(--f7-page-transition-duration) forwards cubic-bezier(0,.8,.3,1)
}
.f7-md::view-transition-old(root) {
  animation: md-page-current-to-previous var(--f7-page-transition-duration) forwards cubic-bezier(0,.8,.3,1)
}
.f7-md.router-vta-back::view-transition-old(root) {
  animation: md-page-current-to-next calc(var(--f7-page-transition-duration)/ 4) forwards cubic-bezier(.8,0,1,.3),md-page-current-to-next-opacity calc(var(--f7-page-transition-duration)/ 4) forwards
}
.f7-md.router-vta-back::view-transition-new(root) {
  animation: md-page-previous-to-current var(--f7-page-transition-duration) forwards
}


.f7-circle::view-transition-new(root) {
  transform: scale(0);
  animation: f7-circle-circle-in .4s forwards;
}
.f7-circle::view-transition-old(root) {
  opacity: 0;
  transform: scale(.9);
  animation: f7-circle-next-to-current .3s forwards;
  animation-delay: .3s;
}
.f7-circle.router-vta-back::view-transition-old(root) {
  animation: f7-circle-current-to-next .6s forwards;
}
.f7-circle.router-vta-back::view-transition-new(root) {
  animation: f7-circle-circle-in .3s forwards;
  animation-delay: 350ms;
}




.f7-cover-v::view-transition-new(root) {
  animation: f7-cover-v-next-to-current var(--f7-page-cover-transition-duration) forwards
}
.f7-cover-v::view-transition-old(root) {
  animation: f7-cover-v-current-to-prev var(--f7-page-cover-transition-duration) forwards
}
.f7-cover-v::view-transition-group(root) {
  animation: none;
}
.f7-cover-v::view-transition-image-pair(root) {
  perspective: 1200PX;
  background: #000;
}
.f7-cover-v.router-vta-back::view-transition-old(root) {
  animation: f7-cover-v-current-to-next var(--f7-page-cover-transition-duration) forwards
}
.f7-cover-v.router-vta-back::view-transition-new(root) {
  animation: f7-cover-v-prev-to-current var(--f7-page-cover-transition-duration) forwards
}



.f7-cover::view-transition-new(root) {
  animation: f7-cover-next-to-current var(--f7-page-cover-transition-duration) forwards
}
.f7-cover::view-transition-old(root) {
  animation: f7-cover-current-to-prev var(--f7-page-cover-transition-duration) forwards
}
.f7-cover::view-transition-group(root) {
  animation: none;
}
.f7-cover::view-transition-image-pair(root) {
  perspective: 1200PX;
  background: #000;
}
.f7-cover.router-vta-back::view-transition-old(root) {
  animation: f7-cover-current-to-next var(--f7-page-cover-transition-duration) forwards
}
.f7-cover.router-vta-back::view-transition-new(root) {
  animation: f7-cover-prev-to-current var(--f7-page-cover-transition-duration) forwards
}



.f7-dive::view-transition-group(root) {
  animation: none;
}
.f7-dive::view-transition-image-pair(root) {
  perspective: 1200PX;
}
.f7-dive::view-transition-new(root) {
  animation: f7-dive-next-to-current var(--f7-page-dive-transition-duration) forwards
}
.f7-dive::view-transition-old(root) {
  animation: f7-dive-current-to-prev var(--f7-page-dive-transition-duration) forwards
}
.f7-dive.router-vta-back::view-transition-old(root) {
  animation: f7-dive-current-to-next var(--f7-page-dive-transition-duration) forwards
}
.f7-dive.router-vta-back::view-transition-new(root) {
  animation: f7-dive-prev-to-current var(--f7-page-dive-transition-duration) forwards
}




.f7-fade::view-transition-new(root) {
  animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards
}
.f7-fade::view-transition-old(root) {
  animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards
}
.f7-fade.router-vta-back::view-transition-old(root) {
  animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards
}
.f7-fade.router-vta-back::view-transition-new(root) {
  animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards
}


.f7-flip::view-transition-group(root) {
  animation: none;
}
.f7-flip::view-transition-image-pair(root) {
  perspective: 1200PX;
  background: #000;
}
.f7-flip::view-transition-new(root) {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards
}
.f7-flip::view-transition-old(root) {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards
}
.f7-flip.router-vta-back::view-transition-old(root) {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards
}
.f7-flip.router-vta-back::view-transition-new(root) {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards
}



.f7-parallax::view-transition-new(root) {
  animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards
}
.f7-parallax::view-transition-old(root) {
  animation: f7-parallax-current-to-prev var(--f7-page-parallax-transition-duration) forwards
}
.f7-parallax.router-vta-back::view-transition-old(root) {
  z-index: 2;
  animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards
}
.f7-parallax.router-vta-back::view-transition-new(root) {
  z-index: 1;
  animation: f7-parallax-prev-to-current var(--f7-page-parallax-transition-duration) forwards
}



.f7-push::view-transition-new(root) {
  animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards
}
.f7-push::view-transition-old(root) {
  animation: f7-push-current-to-prev var(--f7-page-push-transition-duration) forwards
}
.f7-push.router-vta-back::view-transition-old(root) {
  animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards
}
.f7-push.router-vta-back::view-transition-new(root) {
  animation: f7-push-prev-to-current var(--f7-page-push-transition-duration) forwards
}



.router-vta-fade::view-transition-image-pair(root) {
  background: inherit !important;
}
.router-vta-fade::view-transition-old(root) {
  animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards !important;
}
.router-vta-fade::view-transition-new(root) {
  animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards !important;
}
.router-vta-first::view-transition-group(root) {
  animation: none !important;
  display: none !important;
}

@keyframes ios-page-next-to-current {
  from {
    transform: translate3d(100%,0,0)
  }

  to {
    transform: translate3d(0%,0,0)
  }
}

@keyframes ios-page-previous-to-current {
  from {
    transform: translate3d(-20%,0,0)
  }

  to {
    transform: translate3d(0%,0,0)
  }
}

@keyframes ios-page-current-to-previous {
  from {
    transform: translate3d(0,0,0)
  }

  to {
    transform: translate3d(-20%,0,0)
  }
}

@keyframes ios-page-current-to-next {
  from {
    transform: translate3d(0,0,0)
  }

  to {
    transform: translate3d(100%,0,0)
  }
}

@keyframes md-page-next-to-current {
  from {
    transform: translate3d(0,128PX,0)
  }

  to {
    transform: translate3d(0,0PX,0)
  }
}

@keyframes md-page-current-to-next {
  from {
    transform: translate3d(0,0,0)
  }

  to {
    transform: translate3d(0,128PX,0)
  }
}

@keyframes md-page-current-to-next-opacity {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes md-page-current-to-previous {
  from {
    transform: translate3d(0,0,0)
  }

  to {
    transform: translate3d(0,-20PX,0)
  }
}

@keyframes md-page-previous-to-current {
  from {
    transform: translate3d(0,-20PX,0)
  }

  to {
    transform: translate3d(0,0PX,0)
  }
}

@keyframes f7-circle-circle-in {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes f7-circle-next-to-current {
  from {
    transform: scale(.9);
    opacity: 0
  }

  40% {
    transform: scale(1.035);
    opacity: 1
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

@keyframes f7-circle-current-to-next {
  from {
    transform: scale(1);
    opacity: 1
  }

  34% {
    transform: scale(1.035);
    opacity: 1
  }

  57% {
    transform: scale(.9);
    opacity: 0
  }

  to {
    transform: scale(.9);
    opacity: 0
  }
}

@keyframes f7-cover-v-next-to-current {
  from {
    transform: translateY(100%)
  }

  to {
    transform: translateY(0%)
  }
}

@keyframes f7-cover-v-current-to-next {
  from {
    transform: translateY(0%)
  }

  to {
    transform: translateY(100%)
  }
}

@keyframes f7-cover-v-current-to-prev {
  from {
    transform: translateZ(0);
    opacity: 1
  }

  to {
    transform: translateZ(-300PX);
    opacity: .5
  }
}

@keyframes f7-cover-v-prev-to-current {
  from {
    transform: translateZ(-300PX);
    opacity: .5
  }

  to {
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes f7-cover-next-to-current {
  from {
    transform: translateX(100%)
  }

  to {
    transform: translateX(0%)
  }
}

@keyframes f7-cover-current-to-next {
  from {
    transform: translateX(0%)
  }

  to {
    transform: translateX(100%)
  }
}

@keyframes f7-cover-current-to-prev {
  from {
    transform: translateZ(0);
    opacity: 1
  }

  to {
    transform: translateZ(-300PX);
    opacity: .5
  }
}

@keyframes f7-cover-prev-to-current {
  from {
    transform: translateZ(-300PX);
    opacity: .5
  }

  to {
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes f7-dive-next-to-current {
  from {
    opacity: 0;
    transform: translateZ(-150PX)
  }

  50% {
    opacity: 0
  }

  to {
    opacity: 1;
    transform: translateZ(0PX)
  }
}

@keyframes f7-dive-current-to-next {
  from {
    opacity: 1;
    transform: translateZ(0PX)
  }

  50% {
    opacity: 0
  }

  to {
    opacity: 0;
    transform: translateZ(-150PX)
  }
}

@keyframes f7-dive-current-to-prev {
  from {
    transform: translateZ(0PX);
    opacity: 1
  }

  50% {
    opacity: 0
  }

  to {
    opacity: 0;
    transform: translateZ(150PX)
  }
}

@keyframes f7-dive-prev-to-current {
  from {
    opacity: 0;
    transform: translateZ(150PX)
  }

  50% {
    opacity: 0
  }

  to {
    opacity: 1;
    transform: translateZ(0PX)
  }
}

@keyframes f7-fade-in {
  from {
    opacity: 0
  }

  50% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes f7-fade-out {
  from {
    opacity: 1
  }

  50% {
    opacity: 0
  }

  to {
    opacity: 0
  }
}

@keyframes f7-flip-next-to-current {
  from {
    border-radius: 32PX;
    transform: translateZ(-100vmax) rotateY(180deg)
  }

  to {
    border-radius: 0;
    transform: translateZ(0PX) rotateY(0deg)
  }
}

@keyframes f7-flip-current-to-next {
  from {
    border-radius: 0PX;
    transform: translateZ(0PX) rotateY(0deg)
  }

  to {
    border-radius: 32PX;
    transform: translateZ(-100vmax) rotateY(180deg)
  }
}

@keyframes f7-flip-current-to-prev {
  from {
    border-radius: 0PX;
    transform: translateZ(0PX) rotateY(0deg)
  }

  to {
    border-radius: 32PX;
    transform: translateZ(-100vmax) rotateY(-180deg)
  }
}

@keyframes f7-flip-prev-to-current {
  from {
    border-radius: 32PX;
    transform: translateZ(-100vmax) rotateY(-180deg)
  }

  to {
    border-radius: 0PX;
    transform: translateZ(0PX) rotateY(0deg)
  }
}


@keyframes f7-parallax-next-to-current {
  from {
    transform: translateX(100%)
  }

  to {
    transform: translateX(0%)
  }
}

@keyframes f7-parallax-current-to-prev {
  from {
    transform: translateX(0%)
  }

  to {
    transform: translateX(-20%)
  }
}

@keyframes f7-parallax-current-to-next {
  from {
    transform: translateX(0%)
  }

  to {
    transform: translateX(100%)
  }
}

@keyframes f7-parallax-prev-to-current {
  from {
    transform: translateX(-20%)
  }

  to {
    transform: translateX(0%)
  }
}

@keyframes f7-push-next-to-current {
  from {
    transform: translateX(100%)
  }

  to {
    transform: translateX(0%)
  }
}

@keyframes f7-push-current-to-next {
  from {
    transform: translateX(0%)
  }

  to {
    transform: translateX(100%)
  }
}

@keyframes f7-push-current-to-prev {
  from {
    transform: translateX(0%)
  }

  to {
    transform: translateX(-100%)
  }
}

@keyframes f7-push-prev-to-current {
  from {
    transform: translateX(-100%)
  }

  to {
    transform: translateX(0%)
  }
}
