#slider { /* Styles the <div> that contains everything slider related */
	width:720px;
	height:260px;
	position:relative;
	margin:auto;	
	background-color:#362c30;
	border:10px solid #362c30;
	-moz-transition:all 150ms ease-in;  /* Allows all property values to animate on hover. For information on transitions, check out: http://w3schools.com/css3/css3_transitions.asp */
	-webkit-transition:all 150ms ease-in;
	-o-transition:all 150ms ease-in;
}
#slider:hover { /* Since we added the transistion property to #slider <div>, the previous properties will now animate to these new properties on hover */
	background-color:#fff;
	border:10px solid #fff;
}
#slider:hover #pause { /* When we hover over #slider <div>, our #pause <div> will become visible - which will display the pause icon */
	opacity:1;
}
#slider:hover #progress { /* When we hover over #slider <div>, the background color of our #progress <div> will become transparent. This will give the effect of the progress bar fading away on hover */
	background-color:rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { /* When we hover over the unordered list <ul> inside of #slider <div> (the slides), all of our slide related animations will pause */
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}
#mask { /* Creates the mask */
	overflow:hidden;
}
#pause { /* Styling our pause icon that appears when hovering over #slider <div> */
	width:720px;
	height:260px;
	position:absolute;
	top:0;
	opacity:0;
	background-image:url(../img/slider/paused.png);
	background-position:680px 10px;
	background-repeat:no-repeat;
	-moz-transition:all 150ms ease-in; /* This transition allows the #pause <div> to fade in when #slider <div> is hovered over */
	-webkit-transition:all 150ms ease-in;
	-o-transition:all 150ms ease-in;
}
#progress { /* The progress bar that will animate to the full width of the slide to show the duration of the slide */
	width:720px;
	height:1px;
	position:relative;
	top:-1px;
	background-color:#ffd000;
	-moz-transition:all 150ms linear; /* Transition allows #progress <div> to fade when #slider <div> is hovered over */
	-webkit-transition:all 150ms linear;
	-o-transition:all 150ms linear;
	-moz-animation:progress 18s infinite; /* The progress animation will increase #progress's <div> width from 1px to the full width of the slide (600px) */
	-webkit-animation:progress 18s infinite;
}
#overlay { /* Creates the cool gradient effect ontop of the slider */
	width:720px;
	height:260px;
	position:absolute;
	top:0;
	background-image:url(../img/slider/overlay.png);
	background-position:center;
	background-repeat:no-repeat;
	opacity:0.1;
	-moz-animation:overlay-fade 18s infinite; /* The animation will fade #overlay <div> when the slider is finished */
	-webkit-animation:overlay-fade 18s infinite;
}
#slider ul { /* Styling the unordered list <ul> that contains our slides <li>'s */
	width:2880px; /* The calculated width of all the slides (4 slides x 600px in width) */
	position:relative;
	left:0px;
	margin:0;
	padding:0;
	list-style:none;
	-moz-animation:slide-animation 18s infinite; /* You can change the speed of the slide by changing the 18s. Make sure to update the speed of #overlay and #progress too. Keep in mind that this will also effect the speed of the transitions */
	-webkit-animation:slide-animation 18s infinite;
}
#slider li { /* Styling the list elements <li>'s that contain each slide */
	width:720px;
	height:260px;
	position:relative;
	display:inline; /* This aligns the <li>'s horizontally so that the <ul> can scroll horizontally. By default, <li>'s align vertically */
	float:left; /* Gets rid of mysterious spacing on the sides of the <li>'s */
	margin:0;
	padding:0;
	background-image:url(../img/slider/loader.gif); /* Adds a loader GIF to each slide to show that content is loading */
	background-position:50% 50%;
	background-repeat:no-repeat;
	overflow:hidden;
}
#slider li figure { /* Styling of the slider caption */
	margin:0;
	display:block;
	width:200px;
	height:260px;
	position:absolute; 
	top:0; 
	right:0;
	padding:15px 20px;
	background-color:rgba(54,44,48,0.6);
	border-top:1px solid #362c30;
	text-shadow:1px 1px 1px #362c30;
	}
	
