/* General Animations */
#bact1 {
    opacity: 0.8;
    animation: bact-animation-1 12000ms ease-in-out infinite 1s;
    animation-delay: 0s;
}

@keyframes bact-animation-1{
    0%,
    30%,
    50%,
    60%,
    80% {
        transform: translateY(0%)
    }
    40% {
        transform: translateY(-20%)
    }
    70% {
        transform: translateY(20%)
    }
    100% {
        transform: translateY(0%)
    }
}
#bact2 {
    opacity: 0.8;
    animation-name: bact-animation-1;
    animation-duration: 18000ms;
    animation-timing-function: ease-in-out;
    animation-delay:1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode:none; 
}

@keyframes bact-animation-2{
    0%,
    100%,
    30%,
    50%,
    60%,
    80% {
        transform: translateY(0%)
    }
    40% {
        transform: translateY(-10%)
    }
    70% {
        transform: translateY(40%)
    }

}
#bact3 {
    opacity: 0.8;
    animation-name: bact-animation-1;
    animation-duration: 20000ms;
    animation-timing-function: ease-in-out;
    animation-delay:1.8s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode:none; 
}

@keyframes bact-animation-3{
    0%,
    100%,
    30%,
    50%,
    60%,
    80% {
        transform: translateY(0%)
    }
    40% {
        transform: translateY(-60%)
    }
    70% {
        transform: translateY(30%)
    }

}

.popup-effect{
	opacity: 0;
    animation-name: popup-display;
    animation-duration: 500ms;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

@keyframes popup-display{
    to{
        transform: rotate(0) translateY(0) scale(1);
        opacity: 1;
        }
    from{
        transform: rotate(0) translateY(-5%) scale(0);
        opacity: 0;
        }
}


#Check-icon{
	opacity: 0;animation-name: popup-Check-icon;animation-duration: 500ms;
    animation-timing-function: ease;animation-delay: 5.2s;
    animation-iteration-count: 1;animation-direction: alternate;animation-fill-mode: forwards;
}
@keyframes popup-Check-icon{
    to{opacity: 1;}
    from{opacity: 0;}
}

#Circle-Group{
opacity: 0;animation-name: popup-Circle-Group;animation-duration: 500ms;
animation-timing-function: ease;animation-delay: 5s;
animation-iteration-count: 1;animation-direction: alternate;animation-fill-mode: forwards;
}
@keyframes popup-Circle-Group{
    to{opacity: 1;}
    from{opacity: 0;transform: scale(1)}
}

#Explotion2 {
    opacity: 0;
    animation-name: popup-Explotion2;
    animation-duration: 6.5s;
    animation-delay: 4.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes popup-Explotion2 {
    0% {
        opacity: 0,
    }
    5% {
        opacity: 1
    }
    6%,
    100% {
        opacity: 0
    }
}

#Explotion3 {
    opacity: 0;
    animation-name: popup-Explotion3;
    animation-duration: 7.5s;
    animation-delay: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes popup-Explotion3 {
    0% {
        opacity: 0
    }
    5% {
        opacity: 1
    }
    6%,
    100% {
        opacity: 0
    }
}


@keyframes pulse_animation {
    0%,
    100%,
    30%,
    50%,
    60%,
    80% {
        transform: scale(1)
    }
    40% {
        transform: scale(1.08)
    }
    70% {
        transform: scale(1.05)
    }
}

.pulse {
    animation-name: pulse_animation;
    animation-duration: 5s;
    transform-origin: 70% 70%;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

#DesktopContentText,
#DesktopContentbutton,
.DesktopContentWrapper {
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards
}

#DesktopContentText,
#DesktopContentbutton,
.DesktopContentWrapper,
.Template-SocialMedia-Interact {
    animation-timing-function: ease;
    opacity: 0
}

.DesktopContentWrapper {
    animation-name: DesktopContentWrapper-frames;
    animation-duration: 2.5s
}

@keyframes DesktopContentWrapper-frames {
    to {
        opacity: 1
    }
    from {
        opacity: 0
    }
}

#DesktopContentText {
    animation-name: DesktopContentText-frames;
    animation-duration: 2.5s
}

@keyframes DesktopContentText-frames {
    to {
        transform: rotate(0) translateY(0);
        opacity: 1
    }
    from {
        transform: rotate(0) translateY(-15%);
        opacity: 0
    }
}

#DesktopContentbutton {
    animation-name: DesktopContentbutton-frames;
    animation-duration: 1s
}

@keyframes DesktopContentbutton-frames {
    0% {
        transform: rotate(0) translateX(0);
        opacity: 0
    }
    50% {
        transform: rotate(0) translateX(-8%);
        opacity: .5
    }
    100% {
        transform: rotate(0) translateX(0);
        opacity: 1
    }
}

.Template-SocialMedia-Interact {
    animation-name: SocialMedia-Interact;
    animation-duration: 1s;
    animation-delay: 5s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards
}

#Off-behaviour,
#On-behaviour-holder,
#On-behaviour-link,
.Bar-behaviour {
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards
}

@keyframes SocialMedia-Interact {
    0% {
        transform: rotate(0) translateY(-15%);
        opacity: 0
    }
    100% {
        transform: rotate(0) translateY(0);
        opacity: 1
    }
}

#Off-behaviour {
    opacity: 0;
    animation-name: Wizard-Off-behaviour;
    animation-duration: 1s;
    animation-delay: 5.5s
}

@keyframes Wizard-Off-behaviour {
    0% {
        opacity: 0
    }
    50% {
        opacity: .5
    }
    100% {
        opacity: 1
    }
}

#On-behaviour-holder {
    opacity: 0;
    animation-name: Wizard-Interact;
    animation-duration: .3s;
    animation-delay: 2.5s
}

@keyframes Wizard-Interact {
    0% {
        opacity: 0
    }
    50% {
        opacity: .2
    }
    100% {
        opacity: 1
    }
}

#On-behaviour-link {
    opacity: 0;
    animation-name: OnWizard-Interact;
    animation-duration: .4s;
    animation-delay: 3s
}

@keyframes OnWizard-Interact {
    0% {
        transform: rotate(0) scale(-.5);
        opacity: 0
    }
    50% {
        transform: rotate(0) scale(1.2);
        background: 0 0;
        opacity: .5
    }
    100% {
        transform: rotate(0);
        background: 0 0;
        opacity: 1
    }
}

.Bar-behaviour {
    opacity: 0;
    animation-name: Bar-Interact-stepOne;
    animation-duration: .6s;
    animation-delay: 2.5s
}

@keyframes Bar-Interact-stepOne {
    0% {
        opacity: 0
    }
    50% {
        background: 0 0;
        opacity: .5
    }
    100% {
        background: 0 0;
        opacity: 1
    }
}