/* ==== Learn More Reveal ==== */
@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeInOpacityLong {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeOutOpacity {
	100% {
		opacity: 1;
	}
	0% {
		opacity: 0;
	}
}

#signs {
    display: none;
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
    animation-duration: 1s;
}
.fade-in-long{
	opacity: 1;
	animation-name: fadeInOpacityLong;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
    animation-duration: 6s;
}
  /* ==== Sun & Bar Animation ==== */
  .bar-animate {
	animation-name: grow;
	animation-duration: 1.75s;
	animation-timing-function: linear;
	animation-iteration-count: initial;
  }
  .bar-animate-no {
	  animation-name: none;
  }
  
  @keyframes grow {
	0% {
		width: 0%;
	};
	100% { 
		width: 100%; 
	};
  }
  /* ==== Sun Rise ==== */
  .sun {
    width: 152px;
    margin: 4px auto 0 auto;
    position: absolute;
    width: 180px;
    height: 152px;
    border-radius: 50%;
    left: 17%;
    z-index: 0;
    margin-top: -56px;
	background: url(../images/png/sun.png) center center no-repeat;
	animation-delay: 1s;
	animation: rise 5s ease forwards;
    animation-fill-mode: forwards;
}
.sun-no {
    width: 152px;
    margin: 4px auto 0 auto;
    position: relative;
    width: 180px;
    height: 123px;
    border-radius: 50%;
    left: 0%;
    margin-top: -65px;
	background: url(../images/png/sun.png) center center no-repeat;
	z-index: 300;
}
  .sun-front {
	background: #E2E2E2;
	z-index: 100;
	position: relative;
	height: 60px;
	padding-top: 25px;
	padding-bottom: 12px;
	animation: setz;
	animation-duration: 3s;
	animation-fill-mode: forwards;
  }
  @keyframes rise {
	0% {
	  top: 20%;
	  z-index: 0;
	}
	99% {
		z-index: 0;
	}
	100% {
	  top: -48%;
	  z-index: 300;
	}
  }
  @keyframes setz {
	0% {
		z-index: 100;
	}
	10% {
		z-index: 0;
	}
	100% {
		z-index: 0;
	}
}
.no-rise {
	animation: noRise !important;
	animation-delay: 0s !important;
	animation-duration: 0s !important;
	animation-fill-mode: forwards !important;
}
@keyframes noRise {
	0% {
		top: -48%;
		z-index: 300;
	}
}
  @media only screen and (min-width: 767px) {
	.sun-no {
		width: 152px;
		margin: 4px auto 0 auto;
		position: relative;
		width: 180px;
		height: 152px;
		border-radius: 50%;
		left: 17%;
		z-index: 0;
		margin-top: -125px;
		background: url(../images/png/sun.png) center center no-repeat;
		z-index: 300;
	}
	.bar-animate {
		animation-duration: 3s;
	  }
	.sun-front {
		height: 90px;
		animation: setz;

	}
	.sun {
		animation: rise 5s ease forwards;
		animation-delay: 1s;
		animation-fill-mode: forwards;
	}
	@keyframes rise {
		0% {
			top: -2%;
			z-index: 0;
		  }
		  99% {
			z-index: 0;
		  }
		
		100% {
		  top: -100%;
		 z-index: 300;
		}
	  }
	  @keyframes spin {
		0% { 
			opacity: 0;
			z-index: 0;
			transform: rotate(0deg); }
		10% {
			opacity: .3;
			z-index: 300;
		}
		20% {
			opacity: .5;
			z-index: 300;
		}
		30% {
			opacity: .6;
			z-index: 300;
		}
		40% {
			opacity: .7;
			z-index: 300;
		}
		50% {
			opacity: .8;
			z-index: 300;
		}
		70% {
			opacity: 1;
			z-index: 300;
		}
		100% { 
			opacity: 1;
			z-index: 300;
			transform: rotate(360deg); 
		}
	  }
  }
  @keyframes noRise {
	0% {
		top: -100%;
		z-index: 300;
	}
}
/* ==== Graph Spin ==== */
.home-graph {
	animation: wheel;
	-webkit-animation: spin 30s infinite linear;
	animation-fill-mode: forwards;
}
.home-graph-2 {
	animation: wheel;
	-webkit-animation: spin2 40s infinite linear;
	animation-fill-mode: forwards;
}
@keyframes spin {
	0% { 
		opacity: 0;
		z-index: 0;
		transform: rotate(0deg); }
	10% {
		opacity: .3;
		z-index: 300;
	}
	20% {
		opacity: .5;
		z-index: 300;
	}
	30% {
		opacity: .6;
		z-index: 300;
	}
	40% {
		opacity: .7;
		z-index: 300;
	}
	50% {
		opacity: .8;
		z-index: 300;
	}
	70% {
		opacity: 1;
		z-index: 300;
	}
	100% { 
		opacity: 1;
		z-index: 300;
		transform: rotate(360deg); 
	}
  }
  @keyframes spin2 {
	0% { 
		opacity: 1;
		z-index: 300;
		transform: rotate(0deg); }
	99% {
		opacity: 1;
		z-index: 300;
	}
	100% { 
		z-index: 300;
		transform: rotate(360deg); 
	}
  }
	@keyframes wheel {
		0%  {
			z-index: 0;
		}
		20% {
			z-index: 300;
		}
		100% {
			z-index: 300;
			
		} 
	  }
	  /* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	.animate__animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}
	button.btn-learn-more.animate__fadeInUp {
		-webkit-animation-name: fadeInUp !important;
		animation-name: fadeInUp !important;

	}
	button.btn-learn-more.flip.animate__animated.animate__fadeInUp.animate__delay-1s {
		-webkit-animation-delay: 2s !important;
  		animation-delay: 2s !important;
  		-webkit-animation-delay: var(--animate-delay) !important;
		  animation-delay: var(--animate-delay) !important;
		  -webkit-animation-duration: 2s !important;
  		animation-duration: 2s !important;
  		-webkit-animation-duration: var(--animate-duration) !important;
 		 animation-duration: var(--animate-duration) !important;
  		-webkit-animation-fill-mode: both !important;
  		animation-fill-mode: both !important;
	}
}

#bottom-graph {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 0;
	top: 55%;
	/* left: -17px; */
}

@media only screen and (min-width : 768px) {
	#bottom-graph {
		height: 600px;
		top: 50%;
		left: -17px;
	}
}