/*CSS Keyframe Animations */

@keyframes anim-pulse
{
	from
	{
	filter: hue-rotate(0deg);
	filter: contrast(150%);
	opacity: 0.5;
	
	}
	to{
	filter: contrast(50%);
	filter: hue-rotate(360deg);
	opacity: 1;
	
	}
	
}

@keyframes rotating-gear
{
	0%{transform: rotate(0);}
	16.67%{transform:  rotate(90deg);}
	33.33%{transform:  rotate(180deg);}
	50%{transform: rotate(360deg) ;}
	66.67%{transform: rotate(90deg) ;}
	83.33%{transform: rotate(180deg) ;}
	100%{transform: rotate(360deg) ;}
}

@keyframes transmat
{
	from
	{
	transform: translateY(0%);
	opacity: 0;
	
	}
	to{
	
	opacity: 1;
	transform: translateY(20%);
	
	}
	
}



/*CSS On-Hover animations */
.org-img:hover
{
	/* opacity: 0.5; */
	filter: contrast(250%);

}
.spark-mc:hover
{
	animation: anim-pulse 4s infinite ease-in alternate-reverse;	
}
.gear-hover:hover
{
	filter: contrast(150%);
	transition: 3s;
}
#video-loop:hover
{
	opacity: 0.8;
	transform: scale(2);
	transition: 3s;
	left: 50%;
}
.anim-btn
{
	margin-bottom: 10%;
	animation: anim-pulse 3s infinite ease-in;
	/* animation-name: anim-pulse; animation-duration: 5s; animation-iteration-count: infinite;
	animation-timing-function: ease-in; animation-direction: alternate; */
}

/* Splash Page Setup*/

.splash-gap
{
	margin-top: 10%;
	animation: transmat 3s infinite ease-in alternate-reverse;
}

.splash-anim
{
	margin-top: 10%; margin-bottom: -10%; padding: 0; text-align: center;
	position: relative; 
}
.splash-gear
{
	min-width: 20%; max-width: 40%; height: auto; position: relative;
	animation: rotating-gear 3s infinite linear alternate-reverse;
	z-index: -1;
	
	
}
.splash-gear1
{
	min-width: 25%; max-width: 50%; height: auto; position: relative;
	animation: rotating-gear 6s infinite linear alternate-reverse;
	z-index: -1;
}


/*Socials animations */
.socials:hover
{
	opacity: 0.8;
	transform: scale(1.5);
	transition: 0.3s;
}
.contact:hover
{
	transform: scale(2);
	transition: 0.3s;
}

/*Service Icons Simple Anims */
.service-icons:hover
{
	background: rgb(255,242,202);
	background: -moz-linear-gradient(0deg, rgba(255,242,202,1) 0%, rgba(233,216,164,1) 25%, rgba(214,194,132,1) 50%, rgba(188,162,87,1) 75%, rgba(170,141,56,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(255,242,202,1) 0%, rgba(233,216,164,1) 25%, rgba(214,194,132,1) 50%, rgba(188,162,87,1) 75%, rgba(170,141,56,1) 100%);
	background: linear-gradient(0deg, rgba(255,242,202,1) 0%, rgba(233,216,164,1) 25%, rgba(214,194,132,1) 50%, rgba(188,162,87,1) 75%, rgba(170,141,56,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff2ca",endColorstr="#aa8d38",GradientType=1); 
}
.service-icons:hover
{
	transform: scale(1.5);
	transition: 0.3s;
}
.anim-btn:hover
{
	transform: scale(2);
	transition: 0.3s;
}
/*CSS Gear animations */

.gear
{
	
	position: absolute;
	z-index: -2;
}
.gear-main
{
	position: absolute;
	/* z-index: -2; */
	left: 70%;
	margin-top: -10%;
	margin-bottom: 0%;
	width: max(25%); height: auto;
	animation-name: rotating-gear; animation-duration: 7s; animation-iteration-count: infinite;
	animation-timing-function: ease-in;  
}	
.gear-edit
{
	width: max(20%);
	left: 3%;
}