/*----All tranistions----*/
.parkers-interactive_wrapper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.ipoc-section_tree {
  -webkit-transition-duration: 1500ms;
  -o-transition-duration: 1500ms;
  transition-duration: 1500ms;

  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.group-circle_bottle {
  transition:
    transform 1500ms ease,
    opacity 300ms ease;
  -webkit-transition:
    transform 1500ms ease,
    opacity 300ms ease;
  -ms-transition:
    transform 1500ms ease,
    opacity 300ms ease;

  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  will-change: transform, opacity;
}
.intro-screen .ipoc-section_tree {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.ipoc-opening {
  -webkit-transition-duration: 1500ms;
  -o-transition-duration: 1500ms;
  transition-duration: 1500ms;
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  opacity: 1;
}
.intro-screen .ipoc-opening {
  -webkit-transform: translate3d(0, 0, 80px) scale3d(0.8, 0.8, 1);
  -ms-transform: translate3d(0, 0, 80px) scale3d(0.8, 0.8, 1);
  transform: translate3d(0, 0, 80px) scale3d(0.8, 0.8, 1);
  opacity: 0;
  pointer-events: none;
}

.ipoc-circle_anim {
  opacity: 0;
  -webkit-transition-duration: 1200ms;
  -o-transition-duration: 1200ms;
  transition-duration: 1200ms;
  -webkit-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
}
.exstarted .ipoc-circle_anim,
.intro-screen.exstarted .ipoc-circlebottle_anim {
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
  -webkit-transition: opacity 600ms ease-out;
  -o-transition: opacity 600ms ease-out;
  transition: opacity 600ms ease-out;
}
.intro-screen .ipoc-circle_anim,
.intro-screen .ipoc-circlebottle_anim {
  opacity: 1;
}
.intro-screen.detail-active .ipoc-circlebottle_anim {
  opacity: 0;
}

.ipoc-circlebottle_anim {
  opacity: 0;
  -webkit-transition-duration: 1000ms;
  -o-transition-duration: 1000ms;
  transition-duration: 1000ms;
  -webkit-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}

.content-module {
  -webkit-transition: opacity 300ms linear;
  -o-transition: opacity 300ms linear;
  transition: opacity 300ms linear;
  opacity: 0;
  pointer-events: none;
}
.active.content-module {
  opacity: 1;
  pointer-events: all;
}
.ipoc-overlay {
  -webkit-transition: opacity 500ms linear;
  -o-transition: opacity 500ms linear;
  transition: opacity 500ms linear;
  opacity: 0;
  pointer-events: none;
}
.detail-active .group-circle_bottle {
  opacity: 1;
}
.detail-active .ipoc-overlay {
  opacity: 1;
  pointer-events: auto;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

.exstarted.process-exit .ipoc-overlay {
  opacity: 0;
}

.exstarted.detail-active .ipoc-circle_anim {
  opacity: 0;
  pointer-events: none;
}
.exstarted.process-exit .ipoc-circle_anim {
  -webkit-transition:
    opacity 300ms ease-out,
    -webkit-transform 300ms ease-out;
  transition:
    opacity 300ms ease-out,
    -webkit-transform 300ms ease-out;
  -o-transition:
    opacity 300ms ease-out,
    transform 300ms ease-out;
  transition:
    opacity 300ms ease-out,
    transform 300ms ease-out;
  transition:
    opacity 300ms ease-out,
    transform 300ms ease-out,
    -webkit-transform 300ms ease-out;
}
.exstarted.detail-active.exit .ipoc-circle_anim {
  opacity: 0.45;
  -webkit-transform: scale3d(1.1, 1.1, 1);
  transform: scale3d(1.1, 1.1, 1);
}

/*----All tranistions----*/