
<html>
<head>
<style> 

#content-slider{
	
}
#slider {
   
   margin:0;
   
   margin-bottom:20px;
   min-height: 300px;
   min-width: 900px;
   
   
   overflow: visible;
   
   
   
   
}

#mask {
   overflow: hidden;
   min-height: 400px;
   margin: 0;
   
   
}
#slider ul {
   margin: 0;
   
   position: relative;
   
   
}

#slider h1{
	font-family:calibri;
	position:absolute;
	
	background-color:rgba(0, 0, 0, 0.5);
	-ms-background-color:rgba(0, 0, 0, 0.5);
	font-weight:normal;
	font-size:25px;
	padding:17px;
	padding-left:20px;
	max-width:300px;
	color:white;
	border-radius:5px;
	animation-name: example; /* Chrome, Safari, Opera */
    animation-duration: 15s; 
	animation-iteration-count: infinite;
	-webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 15s; 
	-webkit-animation-iteration-count: infinite;
	-ms-animation-name: example; /* Chrome, Safari, Opera */
    -ms-animation-duration: 15s; 
	-ms-animation-iteration-count: infinite;
	
}
.firstanimation h1{
	top:150px;
	left:20px;
	
	
}
.secondanimation h1{
	top:10px;
	right:10px;
	
	
}
.thirdanimation h1{
	top:5px;
	right:5px;
	
	
}
.fourthanimation h1{
	top:5px;
	left:20px;
	
	
}
.fifthanimation h1{
	top:10px;
	left:10px;
	
	
}
.sixthanimation h1{
	top:150px;
	left:10px;
	
	
}

#slider li {
   min-width: 900px;  /* Width Image */
   min-height: 250px; /* Height Image */
   position: absolute;
   left: -325px; /* Original Position - Outside of the Slider */
   list-style: none;
   margin: 0;
   padding: 0;
   border-bottom:black 3px solid;
}
#slider li.firstanimation {
	animation: cycle 90s linear infinite;
   -webkit-animation: cycle 90s linear infinite;
   -ms-animation: cycle 90s linear infinite;
   
}

#slider li.secondanimation {
	animation: cycletwo 90s linear infinite;
   -webkit-animation: cycletwo 90s linear infinite;
   -ms-animation:cycletwo 90s linear infinite;
   
}

#slider li.thirdanimation {
	animation: cyclethree 90s linear infinite;
   -webkit-animation: cyclethree 90s linear infinite;
   -ms-animation:cyclethree 90s linear infinite;
   
}

#slider li.fourthanimation {
	animation: cyclefour 90s linear infinite;
   -webkit-animation: cyclefour 90s linear infinite;
   -ms-animation:cyclefour 90s linear infinite;
   
}

#slider li.fifthanimation {
	animation: cyclefive 90s linear infinite;
   -webkit-animation: cyclefive 90s linear infinite;
   -ms-animation:cyclefive 90s linear infinite;
  
}
#slider li.sixthanimation {
	animation: cyclesixth 90s linear infinite;
   -webkit-animation: cyclesixth 90s linear infinite;
   -ms-animation:cyclesixth 90s linear infinite;
   
}


@keyframes cycle {
   0%  { left: 0px; opacity:1; z-index:0;} /* When you start the slide, the first image is already visible */
   4%  { left: 0px; opacity:1; z-index:0;} /* Original Position */
   15% { left: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   16% { left: 320px; opacity:0; z-index:0; }
   17% { left: 325px; opacity: 0; z-index:-1; } /* From 16% to 20% = for 1 second exit image */
   96% { left: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   97%{ left: 0px; opacity: 1; }
   100%{ left: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { left: -325px; opacity: 0;z-index: -1; } /* Original Position */
   15% { left: -320px; opacity: 0;z-index: 0; }/* Starts moving after 16% to this position */
   16% { left: 0px; opacity: 1; }
   32% { left: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   33% { left: 320px; opacity: 0; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   34% { left: -325px; opacity: 0; z-index: -1; } /* From 36% to 40% = for 1 second exit image */
   41% { left: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ left: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { left: -325px; opacity: 0;z-index: -1; }
   32% { left: -325px; opacity: 0; z-index: 0;}
   33% { left: 0px; opacity: 1; z-index: 0}
   49% { left: 0px; opacity: 1; z-index: 0}
   50% { left: 320px; opacity: 0; z-index: 0}
   51% { left: 325px; opacity: 0; z-index: -1; }
   61% { left: -325px; opacity: 0; z-index: -1; }
   100%{ left: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { left: -325px; opacity: 0; z-index: -1;}
   49% { left: -325px; opacity: 0; z-index: 0;}
   50% { left: 0px; opacity: 1; z-index: 0}
   65% { left: 0px; opacity: 1; z-index: 0}
   66% { left: 320px; opacity: 0; z-index: 0; }
   67% { left: 325px; opacity: 0; z-index: -1; }
   81% { left: -325px; opacity: 0; z-index: -1; }
   100%{ left: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { left: -325px; opacity: 0;z-index: -1; }
   65% { left: -325px; opacity: 0; z-index: 0;}
   66% { left: 0px; opacity: 1; }
   70% { left: 0px; opacity: 1; }
   82% { left: 0px; opacity: 1; z-index: 0; }
   83%{ left: 325px; opacity: 0; z-index: 0; }
   84%{ left: -325px; opacity: 0; z-index: -1; }
   100%{ left: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclesixth {
   0%  { left: -325px; opacity: 0;z-index: -1; }
   82% { left: -325px; opacity: 0; z-index: 0;}
   83% { left: 0px; opacity: 1; }
   97% { left: 0px; opacity: 1; z-index: 0; }
   98%{ left: 325px; opacity: 0; z-index: -1; }
   100%{ left: -325px; opacity: 0; z-index: -1; }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {opacity:0;}
	5%{opacity:1;}
    25%  {opacity:1;}
    50%  {opacity:1;}
    75%  {opacity:1;}
	90%  {opacity:1;}
	95%{opacity:0;}
    100% {opacity:0;}
}



/* Standard syntax */

/*second slider*/

/*keyframe animations*/
.firstimg {
	-webkit-animation: bannermove 120s linear infinite;
	   -moz-animation: bannermove 120s linear infinite;
	    -ms-animation: bannermove 120s linear infinite;
	     -o-animation: bannermove 120s linear infinite;
	        animation: bannermove 120s linear infinite;
}

@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -10125px;
 }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -10125px;
 }

}

@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -10125px;
 }

}

@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -10125px;
 }

}

@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -10125px;
 }

}




.photobanner img {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.photobanner img:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	cursor: pointer;
-webkit-animation: bannermove 120000s linear infinite;
	   -moz-animation: bannermove 120000s linear infinite;
	    -ms-animation: bannermove 120000s linear infinite;
	     -o-animation: bannermove 120000s linear infinite;
	        animation: bannermove 120000s linear infinite;
	
}


		</style>
	</head>
	<body>

		
</body>
</html>