/*!
 * annimay.css (https://github.com/edumigueis/Annimay)
 * Version: 2.3.2
 * Author: Eduardo Migueis @edumigueis
 * Author URL: https://www.linkedin.com/in/edumigueis/
 * Github:https://github.com/edumigueis/Annimay
 * annimay.css Copyright Eduardo Migueis 2020.
 */

* {
    -webkit-font-smoothing: antialiased;
}
:root{
    --accent-color: #36ff78;
    --main-color: white;
}
/* Pulse */
@-webkit-keyframes ann-pulse {
    25% {
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
    }

    75% {
        -webkit-transform: scale(0.96);
        transform: scale(0.96);
    }
}

@keyframes ann-pulse {
    25% {
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
    }

    75% {
        -webkit-transform: scale(0.96);
        transform: scale(0.96);
    }
}

.ann-pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.ann-pulse:hover,
.ann-pulse:focus,
.ann-pulse:active {
    -webkit-animation-name: ann-pulse;
    animation-name: ann-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/*Pulse Infinite*/
.ann-pulse-infinite {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-animation-name: ann-pulse;
    animation-name: ann-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/*Bounce Infinite*/
.ann-bounce {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-animation-name: ann-bounce;
    animation-name: ann-bounce;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes ann-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-30px);
    }

    60% {
        -webkit-transform: translateY(-15px);
    }
}

@keyframes ann-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

