/* ---------------------header-------------------------- */
.header-logo{
  animation: fade .8s linear 0s 1 forwards; 
}
.header-menu{
  animation: fade .8s linear .2s 1 forwards; 
}

/* -----------------------index------------------------- */
.index-banner .banner-slong{
	opacity: 0;
	transition: all .3s linear;
}
.slick-active .banner-slong{
	animation: fade .5s linear .3s 1 forwards;
}
.index-banner-slong{
	transform: scale(0, 1);
	transform-origin: left;
}
.index-banner-slong{
	animation: line .5s linear .3s 1 forwards;
}

/* -----------------------about-------------------------- */
.about-info-box,
.about-info-title,
.about-info-p,
.about-info-list{
	opacity: 0;
}
.about-info-box{
	animation: fade .8s linear .3s 1 forwards;
}
.about-bg{
	animation: fade  .5s linear 0s 1  forwards;
}
.about-info-title{
  animation: fade .8s linear .5s 1 forwards;
}
.about-info-p,
.about-info-list{
  animation: fade .8s linear .8s 1 forwards;
}
/* ------------------------contact-------------------- */
.header-logo,
.header-menu,
.contact-info-form{
	opacity: 0;
}
.contact-bg-img{
	opacity: 0;
}
#contact .header-logo{
	animation: fade .8s linear .2s 1 forwards; 
}
#contact .header-menu{
	animation: fade .8s linear .4s 1 forwards; 
}
.contact-info-form{
	animation: fade .8s linear .2s 1 forwards; 
}
.contact-bg-mask span{
	transform-origin: left;
	animation:contact-bg .5s linear 0s 1 forwards; 
}
.contact-bg-img{
	animation: fade .8s linear .5s 1 forwards; 
}
#contact .footer-mask{
	animation: none;
}

@keyframes contact-bg {
  from {
    transform: scale(0,1);
  }
  to {
    transform: scale(1,1);
  }
}

@keyframes footer-icon {
  from {
  	opacity: 0;
    transform: scale(0,0.4);
    left: -10px;
  }
  to {
  	opacity: 1;
    transform: scale(1,1);
    left: -28px;
  }
}
@keyframes footer-icon2{
  from {
  	opacity: 0;
    transform: scale(0,0.6);
    bottom: -8px;
  }
  to {
  	opacity: 0.6;
    transform: scale(1,1);
    bottom: -18px;
  }
}
@keyframes footer-icon3{
  from {
  	opacity: 0;
    transform: scale(0,0);
  }
  to {
  	opacity: 0.6;
    transform: scale(1,1);
  }
}
@keyframes footer-icon4{
  from {
  	opacity: 0;
    transform: scale(0,0.4);
  }
  to {
  	opacity: 0.6;
    transform: scale(1,1);
  }
}
@keyframes fade-out{
  from {
  	opacity: 1;
  }
  to {
  	opacity: 0;
  }
}


/* -----------products----------- */
.products-class-box,
.products-edit-title,
.products-page-edit{
  opacity: 0;
}
.products-list.active{
	animation: fade 1s linear 0s 1 forwards; 
}
.products-list:hover .products-mask{
	transform: scale(1, 1);
}
.products-list:hover .products-list-title{
	font-size: 16px;
}
.products-class-box{
  animation: fade .8s linear 0s 1 forwards;
}
.products-edit-box{
  transform: scale(1, 0);
  transform-origin: top;
  animation: line2 .5s linear 0s 1 forwards;
}
.products-edit-title{
  animation: fade .8s linear .5s 1 forwards;
}
.products-line{
  transform: scale(0, 0);
  animation: line .5s linear .7s 1 forwards;
}
.products-page-edit{
  animation: fade .8s linear .9s 1 forwards;
}

/* ----------footer-------- */
.footer-list-box{
  opacity: 0;
}
.footer-list-box{
  animation: fade .8s linear .4s 1 forwards;
}
.footer-icon1{
	animation: footer-icon 2s linear 0s 1 forwards; 
}
.footer-icon2{
	animation: footer-icon2 2s linear .4s 1 forwards; 
}
.footer-icon3{
	animation: footer-icon3 1s linear .4s 1 forwards; 
}
.footer-icon4{
	animation: footer-icon4 1s linear .4s 1 forwards; 
}
.footer-mask{
	animation: footer-mask-top .5s linear 0s 1 forwards; 
}
.footer-logo{
  animation: zoomInLeft 1s linear 0s 1 forwards; 
}
.footer-line{
  transform: scale(1, 0);
  transform-origin: bottom;
  animation: line2 1s linear .2s 1 forwards; 
}

@keyframes footer-mask-top{
  from {
  	top: 400px;
  }
  to {
  	top:0;
  }
}




/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

/*the animation definition*/
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse
}
@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
  }
}
@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -ms-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -ms-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft
}