@keyframes slideInFromTop_navbar {
  0% {
    visibility: hidden;
    transform: translateY(-100%); /* Used as a measurement for the bar sliding from the top of the screen to appear as if it is floating in the page*/
  }

  100% {
    visibility: visible;
    transform: translateY(1%); /* Used to stop the animation at a particular point - we could alter the measurement to stop it at different location points */ 
  }
}

@keyframes slideInFromTop_calloutbar {
  0% {
    visibility: hidden;
    transform: translateY(-100%); /* Used as a measurement for the bar sliding from the top of the screen to appear as if it is floating in the page*/
  }
  
  100% {
    visibility: visible;
    transform: translateY(0%); /* Used to stop the animation at a particular point - we could alter the measurement to stop it at different location points */ 
  }
} 

@keyframes cssanimation1 {
  0% {
    visibility: visible; /* changing the visibility to visible from hidden */
    opacity: 0; /* keeping the opacity of the block to be 0 initally */
    margin-top: 20%;
  }

  100% {
    visibility: visible;
    opacity: 1; /* Keeping the opacity from 0 to 1 when the block loads completely and reducing the margin-top so as to create a slide-in effect */
    margin-top: 15%;
  }
}

@keyframes cssanimation2 {
  0% {
    visibility: visible; /* changing the visibility to visible from hidden */
    opacity: 0; /* keeping the opacity of the block to be 0 initally */
    transform: translateY(1%); /* Used to stop the animation at a particular point - we could alter the measurement to stop it at different location points */ 
  }

  100% {
    visibility: visible; 
    opacity: 1; /* Keeping the opacity from 0 to 1 when the block loads completely and reducing the margin-top so as to create a slide-in effect */
    transform: translateY(0%); /* Used as a measurement for the bar sliding from the top of the screen to appear as if it is floating in the page*/
  }
}

@keyframes scrollBottom {
  0% {
    visibility: visible; /* changing the visibility to visible from hidden */
    opacity: 0; /* keeping the opacity of the block to be 0 initally */
  }

  100% {
    visibility: visible;
    opacity: 1; /* Keeping the opacity from 0 to 1 when the block loads completely and reducing the margin-top so as to create a slide-in effect */
  }
}

@media (min-width: 1170px) {
	.page-node-119 .animated-navbar {
	  animation-name: slideInFromTop_navbar; 
	  animation-duration: 840ms;  
	  animation-fill-mode: forwards;
	  animation-timing-function: ease out;
    animation-delay: 1360ms; 
    /* chnaged to 1 from 3 on 4th March */
	  visibility: hidden;	
  }
  /* .page-node-114 .animated-navbar {
	  animation-name: slideInFromTop_navbar; 
	  animation-duration: 2s !important;
	  animation-fill-mode: forwards; 
	  animation-timing-function: ease out;
	  animation-delay: 3s !important;
	  visibility: hidden;	
	} */
	
	.animated-intro {
	  animation-delay: 2210ms; /* Alter the time delay acc. to the use */
    animation-duration: 500ms; /* Animation property used for animation duration */ 
    animation-name: cssanimation1; /* Animation name for Ares Management */
    animation-fill-mode: forwards; /* Animation Property used to freeze the animation where it ends */ 
    visibility: hidden;
	}
	
	.animated-highlight {
	  visibility: hidden; /* Keeping the visibility to be hidden so that the div doesn't load at its actual time and we could delay its loading */ 
    animation-name: cssanimation2; /* Animation name for the latest news section ; we can add a similar box if we want to */
    animation-fill-mode: forwards; /* Animation Property used to freeze the animation where it ends */ 
    animation-delay: 2560ms;  /* Alter the time delay acc. to the use */
    animation-duration: 890ms; /* Animation property used for animation duration */ 
	}
	
	.animated-callout {
	  animation-name: slideInFromTop_calloutbar; /*  the animation name for the calloutbar */ 
    animation-duration: 410ms; 
    animation-fill-mode: forwards; /* Duration for the animation - alter the duration to change the effect */
    animation-delay: 3030ms;
    visibility: hidden;
	}
	
	.animated-scrollbottom {
	  animation-delay: 1170ms; /* Alter the time delay acc. to the use */
    animation-duration: 1s; /* Animation property used for animation duration */ 
    animation-name: scrollBottom; /* Animation name for Ares Management */
    animation-fill-mode: forwards; /* Animation Property used to freeze the animation where it ends */ 
    visibility: hidden;
	}
}

@keyframes fadeDownOut {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }
  50% {
    transform: translateY(5%);
    opacity: 1;
  }
  100% {
    transform: translateY(10%);
    opacity: 0;
  }
}
@keyframes fadeUpIn {
  0% {
    transform: translateY(10%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}