/* ----------------------------------------------------- Waypoints-Animations ---------------------------------------------------------- */


/* https://animista.net/play/basic/slide */

/*
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running
animation-timeline: auto

ease-out
linear
*/


/* start
-----------------------------------------------------------------*/

.block {
	display: block;
}

.reletive {
	position: relative;
}

.hidden {
	overflow: hidden;
}

.head__logo,
.head__title,
.head__subtitle,
.head__btn,
.etap-1,
.etap-2,
.etap-3,
.etap-4,
.etap-5,
.etap-6,
.etap-7,
.etap-8,
.form-page .soc__item-email,
.form-page .soc__item-teleg,
.form-page .soc__item-whats,
.footer__logo,
.footer__text,
.ftl-1,
.ftl-2,
.ftl-3,
.ftl-4,
.footer__bottom-ps,
.footer__bottom-web {
	opacity: 0;
}

.works__title,
.etaps__title,
.about__title,
.form-page__title {
	transform: scale(0);
	opacity: 0;
}

.head__wrapper {
	position: fixed;
	width: 100%;
	height: 100vh;
}


.head.head-animation .head__bg {
	transform: translateY(-110%);
}

.head__bg {
	position: absolute;
	width: 10.5%;
	height: 100%;
	left: 0;
	top: 0;
	transition: all 1s;
	transform: translateY(0%);
	background-image: linear-gradient(180deg, #323232, #161616);
}

.head__bg:nth-child(1) {
	left: 0%;
	transition-delay: 2.8s;
}

.head__bg:nth-child(2) {
	left: 10%;
	transition-delay: 2.9s;
}

.head__bg:nth-child(3) {
	left: 20%;
	transition-delay: 3s;
}

.head__bg:nth-child(4) {
	left: 30%;
	transition-delay: 3.1s;

}

.head__bg:nth-child(5) {
	left: 40%;
	transition-delay: 3.2s;

}

.head__bg:nth-child(6) {
	left: 50%;
	transition-delay: 3.3s;

}

.head__bg:nth-child(7) {
	left: 60%;
	transition-delay: 3.4s;

}

.head__bg:nth-child(8) {
	left: 70%;
	transition-delay: 3.5s;

}

.head__bg:nth-child(9) {
	left: 80%;
	transition-delay: 3.6s;

}

.head__bg:nth-child(10) {
	left: 90%;
	transition-delay: 3.7s;
}

.work-1,
.work-2,
.work-3,
.work-4,
.work-5,
.work-6,
.work-7,
.work-8,
.work-8-1,
.work-9,
.work-10,
.work-11,
.work-12 {
	position: relative;
	overflow: hidden;
}

.work-1-bg,
.work-2-bg,
.work-3-bg,
.work-4-bg,
.work-5-bg,
.work-6-bg,
.work-7-bg,
.work-8-bg,
.work-8-1-bg,
.work-9-bg,
.work-10-bg,
.work-11-bg,
.work-12-bg {
	content: '';
	position: absolute;
	background: #161616;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

.about-block {
	position: relative;
	overflow: hidden;
}

.about__block,
.form-1 {
	transform: translateY(-110%);
}

.about__img-img,
.footer__top-link {
	transform: scale(0);
}

.footer__top-link,
.footer__bottom-ps,
.footer__bottom-web {
	display: block;
}






/* search-class
-----------------------------------------------------------------*/

.head__logo-animation {
	animation: scale-up-center 1s ease-out 0.2s both;
}

.head__title-animation {
	animation: scale-up-center 1s ease-out 0.6s both;
}

.head__subtitle-animation {
	animation: scale-up-center 1.2s ease-out 1s both;
}

.head__btn-animation {
	animation: bounce-top 1.2s ease-out 1.6s both;
}

.works__title-animation,
.etaps__title-animation,
.about__title-animation,
.form-page__title-animation {
	animation: scale-up-center 1s ease-out 0.0s both;
}

.work-1-bg-animation,
.work-4-bg-animation,
.work-7-bg-animation,
.work-10-bg-animation {
	animation: slide-top 1s ease-out 0.4s both;
}

.work-2-bg-animation,
.work-5-bg-animation,
.work-8-bg-animation,
.work-11-bg-animation {
	animation: slide-top 1s ease-out 0.6s both;
}

.work-3-bg-animation,
.work-6-bg-animation,
.work-9-bg-animation,
.work-12-bg-animation {
	animation: slide-top 1s ease-out 0.8s both;
}

.work__title-1-animation,
.work__title-2-animation,
.work__title-3-animation,
.work__title-4-animation,
.work__title-5-animation,
.work__title-6-animation,
.work__title-7-animation,
.work__title-8-animation,
.work__title-9-animation,
.work__title-10-animation,
.work__title-11-animation,
.work__title-12-animation {
	animation: bottom-top-100-0 1s ease-out 0.8s both;
}

.work__description-1-animation,
.work__description-2-animation,
.work__description-3-animation,
.work__description-4-animation,
.work__description-5-animation,
.work__description-6-animation,
.work__description-7-animation,
.work__description-8-animation,
.work__description-9-animation,
.work__description-10-animation,
.work__description-11-animation,
.work__description-12-animation {
	animation: bottom-top-100-0 1s ease-out 1s both;
}

.etap-1-animation,
.soc__item-email-animation,
.footer__logo-animation,
.footer__text-animation {
	animation: scale-up-center 1s ease-out 0.0s both;
}

.etap-2-animation,
.soc__item-teleg-animation,
.ftl-1-animation {
	animation: scale-up-center 1s ease-out 0.1s both;
}

.etap-3-animation,
.soc__item-whats-animation,
.ftl-2-animation {
	animation: scale-up-center 1s ease-out 0.2s both;
}

.etap-4-animation,
.ftl-3-animation {
	animation: scale-up-center 1s ease-out 0.3s both;
}

.etap-5-animation,
.ftl-4-animation,
.work__btn-1-animation,
.work__btn-3-animation,
.work__btn-5-animation,
.work__btn-7-animation {
	animation: scale-up-center 1s ease-out 0.4s both;
}

.etap-6-animation,
.footer__bottom-ps-animation,
.work__btn-2-animation,
.work__btn-4-animation,
.work__btn-6-animation,
.work__btn-8-animation,
.work__btn-8-1-animation {
	animation: scale-up-center 1s ease-out 0.5s both;
}

.etap-7-animation,
.footer__bottom-web-animation,
.work__btn-9-animation,
.work__btn-11-animation,
.work__btn-13-animation,
.work__btn-15-animation {
	animation: scale-up-center 1s ease-out 0.6s both;
}

.etap-8-animation,
.work__btn-10-animation,
.work__btn-12-animation,
.work__btn-14-animation,
.work__btn-16-animation,
.work__btn-16-1-animation {
	animation: scale-up-center 1s ease-out 0.7s both;
}

.about__block-animation,
.form-1-animation {
	animation: top-top 1s ease-out 0s both;
}

.about__img-img-animation {
	animation: right-left 1s ease-out 0s both;
}

.header-home-opacity{
	animation: opacity 3s ease-out 1.5s both;
}




/*  animations 
-----------------------------------------------------------------*/

@keyframes slide-bottom {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(110%);
	}
}

@keyframes slide-top {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-110%);
	}
}

