.index-products-info-box,
.index-products-box,
.index-products-more-box,
.about1-info-logo,
.about1-info-title,
.about1-info-title2,
.about1-info-p,
.about2-title,
.about2-info-p,
.about2-img-box,
.contact-title-box .prodcuts-title,
.contact-info-title,
.contact-info-form,
.button{
  opacity: 0;
}
.index-slong-box{
  opacity: 0;
}


.header2{
  opacity: 0;
  animation: fadeInDown 1s linear 1 forwards;
  box-shadow: rgba(42, 107, 180, 0.5) 0px 1px 3px, 
              rgba(42, 107, 180, 0.5) 0px 2px 3px, 
              rgba(42, 107, 180, 0.5) 0px 1px 3px, 
              rgba(42, 107, 180, 0.5) 0px 2px 3px, 
              rgba(42, 107, 180, 0.5) 0px -1px 3px, 
              rgba(42, 107, 180, 0.5) 0px -2px 3px, 
              rgba(42, 107, 180, 0.5) 0px -1px 3px, 
              rgba(42, 107, 180, 0.5) 0px -2px 3px;
}
.main2{
  margin-top: 105px;
}
/* -------------index------------------ */
.index-border-top,
.index-border-bottom,
.index-products-title-line,
.index-products-more-line{
  transform: scale(0,1);
}
.index-border-left,
.index-border-right,
.index-products-left-line,
.index-products-right-line{
  transform: scale(1,0);
}
.index-border-top,
.index-border-bottom{
  animation: line 1s linear 0s 1 forwards;
}
.index-border-left,
.index-border-right{
  animation: line2 1s linear 0s 1 forwards;
}

.index-slong-box{
  animation: fade .8s linear 0s 1 forwards;
}

.index-products-box.active{
  animation:  fade .3s linear 0s forwards;
}
.index-products-title-box.active .line-icon{
  transform: rotate(45deg);
  transition-delay: .3s;
}

.index-products-box.active .index-products-title-line{
  transform-origin: right;
  animation: line .5s linear .6s forwards;
}
.index-products-box.active .index-products-left-line{
  transform-origin: top;
  animation: line2 .5s linear 1.1s forwards;
}

.index-products-box.active .index-products-info-box{
  animation:  fade .8s linear .3s forwards;
}

.index-produts-title{
  animation: skewX .8s linear .3s forwards;
}
.index-products-more-box.active{
  animation:  fade .5s linear 0s forwards;
}

.index-products-more-box.active .line-icon{
  transform: rotate(45deg);
  transition-delay: .3s;
}
.index-products-more-box.active .index-products-more-line{
  transform-origin: left;
  animation: line .5s linear .3s forwards; 
}
.index-products-more-box.active  .index-products-right-line{
  transform-origin: bottom;
  animation: line2 .5s linear .8s forwards; 
}
@keyframes skewX {
  from {
    -webkit-transform: none;
    transform: none;
  }
  to {
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
  }
}
/* --------------about--------------- */

.about1-line-left1,
.about1-line-left2,
.about1-line-left3,
.about1-line-left4,
.about1-line-right1,
.about1-line-right2,
.about1-line-right3,
.about1-line-right4{
   transform: scale(0,1);
}
.about1-line-left1,
.about1-line-left2,
.about1-line-left3,
.about1-line-left4{
  transform-origin: left;
}

.about1-line-right1,
.about1-line-right2,
.about1-line-right3,
.about1-line-right4{
  transform-origin: right;
}
.about1-line-left1{
  animation: line 1s linear 0s forwards;
}
.about1-line-left2{
  animation: line .5s linear .2s forwards;
}
.about1-line-left3{
  animation: line .2s linear 0s forwards;
}
.about1-line-left4{
  animation: line .8s linear .3s forwards;
}
.about1-line-right1{
  animation: line .5s linear .2s forwards;
}
.about1-line-right2{
  animation: line .8s linear 0s forwards;
}
.about1-line-right3{
  animation: line .6s linear .5s forwards;
}
.about1-line-right4{
  animation: line .2s linear .7s forwards;
}

