/* --------------------------------- Landing Page ScrolLDown Animation --------------------------------- */

.scrolldown_icon {
	width: 24px;
	height: 24px;
	border: 3px solid var(--bricks-color-light);
	border-radius: 50%;
	position: relative;
	animation: scrolldown_ani 1s infinite cubic-bezier(0.42, 0, 0.58, 1) 5s;
    animation-fill-mode: forwards;
	margin: auto;
}

.scrolldown_icon:hover {
	cursor:pointer;
}

.scrolldown_icon::before {
	content: '';
	position: absolute;
	top: 4px;
	left: 5px;
	width: 8px;
	height: 8px;
	border-left: 3px solid var(--bricks-color-light);
	border-bottom: 3px solid var(--bricks-color-light);
	transform: rotate(-45deg);
}

@keyframes scrolldown_ani {
	0% {
		transform: translate(0);
	}
	50% {
		transform: translateY(4px);
	}
	100% {
		transform: translate(0);
	}
}


/* --------------------------------- Image Flip --------------------------------- */

.flip_image_reverse  {
	        animation: flip_image__reverse_animation 2.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) both;
			
}


	@keyframes flip_image__reverse_animation {
		0% {
		transform: translateX(0) translateZ(0) rotateY(0);
		transform-origin: 100% 0;
		}
		100% {
		transform: translateX(-100%) translateZ(160px) rotateY(180deg);
		transform-origin: 100% 0;
		}
	}

	

  .flip_image  {
	        animation: flip_image_animation 2.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) both;
			
}
 
@keyframes flip_image_animation {
	0% {
		transform: translateX(-100%) translateZ(160px) rotateY(180deg);
		transform-origin: 100% 0;
	}
	100% {
		transform: translateX(0) translateZ(0) rotateY(0);
		transform-origin: 100% 0;
	}
  }
  
  
  /* END flip image */



  /* --------------------------------- New --------------------------------- */