/*
 * Pure_css3_slider
 * By: Mikhail Chumachkin < chumachkin.m@gmail.com> [http://www.facebook.com/chumachkin.m]
 * Version 1.0.0
 * Last Modified: 01/02/2013
 *
 * Dual licensed under the MIT and GPL licenses.
 * http://www.gnu.org/licenses/gpl-2.0.txt
 *Copyright (c) 2013 Mikhail Chumachkin, chumachkin.m@gmail.com, http://www.facebook.com/chumachkin.m
 *
 *Permission is hereby granted, free of charge, to any person obtaining
 *a copy of this software and associated documentation files (the
 *"Software"), to deal in the Software without restriction, including
 *without limitation the rights to use, copy, modify, merge, publish,
 *distribute, sublicense, and/or sell copies of the Software, and to
 *permit persons to whom the Software is furnished to do so, subject to
 *the following conditions:
 *
 *The above copyright notice and this permission notice shall be
 *included in all copies or substantial portions of the Software.
 *
 *THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 *EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 *MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 *NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 *LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 *OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 *WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

/**
 * Slider Animation
 */

.list-img, .list-a{
    display: block;
    width: 100%;
    height: 100%;
}

.pcss3s-slider {
    width: 100%;
    height: 100%;
    overflow:hidden;
    position:relative;
}
.pcss3s-slider ul {
    width: 100%;
    height: 100%;
    list-style:none;
    position:relative;
}

.pcss3s-slider ul li{
    width: 100%;
    height: 100%;
    top:-100%;
}

.pcss3s-slider:hover ul li, {
   animation-play-state: paused;
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
   -o-animation-play-state: paused;
   -ms-animation-play-state: paused;
}

/**
 * Fade effect
 *
 */
@keyframes anim_slides_fade {
    0% {
        animation-timing-function: linear;
        animation-direction: normal;
        opacity:0;
    }
    6% {
        animation-timing-function: linear;
        animation-direction: normal;
        opacity:1;
    }
    24% {
        animation-timing-function: linear;
        animation-direction: normal;
        opacity:1;
    }
    30% {
        animation-timing-function: linear;
        animation-direction: normal;
        opacity:0;
    }
    100% {
        animation-timing-function: linear;
        animation-direction: normal;
        opacity:0;
    }
}

@-webkit-keyframes anim_slides_fade {
    0% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        opacity:0;
        z-index: 1000;
    }
    6% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        opacity:1;
        z-index: 2000;
    }
    24% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        opacity:1;
        z-index: 1000;
    }
    30% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        opacity:0;
        z-index: 1000;
    }
    100% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        opacity:0;
        z-index: 1000;
    }
}

@-moz-keyframes anim_slides_fade {
    0% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        opacity:0;
    }
    6% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        opacity:1;
    }
    24% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        opacity:1;
    }
    30% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        opacity:0;
    }
    100% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        opacity:0;
    }
}

@-o-keyframes anim_slides_fade {
    0% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        opacity:0;
    }
    6% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        opacity:1;
    }
    24% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        opacity:1;
    }
    30% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        opacity:0;
    }
    100% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        opacity:0;
    }
}


@-ms-keyframes anim_slides_fade {
    0% {
        -ms-animation-timing-function: linear;
        -ms-animation-direction: normal;
        opacity:0;
    }
    6% {
        -ms-animation-timing-function: linear;
        -ms-animation-direction: normal;
        opacity:1;
    }
    24% {
        -ms-animation-timing-function: linear;
        -ms-animation-direction: normal;
        opacity:1;
    }
    30% {
        -ms-animation-timing-function: linear;
        -ms-animation-direction: normal;
        opacity:0;
    }
    100% {
        -ms-animation-timing-function: linear;
        -ms-animation-direction: normal;
        opacity:0;
    }
}




/**
 * Left to rite slide effect
 *
 */
@keyframes anim_slides_left_to_right {
    0% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        left: -100%;
        opacity: 0;
    }
    10% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    20% {
        animation-timing-function: linear;
        animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    30% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        left: 100%;
        opacity: 0;
    }
    100% {
        animation-timing-function: linear;
        animation-direction: normal;
        opacity: 0;
        left: 100%;
    }
}

@-webkit-keyframes anim_slides_left_to_right {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        left: -100%;
        opacity: 0;
    }
    10% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    20% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    30% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        left: 100%;
        opacity: 0;
    }
    100% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        opacity: 0;
        left: 100%;
    }
}

