/*
	Visual effects on the homepage.
*/

/************** animation to fade content in *******************/
@-webkit-keyframes fadeInAni { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeInAni { from { opacity: 0 } to { opacity: 1 } }


#top-bar > div,
.top-section > div,
.section-list
{
  -webkit-animation-name: fadeInAni;
  animation-name: fadeInAni;
}

#top-bar > div {
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
}
.top-section > div {
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
}
.section-list {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

/* End animation to fade content in */

/******** arrow at bottom of screen to prompt user to scroll down *******************/

/* The arrow is manipulated by the 'setArrowVisibility' function in home-down-arrow-prompt.js */

.downArrowPrompt {
  z-index: 1;
  background: url('../Images/svg/down-arrow-pulsing-in-disc.svg') no-repeat center center;
  background-size: 6rem 6rem;
  position: fixed;
  left: calc(50vw - 1.5rem);
  height: 4rem;
  width: 4rem;
  cursor:pointer;
  bottom: -100px; /* JavaScript will adjust this to animate the arrow in/out of view */
  box-shadow: 0 0 0.5em #DDDDDD;
  background-color: white;
  border-radius: 50%;
}

@media screen and (max-width: 39.9375) {
  .downArrowPrompt {
    background-size: 5rem 5rem;
    height: 3.5rem;
    width: 3.5rem;
  }
}
/* End arrow at bottom of screen to prompt user to scroll down */