﻿

/* --------------------------------------------

	LOAD IN ANIMATIONS

-------------------------------------------- */



.v-animation {

    -webkit-perspective: 600px;

    -moz-perspective: 600px;

    -ms-perspective: 600px;

    perspective: 600px;

    opacity: 0;

    position: relative;

}

    html.no-js .v-animation, .mobile-browser .v-animation, .apple-mobile-browser .v-animation, .v-animation[data-animation="none"] {

        opacity: 1!important;

        left: auto!important;

        right: auto!important;

        bottom: auto!important;

        -webkit-transform: scale(1)!important;

        -o-transform: scale(1)!important;

        -moz-transform: scale(1)!important;

        -ms-transform: scale(1)!important;

        transform: scale(1)!important;

    }



    .v-animation[data-animation="grow"] {

        opacity: 0;

        -webkit-transform: scale(0.4);

        -o-transform: scale(0.4);

        -moz-transform: scale(0.4);

        -ms-transform: scale(0.4);

        transform: scale(0.4);

        -webkit-transform-origin: 50% 50%;

        -moz-transform-origin: 50% 50%;

        -ms-transform-origin: 50% 50%;

        -o-transform-origin: 50% 50%;

        transform-origin: 50% 50%;

        -webkit-transition: all 0.6s cubic-bezier(0.15, 0.85, 0.35, 1.25);

        -moz-transition: all 0.6s cubic-bezier(0.15, 0.85, 0.35, 1.25);

        -o-transition: all 0.6s cubic-bezier(0.15, 0.85, 0.35, 1.25);

        transition: all 0.6s cubic-bezier(0.15, 0.85, 0.35, 1.25);

    }

        .v-animation[data-animation="grow"].v-animate {

            opacity: 1;

            -webkit-transform: scale(1);

            -o-transform: scale(1);

            -moz-transform: scale(1);

            -ms-transform: scale(1);

            transform: scale(1);

        }

    .v-animation[data-animation="pop-up"].v-animate {

        -webkit-transform-style: preserve-3d;

        -moz-transform-style: preserve-3d;

        transform-style: preserve-3d;

        -webkit-transform: scale(0.2);

        -moz-transform: scale(0.2);

        -ms-transform: scale(0.2);

        -o-transform: scale(0.2);

        transform: scale(0.2);

        -webkit-animation: popUp 0.4s ease-in-out forwards;

        -moz-animation: popUp 0.4s ease-in-out forwards;

        -o-animation: popUp 0.4s ease-in-out forwards;

        animation: popUp 0.4s ease-in-out forwards;

    }

    .v-animation[data-animation="flip"].v-animate {

        -webkit-transform-style: preserve-3d;

        -moz-transform-style: preserve-3d;

        transform-style: preserve-3d;

        -webkit-transform-origin: 0% 0%;

        -moz-transform-origin: 0% 0%;

        -ms-transform-origin: 0% 0%;

        -o-transform-origin: 0% 0%;

        transform-origin: 0% 0%;

        -webkit-transform: rotateX(-80deg);

        -moz-transform: rotateX(-80deg);

        -ms-transform: rotateX(-80deg);

        -o-transform: rotateX(-80deg);

        transform: rotateX(-80deg);

        -webkit-animation: flip .8s ease-in-out forwards;

        -moz-animation: flip .8s ease-in-out forwards;

        -o-animation: flip .8s ease-in-out forwards;

        animation: flip .8s ease-in-out forwards;

    }

    .v-animation[data-animation="helix"].v-animate {

        -webkit-transform-style: preserve-3d;

        -moz-transform-style: preserve-3d;

        transform-style: preserve-3d;

        -webkit-transform: rotateY(-180deg);

        -moz-transform: rotateY(-180deg);

        -ms-transform: rotateY(-180deg);

        -o-transform: rotateY(-180deg);

        transform: rotateY(-180deg);

        -webkit-animation: helix .8s ease-in-out forwards;

        -moz-animation: helix .8s ease-in-out forwards;

        -o-animation: helix .8s ease-in-out forwards;

        animation: helix .8s ease-in-out forwards;

    }

    .v-animation[data-animation="move-up"].v-animate {

        -webkit-transform: translateY(200px);

        -moz-transform: translateY(200px);

        -ms-transform: translateY(200px);

        -o-transform: translateY(200px);

        transform: translateY(200px);

        -webkit-animation: moveUp 0.65s ease forwards;

        -moz-animation: moveUp 0.65s ease forwards;

        -o-animation: moveUp 0.65s ease forwards;

        animation: moveUp 0.65s ease forwards;

    }

    .v-animation[data-animation="spin"].v-animate {

        -webkit-animation: spin 0.65s ease forwards;

        -moz-animation: spin 0.65s ease forwards;

        -o-animation: spin 0.65s ease forwards;

        animation: spin 0.65s ease forwards;

    }

    .v-animation[data-animation="flip-x"].v-animate {

        -webkit-backface-visibility: visible;

        -moz-backface-visibility: visible;

        -o-backface-visibility: visible;

        backface-visibility: visible;

        -webkit-animation: flipX 0.65s ease forwards;

        -moz-animation: flipX 0.65s ease forwards;

        -o-animation: flipX 0.65s ease forwards;

        animation: flipX 0.65s ease forwards;

    }

    .v-animation[data-animation="flip-y"].v-animate {

        -webkit-backface-visibility: visible;

        -moz-backface-visibility: visible;

        -o-backface-visibility: visible;

        backface-visibility: visible;

        -webkit-animation: flipY 0.65s ease forwards;

        -moz-animation: flipY 0.65s ease forwards;

        -o-animation: flipY 0.65s ease forwards;

        animation: flipY 0.65s ease forwards;

    }