#slider ul li figure h2 { /* Styling of the slider caption */
	padding: 0px 0 0 0px;
	font-size:28px;
	line-height:38px;
	font-weight:normal;
	font-family: 'CapsuulaRegular';
	color:#fff;
	text-shadow:1px 1px 1px #362c30;
}
#slider ul li figure h2.second{margin-left:30px;}
#slider ul li figure h2.third{margin-left:60px;}

#slider ul li span p { /* Styling of the slider's paragraphs */
	font-size:14px;
	line-height:20px;
	font-weight:normal;
	color:#fff;
	text-shadow:1px 1px 1px #362c30;
}
@-webkit-keyframes slide-animation { 
/* Creates our animation that cycles through the slides for WebKit browsers. This is set up to cycle through 4 slides. If you plan on changing that number, you will have to divide 100 by the amount of slides and figure out the formula from there (while also changing the formulas for the progress and overlay-fade animations). Right now it's set up for each slide to take roughly 25% of the animation time. As you can see, this is where it can get a bit sticky changing the amount of slides. I'd suggest playing around with some basic animations first to get a handle on how they work. For an in depth explanation of animations, check out: http://www.w3schools.com/css3/css3_animations.asp */
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-720px; opacity:1;}
	45% {left:-720px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1440px; opacity:1;}
	70% {left:-1440px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-2160px; opacity:1;}
	95% {opacity:1;}
	98% {left:-2160px; opacity:1;}
	100% {left:-2160px; opacity:0.2;}
}

@-moz-keyframes slide-animation { /* Creates the slide animation for FireFox */
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-720px; opacity:1;}
	45% {left:-720px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1440px; opacity:1;}
	70% {left:-1440px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-2160px; opacity:1;}
	95% {opacity:1;}
	98% {left:-2160px; opacity:1;}
	100% {left:-2160px; opacity:0.2;}
}


@-webkit-keyframes progress { /* Animation for the progress bar in WebKit browsers */
	0% {width:0px; opacity:0;}
	2% {width:0px; opacity:1;}
	20% {width:720px; opacity:1;}
	22.5% {width:720px; opacity:0;}
	22.59% {width:0px;}
	25% {width:0px; opacity:1;}
	45% {width:720px; opacity:1;}
	47.5% {width:720px; opacity:0;}
	47.59% {width:0px;}
	50% {width:0px; opacity:1;}
	70% {width:720px; opacity:1;}
	72.5% {width:720px; opacity:0;}
	72.59% {width:0px;}
	75% {width:0px; opacity:1;}
	95% {width:720px; opacity:1;}
	98% {width:720px; opacity:1;}
	100% {width:0px; opacity:0;}
}
	@-moz-keyframes progress { /* Animation for the progress bar in FireFox */
	0% {width:0px; opacity:0;}
	2% {width:0px; opacity:1;}
	20% {width:720px; opacity:1;}
	22.5% {width:720px; opacity:0;}
	22.59% {width:0px;}
	25% {width:0px; opacity:1;}
	45% {width:720px; opacity:1;}
	47.5% {width:720px; opacity:0;}
	47.59% {width:0px;}
	50% {width:0px; opacity:1;}
	70% {width:720px; opacity:1;}
	72.5% {width:720px; opacity:0;}
	72.59% {width:0px;}
	75% {width:0px; opacity:1;}
	95% {width:720px; opacity:1;}
	98% {width:720px; opacity:1;}
	100% {width:0px; opacity:0;}
}


@-webkit-keyframes overlay-fade { 
/* This animation fades #overlay <div> (the gradient on top of the slider) when the slide comes to an end on WebKit browsers */
	0% {opacity:0;}
	2% {opacity:0;}
	95% {opacity:0;}
	98% {opacity:0;}
	100% {opacity:0;}
}
@-moz-keyframes overlay-fade
{ /* Fades #overlay for FireFox */
	0% {opacity:0;}
	2% {opacity:0;}
	95% {opacity:0;}
	98% {opacity:0;}
	100% {opacity:0;}
}