@keyframes slide-out-right {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(1000px);
	}
}

@keyframes slide-out-left {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-1000px);
	}
}


@keyframes bounce-top {
	0% {
		transform: translateY(-90px);
		animation-timing-function: ease-in;
		opacity: 0;
	}

	24% {
		opacity: 1;
	}

	40% {
		transform: translateY(-32px);
		animation-timing-function: ease-in;
	}

	65% {
		transform: translateY(-18px);
		animation-timing-function: ease-in;
	}

	82% {
		transform: translateY(-6px);
		animation-timing-function: ease-in;
	}

	93% {
		transform: translateY(-4px);
		animation-timing-function: ease-in;
	}

	25%,
	55%,
	75%,
	87% {
		transform: translateY(0px);
		animation-timing-function: ease-out;
	}

	100% {
		transform: translateY(0px);
		animation-timing-function: ease-out;
		opacity: 1;
	}
}


@keyframes scale-up-center {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}


@keyframes top-top {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0%);
	}
}

@keyframes bottom-top-100-0 {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}

	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}

@keyframes rotate-zoom {
	0% {
		transform: scale(1);
		opacity: 0;
	}

	50% {
		transform: scale(1.2);
		opacity: 0.5;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}


@keyframes overshootScale {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}

	70% {
		transform: scale(1.1);
		opacity: 0.5;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes top-bottom {
	0% {
		transform: translateY(0%);
	}

	100% {
		transform: translateY(100%);
	}
}

@keyframes bottom-top {
	0% {
		transform: translateY(0%);
	}

	100% {
		transform: translateY(-100%);
	}
}

@keyframes top-bottom-min {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0%);
	}
}

@keyframes scale-max-min {
	0% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);

	}
}


@keyframes scale-in-tr {
	0% {
		transform: scale(0);
		transform-origin: 100% 0%;
		opacity: 1;
	}

	100% {
		transform: scale(1);
		transform-origin: 100% 0%;
		opacity: 1;
	}
}


@keyframes right-left {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(0%);
	}
}

@keyframes left-right {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(0%);
	}
}


@keyframes bottom-top-100 {
	0% {
		transform: translateY(100px);
		opacity: 0;
	}

	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}

@keyframes opacity {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}










@media (max-width: 767px) {}