.v-animation[data-animation="fade-from-left"] {

	left: -70px;

}

.v-animation[data-animation="fade-from-right"] {

	right: -70px;

}

.v-animation[data-animation="fade-from-bottom"] {

	bottom: -120px;

}

.v-animation[data-animation="fade-from-left"], .v-animation[data-animation="fade-from-right"] {

	margin: 0 auto;

}

.browser-ie .v-animation[data-animation="pop-up"].v-animate, 

.browser-ie .v-animation[data-animation="flip"].v-animate, 

.browser-ie .v-animation[data-animation="helix"].v-animate, 

.browser-ie .v-animation[data-animation="fly"].v-animate, 

.browser-ie .v-animation[data-animation="move-up"].v-animate, 

.browser-ie .v-animation[data-animation="spin"].v-animate, 

.browser-ie .v-animation[data-animation="flip-x"].v-animate, 

.browser-ie .v-animation[data-animation="flip-y"].v-animate {

    opacity: 1;

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    -o-transform: scale(1);

    transform: scale(1);

}











/* #CSS3 Keyframes

================================================== */



@-webkit-keyframes fadeIn {

	to { opacity: 1; }

}



@-moz-keyframes fadeIn {

	to { opacity: 1; }

}



@keyframes fadeIn {

	to { opacity: 1; }

}

@-webkit-keyframes moveUp {

	to { -webkit-transform: translateY(0); opacity: 1; }

}



@-moz-keyframes moveUp {

	to { -moz-transform: translateY(0); opacity: 1; }

}



@keyframes moveUp {

	to { transform: translateY(0); opacity: 1; }

}



@-webkit-keyframes scaleUp {

	to { -webkit-transform: scale(1); opacity: 1; }

}



@-moz-keyframes scaleUp {

	to { -moz-transform: scale(1); opacity: 1; }

}



@keyframes scaleUp {

	to { transform: scale(1); opacity: 1; }

}



@-webkit-keyframes fallPerspective {

	100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }

}



@-moz-keyframes fallPerspective {

	100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }

}



@keyframes fallPerspective {

	100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }

}



@-webkit-keyframes fly {

	100% { -webkit-transform: rotateX(0deg); opacity: 1; }

}

@-moz-keyframes fly {

	100% { -moz-transform: rotateX(0deg); opacity: 1; }

}

@keyframes fly {

	100% { transform: rotateX(0deg); opacity: 1; }

}