.about1-info-logo{
  animation:  fade .5s linear 0s forwards;
}
.about1-info-title{
  animation:  fadeInRight-skew .5s linear 0.2s forwards;
}
.about1-info-title2{
  animation:  fadeInUp .5s linear 0.4s forwards;
}
.about1-info-text .about1-info-p:nth-child(1){
  animation:  fadeInRight .5s linear 0.6s forwards;
}
.about1-info-text .about1-info-p:nth-child(2){
  animation:  fadeInRight .5s linear 0.7s forwards;
}
.about1-info-text .about1-info-p:nth-child(3){
  animation:  fadeInRight .5s linear 0.8s forwards;
}
.about1-info-text .about1-info-p:nth-child(4){
  animation:  fadeInRight .5s linear 0.9s forwards;
}


.about2-box.active .about2-title{
  animation:  fade .8s linear 0s forwards;
}
.about2-box.active .about2-info-p:nth-child(1){
  animation:  fadeInRight .5s linear .2s forwards;
}
.about2-box.active .about2-info-p:nth-child(2){
  animation:  fadeInRight .5s linear .3s forwards;
}
.about2-box.active .about2-info-p:nth-child(3){
  animation:  fadeInRight .5s linear .4s forwards;
}
.about2-box.active .about2-img-box{
  animation:  fade 1s linear .8s forwards;
}
/* -----------------contact------------------------- */
.products-line2,
.products-line1,
.products-line3{
  transform: scale(0, 1);
}
.contact-title-box .prodcuts-title{
  animation:  fade .8s linear 0s forwards;
}
.prodcuts-title span{
  transform-origin: right;
  animation:  line-skew  .8s linear 0s forwards;
}
.products-line1{
  transform-origin: left;
  animation:  line  .8s linear 0s forwards;
}
.products-line2{
  transform-origin: left;
  animation:  line  .5s linear .3s forwards;
}
.products-line3{
  transform-origin: left;
  animation:  line  .3s linear .5s forwards;
}
.contact-info-title{
  animation: fade .5s linear .5s forwards;
}
.contact-info-bg{
  animation: left-in .5s linear 0s forwards;
}

.contact-line-top1,
.contact-line-top2,
.contact-line-bottom1,
.contact-line-bottom2{
  transform: scaleX(0);
}
.contact-line-left1,
.contact-line-left2,
.contact-line-right1,
.contact-line-right2{
  transform: scaleY(0);
}
.contact-line-top1,
.contact-line-bottom1{
  transform-origin: left;
  animation: line .3s linear .5s forwards;
}
.contact-line-top2,
.contact-line-bottom2{
  transform-origin: right;
  animation: line .3s linear .5s forwards;
}
.contact-line-left1,
.contact-line-right1{
  transform-origin: top;
  animation: line2 .3s linear .5s forwards;
}
.contact-line-left2,
.contact-line-right2{
  transform-origin: bottom;
  animation: line2 .3s linear .5s forwards;
}
.contact-info-form{
  animation: fade .5s linear .7s forwards;
}
.button{
  animation: fade .5s linear .9s forwards;
}
@keyframes line-skew {
  from {
    transform: scaleX(0) skewX(10deg);
  }

  to {
    transform: scaleX(1) skewX(10deg);
  }
}
@keyframes fadeInRight-skew {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0) skewX(-10deg);
    transform: translate3d(10%, 0, 0) skewX(-10deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) skewX(-10deg);
    transform:  translate3d(0, 0, 0) skewX(-10deg);
  }
}

@keyframes about-img-slick {
  0% {
    -webkit-transform:translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

  }
  50%{
    transform: translate3d(-50px, 0, 0); 
    z-index: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0); 
    z-index: 1;
     }
}
@keyframes about-img-slick2 {
  0% {
    -webkit-transform:translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

  }
  50%{
    transform: translate3d(30px, 0, 0); 
    z-index: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0); 
    z-index: 1;
     }
}
@keyframes left-in {
  0% {
    -webkit-transform:translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);

  }

  100% {
    -webkit-transform: none;
    transform: none; 

     }
}