@-moz-keyframes anim_slides_left_to_right {
    0% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        left: -100%;
        opacity: 0;
    }
    10% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    20% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    30% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        left: 100%;
        opacity: 0;
    }
    100% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        opacity: 0;
        left: 100%;
    }
}

@-o-keyframes anim_slides_left_to_right {
    0% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        left: -100%;
        opacity: 0;
    }
    10% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    20% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    30% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        left: 100%;
        opacity: 0;
    }
    100% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        opacity: 0;
        left: 100%;
    }
}




/**
 * Right to left slide effect
 *
 */
@keyframes anim_slides_right_to_left {
    0% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        left: 100%;
        opacity: 0;
    }
    10% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    20% {
        animation-timing-function: linear;
        animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    30% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        left: -100%;
        opacity: 0;
    }
    100% {
        animation-timing-function: linear;
        animation-direction: normal;
        opacity: 0;
        left: -100%;
    }
}

@-webkit-keyframes anim_slides_right_to_left {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        left: 100%;
        opacity: 0;
    }
    10% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    20% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    30% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        left: -100%;
        opacity: 0;
    }
    100% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        opacity: 0;
        left: -100%;
    }
}

@-moz-keyframes anim_slides_right_to_left {
    0% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        left: 100%;
        opacity: 0;
    }
    10% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    20% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    30% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        left: -100%;
        opacity: 0;
    }
    100% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        opacity: 0;
        left: -100%;
    }
}

@-o-keyframes anim_slides_right_to_left {
    0% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        left: 100%;
        opacity: 0;
    }
    10% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    20% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        left: 0px;
        opacity: 1;
    }
    30% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        left: -100%;
        opacity: 0;
    }
    100% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        opacity: 0;
        left: -100%;
    }
}





/**
 * Top to down slide effect
 *
 */
@keyframes anim_slides_top_to_down {
    0% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        top: -100%;
        opacity: 0;
    }
    10% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    20% {
        animation-timing-function: linear;
        animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    30% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        top: 100%;
        opacity: 0;
    }
    100% {
        animation-timing-function: linear;
        animation-direction: normal;
        opacity: 0;
        top: 100%;
    }
}

@-webkit-keyframes anim_slides_top_to_down {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        top: -100%;
        opacity: 0;
    }
    10% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    20% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    30% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        top: 100%;
        opacity: 0;
    }
    100% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        opacity: 0;
        top: 100%;
    }
}

@-moz-keyframes anim_slides_top_to_down {
    0% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        top: -100%;
        opacity: 0;
    }
    10% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    20% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    30% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        top: 100%;
        opacity: 0;
    }
    100% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        opacity: 0;
        top: 100%;
    }
}

@-o-keyframes anim_slides_top_to_down {
    0% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        top: -100%;
        opacity: 0;
    }
    10% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    20% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    30% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        top: 100%;
        opacity: 0;
    }
    100% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        opacity: 0;
        top: 100%;
    }
}




/**
 * Down to top slide effect
 *
 */
@keyframes anim_slides_down_to_top {
    0% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        top: 100%;
        opacity: 0;
    }
    10% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    20% {
        animation-timing-function: linear;
        animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    30% {
        animation-timing-function: ease-in-out;
        animation-direction: normal;
        top: -100%;
        opacity: 0;
    }
    100% {
        animation-timing-function: linear;
        animation-direction: normal;
        opacity: 0;
        top: -100%;
    }
}

@-webkit-keyframes anim_slides_down_to_top {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        top: 100%;
        opacity: 0;
    }
    10% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    20% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    30% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: normal;
        top: -100%;
        opacity: 0;
    }
    100% {
        -webkit-animation-timing-function: linear;
        -webkit-animation-direction: normal;
        opacity: 0;
        top: -100%;
    }
}

@-moz-keyframes anim_slides_down_to_top {
    0% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        top: 100%;
        opacity: 0;
    }
    10% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    20% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    30% {
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-direction: normal;
        top: -100%;
        opacity: 0;
    }
    100% {
        -moz-animation-timing-function: linear;
        -moz-animation-direction: normal;
        opacity: 0;
        top: -100%;
    }
}

@-o-keyframes anim_slides_down_to_top {
    0% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        top: 100%;
        opacity: 0;
    }
    10% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    20% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        top: 0px;
        opacity: 1;
    }
    30% {
        -o-animation-timing-function: ease-in-out;
        -o-animation-direction: normal;
        top: -100%;
        opacity: 0;
    }
    100% {
        -o-animation-timing-function: linear;
        -o-animation-direction: normal;
        opacity: 0;
        top: -100%;
    }
}





/**
 *
 * /