html, body {
padding:0;
margin:0;
overflow-x:hidden;
}
.anmin1, anmin2.anmin3.anmin4, anmin5, anmin6, anmin7, anmin8 {
display:none;
}
.animationHolder {
padding:0;
margin:0;
width:100%;
height:497px;
background: url(../images/bgAnimantion.jpg) no-repeat center center ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: 60px;
}
/*slid left animation*/
.slideInLeft0 {
animation-delay: 0.1s;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 60px;
left: 32%;
}
.slideInLeft1 {
animation-delay: 1.2s;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 1s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 230px;
left: 20%;
}
.slideInLeft2 {
animation-delay: 1.5s;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 1s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 310px;
left: 25%;
}
@keyframes slideInLeft {
0% {
-webkit-filter: blur(0px);
left: -500px;
animation-timing-function: ease-in;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
50% {
-webkit-filter: blur(0px);
left: 100px;
visibility: visible;
animation-timing-function: ease-in;
}
70% {
-webkit-filter: blur(5px);
transform: scale(1.5,0.5);
visibility: visible;
animation-timing-function: ease-in-out;
}
100% {
-webkit-filter: blur(0px);
animation-timing-function: ease-out;
-webkit-transform: translateX(0);
transform: translateX(0);
transform: scaleX(1);
}
}
/*safari*/
@-webkit-keyframes slideInLeft {
0% {
-webkit-filter: blur(0px);
left: -1000px;
animation-timing-function: ease-in;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
50% {
-webkit-filter: blur(0px);
left: 100px;
visibility: visible;
animation-timing-function: ease-in;
}
70% {
-webkit-filter: blur(5px);
transform: scale(1.5,0.5);
visibility: visible;
animation-timing-function: ease-in-out;
}
100% {
-webkit-filter: blur(0px);
animation-timing-function: ease-out;
-webkit-transform: translateX(0);
transform: translateX(0);
transform: scaleX(1);
}
}
/*slid right animation*/
.slideInRight0 {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 130px;
left: 22%;
}
.slideInRight1 {
animation-delay: 0.2s;
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 160px;
left: 35%;
}
.slideInRight2 {
animation-delay: 0.4s;
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 190px;
left: 40%;
}
.slideInRight3 {
animation-delay:0.6s;
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 260px;
left: 45%;
}
.slideInRight4 {
animation-delay:0.8s;
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 290px;
left: 50%;
}
.anmin9 {
display:none;
}
.slideInRight5 {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 110px;
left: 32%;
}
@keyframes slideInRight {
0% {
-webkit-filter: blur(0px);
right: -100px;
animation-timing-function: ease-in;
-webkit-transform: translateX(250%);
transform: translateX(250%) scale(2,0.5);
visibility: visible;
}
50% {
-webkit-filter: blur(0px);
right: 100px;
visibility: visible;
animation-timing-function: ease-in;
}
70% {
-webkit-filter: blur(5px);
transform: scale(1.5,0.5);
visibility: visible;
animation-timing-function: ease-in-out;
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: translateX(0);
transform: translateX(0);
transform: scaleX(1);
}
}
/*remove right*/
.slideOutRight1{
animation-delay:0.1s;
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.slideOutRight2{
animation-delay:0.3s;
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideOutRight{
0% {
animation-timing-function: ease-in;
visibility: visible;
}
30% {
-webkit-filter: blur(5px);
visibility: visible;
animation-timing-function: ease-in;
}
60% {
-webkit-filter: blur(10px);
visibility: visible;
animation-timing-function: ease-in-out;
transform: scale(1.5,0.5);
}
100% {
-webkit-filter: blur(0px);
transform: scale(1,1);
animation-timing-function: ease-out;
-webkit-transform: translateX(500%);
transform: translateX(500%);
visibility: hidden;
}
}
/*remove left*/
.slideOutLeft1{
animation-delay:0.2s;
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.slideOutLeft2{
animation-delay:0.3s;
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.slideOutLeft3{
animation-delay:0.4s;
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.slideOutLeft4{
animation-delay:0.5s;
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.slideOutLeft5{
animation-delay:0.6s;
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideOutLeft{
0% {
animation-timing-function: ease-in;
visibility: visible;
}
30% {
-webkit-filter: blur(5px);
visibility: visible;
animation-timing-function: ease-in;
}
60% {
-webkit-filter: blur(10px);
visibility: visible;
animation-timing-function: ease-in-out;
transform: scale(1.5,0.5);
}
100% {
-webkit-filter: blur(0px);
transform: scale(1,1);
animation-timing-function: ease-out;
-webkit-transform: translateX(-500%);
transform: translateX(-500%);
visibility: hidden;
}
}
/*line*/
.line1 {
animation-delay:6s;
background: #ff6a00;
width: 0px;
height: 1px;
top:130px;
-webkit-animation: animateThis .8s ease-in;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes animateThis {
0% {
width: 0px;
}
100% {
width: 85%;
}
}
.line1Remove {
-webkit-animation: line1Remove .8s ease-in;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes line1Remove {
0% {
width: 85%;
}
100% {
width: 0;
}
}
.line2{
animation-delay:6s;
background: #ff6a00;
width: 1px;
height: 1px;
top:40px;
left:85%;
-webkit-animation: line2 .8s ease-in;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes line2 {
0% {
height: 0px;
}
100% {
height: 300px;
}
}
/*b animation*/
.bAnmin1{
display:none;
position:absolute;
top:50px;
left:-200px;
}
.BslideInLeft1 {
-webkit-animation-name: BslideInLeft;
animation-name: BslideInLeft;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 160px;
left: 205px;
}
@keyframes BslideInLeft {
0% {
-webkit-filter: blur(0px);
left: -100px;
/*animation-timing-function: ease-in;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);*/
visibility: visible;
}
50% {
-webkit-filter: blur(0px);
visibility: visible;
animation-timing-function: ease-in;
}
70% {
-webkit-filter: blur(5px);
/*transform: scale(1.5,0.5);*/
visibility: visible;
animation-timing-function: ease-in-out;
}
100% {
-webkit-filter: blur(0px);
animation-timing-function: ease-out;
/*-webkit-transform: translateX(0);
transform: translateX(0);
transform: scaleX(1);*/
}
}
/*parts animation*/
/*part1*/
.BslideInLeft2 {
-webkit-animation-name: Bpart1;
animation-name: Bpart1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 160px;
left: 385px;
}
@keyframes Bpart1 {
0% {
width:40px;
height:40px;
animation-timing-function: ease-in;
}
100% {
width:295px;
height:171px;
animation-timing-function: ease-out;
top: 160px;
left:545px;
}
}
.bAnmin2 {
top:150px;
left:90%;
display:none;
position:absolute;
}
.circle{
}
/*part3*/
.BslideInLeft3 {
animation-delay:.3s;
-webkit-animation-name: Bpart3;
animation-name: Bpart3;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 160px;
left: 233px;
}
@keyframes Bpart3 {
0% {
width:40px;
height:40px;
animation-timing-function: ease-in;
}
100% {
width:93px;
height:56px;
animation-timing-function: ease-out;
top: 237px;
left: 560px;
}
}
.bAnmin3 {
top:150px;
left:90%;
display:none;
position:absolute;
}
/*part4*/
.BslideInLeft4 {
animation-delay:.6s;
-webkit-animation-name: Bpart4;
animation-name: Bpart4;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 160px;
left: 308px;
}
@keyframes Bpart4 {
0% {
width:40px;
height:40px;
animation-timing-function: ease-in;
}
100% {
width:129px;
height:41px;
animation-timing-function: ease-out;
top: 235px;
left: 350px;
}
}
.bAnmin4 {
top:165px;
left:89%;
display:none;
position:absolute;
}
/*part5*/
.BslideInLeft5 {
animation-delay:0.1s;
-webkit-animation-name: Bpart5;
animation-name: Bpart5;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 210px;
left: 470px;
}
@keyframes Bpart5 {
0% {
width:30px;
height:20px;
animation-timing-function: ease-in;
}
100% {
width:253px;
height:172px;
animation-timing-function: ease-out;
top: 160px;
left: 205px;
}
}
.bAnmin5 {
top:60px;
left:90%;
display:none;
position:absolute;
}
/*part6*/
.BslideInLeft6 {
animation-delay:0.2s;
-webkit-animation-name: Bpart6;
animation-name: Bpart6;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 300px;
left: 470px;
}
@keyframes Bpart6 {
0% {
width:30px;
height:20px;
animation-timing-function: ease-in;
}
100% {
width:161px;
height:115px;
animation-timing-function: ease-out;
top: 270px;
left: 450px;
}
}
.bAnmin6 {
top:160px;
left:90%;
display:none;
position:absolute;
}
/*part7*/
/*.BslideInLeft7 {
animation-delay:0.3s;
-webkit-animation-name: Bpart7;
animation-name: Bpart7;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 380px;
left: 640px;
}
@keyframes Bpart7 {
0% {
animation-timing-function: ease-in;
}
100% {
animation-timing-function: ease-out;
top: 380px;
left: 640px;
}
}
.bAnmin7 {
top:380px;
left:88%;
display:none;
position:absolute;
}*/
.BslideInLeft7{
animation-delay:0s;
-webkit-animation-name: textSlideToleft;
animation-name: SlidtoLeftB7;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes SlidtoLeftB7 {
0% {
animation-timing-function: ease-in;
top: 70px;
left: 120%;
}
100% {
animation-timing-function: ease-out;
top: 70px;
left: 50%;
}
}
.BslideInLeft8{
animation-delay:0s;
-webkit-animation-name: textSlideToleft;
animation-name: SlidtoLeftB8;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes SlidtoLeftB8 {
0% {
animation-timing-function: ease-in;
top: 420px;
left: 120%;
}
100% {
animation-timing-function: ease-out;
top: 430px;
left: 700px;
}
}
/*text moves*/
.textSlideToleft{
animation-delay:0s;
-webkit-animation-name: textSlideToleft;
animation-name: textSlideToleft;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes textSlideToleft {
0% {
animation-timing-function: ease-in;
top: 60px;
left: 32%;
}
100% {
animation-timing-function: ease-out;
top: 60px;
left: 50px;
transform: scale(.8);
}
}
.textSlideToleft1{
animation-delay:0;
-webkit-animation-name: textSlideToleft1;
animation-name: textSlideToleft1;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes textSlideToleft1 {
0% {
animation-timing-function: ease-in;
top: 110px;
left: 32%;
}
100% {
animation-timing-function: ease-out;
top: 110px;
left: 50px;
transform: scale(.8);
}
}
/*animate all parts*/
.Carmove{
animation-delay:0.0s;
-webkit-animation-name: Carmove1;
animation-name: Carmove1;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove1 {
0% {
top:180px;
left: 340px;
animation-timing-function: ease-in;
top: 160px;
left: 205px;
}
100% {
animation-timing-function: ease-out;
top: 250px;
left: 105px;
transform: scale(.8);
}
}
/*part2*/
.Carmove2{
-webkit-animation-name: Carmove2;
animation-name: Carmove2;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove2 {
0% {
animation-timing-function: ease-in;
top: 170px;
left: 220px;
}
100% {
animation-timing-function: ease-out;
top: 250px;
left: 410px;
transform: scale(.8);
}
}
/*part3*/
.Carmove3{
animation-delay:0s;
-webkit-animation-name: Carmove3;
animation-name: Carmove3;
-webkit-animation-duration: 0.3s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove3 {
0% {
animation-timing-function: ease-in;
top: 170px;
left: 220px;
}
100% {
animation-timing-function: ease-out;
top: 325px;
left: 445px;
transform: scale(.8);
}
}
/*part4*/
.Carmove4{
animation-delay:0s;
-webkit-animation-name: Carmove4;
animation-name: Carmove4;
-webkit-animation-duration: 0.3s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove4 {
0% {
animation-timing-function: ease-in;
top: 200px;
left: 260px;
}
100% {
animation-timing-function: ease-out;
top: 324px;
left: 280px;
transform: scale(.8);
}
}
/*part5*/
.Carmove5{
animation-delay:0s;
-webkit-animation-name: Carmove5;
animation-name: Carmove5;
-webkit-animation-duration: 0.3s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove5 {
0% {
animation-timing-function: ease-in;
top: 230px;
left: 560px;
}
100% {
animation-timing-function: ease-out;
top: 255px;
left: 140px;
transform: scale(.8);
}
}
/*part6*/
.Carmove6{
animation-delay:0s;
-webkit-animation-name: Carmove6;
animation-name: Carmove6;
-webkit-animation-duration: 0.3s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove6 {
0% {
animation-timing-function: ease-in;
top: 270px;
left: 380px;
}
100% {
animation-timing-function: ease-out;
top: 350px;
left: 290px;
transform: scale(.8);
}
}
/*part7*/
.Carmove7{
animation-delay:0s;
-webkit-animation-name: Carmove7;
animation-name: Carmove7;
-webkit-animation-duration: 0.3s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove7 {
0% {
animation-timing-function: ease-in;
top: 280px;
left: 6740px;
}
100% {
animation-timing-function: ease-out;
top: 360px;
left: 500px;
transform: scale(.8);
}
}
/*parts animation end ********************************/
/*b care 1*/
.bSlideLeft1 {
animation-delay: 0.5s;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 1s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 228px;
left: 400px;
}
.bAnmin8 {
display:none;
position:absolute;
}
/*b care 2*/
.bSlideLeft2 {
animation-delay: 0.8s;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 1s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 240px;
left: 655px;
}
.bAnmin9 {
display:none;
position:absolute;
}
/*b care 3*/
.bSlideLeft3 {
animation-delay: 1.1s;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 1s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 213px;
left: 767px;
}
.bAnmin10 {
display:none;
position:absolute;
}
.fadeAnime{
animation-delay:.2s;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
/*hide care*/
.hidden {
opacity: 0;
transition: visibility 0s .8s, opacity .3s linear;
}
/*logo*/
.logo {
padding-top:80px;
width:238px;
position:relative;
margin-left:auto;
margin-right:auto;
display:none;
}
.textB8 {
top:420px;
left:630px;
width:467px;
position:absolute;
margin-left:auto;
margin-right:auto;
display:none;
}
@keyframes zoominoutsinglefeatured {
0% {
transform: scale(5,5);
animation-timing-function: ease-out;
}
50% {
transform: scale(1.2,1.2);
animation-timing-function: ease-out;
}
100% {
transform: scale(1,1);
animation-timing-function: ease-out;
}
}
.zoominoutsinglefeatured{
animation: zoominoutsinglefeatured 1s forwards;
}
.text1 {
padding-top:20px;
text-align:center;
width:506px;
position:relative;
margin-left:auto;
margin-right:auto;
display:none;
}
.text2 {
padding-top:20px;
text-align:center;
width:306px;
position:relative;
margin-left:auto;
margin-right:auto;
display:none;
}
/* Loader 2 */
#preloader {
position: absolute;
top:110px;
left:93%;
display:none;
}
#preloader1 {
position: absolute;
top:210px;
left:93%;
display:none;
}
#preloader2 {
position: absolute;
top:320px;
left:93%;
display:none;
}
#loader {
display: block;
position: relative;
width: 60px;
height: 60px;
margin: -75px 0 0 -75px;
/*border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e02924;*/
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
/*border-radius: 50%;
border: 3px solid transparent;
border-top-color: #808080;*/
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
/*border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f34c47;*/
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*slide out last */
.slideOut5 {
-webkit-animation-duration: .2s;
-webkit-animation-name: slidein;
/*for firefox*/
-moz-animation-duration: .6s;
-moz-animation-name: slidein;
/* for opera*/
-o-animation-duration: .6s;
-o-animation-name: slidein;
/* Standard syntax*/
animation-duration: .6s;
animation-name: slidein;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes slidein {
from {
top:70px;
left: 305px;
}
to {
left:-2000px;
top: 70px;
}
}
.slideOut1 {
-webkit-animation-duration: .2s;
-webkit-animation-name: slidein;
/*for firefox*/
-moz-animation-duration: .6s;
-moz-animation-name: slidein;
/* for opera*/
-o-animation-duration: .6s;
-o-animation-name: slidein;
/* Standard syntax*/
animation-duration: .6s;
animation-name: slidein;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes slidein {
from {
top:240px;
left: 305px;
}
to {
left:2000px;
top: 240px;
}
}
.slideOut2 {
-webkit-animation-duration: .5s;
-webkit-animation-name: slidein2;
/*for firefox*/
-moz-animation-duration: 1s;
-moz-animation-name: slidein2;
/* for opera*/
-o-animation-duration: 1s;
-o-animation-name: slidein2;
/* Standard syntax*/
animation-duration: 1s;
animation-name: slidein2;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes slidein2 {
from {
top: 228px;
left: 520px;
}
to {
left:2000px;
top: 228px;
}
}
.slideOut3 {
-webkit-animation-duration: .2s;
-webkit-animation-name: slidein3;
/*for firefox*/
-moz-animation-duration: 1s;
-moz-animation-name: slidein3;
/* for opera*/
-o-animation-duration: 1s;
-o-animation-name: slidein3;
/* Standard syntax*/
animation-duration: 1s;
animation-name: slidein3;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes slidein3 {
from {
top: 240px;
left: 674px;
}
to {
left:2000px;
top: 240px;
}
}
.slideOut4 {
-webkit-animation-duration: 1s;
-webkit-animation-name: slidein4;
/*for firefox*/
-moz-animation-duration: 1s;
-moz-animation-name: slidein4;
/* for opera*/
-o-animation-duration: 1s;
-o-animation-name: slidein4;
/* Standard syntax*/
animation-duration: 1s;
animation-name: slidein4;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes slidein4 {
from {
top: 213px;
left: 717px;
}
to {
left:2000px;
top: 213px;
}
}
/*slide out last */
.slideOutText1 {
-webkit-animation-duration: .2s;
-webkit-animation-name: slideOutText1;
/*for firefox*/
-moz-animation-duration: 1s;
-moz-animation-name: slideOutText1;
/* for opera*/
-o-animation-duration: 1s;
-o-animation-name: slideOutText1;
/* Standard syntax*/
animation-duration: 1s;
animation-name: slideOutText1;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes slideOutText1 {
from {
top: 160px;
left: 50px;
}
to {
left:2000px;
top: 160px;
}
}
.slideOutText2 {
-webkit-animation-duration: .2s;
-webkit-animation-name: slideOutText2;
/*for firefox*/
-moz-animation-duration: 1s;
-moz-animation-name: slideOutText2;
/* for opera*/
-o-animation-duration: 1s;
-o-animation-name: slideOutText2;
/* Standard syntax*/
animation-duration: 1s;
animation-name: slideOutText2;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes slideOutText2 {
from {
top: 210px;
left: 50px;
}
to {
left:2000px;
top: 210px;
}
}
#checking {
display:none;
}
@media screen and (max-width: 360px) {
#checking {
display:block;
}
/*b animation*/
.bAnmin1{
display:none;
position:absolute;
top:150px;
left:-200px;
}
.BslideInLeft1 {
-webkit-animation-name: BslideInLeft;
animation-name: BslideInLeft;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 260px;
left: 105px;
}
@keyframes BslideInLeft {
0% {
-webkit-filter: blur(0px);
left: -100px;
/*animation-timing-function: ease-in;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);*/
visibility: visible;
}
50% {
-webkit-filter: blur(0px);
visibility: visible;
animation-timing-function: ease-in;
}
70% {
-webkit-filter: blur(5px);
/*transform: scale(1.5,0.5);*/
visibility: visible;
animation-timing-function: ease-in-out;
}
100% {
-webkit-filter: blur(0px);
animation-timing-function: ease-out;
/*-webkit-transform: translateX(0);
transform: translateX(0);
transform: scaleX(1);*/
}
}
/*parts animation*/
/*part1*/
.BslideInLeft2 {
-webkit-animation-name: Bpart1;
animation-name: Bpart1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top:250px;
left: 285px;
}
@keyframes Bpart1 {
0% {
width:40px;
height:40px;
animation-timing-function: ease-in;
}
100% {
width:375px;
height:206px;
animation-timing-function: ease-out;
top: 260px;
left: 285px;
}
}
.bAnmin2 {
top:250px;
left:90%;
display:none;
position:absolute;
}
.circle{
}
/*part3*/
.BslideInLeft3 {
animation-delay:.3s;
-webkit-animation-name: Bpart3;
animation-name: Bpart3;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 260px;
left: 133px;
}
@keyframes Bpart3 {
0% {
width:40px;
height:40px;
animation-timing-function: ease-in;
}
100% {
width:207px;
height:206px;
animation-timing-function: ease-out;
top: 260px;
left: 133px;
}
}
.bAnmin3 {
top:250px;
left:90%;
display:none;
position:absolute;
}
/*part4*/
.BslideInLeft4 {
animation-delay:.6s;
-webkit-animation-name: Bpart4;
animation-name: Bpart4;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 260px;
left: 208px;
}
@keyframes Bpart4 {
0% {
width:40px;
height:40px;
animation-timing-function: ease-in;
}
100% {
width:157px;
height:59px;
animation-timing-function: ease-out;
top: 260px;
left: 208px;
}
}
.bAnmin4 {
top:150px;
left:90%;
display:none;
position:absolute;
}
/*part5*/
.BslideInLeft5 {
animation-delay:0.1s;
-webkit-animation-name: Bpart5;
animation-name: Bpart5;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 210px;
left: 370px;
}
@keyframes Bpart5 {
0% {
width:30px;
height:20px;
animation-timing-function: ease-in;
}
100% {
width:105px;
height:40px;
animation-timing-function: ease-out;
top: 210px;
left: 370px;
}
}
.bAnmin5 {
top:250px;
left:90%;
display:none;
position:absolute;
}
/*part6*/
.BslideInLeft6 {
animation-delay:0.3s;
-webkit-animation-name: Bpart6;
animation-name: Bpart6;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 400px;
left: 370px;
}
@keyframes Bpart6 {
0% {
width:30px;
height:20px;
animation-timing-function: ease-in;
}
100% {
width:90px;
height:30px;
animation-timing-function: ease-out;
top: 400px;
left: 370px;
}
}
.bAnmin6 {
top:250px;
left:90%;
display:none;
position:absolute;
}
/*part7*/
.BslideInLeft7 {
animation-delay:0.8s;
-webkit-animation-name: Bpart7;
animation-name: Bpart7;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 380px;
left: 540px;
}
@keyframes Bpart7 {
0% {
width:90px;
height:30px;
animation-timing-function: ease-in;
}
100% {
width:90px;
height:30px;
animation-timing-function: ease-out;
top: 380px;
left: 540px;
}
}
.bAnmin7 {
top:380px;
left:88%;
display:none;
position:absolute;
}
/*text moves*/
.textSlideToleft{
animation-delay:0s;
-webkit-animation-name: textSlideToleft;
animation-name: textSlideToleft;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes textSlideToleft {
0% {
animation-timing-function: ease-in;
top: 160px;
left: 32%;
}
100% {
animation-timing-function: ease-out;
top: 160px;
left: 50px;
transform: scale(.8);
}
}
.textSlideToleft1{
animation-delay:0;
-webkit-animation-name: textSlideToleft1;
animation-name: textSlideToleft1;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes textSlideToleft1 {
0% {
animation-timing-function: ease-in;
top: 210px;
left: 32%;
}
100% {
animation-timing-function: ease-out;
top: 210px;
left: 50px;
transform: scale(.8);
}
}
/*animate all parts*/
.Carmove{
animation-delay:0s;
-webkit-animation-name: Carmove1;
animation-name: Carmove1;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove1 {
0% {
top:280px;
left: 340px;
animation-timing-function: ease-in;
top: 160px;
left: 105px;
}
100% {
animation-timing-function: ease-out;
top: 250px;
left: 5px;
transform: scale(.8);
}
}
/*part2*/
.Carmove2{
-webkit-animation-name: Carmove2;
animation-name: Carmove2;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove2 {
0% {
animation-timing-function: ease-in;
top: 160px;
left: 285px;
}
100% {
animation-timing-function: ease-out;
top: 255px;
left: 177px;
transform: scale(.8);
}
}
/*part3*/
.Carmove3{
animation-delay:0s;
-webkit-animation-name: Carmove3;
animation-name: Carmove3;
-webkit-animation-duration: 0.3s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove3 {
0% {
animation-timing-function: ease-in;
top: 160px;
left: 260px;
}
100% {
animation-timing-function: ease-out;
top: 255px;
left: 64px;
transform: scale(.8);
}
}
/*part4*/
.Carmove4{
animation-delay:0s;
-webkit-animation-name: Carmove4;
animation-name: Carmove4;
-webkit-animation-duration: 0.3s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove4 {
0% {
animation-timing-function: ease-in;
top: 160px;
left: 208px;
}
100% {
animation-timing-function: ease-out;
top: 270px;
left: 125px;
transform: scale(.8);
}
}
/*part5*/
.Carmove5{
animation-delay:0s;
-webkit-animation-name: Carmove5;
animation-name: Carmove5;
-webkit-animation-duration: 0.3s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove5 {
0% {
animation-timing-function: ease-in;
top: 210px;
left: 370px;
}
100% {
animation-timing-function: ease-out;
top: 310px;
left: 270px;
transform: scale(.8);
}
}
/*part6*/
.Carmove6{
animation-delay:0s;
-webkit-animation-name: Carmove6;
animation-name: Carmove6;
-webkit-animation-duration: 0.3s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove6 {
0% {
animation-timing-function: ease-in;
top: 300px;
left: 370px;
}
100% {
animation-timing-function: ease-out;
top: 380px;
left: 270px;
transform: scale(.8);
}
}
/*part7*/
.Carmove7{
animation-delay:0s;
-webkit-animation-name: Carmove7;
animation-name: Carmove7;
-webkit-animation-duration: 0.3s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
}
@keyframes Carmove7 {
0% {
animation-timing-function: ease-in;
top: 280px;
left: 540px;
}
100% {
animation-timing-function: ease-out;
top: 360px;
left: 400px;
transform: scale(.8);
}
}
/*parts animation end ********************************/
/*b care 1*/
.bSlideLeft1 {
animation-delay: 0.5s;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 1s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 228px;
left: 300px;
}
.bAnmin8 {
display:none;
position:absolute;
}
/*b care 2*/
.bSlideLeft2 {
animation-delay: 0.8s;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 1s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 240px;
left: 555px;
}
.bAnmin9 {
display:none;
position:absolute;
}
/*b care 3*/
.bSlideLeft3 {
animation-delay: 1.1s;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 1s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 213px;
left: 667px;
}
.bAnmin10 {
display:none;
position:absolute;
}
/*slide out last */
.slideOut1 {
-webkit-animation-duration: .2s;
-webkit-animation-name: slidein;
/*for firefox*/
-moz-animation-duration: .6s;
-moz-animation-name: slidein;
/* for opera*/
-o-animation-duration: .6s;
-o-animation-name: slidein;
/* Standard syntax*/
animation-duration: .6s;
animation-name: slidein;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes slidein {
from {
top: 240px;
left: 305px;
}
to {
left:2000px;
top: 240px;
}
}
.slideOut2 {
animation-delay:.1s;
-webkit-animation-duration: .5s;
-webkit-animation-name: slidein2;
/*for firefox*/
-moz-animation-duration: 1s;
-moz-animation-name: slidein2;
/* for opera*/
-o-animation-duration: 1s;
-o-animation-name: slidein2;
/* Standard syntax*/
animation-duration: 1s;
animation-name: slidein2;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes slidein2 {
from {
top: 228px;
left: 520px;
}
to {
left:2000px;
top: 228px;
}
}
.slideOut3 {
animation-delay:.2s;
-webkit-animation-duration: .2s;
-webkit-animation-name: slidein3;
/*for firefox*/
-moz-animation-duration: 1s;
-moz-animation-name: slidein3;
/* for opera*/
-o-animation-duration: 1s;
-o-animation-name: slidein3;
/* Standard syntax*/
animation-duration: 1s;
animation-name: slidein3;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes slidein3 {
from {
top: 240px;
left: 674px;
}
to {
left:2000px;
top: 240px;
}
}
.slideOut4 {
animation-delay:.3s;
-webkit-animation-duration: 1s;
-webkit-animation-name: slidein4;
/*for firefox*/
-moz-animation-duration: 1s;
-moz-animation-name: slidein4;
/* for opera*/
-o-animation-duration: 1s;
-o-animation-name: slidein4;
/* Standard syntax*/
animation-duration: 1s;
animation-name: slidein4;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes slidein4 {
from {
top: 213px;
left: 717px;
}
to {
left:2000px;
top: 213px;
}
}
/*slide out last */
.slideOutText1 {
-webkit-animation-duration: .2s;
-webkit-animation-name: slideOutText1;
/*for firefox*/
-moz-animation-duration: 1s;
-moz-animation-name: slideOutText1;
/* for opera*/
-o-animation-duration: 1s;
-o-animation-name: slideOutText1;
/* Standard syntax*/
animation-duration: 1s;
animation-name: slideOutText1;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes slideOutText1 {
from {
top: 60px;
left: 50px;
}
to {
left:2000px;
top: 60px;
}
}
.slideOutText2 {
-webkit-animation-duration: .2s;
-webkit-animation-name: slideOutText2;
/*for firefox*/
-moz-animation-duration: 1s;
-moz-animation-name: slideOutText2;
/* for opera*/
-o-animation-duration: 1s;
-o-animation-name: slideOutText2;
/* Standard syntax*/
animation-duration: 1s;
animation-name: slideOutText2;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
position:absolute;
}
@-webkit-keyframes slideOutText2 {
from {
top: 110px;
left: 50px;
}
to {
left:2000px;
top: 110px;
}
}
}