@media all and (max-width:380px) {
					#slider	{display:none}
					#mask{display:none}
					#progress{display:none}
					#overlay{display:none}
					#slider ul{display:none}
					#slider li{display:none}
					#slider li span	{display:none}
				}
				
@media screen and (min-width:380px) and (max-width:480px)
					 {
					#slider			{width:360px; height:130px;}
					#pause			{width:360px; height:130px;	background-position:320px 10px;}
					#overlay		{width:360px;}
					#progress		{width:360px;}
					#slider	ul	{width:1440px;}
					#slider li	{width:360px;height:130px;}
					#slider li a img	{width:360px; height:130px;}
					#slider	li span	{width:90px;height:130px;}
					#slider ul li span h2 {font-size:14px;line-height:19px;}
					#slider ul li span h2.second	{margin-left:20px;}
					#slider ul li span h2.third	{margin-left:40px;}
					#slider ul li span p	{font-size:10px;	line-height:14px;	}
				
					@-webkit-keyframes progress { /* Animation for the progress bar in WebKit browsers */
											0% {width:0px; opacity:0;}
											2% {width:0px; opacity:1;}
											20% {width:360px; opacity:1;}
											22.5% {width:360px; opacity:0;}
											22.59% {width:0px;}
											25% {width:0px; opacity:1;}
											45% {width:360px; opacity:1;}
											47.5% {width:360px; opacity:0;}
											47.59% {width:0px;}
											50% {width:0px; opacity:1;}
											70% {width:360px; opacity:1;}
											72.5% {width:360px; opacity:0;}
											72.59% {width:0px;}
											75% {width:0px; opacity:1;}
											95% {width:360px; opacity:1;}
											97.5%	{width:360px; opacity:1;}
											98% {width:360px; opacity:0;}
											100% {width:0px; opacity:0;}
											}

					@-moz-keyframes progress { /* Animation for the progress bar in FireFox */
											0% {width:0px; opacity:0;}
											2% {width:0px; opacity:1;}
											20% {width:360px; opacity:1;}
											22.5% {width:360px; opacity:0;}
											22.59% {width:0px;}
											25% {width:0px; opacity:1;}
											45% {width:360px; opacity:1;}
											47.5% {width:360px; opacity:0;}
											47.59% {width:0px;}
											50% {width:0px; opacity:1;}
											70% {width:360px; opacity:1;}
											72.5% {width:360px; opacity:0;}
											72.59% {width:0px;}
											75% {width:0px; opacity:1;}
											95% {width:360px; opacity:1;}
											97.5%	{width:360px; opacity:1;}
											98% {width:360px; opacity:0;}
											100% {width:0px; opacity:0;}
											}
											
						@-webkit-keyframes slide-animation {
											0% {opacity:0;}
											2%	{left:0px; opacity:1;}
											20% {left:0px; opacity:1;}
											22.5% {opacity:0.7;}
											25% {left:-360px; opacity:1;}
											45% {left:-360px; opacity:1;}
											47.5% {opacity:0.7;}
											50% {left:-720px; opacity:1;}
											70% {left:-720px; opacity:1;}
											72.5% {opacity:0.7;}
											75% {left:-1080px; opacity:1;}
											95% {left:-1080px; opacity:1;}
											98% {left:-1080px; opacity:0;}
											100% {left:0px; opacity:0}
											}

						@-moz-keyframes slide-animation {
											0% {opacity:0;}
											2%	{left:0px; opacity:1;}
											20% {left:0px; opacity:1;}
											22.5% {opacity:0.7;}
											25% {left:-360px; opacity:1;}
											45% {left:-360px; opacity:1;}
											47.5% {opacity:0.7;}
											50% {left:-720px; opacity:1;}
											70% {left:-720px; opacity:1;}
											72.5% {opacity:0.7;}
											75% {left:-1080px; opacity:1;}
											95% {left:-1080px; opacity:1;}
											98% {left:-1080px; opacity:0;}
											100% {left:0px; opacity:0}
											}

						}

