/*
 | ------------------------------------------
 | Glide styles
 | ------------------------------------------
 | Here are slider styles
 | 
*/

#slide{
		margin-top: -30px;
		width: 100%;
		height: 451px;
		background: url(images/bg-slide.png) repeat-x;
}

.slidestage{
		position: relative;
		margin: 0 auto;
		padding-top: 40px;
		width: 960px;
		height: 451px;
		background: url(images/bg-slidestage.png) no-repeat;
}


.slider {
		width: 960px;
		height: 340px;
		overflow: hidden;
}

	
.slides {
		height: 100%;
		
		/* Simple clear fix */
		overflow: hidden;

		/**
		 * Here is CSS transitions 
		 * responsible for slider animation in modern broswers
		 */
		-webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		   -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		     -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		        transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
		text-align: center;
}

.slide {
		height: 100%;
		float: left;
		clear: none;
}


.slider-arrows {}

.slider-arrow {
		display: block;
		margin-bottom: -40px;
		padding: 20px 0;
}

.slider-arrow--right {
		position: absolute;
		width: 31px;
		height: 96px;
		display: block;
		top: 35%;
		right: -31px;
		text-indent: -5000px;
		background:url(images/btn-slide-right.png) 0 0 no-repeat;
}

.slider-arrow--left {
		position: absolute;
		width: 31px;
		height: 96px;
		display: block;
		top: 35%;
		left: -31px;
		text-indent: -5000px;
		background:url(images/btn-slide-left.png) 0 0 no-repeat;
}


.slider-nav {
		position: absolute;
		bottom: 80px;
}

.slider-nav__item {
		width: 8px;
		height: 8px;
		float: left;
		clear: none;
		display: block;
		margin: 0 3px;
		background: #eaeaea;
		border: 1px solid #ccc;
		-webkit-border-radius: 8px;
		border-radius: 8px;
}

				.slider-nav__item:hover { background: #ccc; }
				.slider-nav__item--current { background: #ccc; }