/* launch animation */
.introAnimation {
	position: absolute;
	height: 100vh;
	width: 100vw;
	background-size: cover;
	animation-duration: 25s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-name: introAnimation;
}

@keyframes introAnimation {
	0% {
		background-image: url('../img/cemetary.png');
		opacity: 1.0; 
		background-size: cover;
	}

	
	50% {
		background-image: url('../img/stormy.jpg');
		opacity: 1.0;
		background-size: cover;
	}
	
	75% {
		background-image: url('../img/bluesky.jpg');
		opacity: 1.0;
		background-size: cover;
	}

	95%{
		opacity: 0.8;
	}
}

@-webkit-keyframes introAnimation {
	0% {
		background-image: url('../img/cemetary.png');
		opacity: 1.0; 
	}
	25% {
		background-image: url('../img/cemetary.png');
		opacity: 0.5;
	}
	50% {
		background-image: url('../img/stormy.jpg');
		opacity: 1.0;
	}
	75% {
		background-image: url('../img/bluesky.png');
		opacity: 1.0;
	}
	100% {
		
	}
}


/* background sky animation */
.sky {
	position: absolute;
	height: 100%;
	width: 100%;
	animation-duration: 12s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-name: sky;
}


.sky img:first-of-type{
  position: absolute;
  height: 400px;
  width: auto;
  animation-duration: 12s;
  animation-name: cloud1;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.sky img:nth-of-type(2n){
  position: absolute;
  height: 500px;
  width: auto;
  animation-duration: 10s;
  animation-name: cloud2;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.sky img:nth-of-type(3n){
  position: absolute;
  height: 200px;
  width: auto;
  animation-duration: 18s;
  animation-name: cloud3;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.sky img:nth-of-type(4n){
  position: absolute;
  height: 300px;
  width: auto;
  animation-duration: 16s;
  animation-name: cloud4;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes sky {
	0% {
		background-color: #4E7AC7; 
	}
	25% {
		background-color: #7FB2F0;
	}
	50% {
		background-color: #35478C;
	}
	75% {
		background-color: #ADD5F7;
	}
	100% {
		background-color: #4E7AC7;
	}
}

@keyframes cloud1 {
  from {
    transform: translate(2000px,20px);
  }

  to {
    transform: translate(-600px,20px);
  }
}
@keyframes cloud2 {
  from {
    transform: translate(3000px,60px);
  }

  to {
    transform: translate(-600px,60px);
  }
}

@keyframes cloud3 {
  from {
    transform: translate(2500px,120px);
  }

  to {
    transform: translate(-600px,120px);
  }
}
@keyframes cloud4 {
  from {
    transform: translate(2800px,160px);
  }

  to {
    transform: translate(-600px,160px);
  }
}
/* interactive parts of site */

.hovering{
	animation-name: hovering;
	-webkit-animation-name: hovering;

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes hovering {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(5%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes hovering {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(5%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

.tiltRight{
	animation-name: tiltRight;
	-webkit-animation-name: tiltRight;

	animation-duration: 4s;	
	-webkit-animation-duration: 4s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes tiltRight {
	0% {
		transform: rotate(-4deg);	
	}
	50% {
		transform: rotate(12deg);
	}
	100% {
		transform: rotate(4deg);	
	}							
}

@-webkit-keyframes tiltRight {
	0% {
		transform: rotate(-4deg);	
	}
	50% {
		transform: rotate(12deg);
	}
	100% {
		transform: rotate(4deg);	
	}						
}


.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease-in;	
	-webkit-animation-timing-function: ease-in;		

	visibility: visible !important;	
}

@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		transform: scale(0.6);	
	}
	80% {
		transform: scale(0.8);
		opacity: 0.6;
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(0.6);
	}
	80% {
		-webkit-transform: scale(0.8);
		opacity: 0.6;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}

.partyTimeFade {
	animation-name: partyTimeFade;
	-webkit-animation-name: partyTimeFade;

	animation-duration: 3s;	
	-webkit-animation-duration: 3s;

	animation-delay: 10s;
	-webkit-animation-delay: 10s;

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;	
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;	

	visibility: visible !important;
}

@keyframes partyTimeFade {
	0% {
		opacity: 0;		
	}	
	100% {
		opacity: 1;	
	}		
}

@-webkit-keyframes partyTimeFade {
	0% {
		opacity: 0;		
	}	
	100% {
		opacity: 1;	
	}		
}

.generalDelay {
	animation-name: generalDelay;
	-webkit-animation-name: generalDelay;

	animation-duration: 10s;	
	-webkit-animation-duration: 10s;

	animation-delay: 50s;
	-webkit-animation-delay: 50s;

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;		

	visibility: visible !important;
}

@keyframes generalDelay {
	0% {
		opacity: 0.0;		
	}	
	100% {
		opacity: 1;	
	}		
}

@-webkit-keyframes generalDelay {
	0% {
		opacity: 0.0;		
	}	
	100% {
		opacity: 1;	
	}		
}