@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(.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(.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
}

.container,.footer,.right-header,.search-form,.social-top{
animation:Start 1s steps(1,end) 0 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:.6s;
animation-delay:0;
animation-fill-mode:forwards
}

.box-bg.show .ani-one{
animation:12s linear 0 normal none infinite Bg-Animation
}

.box-bg.show .ani-two{
animation:20s linear 0 normal none infinite Bg-Animation
}

.outer-nav.second.fixed.on-show,.outer-nav.second.on-show{
animation-name:none!important;
animation-duration:0!important;
animation-delay:0!important
}

.ani-item:not(.pic-length).on-show,.map-box.ani-item.on-show{
animation-duration:1.5s;
animation-delay:0;
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:0;
animation-fill-mode:forwards
}

.details-outer h2.on-show{
animation-name:none!important;
animation-duration:0!important
}

.details-outer h2.on-show::after{
animation-name:goWidth;
animation-duration:2s;
animation-delay:0;
animation-fill-mode:forwards
}

.group-central.swiper-slide-active .ani-item:not(.pic-length),.group-central.swiper-slide-active .box-news-home::after,.group-central.swiper-slide-active .details-outer h2::after,.group-central.swiper-slide-active .mention::after,.group-central.swiper-slide-active .quote::after{
animation-duration:1.5s;
animation-fill-mode:forwards
}

.footer .content-right>h3.on-show::after,.on-show h1::after,.group-central.swiper-slide-active .content-column h3::after{
animation-name:goWidth;
animation-duration:1.5s;
animation-delay:0;
animation-fill-mode:forwards
}

.group-central.swiper-slide-active .mention::after,.group-central.swiper-slide-active .quote::after{
animation-name:goWidth;
animation-delay:1s
}

.group-central.swiper-slide-active .box-news-home::after{
animation-name:goWidth;
animation-delay:0
}

.group-central.swiper-slide-active .details-outer h2::after{
animation-name:goWidth;
animation-delay:1s
}

.group-central.swiper-slide-active .ani-item:not(.pic-length){
animation-name:fadeInUp;
animation-delay:0
}

.group-central.swiper-slide-active .pic-project::after{
animation-name:goWidth;
animation-duration:2.5s;
animation-delay:0;
animation-fill-mode:forwards
}

.group-central.swiper-slide-active .group::before{
animation-name:goRight;
animation-duration:1s;
animation-delay:1s;
animation-fill-mode:forwards
}

.group-central.swiper-slide-active .box-project-home .project-time::after,.group-central.swiper-slide-active .box-project-home .project-time::before{
animation-name:borderWidth;
animation-duration:1s;
animation-delay:.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:0;
animation-fill-mode:forwards
}

.content-column h2.on-show::after{
animation-name:goWidth;
animation-duration:1.5s;
animation-delay:.5s;
animation-fill-mode:forwards
}
}