.index-about-img-box,
.index-about-bg-box,
.index-about-info-title,
.index-about-bg-box,
.index-article-box,
.index-prodcucts-title,
.index-products-class-box,
.index-products-list-box,
.page-box,
.contact-title,
.contact-info-ps,
.contact-info-form li,
.contact-button,
.contact-iinfo-img1,
.contact-iinfo-img2,
.contact-iinfo-img3{
	opacity: 0;
}



.index-about-box.active .index-about-img-box,
.index-products-box.active .index-prodcucts-title,
.index-contact-box.active .contact-title{
	animation: fade 1s linear 0s 1 forwards;
}

.index-about-box.active .index-about-bg-box,
.index-products-box.active .index-products-class-box{
	animation: fade 1s linear .2s 1 forwards;
}
.index-about-box.active  .index-article-box,
.index-about-box.active  .index-about-info-title,
.index-products-box.active .index-products-list-box{
	animation: fade 1s linear .4s 1 forwards;
}

.index-products-box.active .page-box{
	animation: fade 1s linear .6s 1 forwards;
}

.contact-info-ps.active{
	animation: fade .8s linear 0s 1 forwards;
}
.contact-info-form li.active,
.contact-button.active{
	animation: fade .8s linear 0s 1 forwards;
}

.index-contact-box.active .contact-iinfo-img1{
	animation: fade .8s linear 0s 1 forwards;
}
.index-contact-box.active .contact-iinfo-img2{
	animation: fadeInLeft .8s linear 0s 1 forwards;
}
.index-contact-box.active .contact-iinfo-img3{
	animation: fadeInRight .8s linear 0s 1 forwards;
}

.scoll span:nth-child(2){
	display: block;
	margin-top: 10px;
	animation: fadeUpout-banner-arrow 1s linear 0s infinite alternate;
}


/* ------------------------------------------------------------- */
.header-logo,
.header-menu,
.header-menu-title,
.header-menu> li:before,
.header-menu> li:last-child:after,
.index-about-img-box{
	transition: all .3s linear;
}


.header-style3.header2 .header-logo{
	width: 180px;
}

.header-style3.header2 .header-menu{
	width: calc(100% - 180px);
}
.header-style3.header2 .header-menu-title{
	font-size: 16px;
}
.header-style3.header2 .header-menu> li:before{
	height: 20px;
	top: 3px;
}

.header-style3 .header-menu> li:last-child:after{
	height: 20px;
	top: 3px;
}
.header-style3.header2{
	box-shadow: rgba(0, 0, 0, 0.7) 0px 2px 6px;
}


.index-contact-box.active .index-contact-info-border{
	top: -10px;
    left: -10px;
}
.index-contact-info-border{
	transition: all 1s linear;
}