.front-face {
    z-index: 2;
}
.back-face {
    z-index: 1;
}
.major-list li a {
    overflow: hidden;
}
.major-list li:hover a .back-face {
    z-index: 3;
}
.from-top {
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%
}

.from-left {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%
}

.from-top,.from-left {
    -webkit-animation: enter-clockwise .3s ease-out;
    -moz-animation: enter-clockwise .3s ease-out;
    -ms-animation: enter-clockwise .3s ease-out;
    animation: enter-clockwise .3s ease-out
}

.from-right {
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

.from-bottom {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%
}

.from-right,.from-bottom {
    -webkit-animation: enter-anti-clockwise .3s ease-out;
    -moz-animation: enter-anti-clockwise .3s ease-out;
    -ms-animation: enter-anti-clockwise .3s ease-out;
    animation: enter-anti-clockwise .3s ease-out
}

.to-top {
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%
}

.to-left {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%
}

.to-top,.to-left {
    -webkit-animation: leave-anti-clockwise .3s ease-out;
    -moz-animation: leave-anti-clockwise .3s ease-out;
    -ms-animation: leave-anti-clockwise .3s ease-out;
    animation: leave-anti-clockwise .3s ease-out
}

.to-right {
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

.to-bottom {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%
}

.to-right,.to-bottom {
    -webkit-animation: leave-clockwise .3s ease-out;
    -moz-animation: leave-clockwise .3s ease-out;
    -ms-animation: leave-clockwise .3s ease-out;
    animation: leave-clockwise .3s ease-out
}

@-webkit-keyframes enter-clockwise {
    from {
        z-index: 3;
        -webkit-transform: rotate(-90deg)
    }

    to {
        z-index: 3;
        -webkit-transform: rotate(0deg)
    }
}

@-moz-keyframes enter-clockwise {
    from {
        z-index: 3;
        -moz-transform: rotate(-90deg)
    }

    to {
        z-index: 3;
        -moz-transform: rotate(0deg)
    }
}

@-ms-keyframes enter-clockwise {
    from {
        z-index: 3;
        -ms-transform: rotate(-90deg)
    }

    to {
        z-index: 3;
        -ms-transform: rotate(0deg)
    }
}

@keyframes enter-clockwise {
    from {
        z-index: 3;
        transform: rotate(-90deg)
    }

    to {
        z-index: 3;
        transform: rotate(0deg)
    }
}

@-webkit-keyframes enter-anti-clockwise {
    from {
        z-index: 3;
        -webkit-transform: rotate(90deg)
    }

    to {
        z-index: 3;
        -webkit-transform: rotate(0deg)
    }
}

@-moz-keyframes enter-anti-clockwise {
    from {
        z-index: 3;
        -moz-transform: rotate(90deg)
    }

    to {
        z-index: 3;
        -moz-transform: rotate(0deg)
    }
}

@-ms-keyframes enter-anti-clockwise {
    from {
        z-index: 3;
        -ms-transform: rotate(90deg)
    }

    to {
        z-index: 3;
        -ms-transform: rotate(0deg)
    }
}

@keyframes enter-anti-clockwise {
    from {
        z-index: 3;
        transform: rotate(90deg)
    }

    to {
        z-index: 3;
        transform: rotate(0deg)
    }
}

@-webkit-keyframes leave-clockwise {
    from {
        z-index: 3;
        -webkit-transform: rotate(0deg)
    }

    to {
        z-index: 3;
        -webkit-transform: rotate(90deg)
    }
}

@-moz-keyframes leave-clockwise {
    from {
        z-index: 3;
        -moz-transform: rotate(0deg)
    }

    to {
        z-index: 3;
        -moz-transform: rotate(90deg)
    }
}

@-ms-keyframes leave-clockwise {
    from {
        z-index: 3;
        -ms-transform: rotate(0deg)
    }

    to {
        z-index: 3;
        -ms-transform: rotate(90deg)
    }
}

@keyframes leave-clockwise {
    from {
        z-index: 3;
        transform: rotate(0deg)
    }

    to {
        z-index: 3;
        transform: rotate(90deg)
    }
}

@-webkit-keyframes leave-anti-clockwise {
    from {
        z-index: 3;
        -webkit-transform: rotate(0deg)
    }

    to {
        z-index: 3;
        -webkit-transform: rotate(-90deg)
    }
}

@-moz-keyframes leave-anti-clockwise {
    from {
        z-index: 3;
        -moz-transform: rotate(0deg)
    }

    to {
        z-index: 3;
        -moz-transform: rotate(-90deg)
    }
}

@-ms-keyframes leave-anti-clockwise {
    from {
        z-index: 3;
        -ms-transform: rotate(0deg)
    }

    to {
        z-index: 3;
        -ms-transform: rotate(-90deg)
    }
}

@keyframes leave-anti-clockwise {
    from {
        z-index: 3;
        transform: rotate(0deg)
    }

    to {
        z-index: 3;
        transform: rotate(-90deg)
    }
}

@-webkit-keyframes slideDown {
    from {
        -webkit-transform: translateY(-75px)
    }

    to {
        -webkit-transform: translateY(0px)
    }
}

@-moz-keyframes slideDown {
    from {
        -moz-transform: translateY(-75px)
    }

    to {
        -moz-transform: translateY(0px)
    }
}

@-ms-keyframes slideDown {
    from {
        -ms-transform: translateY(-75px)
    }

    to {
        -ms-transform: translateY(0px)
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-75px)
    }

    to {
        transform: translateY(0px)
    }
}

@-webkit-keyframes slideUp {
    from {
        -webkit-transform: translateY(0px)
    }

    to {
        -webkit-transform: translateY(-75px)
    }
}

@-moz-keyframes slideUp {
    from {
        -moz-transform: translateY(0px)
    }

    to {
        -moz-transform: translateY(-75px)
    }
}

@-ms-keyframes slideUp {
    from {
        -ms-transform: translateY(0px)
    }

    to {
        -ms-transform: translateY(-75px)
    }
}

@keyframes slideUp {
    from {
        transform: translateY(0px)
    }

    to {
        transform: translateY(-75px)
    }
}

@-webkit-keyframes bounceStrenth {
    0% {
        opacity: 0;
        -webkit-transform: scale(0)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.2)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes bounceStrenth {
    0% {
        opacity: 0;
        -moz-transform: scale(0)
    }

    60% {
        opacity: 1;
        -moz-transform: scale(1.2)
    }

    100% {
        -moz-transform: scale(1)
    }
}

@-ms-keyframes bounceStrenth {
    0% {
        opacity: 0;
        -ms-transform: scale(0)
    }

    60% {
        opacity: 1;
        -ms-transform: scale(1.2)
    }

    100% {
        -ms-transform: scale(1)
    }
}

@keyframes bounceStrenth {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    60% {
        opacity: 1;
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes bounceBigStrenth {
    0% {
        opacity: 0;
        -webkit-transform: scale(0)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.4)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes bounceBigStrenth {
    0% {
        opacity: 0;
        -moz-transform: scale(0)
    }

    60% {
        opacity: 1;
        -moz-transform: scale(1.4)
    }

    100% {
        -moz-transform: scale(1)
    }
}

@-ms-keyframes bounceBigStrenth {
    0% {
        opacity: 0;
        -ms-transform: scale(0)
    }

    60% {
        opacity: 1;
        -ms-transform: scale(1.4)
    }

    100% {
        -ms-transform: scale(1)
    }
}

@keyframes bounceBigStrenth {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    60% {
        opacity: 1;
        transform: scale(1.4)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg)
    }

    to {
        -moz-transform: rotate(360deg)
    }
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0deg)
    }

    to {
        -ms-transform: rotate(360deg)
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}