/**
 * Animations
 */
 @keyframes bounceHorizontally {
    from {
        -webkit-transform: perspective(100px);
        transform: perspective(100px);
        width: 100px;
        opacity: .7
    }
    33% {
        -webkit-transform: perspective(100px) rotate3d(0,1,0,-30deg);
        transform: perspective(100px) rotate3d(0,1,0,-30deg);
        width: 100px;
        opacity: 1
    }
    66% {
        -webkit-transform: perspective(100px) rotate3d(0,1,0,30deg);
        transform: perspective(100px) rotate3d(0,1,0,30deg);
        width: 100px;
        opacity: 1
    }
    to {
        -webkit-transform: perspective(100px) rotate3d(0,1,0,0deg);
        transform: perspective(100px) rotate3d(0,1,0,0deg);
        width: 100px;
        opacity: 1
    }
}
@-moz-keyframes bounceHorizontally {
    from {
        -webkit-transform: perspective(100px);
        transform: perspective(100px);
        width: 100px;
        opacity: .7
    }
    33% {
        -webkit-transform: perspective(100px) rotate3d(0,1,0,-30deg);
        transform: perspective(100px) rotate3d(0,1,0,-30deg);
        width: 100px;
        opacity: 1
    }
    66% {
        -webkit-transform: perspective(100px) rotate3d(0,1,0,30deg);
        transform: perspective(100px) rotate3d(0,1,0,30deg);
        width: 100px;
        opacity: 1
    }
    to {
        -webkit-transform: perspective(100px) rotate3d(0,1,0,0deg);
        transform: perspective(100px) rotate3d(0,1,0,0deg);
        width: 100px;
        opacity: 1
    }
}
@-webkit-keyframes bounceHorizontally {
    from {
        -webkit-transform: perspective(100px);
        transform: perspective(100px);
        width: 100px;
        opacity: .7
    }
    33% {
        -webkit-transform: perspective(100px) rotate3d(0,1,0,-30deg);
        transform: perspective(100px) rotate3d(0,1,0,-30deg);
        width: 100px;
        opacity: 1
    }
    66% {
        -webkit-transform: perspective(100px) rotate3d(0,1,0,30deg);
        transform: perspective(100px) rotate3d(0,1,0,30deg);
        width: 100px;
        opacity: 1
    }
    to {
        -webkit-transform: perspective(100px) rotate3d(0,1,0,0deg);
        transform: perspective(100px) rotate3d(0,1,0,0deg);
        width: 100px;
        opacity: 1
    }
}

@keyframes flipHorizontally {
    from {
        -webkit-transform: perspective(110px);
        transform: perspective(110px);
        width: 110px;
        opacity: .7
    }
    30% {
        -webkit-transform: perspective(110px) rotate3d(0,1,0,-10deg);
        transform: perspective(110px) rotate3d(0,1,0,-10deg);
        width: 110px;
        opacity: .85
    }
    to {
        -webkit-transform: perspective(110px) rotate3d(0,1,0,360deg);
        transform: perspective(110px) rotate3d(0,1,0,360deg);
        width: 110px;
        opacity: 1
    }
}
@-moz-keyframes flipHorizontally {
    from {
        -webkit-transform: perspective(110px);
        transform: perspective(110px);
        width: 110px;
        opacity: .7
    }
    30% {
        -webkit-transform: perspective(110px) rotate3d(0,1,0,-10deg);
        transform: perspective(110px) rotate3d(0,1,0,-10deg);
        width: 110px;
        opacity: .85
    }
    to {
        -webkit-transform: perspective(110px) rotate3d(0,1,0,360deg);
        transform: perspective(110px) rotate3d(0,1,0,360deg);
        width: 110px;
        opacity: 1
    }
}
@-webkit-keyframes flipHorizontally {
    from {
        -webkit-transform: perspective(110px);
        transform: perspective(110px);
        width: 110px;
        opacity: .7
    }
    30% {
        -webkit-transform: perspective(110px) rotate3d(0,1,0,-10deg);
        transform: perspective(110px) rotate3d(0,1,0,-10deg);
        width: 110px;
        opacity: .85
    }
    to {
        -webkit-transform: perspective(110px) rotate3d(0,1,0,360deg);
        transform: perspective(110px) rotate3d(0,1,0,360deg);
        width: 110px;
        opacity: 1
    }
}

@keyframes flipHorizontallyMobile {
    from {
        -webkit-transform: perspective(75px);
        transform: perspective(75px);
        width: 75px;
        opacity: .7
    }
    30% {
        -webkit-transform: perspective(75px) rotate3d(0,1,0,-10deg);
        transform: perspective(75px) rotate3d(0,1,0,-10deg);
        width: 75px;
        opacity: .85
    }
    to {
        -webkit-transform: perspective(75px) rotate3d(0,1,0,360deg);
        transform: perspective(75px) rotate3d(0,1,0,360deg);
        width: 75px;
        opacity: 1
    }
}
@-moz-keyframes flipHorizontallyMobile {
    from {
        -webkit-transform: perspective(75px);
        transform: perspective(75px);
        width: 75px;
        opacity: .7
    }
    30% {
        -webkit-transform: perspective(75px) rotate3d(0,1,0,-10deg);
        transform: perspective(75px) rotate3d(0,1,0,-10deg);
        width: 75px;
        opacity: .85
    }
    to {
        -webkit-transform: perspective(75px) rotate3d(0,1,0,360deg);
        transform: perspective(75px) rotate3d(0,1,0,360deg);
        width: 75px;
        opacity: 1
    }
}
@-webkit-keyframes flipHorizontallyMobile {
    from {
        -webkit-transform: perspective(75px);
        transform: perspective(75px);
        width: 75px;
        opacity: .7
    }
    30% {
        -webkit-transform: perspective(75px) rotate3d(0,1,0,-10deg);
        transform: perspective(75px) rotate3d(0,1,0,-10deg);
        width: 75px;
        opacity: .85
    }
    to {
        -webkit-transform: perspective(75px) rotate3d(0,1,0,360deg);
        transform: perspective(75px) rotate3d(0,1,0,360deg);
        width: 75px;
        opacity: 1
    }
}

@keyframes appearFromRight {
    from {
        margin-left:1000px;
        opacity: .3;
        min-width:100%;
    }
    30% {
        margin-left:-100px;
        opacity: .8;
        min-width:100%;
    }
    to {
        margin-left:0px;
        opacity: 1;
        min-width:100%;
    }
}
@-moz-keyframes appearFromRight {
    from {
        margin-left:1000px;
        opacity: .3;
        min-width:100%;
    }
    30% {
        margin-left:-100px;
        opacity: .8;
        min-width:100%;
    }
    to {
        margin-left:0px;
        opacity: 1;
        min-width:100%;
    }
}
@-webkit-keyframes appearFromRight {
    from {
        margin-left:1000px;
        opacity: .3;
        min-width:100%;
    }
    30% {
        margin-left:-100px;
        opacity: .8;
        min-width:100%;
    }
    to {
        margin-left:0px;
        opacity: 1;
        min-width:100%;
    }
}