/*
 | ------------------------------------------
 | Glide styles
 | ------------------------------------------
 | Here are slider styles
 | 
*/
.slider{position: relative;width: 100%;height: 420px;overflow: hidden;}

.slides {
height: 100%;
/* Simple clear fix */
overflow: hidden;
/**        
* Prevent blinking issue
* Not tested. Experimental.
*/
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
/**
* 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);
}

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


.slider-arrows {}

.slider-arrow {position: absolute;display: block;margin-bottom: -20px;padding: 20px;}

.slider-arrow--right { bottom: 50%; right: 30px; }
.slider-arrow--left { bottom: 50%; left: 30px; }


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

.slider-nav__item {
width: 12px;
height: 12px;
float: left;
clear: none;
display: block;
margin: 0 5px;
background: #fff;
}

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