/* CSS ANIMATION */


/* SLIDES ANIMATION */

.slide_container {
	background: transparent url(../images/main_bkg.jpg);
	background-size: auto;
	background-position: 0% 100%;
	background-repeat: repeat;
}

.slide_container:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vmax;
	background: transparent url(../images/image_slide_composite.jpg);
	background-size: 100% auto;
	background-position: 0% 0%;
	background-repeat: no-repeat;
	animation: scroll 15s infinite cubic-bezier(.52, -0.39, .3, 1.43) alternate; 
}

@keyframes scroll {
	0,5% {
		transform: translateX(-17vmax);
	}
	10%,20% {
		transform: translateY(0);
	}
	30%,40% {
		transform: translateY(-17vmax);
	}
	50%,60% {
		transform: translateY(-34vmax);
	}
	70%,80% {
		/* transform: translateY(-51vmax); */
		transform: translateY(-50vmax);
	}
	90%,100% {
		/* transform: translateY(-65vmax); */
		transform: translateY(-66vmax);
	}
}

.slide_container:hover:before {
	animation-play-state: paused;
}


/* REVEAL BLOCKS */

@keyframes fadein_blur {
	0% {
		opacity: 0;
	}
	30% {
		filter: blur(5px);
		opacity: 0.5;
	}
	100% {
	`	filter: blur(0);
		opacity: 1;
	}
}

#logo_container {
	animation: fadein_blur 700ms ease both;
}

.layout--block_text {
	animation: fadein_blur 300ms ease 0.2s both;
}


/* LOGO BLOCKS ANIMATION */

.flip-container-1, .flip-container-2 {
	perspective: 350px;
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
}

.back {
	transform: rotateY(180deg);
}

.flip-container-1 .flipper {
	transform-origin: 50% 50%;
	animation: flip_block1 8s linear infinite;
}

.flip-container-2 .flipper {
	transform-origin: 50% 50%;
	animation: flip_block2 8s linear infinite;
	animation-delay: 0.7s
}

@keyframes flip_block1 {
	0%,50% {
		transform: rotateY(0deg);
	}
	55%,95% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

@keyframes flip_block2 {
	0%,50% {
		transform: rotateY(0deg);
	}
	55%,95% {
		transform: rotateY(-180deg);
	}
	100% {
		transform: rotateY(-360deg);
	}
}


/* BORDER ANIMATION */

.border_container {
	position: absolute;
	top: 1px; /* fix */
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.border_container:before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	bottom: 2px;
	width: 100%;
	background: #000;
	opacity: 0.5;
	z-index: -1;
}

.border_container span.border_part:nth-child(1) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, #a0ffc8, #a0ffc8);
	animation: border_animation1 3s linear infinite;
}

.border_container span.border_part:nth-child(2) {
	position: absolute;
	top: 0;
	right: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(to bottom, #a0ffc8, #a0ffc8);
	animation: border_animation2 3s linear infinite;
	animation-delay: 1.5s;
}

.border_container span.border_part:nth-child(3) {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to left, #a0ffc8, #a0ffc8);
	animation: border_animation1 3s linear infinite;
	animation-direction: reverse;
}

.border_container span.border_part:nth-child(4) {
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(to top, #a0ffc8, #a0ffc8);
	animation: border_animation2 3s linear infinite;
	animation-direction: reverse;
	animation-delay: 1.5s;
}

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

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


/* PROMO CIRCLE ANIMATION */

#promo_container {
	position: absolute;
	top: 20px;
	left: 220px;
	width: 100%;
	z-index: 2;
}

#promo_container svg {
	position: relative;
	left: 43px;
	top: 10px;
	width: 120px;
	height: 120px;
}

.promo_svg {
	width: 100%;
	height: auto;
	transform-box: fill-box;
	fill: #fff;
	stroke: #fff;
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.promo_text {
	font-family: 'Oswald Regular', 'Arial Narrow', Arial, sans-serif; 
	font-size: 21px;
	text-transform: uppercase;
}

.promo_cloud {
	transform-origin: 50% 50%;
	animation: rotate normal infinite 60s linear;
	fill: rgba(0, 0, 0, 0.6);
}

.promo_circle ellipse {
	fill: rgba(255, 255, 255, 0.2);
}

.promo_text {
	animation: rotate_reverse normal infinite 20s linear;
	transform-origin: 50% 50%;
}

.promo_text:hover {
	animation-play-state: paused;
}

@keyframes rotate {
	to {
		transform: rotate(360deg);
	}
}

@keyframes rotate_reverse {
	to {
		transform: rotate(-360deg);
	}
}