/* !---------ANIMATION---------! */
@keyframes menuSlideInDown{
0%{opacity:0;visibility:hidden;transform:translateY(-100%);}
100%{opacity:1;visibility:visible;transform:translateY(0);}
}
@keyframes arrowBounceRight{
0%,100%{transform:translateX(0);}
50%{transform:translateX(5px);}
}
@keyframes spinCircle{
0%{transform:rotateZ(0deg);}
100%{transform:rotateZ(360deg);}
}
@-webkit-keyframes blink{
0%{-webkit-opacity:1;}
50%{-webkit-opacity:0;}
100%{-webkit-opacity:1;}
}
@-moz-keyframes blink{
0%{-moz-opacity:1;}
50%{-moz-opacity:0;}
100%{-moz-opacity:1;}
}
@-ms-keyframes blink{
0%{-ms-opacity:1;}
50%{-ms-opacity:0;}
100%{-ms-opacity:1;}
}
@-o-keyframes blink{
0%{-o-opacity:1;}
50%{-o-opacity:0;}
100%{-o-opacity:1;}
}
@keyframes blink{
0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes shake-anim{
0%,100%{-webkit-keyframes:rotate(0deg);transform-origin:50% 50%;}
10%{-webkit-keyframes:rotate(8deg);}
20%,40%,60%{-webkit-keyframes:rotate(-10deg);}
30%,50%,70%{-webkit-keyframes:rotate(10deg);}
80%{-webkit-keyframes:rotate(-8deg);}
90%{-webkit-keyframes:rotate(8deg);}
}
@-moz-keyframes shake-anim{
0%,100%{-moz-keyframes:rotate(0deg);transform-origin:50% 50%;}
10%{-moz-keyframes:rotate(8deg);}
20%,40%,60%{-moz-keyframes:rotate(-10deg);}
30%,50%,70%{-moz-keyframes:rotate(10deg);}
80%{-moz-keyframes:rotate(-8deg);}
90%{-moz-keyframes:rotate(8deg);}
}
@-ms-keyframes shake-anim{
0%,100%{-ms-keyframes:rotate(0deg);transform-origin:50% 50%;}
10%{-ms-keyframes:rotate(8deg);}
20%,40%,60%{-ms-keyframes:rotate(-10deg);}
30%,50%,70%{-ms-keyframes:rotate(10deg);}
80%{-ms-keyframes:rotate(-8deg);}
90%{-ms-keyframes:rotate(8deg);}
}
@-o-keyframes shake-anim{
0%,100%{-o-transform:rotate(0deg);transform-origin:50% 50%;}
10%{-o-transform:rotate(8deg);}
20%,40%,60%{-o-transform:rotate(-10deg);}
30%,50%,70%{-o-transform:rotate(10deg);}
80%{-o-transform:rotate(-8deg);}
90%{-o-transform:rotate(8deg);}
}
@keyframes shake-anim{
0%,100%{transform:rotate(0deg);transform-origin:50% 50%;}
10%{transform:rotate(8deg);}
20%,40%,60%{transform:rotate(-10deg);}
30%,50%,70%{transform:rotate(10deg);}
80%{transform:rotate(-8deg);}
90%{transform:rotate(8deg);}
}
@keyframes spin{
to{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@-webkit-keyframes spin{
to{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes blink{
0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes blink{
0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes mover{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0px);}
}
@keyframes mover{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0px);}
}
@-moz-keyframes mover{
0%{-moz-transform:translateY(0);}
50%{-moz-transform:translateY(-10px);}
100%{-moz-transform:translateY(0px);}
}
@-ms-keyframes mover{
0%{-ms-transform:translateY(0);}
50%{-ms-transform:translateY(-10px);}
100%{-ms-transform:translateY(0px);}
}
@-o-keyframes mover{
0%{-o-transform:translateY(0);}
50%{-o-transform:translateY(-10px);}
100%{-o-transform:translateY(0px);}
}
@-webkit-keyframes tracking-in-expand-fwd{
0%{letter-spacing:-0.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0;}
40%{opacity:0.6;}
100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1;}
}
@keyframes tracking-in-expand-fwd{
0%{letter-spacing:-0.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0;}
40%{opacity:0.6;}
100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1;}
}
@-webkit-keyframes xoayvong{
from{-webkit-transform:translate(-50%,-50%) rotate(0deg);-moz-transform:translate(-50%,-50%) rotate(0deg);-o-transform:translate(-50%,-50%) rotate(0deg);}
to{-webkit-transform:translate(-50%,-50%) rotate(360deg);-moz-transform:translate(-50%,-50%) rotate(360deg);-o-transform:translate(-50%,-50%) rotate(360deg);}
}
@keyframes xoayvong{
from{-webkit-transform:translate(-50%,-50%) rotate(0deg);-moz-transform:translate(-50%,-50%) rotate(0deg);-o-transform:translate(-50%,-50%) rotate(0deg);}
to{-webkit-transform:translate(-50%,-50%) rotate(360deg);-moz-transform:translate(-50%,-50%) rotate(360deg);-o-transform:translate(-50%,-50%) rotate(360deg);}
}
@keyframes top{
0%{top:0;transform:rotate(0);}
50%{top:6px;transform:rotate(0);}
100%{top:6px;transform:rotate(45deg);}
}
@keyframes top-2{
0%{top:6px;transform:rotate(45deg);}
50%{top:6px;transform:rotate(0deg);}
100%{top:0;transform:rotate(0deg);}
}
@keyframes bottom{
0%{bottom:0;transform:rotate(0);}
50%{bottom:8px;transform:rotate(0);}
100%{bottom:8px;transform:rotate(135deg);}
}
@keyframes bottom-2{
0%{bottom:8px;transform:rotate(135deg);}
50%{bottom:8px;transform:rotate(0);}
100%{bottom:0;transform:rotate(0);}
}
@keyframes scaled{
50%{transform:scale(0);}
100%{transform:scale(0);}
}
@keyframes scaled-2{
0%{transform:scale(0);}
50%{transform:scale(0);}
100%{transform:scale(1);}
}
@-webkit-keyframes rotating{
from{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes rotating{
from{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
}
@-webkit-keyframes anime{
0%{color:grey;letter-spacing:1px;text-shadow:1px 1px 0 #000;transform:translateY(0);}
50%{color:#ffc107;letter-spacing:5px;text-shadow:5px 10px 1px #000;transform:translateY(-10px);}
100%{color:grey;letter-spacing:1px;text-shadow:1px 1px 0 #000;transform:translateY(0);}
}
@keyframes anime{
0%{color:grey;letter-spacing:1px;text-shadow:1px 1px 0 #000;transform:translateY(0);}
50%{color:#ffc107;letter-spacing:5px;text-shadow:5px 10px 1px #000;transform:translateY(-10px);}
100%{color:grey;letter-spacing:1px;text-shadow:1px 1px 0 #000;transform:translateY(0);}
}
@-webkit-keyframes MaskPlay{
from{-webkit-mask-position:0 0;mask-position:0 0;}
to{-webkit-mask-position:100% 0;mask-position:100% 0;}
}
@keyframes MaskPlay{
from{-webkit-mask-position:0 0;mask-position:0 0;}
to{-webkit-mask-position:100% 0;mask-position:100% 0;}
}
@keyframes fadeInUp{
0%{opacity:0;transform:translate3d(0,100px,0);}
100%{opacity:1;transform:translate3d(0,0,0);}
}
@keyframes fadeInDown{
0%{opacity:0;transform:translate3d(0,-100px,0);}
100%{opacity:1;transform:translate3d(0,0,0);}
}
@keyframes scaleLarge{
0%{opacity:0;transform:scale(2);}
100%{opacity:1;transform:scale(1);}
}
@keyframes Start{
from{visibility:hidden;}
to{visibility:visible;}
}
@keyframes Preloader{
100%{transform:rotate(360deg);}
}
@keyframes Play{
from{background-position:0;}
to{background-position:-360px;}
}
@keyframes Ani{
0%{box-shadow:0 0 0 rgba(220,220,220,0);border:1px solid rgba(220,220,220,0);transform:scale(0);}
70%{box-shadow:0 0 50px gainsboro;border:1px solid gainsboro;transform:scale(1);}
100%{box-shadow:0 0 60px rgba(220,220,220,0);border:0 solid rgba(220,220,220,0);transform:scale(2);}
}
@keyframes BgColor{
from{background-color:#004835;}
to{background-color:#b05c1e;}
}
@keyframes Leftpage{
from{left:-100%;}
to{left:100%;}
}
@keyframes Rotate{
from{transform:rotate(0) translateZ(0);}
to{transform:rotate(360deg) translateZ(0);}
}
@keyframes empty{
0%{opacity:1;}
}
@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
@keyframes fadeOut{
0%{opacity:1;}
100%{opacity:0;}
}
@keyframes fadeInUp{
0%{opacity:0;transform:translate3d(0,100px,0);}
100%{opacity:1;transform:translate3d(0,0,0);}
}
@keyframes fadeInDown{
0%{opacity:0;transform:translate3d(0,-100px,0);}
100%{opacity:1;transform:translate3d(0,0,0);}
}
@keyframes flipInX{
0%{transform:perspective(400px) rotateX(90deg) scale(0.5);opacity:0;}
100%{transform:perspective(400px) rotateX(0) scale(1);opacity:1;}
}
@keyframes flipOutX{
0%{transform:perspective(400px) rotateX(0) scale(1);opacity:1;}
100%{transform:perspective(400px) rotateX(90deg) scale(0.5);opacity:0;}
}
@keyframes scaleSmall{
0%{opacity:0;transform:scale(1.1);}
100%{opacity:1;transform:scale(1);}
}
@keyframes scaleLarge{
0%{opacity:0;transform:scale(2);}
100%{opacity:1;transform:scale(1);}
}
@keyframes scaleLarge2{
0%{opacity:0;transform:scale(1.1);}
100%{opacity:1;transform:scale(1);}
}
@keyframes trackBallSlide{
0%,100%,30%,60%{opacity:1;transform:translateY(-12px);}
15%,50%{opacity:0;transform:translateY(8px);}
}
@keyframes goHeight{
from{transform:scale3d(1,0,1);}
to{transform:scale3d(1,1,1);}
}
@keyframes goWidth{
from{transform:scale3d(0,1,1);}
to{transform:scale3d(1,1,1);}
}
@keyframes aniHeight{
from{transform:scale3d(1,1,1);}
to{transform:scale3d(1,0,1);}
}
@keyframes aniWidth{
from{transform:scale3d(1,1,1);}
to{transform:scale3d(0,1,1);}
}
@keyframes moveLeft{
100%{transform:translateX(-100%);}
}
@keyframes moveRight{
100%{transform:translateX(100%);}
}
@keyframes toRight{
0%{opacity:0;right:-100px;}
100%{opacity:1;right:0;}
}
@keyframes toLeft{
0%{opacity:0;left:-100px;}
100%{opacity:1;left:0;}
}
@keyframes goRight{
0%{opacity:0;transform:translate3d(-100%,0,0);}
100%{opacity:1;transform:none;}
}
@keyframes goLeft{
0%{opacity:0;transform:translate3d(100%,0,0);}
100%{opacity:1;transform:none;}
}
@keyframes DrawStroke{
0%{stroke-dashoffset:1000;}
100%{stroke-dashoffset:0;}
}
@keyframes DrawStroke1{
0%{stroke-dashoffset:2500;}
100%{stroke-dashoffset:0;}
}
@keyframes goBg{
0%{transform:translate3d(-50%,0,0);}
100%{transform:none;}
}
@keyframes bounceInDown{
60%,75%,90%,from,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);}
0%{opacity:0;transform:translate3d(0,-3000px,0);}
60%{opacity:1;transform:translate3d(0,25px,0);}
75%{transform:translate3d(0,-10px,0);}
90%{transform:translate3d(0,5px,0);}
to{opacity:1;}
}
@keyframes Color2{
0%,60%{background-color:#00431c;}
20%{background-color:#b08a30;}
}
@keyframes Border{
0%,60%{border-top-color:#ffdd80;}
20%{border-top-color:#117090;}
}
@keyframes Border1{
0%,60%{border-color:#ffdd80;}
20%{border-color:#117090;}
}
@keyframes Shake{
from,to{transform:translate3d(0,0,0) rotate(0);}
0%,50%{transform:translate3d(-10px,0,0) rotate(15deg);}
25%{transform:translate3d(10px,0,0) rotate(-15deg);}
}
@keyframes Bounce{
0%{transform:translate3d(0,0,0) rotate(0);}
50%{transform:translate3d(50px,20px,0) rotate(125deg);}
100%{transform:translate3d(0,0,0) rotate(360deg);}
}
@keyframes StrokeLine{
0%{stroke-dashoffset:0;}
100%{stroke-dashoffset:-200;}
}
@keyframes StrokeLine1{
0%{stroke-dashoffset:0;}
100%{stroke-dashoffset:200;}
}
@keyframes StrokeLine2{
0%{stroke-dashoffset:0;}
100%{stroke-dashoffset:300;}
}
@keyframes BorderBox{
0%,100%{background-position:0 0;}
50%{background-position:100% 100%;}
}
@keyframes MaskPlay{
from{mask-position:0 0;}
to{mask-position:100% 0;}
}
@keyframes DrawStroke1{
0%{stroke-dashoffset:8000;}
100%{stroke-dashoffset:0;}
}
@keyframes circleFloat{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@keyframes sizingLarge{
0%{transform:scale(0.8);}
50%{transform:scale(1.1);}
100%{transform:scale(1);}
}
@keyframes sizingSmall{
0%{transform:scale(0.8);}
50%{transform:scale(1);}
100%{transform:scale(0.9);}
}
@keyframes circleFloat{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@keyframes sizingLarge{
0%{transform:scale(0.8);}
50%{transform:scale(1.05);}
100%{transform:scale(1);}
}
@keyframes sizingSmall{
0%{transform:scale(0.8);}
50%{transform:scale(1);}
100%{transform:scale(0.9);}
}
@-webkit-keyframes slideInDown1{
0%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);visibility:visible;}
100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
}
@keyframes slideInDown1{
0%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);visibility:visible;}
100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
}
@keyframes sh02{
from{opacity:0;left:0%;}
50%{opacity:1;}
to{opacity:0;left:100%;}
}
@-webkit-keyframes animborder{
0%{-webkit-transform:translateX(0);transform:translateX(0);}
100%{-webkit-transform:translateX(113px);transform:translateX(113px);}
}
@keyframes animborder{
0%{-webkit-transform:translateX(0);transform:translateX(0);}
100%{-webkit-transform:translateX(113px);transform:translateX(113px);}
}
@keyframes xoay{
0%{-webkit-transform:rotate(0);transform:rotate(0);}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes rotate{
from{transform:rotate(0);}
to{transform:rotate(360deg);}
}
@keyframes fadeup{
from{opacity:0;transform:translateX(-20px);}
to{opacity:1;transform:translateX(0);}
}
@keyframes pulse-animation{
0%{transform:scale3d(1,1,1);opacity:0;}
10%{transform:scale3d(1.1,1.1,1.1);opacity:1;}
100%{transform:scale3d(1.6,1.6,1.6);opacity:0;}
}
@keyframes border-animation{
0%{transform:scale3d(0.6,0.6,0.6);opacity:0;}
20%{transform:scale3d(1.2,1.2,1.2);opacity:1;}
100%{transform:scale3d(1.4,1.4,1.4);opacity:0;}
}
.animate-border{position:relative;display:block;width:100px;height:3px;background:var(--clr-tone);overflow:hidden;}
.animate-border:after{position:absolute;content: "";width:30px;height:3px;left:21;bottom:0;border-left:10px solid #fff;border-right:10px solid #fff;-webkit-animation:animborder 2s linear infinite;animation:animborder 2s linear infinite;}