@charset "utf-8";
@-webkit-keyframes stroke {
    52% {
        transform: rotate(-180deg);
        stroke-dashoffset: 0;
    }
    52.1% {
        transform: rotate(-360deg);
        stroke-dashoffset: 0;
    }
    100% {
        transform: rotate(-180deg);
        stroke-dashoffset: 200;
    }
}

@-moz-keyframes stroke {
    52% {
        transform: rotate(-180deg);
        stroke-dashoffset: 0;
    }
    52.1% {
        transform: rotate(-360deg);
        stroke-dashoffset: 0;
    }
    100% {
        transform: rotate(-180deg);
        stroke-dashoffset: 200;
    }
}

@-ms-keyframes stroke {
    52% {
        transform: rotate(-180deg);
        stroke-dashoffset: 0;
    }
    52.1% {
        transform: rotate(-360deg);
        stroke-dashoffset: 0;
    }
    100% {
        transform: rotate(-180deg);
        stroke-dashoffset: 200;
    }
}

@-o-keyframes stroke {
    52% {
        transform: rotate(-180deg);
        stroke-dashoffset: 0;
    }
    52.1% {
        transform: rotate(-360deg);
        stroke-dashoffset: 0;
    }
    100% {
        transform: rotate(-180deg);
        stroke-dashoffset: 200;
    }
}

@keyframes stroke {
    52% {
        transform: rotate(-180deg);
        stroke-dashoffset: 0;
    }
    52.1% {
        transform: rotate(-360deg);
        stroke-dashoffset: 0;
    }
    100% {
        transform: rotate(-180deg);
        stroke-dashoffset: 200;
    }
}

@-webkit-keyframes arrow {
    0%,
    100% {
        transform: translateX(0);
        opacity: 1;
    }
    23% {
        transform: translateX(17px);
        opacity: 1;
    }
    24%,
    80% {
        transform: translateX(-22px);
        opacity: 0;
    }
    81% {
        opacity: 1;
        transform: translateX(-22px);
    }
}

@-moz-keyframes arrow {
    0%,
    100% {
        transform: translateX(0);
        opacity: 1;
    }
    23% {
        transform: translateX(17px);
        opacity: 1;
    }
    24%,
    80% {
        transform: translateX(-22px);
        opacity: 0;
    }
    81% {
        opacity: 1;
        transform: translateX(-22px);
    }
}

@-ms-keyframes arrow {
    0%,
    100% {
        transform: translateX(0);
        opacity: 1;
    }
    23% {
        transform: translateX(17px);
        opacity: 1;
    }
    24%,
    80% {
        transform: translateX(-22px);
        opacity: 0;
    }
    81% {
        opacity: 1;
        transform: translateX(-22px);
    }
}

@-o-keyframes arrow {
    0%,
    100% {
        transform: translateX(0);
        opacity: 1;
    }
    23% {
        transform: translateX(17px);
        opacity: 1;
    }
    24%,
    80% {
        transform: translateX(-22px);
        opacity: 0;
    }
    81% {
        opacity: 1;
        transform: translateX(-22px);
    }
}

@keyframes arrow {
    0%,
    100% {
        transform: translateX(0);
        opacity: 1;
    }
    23% {
        transform: translateX(17px);
        opacity: 1;
    }
    24%,
    80% {
        transform: translateX(-22px);
        opacity: 0;
    }
    81% {
        opacity: 1;
        transform: translateX(-22px);
    }
}

@-webkit-keyframes arrowUp {
    0%,
    100% {
        transform: rotate(-40deg) scaleX(1);
    }
    20%,
    80% {
        transform: rotate(0deg) scaleX(0.1);
    }
}

@-moz-keyframes arrowUp {
    0%,
    100% {
        transform: rotate(-40deg) scaleX(1);
    }
    20%,
    80% {
        transform: rotate(0deg) scaleX(0.1);
    }
}

@-ms-keyframes arrowUp {
    0%,
    100% {
        transform: rotate(-40deg) scaleX(1);
    }
    20%,
    80% {
        transform: rotate(0deg) scaleX(0.1);
    }
}

@-o-keyframes arrowUp {
    0%,
    100% {
        transform: rotate(-40deg) scaleX(1);
    }
    20%,
    80% {
        transform: rotate(0deg) scaleX(0.1);
    }
}

