.index-about-bg,
.index-about-info-box,
.index-about-title-box,
.index-about,
.index-works-title-ch,
.index-works-list,
.works-title,
.works-list,
.works-class-box,
.works-page-date,
.back-button,
.works-page-img,
.edit-box,
.service-page-title,
.service-title,
.query-p,
.query-list,
.button,
.contact-map-box,
.contact-info,
.query-contact,
.query-contact-textarea-box{
	opacity: 0;
}


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

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

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

.index-about-box.active .index-about-title-box{
	animation: fade .8s linear 0s 1 forwards;
}
.index-about-box.active .index-about{
	animation: fade .8s linear .5s 1 forwards;
}

.index-works-line,
.works-line{
	transform: scale(0, 1);
	transform-origin: left;
}
.service-line{
	transform: scale(0, 1);
}
.index-works-title-box.active .index-works-line,
.works-line.active{
	animation: line .5s linear 0s 1 forwards;
}


.index-works-title-box.active .index-works-title-ch,
.index-works-list.active,
.works-title.active,
.works-list.active,
.works-class-box.active,
.works-page-date.active,
.works-page-img.active,
.edit-box.active,
.service-page-title.active,
.service-title.active,
.query-p.active,
.query-list.active,
.query-contact.active,
.query-contact-textarea-box.active,
.button.active{
	animation: fade .8s linear 0s 1 forwards;
}

.works-title-box.active .works-line,
.service-line.active{
	animation: line .5s linear .2s 1 forwards;
}

.back-button.active{
	animation: fade .8s linear .2s 1 forwards;
}
.contact-info-box.active .contact-info{
	animation: fadeInLeft .8s linear 0s 1 forwards;
}

.contact-info-box.active .contact-map-box{
	animation: fadeInRight .8s linear .4s 1 forwards;
}	
.contact-info-form li.contact-button:hover label{
	left: calc(50% - 26.22px);
}