@keyframes Start {

    from {

        visibility: hidden;

    }

    to {

        visibility: visible;

    }

}

@keyframes Preloader {

    to {

        transform: rotate(360deg);

    }

}

@keyframes Play {

    from {

        background-position: 0;

    }

    to {

        background-position: -360px;

    }

}

@keyframes RotateLarge {

    from {

        opacity: 0;

        transform: scale(0) rotate(0) translateZ(0);

    }

    to {

        opacity: 1;

        transform: scale(1.2) rotate(360deg) translateZ(0);

    }

}

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@keyframes fadeOut {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}

@keyframes fadeOutUp {

    from {

        opacity: 1;

        transform: none;

    }

    to {

        opacity: 0;

        transform: translate3d(0, 200px, 0);

    }

}

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translate3d(0, 200px, 0);

    }

    to {

        opacity: 1;

        transform: none;

    }

}

@keyframes fadeInDown {

    from {

        opacity: 0;

        transform: translate3d(0, -200px, 0);

    }

    to {

        opacity: 1;

        transform: none;

    }

}

@keyframes goLeft {

    from {

        opacity: 0;

        transform: translate3d(-100%, 0, 0);

    }

    to {

        opacity: 1;

        transform: none;

    }

}

@keyframes goRight {

    from {

        opacity: 0;

        transform: translate3d(100%, 0, 0);

    }

    to {

        opacity: 1;

        transform: none;

    }

}

@keyframes toRight {

    from {

        opacity: 0;

        right: -100px;

    }

    to {

        opacity: 1;

        right: 20px;

    }

}

