.cardHomePage {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.cardHomePage:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.servicesContentMid{
 	position:relative;
   	animation-name: servicesAnimateMid;
    animation-duration: 2s;
}

.servicesContentSide{
    position:relative;
    animation-name:servicesAnimateSide;
    animation-duration:2s;
}

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

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

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

@keyframes BusGo {
  	0%  { animation-timing-function: ease-in; opacity: 0; transform: translateX(-250px);}

	38% { animation-timing-function: ease-out; opacity: 1; transform: translateX(0);}

	55% { animation-timing-function: ease-in; transform: translateX(-68px);}

	72% { animation-timing-function: ease-out; transform: translateX(0);}

	81% { animation-timing-function: ease-in; transform: translateX(-28px);}

	90% { animation-timing-function: ease-out; transform: translateX(0);}

	95% { animation-timing-function: ease-in; transform: translateX(-8px);}

	100% { animation-timing-function: ease-out; transform: translateX(0);}
}


.theme-logo-parent  {
  position: relative;
  animation-name: BusGo;
  animation-duration: 4s;
}

/*
.theme-logo-parent :hover  {
  position: relative;
  animation-name: BusGo;
  animation-duration: 4s;
}*/


@keyframes GetItNow {
	0%,
	100% {
		transform: translateX(0);
	}

	10%,
	30%,
	50%,
	70% {
		transform: translateX(-10px);
	}

	20%,
	40%,
	60% {
		transform: translateX(10px);
	}

	80% {
		transform: translateX(8px);
	}

	90% {
		transform: translateX(-8px);
	}
}
.GetButton {
  position: relative;
    transition: .5s;
 animation: GetItNow 3s ease 5s 1 normal forwards;
}

@keyframes FadeIn {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

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

.Header {
	animation: FadeIn 5s ease 0s 1 normal forwards;
}

.Ptext {
    animation: FadeIn 5s ease 0s 1 normal forwards;
}

/*
.HeadingS2 {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s, transform 0.5s;
    }

  .HeadingS2.in-viewport {
      opacity: 1;
      transform: translateY(0);
    }
*/

@keyframes Shake {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 50%;
	}

	10% {
		transform: rotate(8deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-10deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(10deg);
	}

	80% {
		transform: rotate(-8deg);
	}

	90% {
		transform: rotate(8deg);
	}
}
.Calling {
	animation: Shake 5s ease 0s 1 normal forwards;
}


.chaseButton {
            position: absolute;
            transition: .5s;
        }

.colorCircle {
      width: 80px;
      height: 80px;
      background: radial-gradient(circle, 
        rgba(255, 165, 0, 0.8) 0%, 
        rgba(255, 165, 0, 0.4) 50%,
        rgba(255, 165, 0, 0) 70%
      );
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: opacity 0.3s ease;
      mix-blend-mode: multiply;
}