@media screen and (min-width:480px) and (max-width:720px)
					 {
					#slider			{width:540px; height:195px;}
					#pause			{width:540px; height:195px;	background-position:500px 10px;}
					#overlay		{width:540px;}
					#progress		{width:540px;}
					#slider	ul	{width:2160px;}
					#slider li	{width:540px;height:195px;}
					#slider li a img	{width:540px; height:195px;}
					#slider	li span	{width:150px;height:195px;}
					#slider ul li span h2 {font-size:16px;line-height:21px;}
					#slider ul li span h2.second	{margin-left:20px;}
					#slider ul li span h2.third	{margin-left:40px;}
					#slider ul li span p	{font-size:12px;	line-height:16px;	}
				
					@-webkit-keyframes progress { /* Animation for the progress bar in WebKit browsers */
											0% {width:0px; opacity:0;}
											2% {width:0px; opacity:1;}
											20% {width:540px; opacity:1;}
											22.5% {width:540px; opacity:0;}
											22.59% {width:0px;}
											25% {width:0px; opacity:1;}
											45% {width:540px; opacity:1;}
											47.5% {width:540px; opacity:0;}
											47.59% {width:0px;}
											50% {width:0px; opacity:1;}
											70% {width:540px; opacity:1;}
											72.5% {width:540px; opacity:0;}
											72.59% {width:0px;}
											75% {width:0px; opacity:1;}
											95% {width:540px; opacity:1;}
											97.5%	{width:540px; opacity:1;}
											98% {width:540px; opacity:0;}
											100% {width:0px; opacity:0;}
											}

					@-moz-keyframes progress { /* Animation for the progress bar in FireFox */
											0% {width:0px; opacity:0;}
											2% {width:0px; opacity:1;}
											20% {width:540px; opacity:1;}
											22.5% {width:540px; opacity:0;}
											22.59% {width:0px;}
											25% {width:0px; opacity:1;}
											45% {width:540px; opacity:1;}
											47.5% {width:540px; opacity:0;}
											47.59% {width:0px;}
											50% {width:0px; opacity:1;}
											70% {width:540px; opacity:1;}
											72.5% {width:540px; opacity:0;}
											72.59% {width:0px;}
											75% {width:0px; opacity:1;}
											95% {width:540px; opacity:1;}
											97.5%	{width:540px; opacity:1;}
											98% {width:540px; opacity:0;}
											100% {width:0px; opacity:0;}
											}
											
						@-webkit-keyframes slide-animation {
											0% {opacity:0;}
											2%	{left:0px; opacity:1;}
											20% {left:0px; opacity:1;}
											22.5% {opacity:0.7;}
											25% {left:-540px; opacity:1;}
											45% {left:-540px; opacity:1;}
											47.5% {opacity:0.7;}
											50% {left:-1080px; opacity:1;}
											70% {left:-1080px; opacity:1;}
											72.5% {opacity:0.7;}
											75% {left:-1620px; opacity:1;}
											95% {left:-1620px; opacity:1;}
											98% {left:-1620px; opacity:0;}
											100% {left:0px; opacity:0}
											}

						@-moz-keyframes slide-animation {
											0% {opacity:0;}
											2%	{left:0px; opacity:1;}
											20% {left:0px; opacity:1;}
											22.5% {opacity:0.7;}
											25% {left:-540px; opacity:1;}
											45% {left:-540px; opacity:1;}
											47.5% {opacity:0.7;}
											50% {left:-1080px; opacity:1;}
											70% {left:-1080px; opacity:1;}
											72.5% {opacity:0.7;}
											75% {left:-1620px; opacity:1;}
											95% {left:-1620px; opacity:1;}
											98% {left:-1620px; opacity:0;}
											100% {left:0px; opacity:0}
											}

						}