/* @override http://localhost/bxslider_v3_plugin/css/styles.css */

/*
 * To change the color scheme of slider change each 
 * background property for each of the five styles below
 */
/* Слайдер */
.slides {
    overflow:hidden;
    position:relative;
    width:25%;
    border-radius:10px 10px 10px 10px;
    float: left;
    margin-bottom: 5px;
    text-align: center;
    padding: 5px 0px 0;
    position: relative;  
    height: 172px;
}
.blockstore .slides {
    overflow:hidden;
    position:relative;
    width:100%;
    border-radius:10px 10px 10px 10px;
    float: left;
    margin-bottom: 5px;
    text-align: center;
    padding: 5px 0px 0;
    position: relative;  
    height: 172px;
}
.slides ul {
    list-style:none;
    position:relative;
    min-width: 100%;
}

/* Кадры анимации #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;
    min-width: 100%;
    /* анимация css3 */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 14.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 14.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* Задержки css3 */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 7.0s;
    -moz-animation-delay: 7.0s;
}
.slides ul li img {
   min-width: 100%;
   max-width:100%;
   height: 172px;
    display:block;
    border-radius:10px 10px 10px 10px;
}

/* Кадры анимации #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color:rgba(40, 136, 205, 0.76);
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:14px;
    font-weight: bold;
    left:5%;
    margin: 5px 0px 0px 0px;
    padding:5px 0px 0px 0px;
    position:absolute;
    top:70%;
    max-width:80%;
    min-width:80%;
    /* Анимация css3 */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 14.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 14.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}