@keyframes arrowUp {
    0%,
    100% {
        transform: rotate(-40deg) scaleX(1);
    }
    20%,
    80% {
        transform: rotate(0deg) scaleX(0.1);
    }
}

@-webkit-keyframes arrowDown {
    0%,
    100% {
        transform: rotate(40deg) scaleX(1);
    }
    20%,
    80% {
        transform: rotate(0deg) scaleX(0.1);
    }
}

@-moz-keyframes arrowDown {
    0%,
    100% {
        transform: rotate(40deg) scaleX(1);
    }
    20%,
    80% {
        transform: rotate(0deg) scaleX(0.1);
    }
}

@-ms-keyframes arrowDown {
    0%,
    100% {
        transform: rotate(40deg) scaleX(1);
    }
    20%,
    80% {
        transform: rotate(0deg) scaleX(0.1);
    }
}

@-o-keyframes arrowDown {
    0%,
    100% {
        transform: rotate(40deg) scaleX(1);
    }
    20%,
    80% {
        transform: rotate(0deg) scaleX(0.1);
    }
}

@keyframes arrowDown {
    0%,
    100% {
        transform: rotate(40deg) scaleX(1);
    }
    20%,
    80% {
        transform: rotate(0deg) scaleX(0.1);
    }
}

/* Y100 */

@-webkit-keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@-moz-keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@-ms-keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@-o-keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

/* Y-100 */

@-webkit-keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@-moz-keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@-ms-keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@-o-keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

/* X100 */

@-webkit-keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        margin-right: -80px;
        transform: translateX(100%);
    }
}

@-moz-keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        margin-right: -80px;
        transform: translateX(100%);
    }
}

@-ms-keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        margin-right: -80px;
        transform: translateX(100%);
    }
}

@-o-keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        margin-right: -80px;
        transform: translateX(100%);
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        margin-right: -80px;
        transform: translateX(100%);
    }
}

/* X-100 */

@-webkit-keyframes slideRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

@-moz-keyframes slideRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

@-ms-keyframes slideRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

@-o-keyframes slideRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* main intro text down */

@-webkit-keyframes introTextDown {
    0% {
        opacity: 0;
        filter: blur(10px);
        top: -30px;
    }
    60% {
        opacity: 0;
        top: -25px;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        top: 0;
    }
}

@-moz-keyframes introTextDown {
    0% {
        opacity: 0;
        filter: blur(10px);
        top: -30px;
    }
    60% {
        opacity: 0;
        top: -25px;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        top: 0;
    }
}

@-ms-keyframes introTextDown {
    0% {
        opacity: 0;
        filter: blur(10px);
        top: -30px;
    }
    60% {
        opacity: 0;
        top: -25px;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        top: 0;
    }
}

@-o-keyframes introTextDown {
    0% {
        opacity: 0;
        filter: blur(10px);
        top: -30px;
    }
    60% {
        opacity: 0;
        top: -25px;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        top: 0;
    }
}

@keyframes introTextDown {
    0% {
        opacity: 0;
        filter: blur(10px);
        top: -30px;
    }
    60% {
        opacity: 0;
        top: -25px;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        top: 0;
    }
}

/* main intro text up */

@-webkit-keyframes introTextUp {
    0% {
        opacity: 0;
        top: 30px;
        filter: blur(10px);
    }
    60% {
        opacity: 0;
        top: 25px;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        top: 0;
    }
}

@-moz-keyframes introTextUp {
    0% {
        opacity: 0;
        top: 30px;
        filter: blur(10px);
    }
    60% {
        opacity: 0;
        top: 25px;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        top: 0;
    }
}

@-ms-keyframes introTextUp {
    0% {
        opacity: 0;
        top: 30px;
        filter: blur(10px);
    }
    60% {
        opacity: 0;
        top: 25px;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        top: 0;
    }
}

@-o-keyframes introTextUp {
    0% {
        opacity: 0;
        top: 30px;
        filter: blur(10px);
    }
    60% {
        opacity: 0;
        top: 25px;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        top: 0;
    }
}

@keyframes introTextUp {
    0% {
        opacity: 0;
        top: 30px;
        filter: blur(10px);
    }
    60% {
        opacity: 0;
        top: 25px;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        top: 0;
    }
}

/* main scroll down */

@-webkit-keyframes scrollDown {
    0% {
        top: 0;
    }
    100% {
        top: 150%;
    }
}

