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

.slider-wrapper{
	background-color:#f3f3f3;
	margin:10px auto 30px auto;
	width:98%;
}

ul.slides, ul.slides li.slider{
	list-style-type:none;
	margin:0;
	padding:0;
}
.slide span{
	display:block;
	padding:4px;
	font-size:95%;
}

.slider-nav-area{
	position:relative;
	height:20px;
}

.slider {
        position: relative;
        width: 100%;
        margin:0 auto 0 auto;
        overflow: hidden;
        padding-top:40px;
}
        
        .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;
                }
				.slide img{
						width:100%;
				}

        .slider-arrows {
        }

                .slider-arrows a {
                        position: absolute;
                        display: block;
                        border: 2px solid pink;
						border-radius: 8px;
						font-size:200%;
						font-weight:bold;
						padding:5px 20px 5px 20px;
						color:pink;
						z-index:9999;
						top:5px;
						background-color: rgba(255,255,255,0.8)
                }
                .slider-arrows a:hover{
                		background-color:white;
                		color:gray;
                }

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


        .slider-nav {
                position: absolute;	
                top:10px;
        }

                .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; }