@keyframes scaleSmall {

    from {

        opacity: 0;

        transform: scale(0);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

@keyframes scaleLarge {

    from {

        opacity: 0;

        transform: scale(2);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

@keyframes DrawStroke {

    0% {

        stroke-dashoffset: 600;

    }

    100% {

        stroke-dashoffset: 0;

    }

}

@keyframes DrawPlay {

    0% {

        stroke-dashoffset: 800;

    }

    100% {

        stroke-dashoffset: 0;

    }

}

@keyframes Move-Arrow {

    25% {

        opacity: 1;

    }

    33.3% {

        opacity: 1;

        transform: translateY(10px);

    }

    66.6% {

        opacity: 1;

        transform: translateY(20px);

    }

    100% {

        opacity: 0;

        transform: translateY(30px) scale(0.5);

    }

}

@keyframes StrokeLine {

    0% {

        stroke-dashoffset: 0;

    }

    100% {

        stroke-dashoffset: 200;

    }

}

@keyframes FillCorlor {

    from {

        stop-color: #af6b00;

    }

    to {

        stop-color: #2f4051;

    }

}

@keyframes goHeight {

    from {

        opacity: 0;

        transform: scale3d(1, 0, 1);

    }

    to {

        opacity: 1;

        transform: scale3d(1, 1, 1);

    }

}

@keyframes goWidth {

    from {

        width: 100%;

    }

    to {

        width: 0;

    }

}

@keyframes borderWidth {

    from {

        width: 0;

    }

    to {

        width: 100%;

    }

}

@keyframes Show100 {

    from {

        stroke-dashoffset: 537;

    }

    to {

        stroke-dashoffset: 0;

    }

}

@keyframes Bg-Animation {

    0%,

    100% {

        transform: translate3d(-50%, -50%, 0) scale(0.8);

    }

    70% {

        transform: translate3d(-50%, -50%, 0) scale(1.2);

    }

}

.animated {

    animation-duration: 1s;

    animation-fill-mode: both;

}

.fadein,

.fadeindown,

.fadeinup,

.fadeoff,

.fadeon,

.fadeout,

.goleft,

.goright {

    animation-duration: 1s;

    animation-fill-mode: forwards;

}

.fade-In {

    animation-name: fadeIn;

}

.fade-Out {

    animation-name: fadeOut;

}

.fade-InUp {

    animation-name: fadeInUp;

}

.fade-OutUp {

    animation-name: fadeOutUp;

}

.fadein {

    animation-name: fadeIn;

}

.fadeout {

    animation-name: fadeOut;

}

.fadeindown {

    animation-name: fadeInDown;

}

.fadeinup {

    animation-name: fadeInUp;

}

.fadeoff {

    animation-name: fadeOff;

}

.fadeon {

    animation-name: fadeOn;

}

.goleft {

    animation-name: goLeft;

}

.goright {

    animation-name: goRight;

}

.scalelarge {

    animation: scaleLarge;

    animation-duration: 1s;

    animation-fill-mode: forwards;

}

.scalesmall {

    animation: scaleSmall;

    animation-duration: 1s;

    animation-fill-mode: forwards;

}

.right-header,

.search-form,

.social-top {

    animation: Start 1s steps(1, end) 0s 1 normal both;

}

@media screen and (min-width: 1100px) {

    .ani-item:not(.pic-length),

    .group::before,

    .input-area,

    .input-but,

    .input-text,

    .wheel {

        opacity: 0;

    }

    .wheel.show {

        animation: fadeIn;

        animation-duration: 0.6s;

        animation-delay: 0s;

        animation-fill-mode: forwards;

    }

    .box-bg.show .ani-one {

        animation: 12s linear 0s normal none infinite Bg-Animation;

    }

    .box-bg.show .ani-two {

        animation: 20s linear 0s normal none infinite Bg-Animation;

    }

    .outer-nav.second.fixed.on-show,

    .outer-nav.second.on-show {

        animation-name: none !important;

        animation-duration: 0s !important;

        animation-delay: 0s !important;

    }

    .ani-item:not(.pic-length).on-show,

    .map-box.ani-item.on-show {

        animation-duration: 1.5s;

        animation-delay: 0s;

        animation-fill-mode: forwards;

    }

    .details-outer h2.ani-item {

        opacity: 1;

    }

    .ani-item:not(.pic-length).on-show {

        animation-name: fadeInUp;

    }

    .map-box.ani-item.on-show {

        animation-name: fadeIn;

    }

    .des-project.on-show::after,

    .text-project.on-show .project-time::after,

    .text-project.on-show .project-time::before {

        animation-name: borderWidth;

        animation-duration: 1s;

        animation-delay: 1s;

        animation-fill-mode: forwards;

    }

    .content-column h3.on-show::after {

        animation-name: goWidth;

        animation-duration: 1.5s;

        animation-delay: 0s;

        animation-fill-mode: forwards;

    }

    .details-outer h2.on-show {

        animation-name: none !important;

        animation-duration: 0s !important;

    }

    .details-outer h2.on-show::after {

        animation-name: goWidth;

        animation-duration: 2s;

        animation-delay: 0s;

        animation-fill-mode: forwards;

    }

    .show-text .ani-item:not(.pic-length),

    .show-text .box-news-home::after,

    .show-text .details-outer h2::after,

    .show-text .mention::after,

    .show-text .quote::after {

        animation-duration: 1.5s;

        animation-fill-mode: forwards;

    }

    .footer .content-right > h3.on-show::after,

    .on-show h1::after,

    .show-text .content-column h3::after {

        animation-name: goWidth;

        animation-duration: 1.5s;

        animation-delay: 0s;

        animation-fill-mode: forwards;

    }

    .show-text .mention::after,

    .show-text .quote::after {

        animation-name: goWidth;

        animation-delay: 1s;

    }

    .show-text .box-news-home::after {

        animation-name: goWidth;

        animation-delay: 0s;

    }

    .show-text .details-outer h2::after {

        animation-name: goWidth;

        animation-delay: 1s;

    }

    .show-text .ani-item:not(.pic-length) {

        animation-name: fadeInUp;

        animation-delay: 0s;

    }

    .show-text .pic-project::after {

        animation-name: goWidth;

        animation-duration: 2.5s;

        animation-delay: 0s;

        animation-fill-mode: forwards;

    }

    .show-text .group::before {

        animation-name: goRight;

        animation-duration: 1s;

        animation-delay: 1s;

        animation-fill-mode: forwards;

    }

    .show-text .box-project-home .project-time::after,

    .show-text .box-project-home .project-time::before {

        animation-name: borderWidth;

        animation-duration: 1s;

        animation-delay: 0.5s;

        animation-fill-mode: forwards;

    }

    .box-top h2.on-show::after,

    .on-show .box-intro::after,

    .on-show .box-top h1::after,

    .pic-project.on-show::after {

        animation-name: goWidth;

        animation-duration: 1.5s;

        animation-delay: 0s;

        animation-fill-mode: forwards;

    }

    .content-column h2.on-show::after {

        animation-name: goWidth;

        animation-duration: 1.5s;

        animation-delay: 0.5s;

        animation-fill-mode: forwards;

    }

}