@keyframes rotateLeft {
    100% {
        transform: rotate(-360deg);
    }
}
@keyframes rotateRight {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes mouseScroll {
    0% {
        -moz-transform: translate(-50%, -20px);
        -o-transform: translate(-50%, -20px);
        -webkit-transform: translate(-50%, -20px);
        -ms-transform: translate(-50%, -20px);
        transform: translate(-50%, -20px);
    }
    40% {
        -moz-transform: translate(-50%, -10px);
        -o-transform: translate(-50%, -10px);
        -webkit-transform: translate(-50%, -10px);
        -ms-transform: translate(-50%, -10px);
        transform: translate(-50%, -10px);
    }
    100% {
        -moz-transform: translate(-50%, -20px);
        -o-transform: translate(-50%, -20px);
        -webkit-transform: translate(-50%, -20px);
        -ms-transform: translate(-50%, -20px);
        transform: translate(-50%, -20px);
    }
}

@keyframes scroll {
    0% {
        height: 0;
        bottom: auto;
    }
    33% {
        top: 0;
        height: 100%;
        bottom: auto;
    }
    66% {
        top: 100%;
        height: 0;
        bottom: auto;
    }
    100% {
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOutUp {
    0% {
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -o-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -webkit-transform: translateY(-200px);
        transform: translateY(-200px);
        opacity: 0;
    }
}

@keyframes fadeOutDown {
    0% {
        -o-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -webkit-transform: translateY(-200px);
        transform: translateY(-200px);
        opacity: 1;
    }
    100% {
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }
}

@keyframes fadeOutLeft {
    0% {
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -o-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px);
        opacity: 0;
    }
}

@keyframes fadeOutRight {
    0% {
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -o-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
        opacity: 0;
    }
}

@keyframes fadeInUp {
    0% {
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInDown {
    0% {
        -o-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -webkit-transform: translateY(-200px);
        transform: translateY(-200px);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    0% {
        -o-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeInRight {
    0% {
        -o-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(100px);
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -moz-transform: translateY(100px);
        transform: translateY(100px);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        -o-transform: auto;
        -webkit-transform: auto;
        -ms-transform: auto;
        -moz-transform: auto;
        transform: auto;
    }
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        -o-transform: translateY(-200px);
        -webkit-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        transform: translateY(-200px);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        -o-transform: auto;
        -webkit-transform: auto;
        -ms-transform: auto;
        -moz-transform: auto;
        transform: auto;
    }
}

@keyframes slideInLeft {
    0% {
        -o-transform: translateX(-1000px);
        -webkit-transform: translateX(-1000px);
        -ms-transform: translateX(-1000px);
        -moz-transform: translateX(-1000px);
        transform: translateX(-1000px);
    }
    100% {
        -o-transform: auto;
        -webkit-transform: auto;
        -ms-transform: auto;
        -moz-transform: auto;
        transform: auto;
    }
}

@keyframes slideInRight {
    0% {
        -o-transform: translateX(1000px);
        -webkit-transform: translateX(1000px);
        -ms-transform: translateX(1000px);
        -moz-transform: translateX(1000px);
        transform: translateX(1000px);
    }
    100% {
        -o-transform: auto;
        -webkit-transform: auto;
        -ms-transform: auto;
        -moz-transform: auto;
        transform: auto;
    }
}

@keyframes slideOutUp {
    0% {
        -o-transform: auto;
        -webkit-transform: auto;
        -ms-transform: auto;
        -moz-transform: auto;
        transform: auto;
    }
    100% {
        -o-transform: translateY(-1000px);
        -webkit-transform: translateY(-1000px);
        -ms-transform: translateY(-1000px);
        -moz-transform: translateY(-1000px);
        transform: translateY(-1000px);
    }
}

@keyframes slideOutDown {
    0% {
        -o-transform: auto;
        -webkit-transform: auto;
        -ms-transform: auto;
        -moz-transform: auto;
        transform: auto;
    }
    100% {
        -o-transform: translateY(1000px);
        -webkit-transform: translateY(1000px);
        -ms-transform: translateY(1000px);
        -moz-transform: translateY(1000px);
        transform: translateY(1000px);
    }
}

@keyframes slideOutLeft {
    0% {
        -o-transform: auto;
        -webkit-transform: auto;
        -ms-transform: auto;
        -moz-transform: auto;
        transform: auto;
    }
    100% {
        -o-transform: translateX(-1000px);
        -webkit-transform: translateX(-1000px);
        -ms-transform: translateX(-1000px);
        -moz-transform: translateX(-1000px);
        transform: translateX(-1000px);
    }
}

@keyframes slideOutRight {
    0% {
        -o-transform: auto;
        -webkit-transform: auto;
        -ms-transform: auto;
        -moz-transform: auto;
        transform: auto;
    }
    100% {
        -o-transform: translateX(1000px);
        -webkit-transform: translateX(1000px);
        -ms-transform: translateX(1000px);
        -moz-transform: translateX(1000px);
        transform: translateX(1000px);
    }
}

@keyframes typeText {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes enlarge {
    from {
        -o-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
    to {
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.enlarge {
    animation-name: enlarge;
}

.typeText {
    width: 0;
    overflow: hidden;
    display: inline-block;
    animation: typeText;
}

.fadeOut {
    animation-name: fadeOut;
}

.fadeIn {
    animation-name: fadeIn;
}

.fadeOutUp {
    animation-name: fadeOutUp;
}

.fadeOutDown {
    animation-name: fadeOutDown;
}

.fadeOutLeft {
    animation-name: fadeOutLeft;
}

.fadeOutRight {
    animation-name: fadeOutRight;
}

.fadeInUp {
    animation-name: fadeInUp;
}

.fadeInDown {
    animation-name: fadeInDown;
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

.fadeInRight {
    animation-name: fadeInRight;
}

.slideInUp {
    animation-name: slideInUp;
}

.slideInDown {
    animation-name: slideInDown;
}

.slideInLeft {
    animation-name: slideInLeft;
}

.slideInRight {
    animation-name: slideInRight;
}

.slideOutUp {
    animation-name: slideOutUp;
}

.slideOutDown {
    animation-name: slideOutDown;
}

.slideOutLeft {
    animation-name: slideOutLeft;
}

.slideOutRight {
    animation-name: slideOutRight;
}

.spin {
    box-sizing: border-box;
    position: relative;
}

.spin::before,
.spin::after {
    content: '';
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    box-sizing: inherit;
}

.spin::before {
    border: 2px solid transparent;
}

.spin::after {
    border: 0 solid transparent;
}

.circle {
    border-radius: 100%;
    box-shadow: none;
}

.circle::before,
.circle::after {
    border-radius: 100%;
}

@media (min-width: 1025px) {
    .spin:hover {
        color: #fff;
    }

    .spin:hover::before {
        border-top-color: #fff;
        border-right-color: #fff;
        border-bottom-color: #fff;

        transition: border-top-color 0.15s linear,
        border-right-color 0.15s linear 0.10s,
        border-bottom-color 0.15s linear 0.20s;
    }

    .spin:hover::after {
        border-top: 2px solid #fff;
        border-left-width: 1px;
        border-right-width: 2px;
        transform: rotate(270deg);
        transition: transform 0.4s linear 0s,
        border-left-width 0s linear 0.35s;
    }
}