@keyframes leftAppear {
    0% {
        opacity: 0;
        transform: translate(-100%,0) scale(.2);
    }
    100% {
        opacity: 1;
        transform: translate(0,0) scale(1);
    }
}

@keyframes rightAppear {
    0% {
        opacity: 0;
        transform: translate(100%,0) scale(.2);
    }

    100% {
        opacity: 1;
        transform: translate(0,0) scale(1);
    }
}

@keyframes centerAppear {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes centerAppearHOT {
    0% {
        opacity: 0;
        transform: scale(0.5);
        background-size: 145vw 165vw;
    }
    30%{
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        background-size: 75vw 95vw;
    }
}
@keyframes hotspotAppear {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }

    76% {
        opacity: 1;
        transform: scale(.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    0% {
        opacity: 0;
        transform: scale(3.4) translateX(20%);
    }

    30% {opacity: 0;
        
    }

    60% {
        opacity: 1;
        
    }

    90%{
        transform: translateX(0px);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes appear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
@keyframes appearBackground {
    0% {
        opacity:0;
        background-size: 80vh 120vh;
    }
    50%{
        opacity:1;
    }
    100% {
        opacity:1;
        background-size: 66.67vh 100vh;
    }
}