@-moz-keyframes scrollDown {
    0% {
        top: 0;
    }
    100% {
        top: 150%;
    }
}

@-ms-keyframes scrollDown {
    0% {
        top: 0;
    }
    100% {
        top: 150%;
    }
}

@-o-keyframes scrollDown {
    0% {
        top: 0;
    }
    100% {
        top: 150%;
    }
}

@keyframes scrollDown {
    0% {
        top: 0;
    }
    100% {
        top: 150%;
    }
}

/* main visual text up */

@-webkit-keyframes textAni {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-moz-keyframes textAni {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-ms-keyframes textAni {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-o-keyframes textAni {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textAni {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* main visual text up reverse */

@-webkit-keyframes textAniReverse {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

@-moz-keyframes textAniReverse {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

@-ms-keyframes textAniReverse {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

@-o-keyframes textAniReverse {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

@keyframes textAniReverse {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* main special leftmove */

@-webkit-keyframes leftMoveIn {
    0% {
        opacity: 0;
        transform: rotate(25deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

@-moz-keyframes leftMoveIn {
    0% {
        opacity: 0;
        transform: rotate(25deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

@-ms-keyframes leftMoveIn {
    0% {
        opacity: 0;
        transform: rotate(25deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

@-o-keyframes leftMoveIn {
    0% {
        opacity: 0;
        transform: rotate(25deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes leftMoveIn {
    0% {
        opacity: 0;
        transform: rotate(25deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

/* main special leftmoveout */

@-webkit-keyframes leftMoveOut {
    0% {
        opacity: 1;
        transform: rotate(0);
    }
    100% {
        opacity: 0;
        transform: rotate(-25deg);
    }
}

@-moz-keyframes leftMoveOut {
    0% {
        opacity: 1;
        transform: rotate(0);
    }
    100% {
        opacity: 0;
        transform: rotate(-25deg);
    }
}

@-ms-keyframes leftMoveOut {
    0% {
        opacity: 1;
        transform: rotate(0);
    }
    100% {
        opacity: 0;
        transform: rotate(-25deg);
    }
}

@-o-keyframes leftMoveOut {
    0% {
        opacity: 1;
        transform: rotate(0);
    }
    100% {
        opacity: 0;
        transform: rotate(-25deg);
    }
}

@keyframes leftMoveOut {
    0% {
        opacity: 1;
        transform: rotate(0);
    }
    100% {
        opacity: 0;
        transform: rotate(-25deg);
    }
}

/* main special rightmove */

@-webkit-keyframes rightMoveIn {
    0% {
        opacity: 0;
        transform: rotate(-25deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

@-moz-keyframes rightMoveIn {
    0% {
        opacity: 0;
        transform: rotate(-25deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

@-ms-keyframes rightMoveIn {
    0% {
        opacity: 0;
        transform: rotate(-25deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

@-o-keyframes rightMoveIn {
    0% {
        opacity: 0;
        transform: rotate(-25deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes rightMoveIn {
    0% {
        opacity: 0;
        transform: rotate(-25deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

/* main special rightmoveout */

@-webkit-keyframes rightMoveOut {
    0% {
        opacity: 1;
        transform: rotate(0);
    }
    100% {
        opacity: 0;
        transform: rotate(25deg);
    }
}

@-moz-keyframes rightMoveOut {
    0% {
        opacity: 1;
        transform: rotate(0);
    }
    100% {
        opacity: 0;
        transform: rotate(25deg);
    }
}

@-ms-keyframes rightMoveOut {
    0% {
        opacity: 1;
        transform: rotate(0);
    }
    100% {
        opacity: 0;
        transform: rotate(25deg);
    }
}

@-o-keyframes rightMoveOut {
    0% {
        opacity: 1;
        transform: rotate(0);
    }
    100% {
        opacity: 0;
        transform: rotate(25deg);
    }
}

@keyframes rightMoveOut {
    0% {
        opacity: 1;
        transform: rotate(0);
    }
    100% {
        opacity: 0;
        transform: rotate(25deg);
    }
}

/* header menu open */

@-webkit-keyframes menuOpen {
    80% {
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    100% {
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

@-moz-keyframes menuOpen {
    80% {
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    100% {
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

@-ms-keyframes menuOpen {
    80% {
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    100% {
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

@-o-keyframes menuOpen {
    80% {
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    100% {
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

@keyframes menuOpen {
    80% {
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    100% {
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* header menu close */

@-webkit-keyframes menuClose {
    0% {
        width: 100%;
        height: 100%;
    }
}

@-moz-keyframes menuClose {
    0% {
        width: 100%;
        height: 100%;
    }
}

@-ms-keyframes menuClose {
    0% {
        width: 100%;
        height: 100%;
    }
}

@-o-keyframes menuClose {
    0% {
        width: 100%;
        height: 100%;
    }
}

@keyframes menuClose {
    0% {
        width: 100%;
        height: 100%;
    }
}

/* img big */

@-webkit-keyframes imgBigger {
    0% {
        transform: scale(1) translate(-50%, -50%);
    }
    100% {
        transform: scale(1.08) translate(-50%, -50%);
    }
}

@-moz-keyframes imgBigger {
    0% {
        transform: scale(1) translate(-50%, -50%);
    }
    100% {
        transform: scale(1.08) translate(-50%, -50%);
    }
}

@-ms-keyframes imgBigger {
    0% {
        transform: scale(1) translate(-50%, -50%);
    }
    100% {
        transform: scale(1.08) translate(-50%, -50%);
    }
}

@-o-keyframes imgBigger {
    0% {
        transform: scale(1) translate(-50%, -50%);
    }
    100% {
        transform: scale(1.08) translate(-50%, -50%);
    }
}

@keyframes imgBigger {
    0% {
        transform: scale(1) translate(-50%, -50%);
    }
    100% {
        transform: scale(1.08) translate(-50%, -50%);
    }
}

/* windmill */

@-webkit-keyframes windMill {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-moz-keyframes windMill {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-ms-keyframes windMill {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes windMill {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes windMill {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* scroll */

@-webkit-keyframes scrollZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1.2) translate(-50%, -50%);
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes scrollZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1.2) translate(-50%, -50%);
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes scrollZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1.2) translate(-50%, -50%);
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes scrollZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1.2) translate(-50%, -50%);
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

@keyframes scrollZoomIn {
    0% {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1.2) translate(-50%, -50%);
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

/* bgmove */

@-webkit-keyframes bgMove {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}

@-moz-keyframes bgMove {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}

@-ms-keyframes bgMove {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}

@-o-keyframes bgMove {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}

@keyframes bgMove {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}

/* txt animation */

@-webkit-keyframes subTitAni {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: rotateY(0);
    }
}

@-moz-keyframes subTitAni {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: rotateY(0);
    }
}

@-ms-keyframes subTitAni {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: rotateY(0);
    }
}

@-o-keyframes subTitAni {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: rotateY(0);
    }
}

@keyframes subTitAni {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: rotateY(0);
    }
}

/* scroll down2 */

@-webkit-keyframes scrollDown2 {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px);
    }
}

@-moz-keyframes scrollDown2 {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px);
    }
}

@-ms-keyframes scrollDown2 {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px);
    }
}

@-o-keyframes scrollDown2 {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px);
    }
}

@keyframes scrollDown2 {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px);
    }
}

/* map effect */

@-webkit-keyframes mapEffect {
    0% {
        transform: translate3d(0, 10px, 0);
    }
    50% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 10px, 0);
    }
}

@-moz-keyframes mapEffect {
    0% {
        transform: translate3d(0, 10px, 0);
    }
    50% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 10px, 0);
    }
}

@-ms-keyframes mapEffect {
    0% {
        transform: translate3d(0, 10px, 0);
    }
    50% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 10px, 0);
    }
}

@-o-keyframes mapEffect {
    0% {
        transform: translate3d(0, 10px, 0);
    }
    50% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 10px, 0);
    }
}

@keyframes mapEffect {
    0% {
        transform: translate3d(0, 10px, 0);
    }
    50% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 10px, 0);
    }
}

/* circle rotate */

@-webkit-keyframes circleRotate {
    100% {
        transform: rotate(360deg);
    }
}

@-moz-keyframes circleRotate {
    100% {
        transform: rotate(360deg);
    }
}

@-ms-keyframes circleRotate {
    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes circleRotate {
    100% {
        transform: rotate(360deg);
    }
}

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

/* circle pulsate */

@-webkit-keyframes pulsate {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@-moz-keyframes pulsate {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@-ms-keyframes pulsate {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@-o-keyframes pulsate {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes pulsate {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}