body {
	width: 100wh;
	height: 90vh;
	color: #000000;
	background: white;
	/*background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;*/
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}



.shake {
	animation-delay: 1000ms; 
	animation: shake-animation 4.72s ease infinite;
	transform-origin: 50% 50%;
  }

  @keyframes shake-animation {
	 0% { transform:translate(0,0); }
	1.78571% { transform:translate(5px,0) }
	3.57143% { transform:translate(0,0) }
	5.35714% { transform:translate(5px,0) }
	7.14286% { transform:translate(0,0) }
	8.92857% { transform:translate(5px,0) }
	10.71429% { transform:translate(0,0) }
	100% { transform:translate(0,0) }
  }

 

 .btn {
  background-color: #41A4C3;
  border: none;
  color: white;
  padding: 22px 18px;
  line-height: 2.5;
  cursor: pointer;
  font-size: 3.3vw;
  border-radius: 8px;
  text-align: left;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative !important;
  display: inline-block !important;
}

.btn::after {
	content: "";
  border-radius: 8px;
  position: absolute !important;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0 !important;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.btn:hover::after {
    opacity: 1;
}


@media (min-width:600px) {
    .btn {
    	font-size: 18px;
    }
 }

 .trans {
 		background-color: transparent;
 		box-shadow: 0 0 1px 0 rgba(0,0,0,.08),0 1px 4px 0 rgba(0,0,0,.12);
 		color: #3186a0;
 }

  .olive {
 		background-color: #3186a0;
    color: white;
 }

 .green {
 		background-color: #BBD686;
 		color: black;
 }

 .red {
 		background-color: #DD1C1A;
 		color: white;
 }

 .blue {
 		background-color: #007AFF;
 		color: white;
 }



/* Darker background on mouse-over */
.btn:hover {
  background-color: #007AFF;
  color: white;
  transform: scale(1.05,1.05) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.4);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

 .olive:hover {
 		background-color: #277087;
 		color: white;
 }


 .green:hover {
 		background-color: #CFEE91;
 		color: black;
 }

 .red:hover {
 		background-color: #F85B58;
 		color: white;
 }

  .trans:hover {
 		background-color: #f7f7f7;
 		color: black;
 }


.fadeIn  {
opacity: 0;
animation: 900ms cubic-bezier(0, 0, 1, 1) normal forwards 1 running pop-in2;
-moz-animation: 900ms cubic-bezier(0, 0, 1, 1) normal forwards 1 running pop-in2; /* Firefox */
-webkit-animation: 900ms cubic-bezier(0, 0, 1, 1) normal forwards 1 running pop-in2; /* Safari and Chrome */
-o-animation: 900ms cubic-bezier(0, 0, 1, 1) normal forwards 1 running pop-in2; /* Opera */
}

.delay0{
  animation-delay: 0s; 
}

.delay50ms{
  animation-delay: 50ms; 
}

.delay100ms{
  animation-delay: 100ms; 
}

.delay150ms{
  animation-delay: 150ms; 
}

.delay200ms{
  animation-delay: 200ms; 
}

.delay250ms{
  animation-delay: 250ms; 
}

.delay300ms{
  animation-delay: 300ms; 
}

.delay350ms{
  animation-delay: 350ms; 
}

.delay400ms{
  animation-delay: 400ms; 
}

.delay450ms{
  animation-delay: 450ms; 
}

.delay500ms{
  animation-delay: 500ms; 
}

.delay550ms{
  animation-delay: 550ms; 
}

.delay600ms{
  animation-delay: 600ms; 
}

.delay650ms{
  animation-delay: 650ms; 
}

.delay700ms{
  animation-delay: 700ms; 
}

.delay750ms{
  animation-delay: 750ms; 
}

.delay800ms{
  animation-delay: 800ms; 
}

.delay850ms{
  animation-delay: 850ms; 
}

.delay900ms{
  animation-delay: 900ms; 
}

.delay950ms{
  animation-delay: 950ms; 
}

.delay1000ms{
  animation-delay: 1000ms; 
}

.delay1050ms{
  animation-delay: 1050ms; 
}

.delay1100ms{
  animation-delay: 1100ms; 
}

.delay1150ms{
  animation-delay: 1150ms; 
}

.delay1200ms{
  animation-delay: 1200ms; 
}


@keyframes pop-in2 {

0% {
    transform: translate(0px, 15px);
    opacity: 0.0;

}

25% {
    transform: translate(0px, 7.5px);
    opacity: 0.0;
}

50% {
    transform: translate(0px, 5px);
    opacity: 0.0;
}

75% {
    transform: translate(0px, 0px);
    opacity: 1;
}

100% {
    transform: translate(0px, 0px);
    opacity: 1;
}

}