/* ANIMATIONS ==================== */


/* TEXT EFFECTS  */


.concertina1-text {
    -o-animation-name: concertina1-text;
    -moz-animation-name: concertina1-text;
    -webkit-animation-name: concertina1-text;
    animation-name: concertina1-text;

    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
@keyframes concertina1-text {
    30% {
        letter-spacing: 1px;
    }
}

.concertina1-large-text {
    -o-animation-name: concertina1-large-text;
    -moz-animation-name: concertina1-large-text;
    -webkit-animation-name: concertina1-large-text;
    animation-name: concertina1-large-text;
    
    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
@keyframes concertina1-large-text {
    30% {
        letter-spacing: 5px;
    }
}

.concertina2-text {
    -o-animation-name: concertina2-text;
    -moz-animation-name: concertina2-text;
    -webkit-animation-name: concertina2-text;
    animation-name: concertina2-text;

    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
@keyframes concertina2-text {
    30% {
        letter-spacing: 2px;
    }
    90% {
        letter-spacing: 0.5px;
    }
}

.concertina2-large-text {
    -o-animation-name: concertina2-large-text;
    -moz-animation-name: concertina2-large-text;
    -webkit-animation-name: concertina2-large-text;
    animation-name: concertina2-large-text;

    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
@keyframes concertina2-large-text {
    30% {
        letter-spacing: 5px;
    }
    90% {
        letter-spacing: 2px;
    }
}






/* ZOOM IN */

@keyframes zoomIn {
    0% {
        /*opacity: 0;*/
        -o-transform: scale3d(.3, .3, .3);
        -moz-transform: scale3d(.3, .3, .3);
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn-half {
    0% {
        /*opacity: 0;*/
        
        -o-transform: scale3d(.8, .8, .8);
    -moz-transform: scale3d(.8, .8, .8);
    -webkit-transform: scale3d(.8, .8, .8);
    transform: scale3d(.8, .8, .8);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn-micro {
    0% {
        /*opacity: 0;*/
        -o-transform: scale3d(.9, .9, .9);
        -moz-transform: scale3d(.9, .9, .9);
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    50% {
        opacity: 1;
    }
}



/* ZOOM OUT */

@keyframes zoomOut-half {
    0% {
        /*opacity: 0;*/
        -o-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomOut-micro {
    0% {
        opacity: 1;
        -o-transform: scale3d(1.05, 1.05, 1.05);
        -moz-transform: scale3d(1.05, 1.05, 1.05);
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    50% {
        opacity: 1;
    }
}


/*RUBBER BAND*/

.rubberBand {
    -o-animation-name: rubberBand;
    -moz-animation-name: rubberBand;
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

@keyframes rubberBand {
    0% {
        -o-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -o-transform: scale3d(1.25, 0.75, 1);
        -moz-transform: scale3d(1.25, 0.75, 1);
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -o-transform: scale3d(0.75, 1.25, 1);
        -moz-transform: scale3d(0.75, 1.25, 1);
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -o-transform: scale3d(1.15, 0.85, 1);
        -moz-transform: scale3d(1.15, 0.85, 1);
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -o-transform: scale3d(.95, 1.05, 1);
        -moz-transform: scale3d(.95, 1.05, 1);
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        -o-transform: scale3d(1.05, .95, 1);
        -moz-transform: scale3d(1.05, .95, 1);
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }

    100% {
        -o-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}






/*PULSE*/

.pulse {
    -o-animation-name: pulse;
    -moz-animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@keyframes pulse {
    0% {
        -o-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -o-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        -o-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}






/*SHAKE*/

.shake {
    -o-animation-name: shake;
    -moz-animation-name: shake;
    -webkit-animation-name: shake;
    animation-name: shake;
}

@keyframes shake {
    0%, 100% {
        -o-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -o-transform: translate3d(-10px, 0, 0);
        -moz-transform: translate3d(-10px, 0, 0);
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -o-transform: translate3d(10px, 0, 0);
        -moz-transform: translate3d(10px, 0, 0);
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}




/*SWING*/

.swing {
    -o-transform-origin: top center;
    -moz-transform-origin: top center;
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;

    -o-animation-name: swing;
    -moz-animation-name: swing;
    -webkit-animation-name: swing;
    animation-name: swing;
}


@keyframes swing {
    20% {
        -o-transform: rotate3d(0, 0, 1, 15deg);
        -moz-transform: rotate3d(0, 0, 1, 15deg);
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -o-transform: rotate3d(0, 0, 1, -10deg);
        -moz-transform: rotate3d(0, 0, 1, -10deg);
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -o-transform: rotate3d(0, 0, 1, 5deg);
        -moz-transform: rotate3d(0, 0, 1, 5deg);
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -o-transform: rotate3d(0, 0, 1, -5deg);
        -moz-transform: rotate3d(0, 0, 1, -5deg);
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    100% {
        -o-transform: rotate3d(0, 0, 1, 0deg);
        -moz-transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}





/*TADA*/
.tada {
    -o-animation-name: tada;
    -moz-animation-name: tada;
    -webkit-animation-name: tada;
    animation-name: tada;
}

@keyframes tada {

    0% {
        -o-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -o-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        -moz-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -o-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        -moz-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -o-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        -moz-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        -o-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}





/*WOBBLE*/

.wobble {
    -o-animation-name: wobble;
    -moz-animation-name: wobble;
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

@keyframes wobble {

    0% {
        -o-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
    }

    15% {
        -o-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        -moz-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -o-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        -moz-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -o-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        -moz-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -o-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        -moz-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -o-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        -moz-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    100% {
        -o-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
    }
}


/*FADE IN LEFT*/

.fadeIn {
    -o-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -moz-animation-name: fadeIn;                                  
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@keyframes fadeIn {

    0% {
        opacity: 0;
      
    }

    100% {
        opacity: 1;
       
    }
}


/*FADE IN LEFT*/

.fadeInLeft {
    -o-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@keyframes fadeInLeft {

    0% {
        opacity: 0;
        
        -o-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        
        -o-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
    }
}



/*FADE IN RIGHT*/

.fadeInRight {
    -o-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}


@keyframes fadeInRight {

    0% {
        opacity: 0;
        -o-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -o-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
    }
}





/*FADE IN DOWN*/

.fadeInDown {
    -o-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@keyframes fadeInDown {

    0% {
        opacity: 0;
        -o-transform: translate3d(0, -100%, 0);
        -moz-transform: translate3d(0, -100%, 0);
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -o-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
    }
}





/*FADE IN UP*/

.fadeInUp {
    -o-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}


@keyframes fadeInUp {

    0% {
        opacity: 0;
        -o-transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -o-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
    }
}




/*LIGHT SPEED IN*/


.lightSpeedIn {
    -o-animation-name: lightSpeedIn;
    -moz-animation-name: lightSpeedIn;
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    
    -o-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@keyframes lightSpeedIn {

    0% {
        -o-transform: translate3d(60%, 0, 0) skewX(-30deg);
        -moz-transform: translate3d(60%, 0, 0) skewX(-30deg);
        -webkit-transform: translate3d(60%, 0, 0) skewX(-30deg);
        transform: translate3d(60%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -o-transform: skewX(20deg);
        -moz-transform: skewX(20deg);
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -o-transform: skewX(-5deg);
        -moz-transform: skewX(-5deg);
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    100% {
        -o-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}


/*LIGHT SPEED IN*/


.lightSpeedInFromLeft {
    -o-animation-name: lightSpeedInFromLeft;
    -moz-animation-name: lightSpeedInFromLeft;
    -webkit-animation-name: lightSpeedInFromLeft;
    animation-name: lightSpeedInFromLeft;
    
    -o-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@keyframes lightSpeedInFromLeft {

    0% {
        -o-transform: translate3d(-60%, 0, 0) skewX(30deg);
        -moz-transform: translate3d(-60%, 0, 0) skewX(30deg);
        -webkit-transform: translate3d(-60%, 0, 0) skewX(30deg);
        transform: translate3d(-60%, 0, 0) skewX(30deg);
        opacity: 0;
    }

    60% {
        -o-transform: skewX(-20deg);
        -moz-transform: skewX(-20deg);
        -webkit-transform: skewX(-20deg);
        transform: skewX(-20deg);
        opacity: 1;
    }

    80% {
        -o-transform: skewX(5deg);
        -moz-transform: skewX(5deg);
        -webkit-transform: skewX(5deg);
        transform: skewX(5deg);
        opacity: 1;
    }

    100% {
        -o-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}



/*.rubberBand {
    -o-animation: opaque 1s 1;
    -moz-animation: opaque 1s 1;
    -webkit-animation: opaque 1s 1;
    animation: opaque 1s 1;
}

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

    100% {
        opacity: 1;
    }
}*/


/* THESE ARE THE FINAL OVERIDES TO CUSTOMIZE THE ANIMATIONS */

.translucent{
    opacity: 0;
}

.opaque{
    -o-animation: opaque 1s 1;
    -moz-animation: opaque 1s 1;
    -webkit-animation: opaque 1s 1;
    animation: opaque 1s 1;
}
@keyframes opaque {
    0% {
        opacity: 0;
       
    }
    100% {
        opacity: 1;
      
    }
}

.translucent.played {
    opacity: 1 !important;
}

.hiddenOnStart {
    opacity: 0 !important;
}

.overideDelay-0-5 {
    -o-animation-delay: 0.5s !important;
    -moz-animation-delay: 0.5s !important;
    -webkit-animation-delay: 0.5s !important;
    animation-delay: 0.5s !important;
}
.overideDelay-1 {
    -o-animation-delay: 1s !important;
    -moz-animation-delay: 1s !important;
    -webkit-animation-delay: 1s !important;
    animation-delay: 1s !important;
}

.visibility-on-start-0-5{
    opacity: 0.5 !important;
}