/*Flash Infinite*/
.ann-flash {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-animation-name: ann-flash;
    animation-name: ann-flash;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes ann-flash {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

@keyframes ann-flash {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

/*Hover Infinite*/
.ann-hover {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-animation-name: ann-hover;
    animation-name: ann-hover;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes ann-hover {
    0% {
        margin-top: -50px;
    }

    50% {
        margin-top: -40px;
    }

    100% {
        margin-top: -50px;
    }
}

/* Simple Scale Up*/
@-webkit-keyframes ann-scale-up {
    25% {
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
    }

    75% {
        -webkit-transform: scale(1.04);
        transform: scale(1.04);
    }
}

@keyframes ann-scale-up {
    25% {
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
    }

    75% {
        -webkit-transform: scale(1.04);
        transform: scale(1.04);
    }
}

.ann-scale-up {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.ann-scale-up:hover,
.ann-scale-up:focus,
.ann-scale-up:active {
    -webkit-animation-name: ann-scale-up;
    animation-name: ann-scale-up;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/*Shine*/
.ann-shine {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.ann-shine::after {
    background: var(--accent-color);
    content: "";
    height: 155px;
    left: -75px;
    opacity: .4;
    position: absolute;
    top: -50px;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: 30;


}

.ann-shine:hover:after {
    left: 120%;

}

/* Simple Scale Up*/
.ann-scale-up-stay {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition: 0.2s transform ease-in;
}

.ann-scale-up-stay:hover,
.ann-scale-up-stay:focus,
.ann-scale-up-stay:active {
    transform: scale(1.04);
}

/* Simple Scale Down*/
.ann-scale-down-stay {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition: 0.2s transform ease-in;
}

.ann-scale-down-stay:hover,
.ann-scale-down-stay:focus,
.ann-scale-down-stay:active {
    transform: scale(0.96);
}

/* Simple Scale Down*/
.ann-scale-down-stay {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition: 0.2s transform ease-in;
}

/* Simple Scale Down*/
.ann-scale-down-stay:hover,
.ann-scale-down-stay:focus,
.ann-scale-down-stay:active {
    transform: scale(0.96);
}


@-webkit-keyframes ann-scale-down {
    25% {
        -webkit-transform: scale(0.97);
        transform: scale(0.97);
    }

    75% {
        -webkit-transform: scale(0.96);
        transform: scale(0.96);
    }
}

@keyframes ann-scale-down {
    25% {
        -webkit-transform: scale(0.97);
        transform: scale(0.97);
    }

    75% {
        -webkit-transform: scale(0.96);
        transform: scale(0.96);
    }
}

.ann-scale-down {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.ann-scale-down:hover,
.ann-scale-down:focus,
.ann-scale-down:active {
    -webkit-animation-name: ann-scale-down;
    animation-name: ann-scale-down;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/*gradient background*/
.ann-moving-rainbow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}

.ann-moving-rainbow:hover {
    background-image: linear-gradient(to right,
            #E7484F,
            #E7484F 16.65%,
            #F68B1D 16.65%,
            #F68B1D 33.3%,
            #FCED00 33.3%,
            #FCED00 49.95%,
            #009E4F 49.95%,
            #009E4F 66.6%,
            #00AAC3 66.6%,
            #00AAC3 83.25%,
            #732982 83.25%,
            #732982 100%,
            #E7484F 100%);
    animation: slidebg 10s linear infinite;

}


@keyframes slidebg {
    to {
        background-position: 20vw;
    }
}

/*Backround Fill*/
.ann-bg-fill {
    padding: 1em 2em;
    transition: 0.4s;
}

.ann-bg-fill:hover,
.ann-bg-fill:focus {
    box-shadow: inset 0 0 0 2em var(--accent-color);

}

/*Raise Hover*/
.ann-raise {
    transition: 0.4s;
}

.ann-raise:hover,
.ann-raise:focus {
    box-shadow: 0 0.5em 0.5em -0.4em var(--accent-color);
    transform: translateY(-0.25em);
}

/*Sliding Background*/
.ann-bg-slide {
    padding: 1em 2em;
    transition: 0.7s box-shadow ease-in-out;
}

.ann-bg-slide:hover,
.ann-bg-slide:focus {
    box-shadow: inset 30em 0 0 0 var(--accent-color);
}

/*Fading Background*/
.ann-bg-fade {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}

.ann-bg-fade:hover,
.ann-bg-fade:focus,
.ann-bg-fade:active {
    background-color: var(--accent-color);
    color: var(--main-color);
}

/*Skew Forward*/
.ann-skew-forward-up {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.ann-skew-forward-up:hover,
.ann-skew-forward-up:focus,
.ann-skew-forward-up:active {
    -webkit-transform: skew(-9deg);
    transform: skew(-9deg);
}

.ann-skew-forward-down {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.ann-skew-forward-down:hover,
.ann-skew-forward-down:focus,
.ann-skew-forward-down:active {
    -webkit-transform: skew(-9deg);
    transform: skew(-9deg);
}

/*Skew Backward*/
.ann-skew-backward-up {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.ann-skew-backward-up:hover,
.ann-skew-backward-up:focus,
.ann-skew-backward-up:active {
    -webkit-transform: skew(9deg);
    transform: skew(9deg);
}

.ann-skew-backward-down {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.ann-skew-backward-down:hover,
.ann-skew-backward-down:focus,
.ann-skew-backward-down:active {
    -webkit-transform: skew(9deg);
    transform: skew(9deg);
}

/*Border Fade*/
.ann-border-fade {
    transition: 0.32s border ease-in;
    -moz-transition: 0.32s border ease-in;
}

.ann-border-fade:hover,
.ann-border-fade:focus,
.ann-border-fade:active {
    border: 2px solid var(--accent-color);
}

/*Forward*/
.ann-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.ann-forward:hover {
    transform: translateX(7px);
}

/*Backward*/
.ann-backward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.ann-backward:hover {
    transform: translateX(-7px);
}

/*Rotate clockwise*/
.ann-rotate-clockwise {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.ann-rotate-clockwise:hover {
    transform: Rotate(9deg);
}

/*Rotate anticlockwise*/
.ann-rotate-anticlockwise {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.ann-rotate-anticlockwise:hover {
    transform: Rotate(-9deg);
}

/*Lift clockwise*/
.ann-lift-clockwise {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.ann-lift-clockwise:hover {
    transform: Rotate(9deg);
}

/*Lift anticlockwise*/
.ann-lift-anticlockwise {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.ann-lift-anticlockwise:hover {
    transform: Rotate(-9deg);
}


/*Rotate clockwise infinite*/
.ann-rotate-clockwise-infinite {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-animation-name: ann-rotate-clockwise-infinite;
    animation-name: ann-rotate-clockwise-infinite;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes ann-rotate-clockwise-infinite {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*Rotate anticlockwise infinite*/
.ann-rotate-anticlockwise-infinite {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-animation-name: ann-rotate-anticlockwise-infinite;
    animation-name: ann-rotate-anticlockwise-infinite;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes ann-rotate-anticlockwise-infinite {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/*Jump infinite*/
.ann-jump-infinite {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-animation-name: jump;
    animation-name: jump;
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/*Jump*/
.ann-jump {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.ann-jump:hover {
    -webkit-animation-name: jump;
    animation-name: jump;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@keyframes jump {
    0% {
        transform: scale(1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    }

    100% {
        transform: scale(1.05);
        box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    }
}

/*Jump Stay*/
.ann-jump-stay {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.ann-jump-stay:hover {
    -webkit-animation-name: jump;
    animation-name: jump;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/*Wiggle*/
.ann-wiggle {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.ann-wiggle:hover {
    -webkit-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
        box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
    }

    20% {
        transform: rotate(17deg);
    }

    40% {
        transform: rotate(-12deg);
    }

    60% {
        transform: rotate(3deg);
    }

    90% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(0);
        box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
    }
}

/*Wiggle Infinite*/
.ann-wiggle-infinite {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.ann-wiggle-infinite {
    -webkit-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/*Float*/
.ann-float {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.ann-float:hover {
    -webkit-animation-name: ann-hv, ann-float;
    animation-name: ann-hv, ann-float;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

@-webkit-keyframes ann-float {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes ann-float {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@-webkit-keyframes ann-hv {
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@keyframes ann-hv {
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

/* Rectangle In */
.ann-rectangle-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: var(--accent-color);
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}

.ann-rectangle-in:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e1e1e1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.ann-rectangle-in:hover,
.ann-rectangle-in:focus,
.ann-rectangle-in:active {
    color: var(--main-color);
}

.ann-rectangle-in:hover:before,
.ann-rectangle-in:focus:before,
.ann-rectangle-in:active:before {
    -webkit-transform: scale(0);
    transform: scale(0);
}

/* Rectangle Out */
.ann-rectangle-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #e1e1e1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}

.ann-rectangle-out:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--accent-color);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.ann-rectangle-out:hover,
.ann-rectangle-out:focus,
.ann-rectangle-out:active {
    color: var(--main-color);
}

.ann-rectangle-out:hover:before,
.ann-rectangle-out:focus:before,
.ann-rectangle-out:active:before {
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* Shutter In Horizontal */
.ann-shutter-in-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: var(--accent-color);
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    overflow: hidden;
}

.ann-shutter-in-horizontal:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e1e1e1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.ann-shutter-in-horizontal:hover,
.ann-shutter-in-horizontal:focus,
.ann-shutter-in-horizontal:active {
    color: var(--main-color);
}

.ann-shutter-in-horizontal:hover:before,
.ann-shutter-in-horizontal:focus:before,
.ann-shutter-in-horizontal:active:before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}

/* Shutter Out Horizontal */
.ann-shutter-out-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #6F2699; /*#e1e1e1;*/
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    overflow: hidden;
}

.ann-shutter-out-horizontal:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #cc1f93;/*var(--accent-color);*/
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.ann-shutter-out-horizontal:hover,
.ann-shutter-out-horizontal:focus,
.ann-shutter-out-horizontal:active {
    color: #ffffff; /*var(--main-color);*/
}

.ann-shutter-out-horizontal:hover:before,
.ann-shutter-out-horizontal:focus:before,
.ann-shutter-out-horizontal:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/* Shutter In Vertical */
.ann-shutter-in-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: var(--accent-color);
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    overflow: hidden;
}

.ann-shutter-in-vertical:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e1e1e1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.ann-shutter-in-vertical:hover,
.ann-shutter-in-vertical:focus,
.ann-shutter-in-vertical:active {
    color: var(--main-color);
}

.ann-shutter-in-vertical:hover:before,
.ann-shutter-in-vertical:focus:before,
.ann-shutter-in-vertical:active:before {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}

/* Shutter Out Vertical */
.ann-shutter-out-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #e1e1e1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    overflow: hidden;
}

.ann-shutter-out-vertical:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--accent-color);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.ann-shutter-out-vertical:hover,
.ann-shutter-out-vertical:focus,
.ann-shutter-out-vertical:active {
    color: var(--main-color);
}

.ann-shutter-out-vertical:hover:before,
.ann-shutter-out-vertical:focus:before,
.ann-shutter-out-vertical:active:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

/*Neon Backlight*/
.ann-neon-backlight {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.ann-neon-backlight:hover {

    animation: animateGlow 3.5s ease infinite;
}

@keyframes animateGlow {
    0% {
        box-shadow: 4px 2px 60px #1a88bb;
    }

    50% {
        box-shadow: 5px 4px 70px #dd37dd;
    }

    100% {
        box-shadow: 4px 4px 60px var(--accent-color);
    }
}

@-webkit-keyframes animateGlow {
    0% {
        box-shadow: 4px 2px 60px #1a88bb;
    }

    50% {
        box-shadow: 5px 4px 70px #dd37dd;
    }

    100% {
        box-shadow: 4px 4px 60px var(--accent-color);
    }
}

/*Fall Right*/
.ann-fall-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-animation: fall 3.8s infinite;
    animation: fall 3.8s infinite;
}

@-webkit-keyframes fall {
    from {
        -webkit-transform: rotate(0) translateX(0);
        transform: rotate(0) translateX(0);
        opacity: 1;
    }

    to {
        -webkit-transform: rotate(90deg) translateX(200px);
        transform: rotate(90deg) translateX(200px);
        opacity: 0;
    }
}

@keyframes fall {
    from {
        -webkit-transform: rotate(0) translateX(0);
        transform: rotate(0) translateX(0);
        opacity: 1;
    }

    to {
        -webkit-transform: rotate(90deg) translateX(200px);
        transform: rotate(90deg) translateX(200px);
        opacity: 0;
    }
}

/*Fall Left*/
.ann-fall-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-animation: ann-fall-left 3.8s infinite;
    animation: ann-fall-left 3.8s infinite;
}

@-webkit-keyframes ann-fall-left {
    from {
        -webkit-transform: rotate(0) translateX(0);
        transform: rotate(0) translateX(0);
        opacity: 1;
    }

    to {
        -webkit-transform: rotate(-90deg) translateX(-200px);
        transform: rotate(-90deg) translateX(-200px);
        opacity: 0;
    }
}

@keyframes ann-fall-left {
    from {
        -webkit-transform: rotate(0) translateX(0);
        transform: rotate(0) translateX(0);
        opacity: 1;
    }

    to {
        -webkit-transform: rotate(-90deg) translateX(-200px);
        transform: rotate(-90deg) translateX(-200px);
        opacity: 0;
    }
}

/*Moving Gradient Background*/
.ann-moving-gradient {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    background: linear-gradient(270deg, #d226bc, #269bd2, #26d2ad, #d5b841);
    background-size: 800% 800%;

    -webkit-animation: ann-moving-gradient 30s ease infinite;
    -moz-animation: ann-moving-gradient 30s ease infinite;
    -o-animation: ann-moving-gradient 30s ease infinite;
    animation: ann-moving-gradient 30s ease infinite;
}

@-webkit-keyframes ann-moving-gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes ann-moving-gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-o-keyframes ann-moving-gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes ann-moving-gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

/*Moving Gradient Background Opposite*/
.ann-moving-gradient-opposite {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    background: linear-gradient(270deg, #d226bc, #269bd2, #26d2ad, #d5b841);
    background-size: 800% 800%;

    -webkit-animation: ann-moving-gradient-opposite 30s ease infinite;
    -moz-animation: ann-moving-gradient-opposite 30s ease infinite;
    -o-animation: ann-moving-gradient-opposite 30s ease infinite;
    animation: ann-moving-gradient-opposite 30s ease infinite;
}

@-webkit-keyframes ann-moving-gradient-opposite {
    0% {
        background-position: 100% 50%
    }

    50% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

@-moz-keyframes ann-moving-gradient-opposite {
    0% {
        background-position: 100% 50%
    }

    50% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

@-o-keyframes ann-moving-gradient-opposite {
    0% {
        background-position: 100% 50%
    }

    50% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

@keyframes ann-moving-gradient-opposite {
    0% {
        background-position: 100% 50%
    }

    50% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

/* Glow */
.ann-glow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
}

.ann-glow:hover,
.ann-glow:focus,
.ann-glow:active {
    box-shadow: 0 1px 10px var(--accent-color);
}

/* Shadow */
.ann-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
}

.ann-shadow:hover,
.ann-shadow:focus,
.ann-shadow:active {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.45);
}

/* Grow Shadow */
.ann-grow-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow, transform;
    transition-property: box-shadow, transform;
}

.ann-grow-shadow:hover,
.ann-grow-shadow:focus,
.ann-grow-shadow:active {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.45);
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
}

/* Box Shadow Outset */
.ann-box-shadow-outset {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
}

.ann-box-shadow-outset:hover,
.ann-box-shadow-outset:focus,
.ann-box-shadow-outset:active {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45);
}

/* Box Shadow Inset */
.ann-box-shadow-inset {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
    /* Hack to improve aliasing on mobile/tablet devices */
}

.ann-box-shadow-inset:hover,
.ann-box-shadow-inset:focus,
.ann-box-shadow-inset:active {
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0);
    /* Hack to improve aliasing on mobile/tablet devices */
}

/* Float Shadow */
.ann-float-stay {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.ann-float-stay:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    /* W3C */
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
}

.ann-float-stay:hover,
.ann-float-stay:focus,
.ann-float-stay:active {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    /* move the element up by 5px */
}

.ann-float-stay:hover:before,
.ann-float-stay:focus:before,
.ann-float-stay:active:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/*Border Draw*/
.ann-border-draw {
    -webkit-transition: color 0.25s;
    transition: color 0.25s;
    background: none;
    border: 0;
    box-sizing: border-box;
    margin: 1em;
    padding: 1em 2em;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    font-size: inherit;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
    border-radius: 0 !important;
}

.ann-border-draw::before,
.ann-border-draw::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
}

.ann-border-draw::before {
    top: 0;
    left: 0;
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;

}

.ann-border-draw::after {
    bottom: 0;
    right: 0;
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.ann-border-draw:hover {
    color: #60daaa;
}

.ann-border-draw:hover::before,
.ann-border-draw:hover::after {
    width: 100%;
    height: 100%;
}

.ann-border-draw:hover::before {
    border-top-color: #60daaa;
    border-right-color: #60daaa;
    -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

.ann-border-draw:hover::after {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
    -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}



/* Round Edges */
.ann-round-edges {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: border-radius;
    transition-property: border-radius;
}

.ann-round-edges:hover,
.ann-round-edges:focus,
.ann-round-edges:active {
    border-radius: 1em !important;
}

/*Underline Left*/
.ann-underline-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.ann-underline-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #cc1f93; /*var(--accent-color);*/
    height: 1px; /*4px de base;*//*épaisseur du souligné*/
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.32s;
    transition-duration: 0.32s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.ann-underline-left:hover:before,
.ann-underline-left:focus:before,
.ann-underline-left:active:before {
    right: 0;
}

/*Underline Right*/
.ann-underline-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.ann-underline-right::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    left: 100%;
    bottom: 0;
    background: var(--accent-color);
    height: 4px;
    -webkit-transition-property: left;
    transition-property: left;
    -webkit-transition-duration: 0.32s;
    transition-duration: 0.32s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.ann-underline-right:hover:after,
.ann-underline-right:focus:after,
.ann-underline-right:active:after {
    left: 0;
}

/* Underline Center */
.ann-underline-center {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.ann-underline-center:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: var(--accent-color);
    height: 4px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.32s;
    transition-duration: 0.32s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.ann-underline-center:hover:before,
.ann-underline-center:focus:before,
.ann-underline-center:active:before {
    left: 0;
    right: 0;
}

/* Underline Show */
.ann-underline-show {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.ann-underline-show:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--accent-color);
    height: 4px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.32s;
    transition-duration: 0.32s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.ann-underline-show:hover:before,
.ann-underline-show:focus:before,
.ann-underline-show:active:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

/*Rotate Clockwise 3d*/
.ann-rotate-clockwise-3d {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-animation: ann-spin-3d 3.8s infinite;
    animation: ann-spin-3d 3.8s infinite;
}

@keyframes ann-spin-3d {
    from {
        -webkit-transform: rotateY(0deg);
    }

    to {
        -webkit-transform: rotateY(360deg);
    }
}

@-webkit-keyframes ann-spin-3d {
    from {
        -webkit-transform: rotateY(0deg);
    }

    to {
        -webkit-transform: rotateY(360deg);
    }
}

/*Rotate Anticlockwise 3d*/
.ann-rotate-anticlockwise-3d {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-animation: ann-spin-3d-anticlockwise 3.8s infinite;
    animation: ann-spin-3d-anticlockwise 3.8s infinite;
}

@keyframes ann-spin-3d-anticlockwise {
    from {
        -webkit-transform: rotateY(0deg);
    }

    to {
        -webkit-transform: rotateY(-360deg);
    }
}

@-webkit-keyframes ann-spin-3d-anticlockwise {
    from {
        -webkit-transform: rotateY(0deg);
    }

    to {
        -webkit-transform: rotateY(-360deg);
    }
}

/*Opacity*/
.ann-opacity {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
}

.ann-opacity:hover {
    opacity: 0.7;
}

/*Small Opacity*/
.ann-small-opacity {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
}

.ann-small-opacity:hover {
    opacity: 0.85;
}

/*Corner Grow*/
.ann-corner-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
    transition: 0.5s box-shadow ease-in-out;
}

.ann-corner-grow:hover {
    box-shadow: 6px 6px 0 6px var(--accent-color), -6px -6px 0 6px var(--accent-color);
}

/*Trim and Outline*/
.ann-trim-outline {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
    transition: 0.5s all ease-in-out;
}

.ann-trim-outline:hover {
    background: #2ecc71;
    border: none;
    box-shadow: 0 0 0 2px var(--main-color), 0 0 0 3px #2ecc71, 0 0 0 2px var(--main-color) inset, 0 0 0 5px #2ecc71, 7.5px 7.5px 0 2.5px var(--main-color), 10px 10px 0 5px #2ecc71;
}

/*Outlined Border*/
.ann-outlined-border {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
    transition: 0.5s box-shadow ease-in-out;
}

.ann-outlined-border:hover {
    box-shadow: 0 0 0 1px var(--main-color), 0 0 0 2px #2ecc71, 0 0 0 5px #2ecc71, 0 0 0 6.5px var(--main-color), 0 0 0 7px #2ecc71;
    border-radius: 100px;
    background: none;
    border: none;
    color: #2ecc71;
}