/* CSS Document */
/*
,---.|             |o      ,---.     o ,---.              
`---.|--- .   .,---|.,---. |  _.,---.. |__.,---.,---.,---.
    ||    |   ||   |||   | |   ||    | |   ,---||    |---'
`---'`---'`---'`---'``---' `---'`    ` `   `---^`    `---'  

 * Author name : Armagan Tekdoner
 * Last update : January 2016
 * URL         : grifare.net/css/animations.css
 * A dedicated animations file
 * REMOVED from the project
 */

/*** index banner ***/
/** slides one photo upwards only once **/
/* define the rules */ 
header + section div img[src*="Bodrum-Mendirek-1985.jpg"]  {
	transform-origin: center bottom;
	/* Name the animation (refers to @keyframes) */
	-ms-animation-name: bannerFrontPage;
	-moz-animation-name: bannerFrontPage;
	-webkit-animation-name: bannerFrontPage;
	animation-name: bannerFrontPage; /* action1 is the name to be used later */
	/* Set the animation duration */
	-ms-animation-duration: 30s;
	-moz-animation-duration: 30s;
	-webkit-animation-duration: 30s;
	animation-duration: 30s;
	/* Set the animation timing function to control acceleration curves */
	-ms-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	/* Set the animation delay */
	-ms-animation-delay: 1500ms;
	-moz-animation-delay: 1500ms;
	-webkit-animation-delay: 1500ms;
	animation-delay: 1500ms;
	/* Control whether the animation repeats */
	-ms-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	/* Prevents reset */
	-ms-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

	/* apply the rules */
	@keyframes bannerFrontPage {
		100%{
		 transform: translateY(-38%);
		}
	}






/*** photography banner ***/
/** fades in and out 2 similar slides **/
/* define the rules for the images (winter) */
section#photography h1 + div > figure figure:last-child{
	/* Name the animation (refers to @keyframes) */	
	animation-name: photographyBelgradeWoods;
	/* Set the animation timing function to control acceleration curves */
	-ms-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;	
	animation-timing-function: ease-in-out;
	/* Animation repeats forever */
	-ms-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;	
	animation-iteration-count: infinite;
	/* Set the animation duration */
	-ms-animation-duration: 12s;
	-moz-animation-duration: 12s;
	-webkit-animation-duration: 12s;	
	animation-duration: 12s;
	/* goes back and forth */
	-ms-animation-direction: alternate;
	-moz-animation-direction: alternate;
	-webkit-animation-direction: alternate;	
	animation-direction: alternate;
}
	
	section#photography h1 + div > figure figure:last-child figcaption{
		/* Name the animation (refers to @keyframes) */	
		animation-name: photographyBelgradeWoodsFebruary;
		/* Animation repeats forever */
		-ms-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;	
		animation-iteration-count: infinite;
		/* Set the animation duration */
		-ms-animation-duration: 12s;
		-moz-animation-duration: 12s;
		-webkit-animation-duration: 12s;	
		animation-duration: 12s;
		/* goes back and forth */
		-ms-animation-direction: alternate;
		-moz-animation-direction: alternate;
		-webkit-animation-direction: alternate;	
		animation-direction: alternate;
	}
	
	/* define the rules for the captions */
	section#photography h1 + div > figure figure:first-child figcaption{
		/* Name the animation (refers to @keyframes) */	
		animation-name: photographyBelgradeWoodsApril;
		/* Animation repeats forever */
		-ms-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;	
		animation-iteration-count: infinite;
		/* Set the animation duration */
		-ms-animation-duration: 12s;
		-moz-animation-duration: 12s;
		-webkit-animation-duration: 12s;	
		animation-duration: 12s;
		/* goes back and forth */
		-ms-animation-direction: alternate;
		-moz-animation-direction: alternate;
		-webkit-animation-direction: alternate;	
		animation-direction: alternate;
	}


	/* apply the rules to the images */
	@keyframes photographyBelgradeWoods {
		0% {
		opacity:1;
		}
		45% {
		opacity: 1;	
		}
		55% {
		opacity:0;
		}
		100% {
		opacity:0;		
		}
	}
	
	@-ms-keyframes photographyBelgradeWoods {
		0% {
		opacity:0;
		}
		100% {
		opacity:1;		
		}
	}	

	@keyframes photographyBelgradeWoodsFebruary {
		  0% {
		  background-color: rgba(188,224,238,0.6);
		  opacity: 1;			  
		  }
		  100% {
		  opacity: 1;		
		  background-color: rgba(188,224,238,0.6);
		  }
	  }
	  	  
	  /*   apply the rules to the captions */
	@keyframes photographyBelgradeWoodsApril {
		  0% {
    	  background-color: rgba(239,253,197,0.6);
		  opacity: 1;		  			  
		  }
		  100% {
		  background-color: rgba(239,253,197,0.6);
		  opacity: 1;			  
		  }
	  }



/* percentages for reuse */
/*		   0% {
	   transform: translateY(0px);
	  }
   10% {
	   transform: translateY(-40px);
	  }
	   20% {
	   transform: translateY(-60px);
	  }
	   30% {
	   transform: translateY(-80px);
	  }
	   40% {
	   transform: translateY(-100px);
	  }
	   50% {
	   transform: translateY(-120px);
	  }
	   60% {
	   transform: translateY(-140px);
	  }
	   70% {
	   transform: translateY(-160px);
	  }
	   80% {
	   transform: translateY(-180px);
	  }
	   90% {
	   transform: translateY(-240px);
	  }
	   100% {
	   transform: translateY(-420px);
	  }*/