@-webkit-keyframes flip {

	100% { -webkit-transform: rotateX(0deg); opacity: 1; }

}



@-moz-keyframes flip {

	100% { -moz-transform: rotateX(0deg); opacity: 1; }

}



@keyframes flip {

	100% { transform: rotateX(0deg); opacity: 1; }

}



@-webkit-keyframes helix {

	100% { -webkit-transform: rotateY(0deg); opacity: 1; }

}



@-moz-keyframes helix {

	100% { -moz-transform: rotateY(0deg); opacity: 1; }

}



@keyframes helix {

	100% { transform: rotateY(0deg); opacity: 1; }

}

@-webkit-keyframes popUp {

	70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }

	100% { -webkit-transform: scale(1); opacity: 1; }

}



@-moz-keyframes popUp {

	70% { -moz-transform: scale(1.1); opacity: .8; -moz-animation-timing-function: ease-out; }

	100% { -moz-transform: scale(1); opacity: 1; }

}



@keyframes popUp {

	70% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; }

	100% { transform: scale(1); opacity: 1; }

}



@-ms-keyframes spin {

    from { -ms-transform: rotate(0deg); }

    to { -ms-transform: rotate(360deg); opacity: 1; }

}

@-moz-keyframes spin {

    from { -moz-transform: rotate(0deg); }

    to { -moz-transform: rotate(360deg); opacity: 1; }

}

@-webkit-keyframes spin {

    from { -webkit-transform: rotate(0deg); }

    to { -webkit-transform: rotate(360deg); opacity: 1; }

}

@keyframes spin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); opacity: 1; }

}

@-webkit-keyframes flipX {

    0% {-webkit-transform: perspective(400px) rotateX(90deg);opacity: 0;}

    100% {-webkit-transform: perspective(400px) rotateX(0deg);opacity: 1;}

}

@-moz-keyframes flipX {

    0% {-moz-transform: perspective(400px) rotateX(90deg);opacity: 0;}

    100% {-moz-transform: perspective(400px) rotateX(0deg);opacity: 1;}

}

@-o-keyframes flipX {

    0% {-o-transform: perspective(400px) rotateX(90deg);opacity: 0;}

    100% {-o-transform: perspective(400px) rotateX(0deg);opacity: 1;}

}

@keyframes flipX {

    0% {transform: perspective(400px) rotateX(90deg);opacity: 0;}

    100% {transform: perspective(400px) rotateX(0deg);opacity: 1;}

}

@-webkit-keyframes flipY {

    0% {-webkit-transform: perspective(400px) rotateY(90deg);opacity: 0;}

    100% {-webkit-transform: perspective(400px) rotateY(0deg);opacity: 1;}

}

@-moz-keyframes flipY {

    0% {-moz-transform: perspective(400px) rotateY(90deg);opacity: 0;}

	100% {-moz-transform: perspective(400px) rotateY(0deg);opacity: 1;}

}

@-o-keyframes flipY {

	0% {-o-transform: perspective(400px) rotateY(90deg);opacity: 0;}

	100% {-o-transform: perspective(400px) rotateY(0deg);opacity: 1;}

}

@keyframes flipY {

    0% {transform: perspective(400px) rotateY(90deg);opacity: 0;} 

    100% {transform: perspective(400px) rotateY(0deg);opacity: 1;}

}

@-webkit-keyframes shake {

    0%, 50%, 100% {-webkit-transform: translateX(0);}

    25% {-webkit-transform: translateX(-100px);}

    75% {-webkit-transform: translateX(100px);}

}

@-moz-keyframes shake {

    0%, 50%, 100% {-moz-transform: translateX(0);}

    25% {-moz-transform: translateX(-100px);}

    75% {-moz-transform: translateX(100px);}

}

@-o-keyframes shake {

    0%, 50%, 100% {-o-transform: translateX(0);}

    25% {-o-transform: translateX(-100px);}

    75% {-o-transform: translateX(100px);}

}

@keyframes shake {

    0%, 50%, 100% {transform: translateX(0);}

    25% {transform: translateX(-100px);}

    75% {transform: translateX(100px);}

}