/*----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(.8,.8,1);
    -ms-transform: translate3d(0, 0, 80px) scale3d(.8,.8,1);
    transform: translate3d(0, 0, 80px) scale3d(.8,.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: .45;
    -webkit-transform: scale3d(1.1,1.1,1);
    transform: scale3d(1.1,1.1,1);
}

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