.loading-title,
.about-info-img-box,
.about-logo-box,
.about-info-p-box p,
.products-list-box,
.products-page-img-list,
.products-page-info,
.page2-box,
.news-list-box,
.page,
.news-page-title-box,
.news-editor,
.procedure-title,
.procedure-title2,
.procedure-info-step-box,
.procedure-next-arrow,
.contact-info-form,
.contact-info-box{
  opacity: 0;
}

.loading-log,
.loading-logo-title{
  opacity: 0;
}
.line,
.loading-line{
  transform: scale(0);
}

/* banner */

.loading-log{
  animation: fade .5s linear 0s 1 forwards;
}
.loading-logo-title{
  animation: fade .5s linear 0.5s 1 forwards;
}

.loading-line{
   animation: line 1s linear .5s 1 forwards;
}

.banner-arrow{
  animation: InDown2 1.5s linear 0s infinite alternate;
}


@keyframes InDown2 {
  from {
  	opacity: 0.3;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {	
  	opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes InDown2 {
  from {
  	opacity: 0.3;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  to {
  	opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


/*---------about------------*/
.about-info-img-box{
  animation: fade .8s linear 0s 1 forwards;
}
.about-img{
	
}

.ab2{
  animation: a2 .8s linear 0.8s 1 forwards;
}
.ab3{
  animation: a3 .8s linear 0.8s 1 forwards;
}
.ab4{
  animation: a4 .8s linear 0.8s 1 forwards;
}
.ab5{
  animation: a5 .8s linear 0.8s 1 forwards;
}
@keyframes a2 {
  from {
    border-top: 50px solid #FFF;
    border-bottom: 50px solid #FFF;
  }
  to {  
    border-top: 80px solid #FFF;
    border-bottom: 20px solid #FFF;
  }
}
@keyframes a3 {
  from {
    border-top: 50px solid #FFF;
    border-bottom: 50px solid #FFF;
  }
  to {  
    border-top: 30px solid #FFF;
    border-bottom: 70px solid #FFF;
  }
}
@keyframes a4 {
  from {
    border-top: 50px solid #FFF;
    border-bottom: 50px solid #FFF;
  }
  to {  
    border-top: 100px solid #FFF;
    border-bottom: 0px solid #FFF;
  }
}
@keyframes a5 {
  from {
    border-top: 50px solid #FFF;
    border-bottom: 50px solid #FFF;
  }
  to {  
    border-top: 70px solid #FFF;
    border-bottom: 30px solid #FFF;
  }
}

.about-logo-box{
  animation: fade .8s linear 1.3s 1 forwards;
}

.about-info-p-box p:nth-child(1){
  animation: fade .8s linear 0.3s 1 forwards;
}
.about-info-p-box p:nth-child(2){
  animation: fade .8s linear 0.8s 1 forwards;
}
.about-info-p-box p:nth-child(3){
  animation: fade .8s linear 1s 1 forwards;
}
/*------------prodcuts--------*/
.products-list-box{
  animation: fade 1s linear 0s 1 forwards;
}
.products-page-img-list{
  animation: fade 1s linear 0s 1 forwards;
}
.products-page-info{
  animation: fadeInUp2 1s linear 0s 1 forwards;
}
.products-page-info .page2-box{
  animation: fade 1s linear 1s 1 forwards;
}
@keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*---------news-------------*/
.news-list-box{
  animation: fadeInUp2 .8s linear 0s 1 forwards;
}
.page{
  animation: fade 1s linear .8s 1 forwards;
}
.page2-box{
  animation: fade 1s linear 0s 1 forwards;
}

.news-page-title-box{
  animation: fade .8s linear 0s 1 forwards;
}

.news-page-line{
  transform-origin: left;
  animation: line .8s linear .5s 1 forwards;
}
.news-editor{
  animation: fade .8s linear .6s 1 forwards;
}
/* -----------------procedure-------------- */

.procedure-title{
  animation: fade .8s linear 0s 1 forwards;
}
.procedure-title2{
  animation: fade .8s linear .3s 1 forwards;
}

.p-active .procedure-info-step-box{
	animation: fade .8s linear 0s 1 forwards;
}

.p-active .procedure-next-arrow{
	animation: fade .8s linear 0.3s 1 forwards;
}


.contact-info-form{
  animation: fadeInLeft .8s linear 0s 1 forwards;
}
.contact-info-box{
  animation: fadeInRight .8s linear 0s 1 forwards;
}

.about-img{
  transform: translate3d(-10%, 0, 0);
  animation: move1 5s linear 0.5s  infinite alternate;
}

@keyframes move1 {
   from {
    
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
    
  }

  to {

     -webkit-transform: none;
    transform: none;
  }
}


.index-info-logo,
.index-slong,
.index-info2-list-p{
  opacity: 0;
}
.index-box.active .index-info-logo{
  animation: fade .8s linear 0s 1 forwards;
}
.index-box.active .index-slong{
  animation: fade .8s linear 0.3s 1 forwards;
}
.index-info1-list-box.active .index-info1-list:nth-child(1) .index-list-img-box,
.index-info1-list-box.active .index-info1-list:nth-child(2) .index-list-img-box{
    right: 0%;
    
}
.index-info1-list-box.active .index-info1-list:nth-child(3) .index-list-img-box,
.index-info1-list-box.active .index-info1-list:nth-child(4) .index-list-img-box{
    left: 0%;
  
}
.index-info2-list-box.active .index-info2-list:nth-child(1) .index-info2-list-p{
    animation: fadeInLeft .8s linear 0s 1 forwards;
}
.index-info2-list-box.active .index-info2-list:nth-child(2) .index-info2-list-p{
    animation: fadeInRight .8s linear 0.5s 1 forwards;
}