/*********************************************
 * SV-SLIDER (jQuery/CSS slider)
 *********************************************
 *
 * Developed by: Pau Sanchez V.
 *
 * website:     pausanchezv.com
 * Github:      github.com/pausanchezv
 * Linkedin:    linkedin.com/in/pausanchezv
 * Twitter:     twitter.com/pausanchezv
 * Facebook:    facebook.com/pausanchezv
 *
 * All rights reserved. - Barcelona 2018 -
 *
 **********************************************/

.sv-slider {
    font-family: 'Open Sans',Arial, Helvetica, sans-serif;
    min-width: 380px;
    position: relative;
    overflow: hidden;
}

.sv-slider > img {
    max-width: 100%;
    height: auto;
    overflow: hidden;
    display: none;
}

.sv-slider > .buttons {
    display: none;
}

.sv-slider > .buttons > a {
    cursor: pointer;
    position: absolute;
    z-index: /*100*/950;
}

.sv-slider > .buttons > a:hover {
    opacity: .85;
}

.sv-slider > .caption {
    position: absolute;
    max-width: 79%;
    z-index: /*50*/900;
}

.sv-slider > .filter {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: /*10*/850;
}

.sv-slider > .pager {
    position: absolute;
    z-index: /*150*/ 999;
    margin: 0;
}

.sv-slider > .pager > div {
    border: 1px solid #999;
    background-color: rgba(255,255,255,.9);
    float: left;
    width: 15px;
    height: 15px;
    border-radius: 100px;
    margin-right: 10px;
    cursor: pointer;
}

.sv-slider > .pager.dark > div {
    border: 1px solid #999;
    background-color: rgba(0,0,0,.75);
}

.sv-slider > .pager.bg {
    padding: 5px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, .5);
}
.sv-slider > .pager.bg-dark {
    background-color: rgba(0, 0, 0, .5);
}

.sv-slider > .pager > div.selected {
    background-color: #FE2E2E;
}

.sv-slider > .interval-bar {
    position: absolute;
    height: 9px;
    background-color: rgba(140,140,140,.85);
    width: 0;
}

/********* Animations CSS ***********/

.animate-slider-rotation-right {
    animation: animate-slider-right 400ms linear infinite;
    position: relative;
}

.animate-slider-rotation-left {
    animation: animate-slider-left 400ms linear infinite;
    position: relative;
}

.animate-slider-vibration-left,
.animate-slider-vibration-right {
    animation: animate-image-vibration 80ms linear infinite;
    position: relative;
}

.animate-slider-translation-left{
    animation: animate-image-translation-left 400ms linear infinite;
    transform: scaleX(1.3) scaleY(1.3);
    position: relative;
}

.animate-slider-translation-right {
    animation: animate-image-translation-right 400ms linear infinite;
    transform: scaleX(1.3) scaleY(1.3);
    position: relative;
}

.animate-slider-zoom-left {
    animation: animate-image-zoom-left 400ms linear infinite;
    position: relative;
}

.animate-slider-zoom-right {
    animation: animate-image-zoom-right 400ms linear infinite;
    position: relative;
}

@keyframes animate-slider-right {
    0%   {
        -ms-transform: rotate(0deg) scaleX(1) scaleY(1);
        -webkit-transform: rotate(0deg) scaleX(1) scaleY(1);
        transform: rotate(0deg) scaleX(1) scaleY(1);
    }

    25% {
        -ms-transform: rotate(90deg) scaleX(1.25) scaleY(1.25);
        -webkit-transform: rotate(90deg) scaleX(1.25) scaleY(1.25);
        transform: rotate(90deg) scaleX(1.3) scaleY(1.3);
    }
    50%  {
        -ms-transform: rotate(180deg) scaleX(1.5) scaleY(1.5);
        -webkit-transform: rotate(180deg) scaleX(1.5) scaleY(1.5);
        transform: rotate(180deg) scaleX(1.6) scaleY(1.6);
    }

    75% {
        -ms-transform: rotate(270deg) scaleX(1.75) scaleY(1.75);
        -webkit-transform: rotate(270deg) scaleX(1.75) scaleY(1.75);
        transform: rotate(270deg) scaleX(1.9) scaleY(1.9);
    }
    100% {
        -ms-transform: rotate(360deg) scaleX(2) scaleY(2);
        -webkit-transform: rotate(360deg) scaleX(2) scaleY(2);
        transform: rotate(360deg) scaleX(2.2) scaleY(2.2);
    }
}

@-webkit-keyframes animate-slider-right {
    0%   {
        -ms-transform: rotate(0deg) scaleX(1) scaleY(1);
        -webkit-transform: rotate(0deg) scaleX(1) scaleY(1);
        transform: rotate(0deg) scaleX(1) scaleY(1);
    }

    25% {
        -ms-transform: rotate(90deg) scaleX(1.25) scaleY(1.25);
        -webkit-transform: rotate(90deg) scaleX(1.25) scaleY(1.25);
        transform: rotate(90deg) scaleX(1.3) scaleY(1.3);
    }
    50%  {
        -ms-transform: rotate(180deg) scaleX(1.5) scaleY(1.5);
        -webkit-transform: rotate(180deg) scaleX(1.5) scaleY(1.5);
        transform: rotate(180deg) scaleX(1.6) scaleY(1.6);
    }

    75% {
        -ms-transform: rotate(270deg) scaleX(1.75) scaleY(1.75);
        -webkit-transform: rotate(270deg) scaleX(1.75) scaleY(1.75);
        transform: rotate(270deg) scaleX(1.9) scaleY(1.9);
    }
    100% {
        -ms-transform: rotate(360deg) scaleX(2) scaleY(2);
        -webkit-transform: rotate(360deg) scaleX(2) scaleY(2);
        transform: rotate(360deg) scaleX(2.2) scaleY(2.2);
    }
}

@keyframes animate-slider-left {
    0%   {
        -ms-transform: rotate(360deg) scaleX(2) scaleY(2);
        -webkit-transform: rotate(360deg) scaleX(2) scaleY(2);
        transform: rotate(360deg) scaleX(2.2) scaleY(2.2);
    }

    25% {
        -ms-transform: rotate(270deg) scaleX(1.75) scaleY(1.75);
        -webkit-transform: rotate(270deg) scaleX(1.75) scaleY(1.75);
        transform: rotate(270deg) scaleX(1.9) scaleY(1.9);

    }
    50%  {
        -ms-transform: rotate(180deg) scaleX(1.5) scaleY(1.5);
        -webkit-transform: rotate(180deg) scaleX(1.5) scaleY(1.5);
        transform: rotate(180deg) scaleX(1.6) scaleY(1.6);

    }

    75% {
        -ms-transform: rotate(90deg) scaleX(1.25) scaleY(1.25);
        -webkit-transform: rotate(90deg) scaleX(1.25) scaleY(1.25);
        transform: rotate(90deg) scaleX(1.3) scaleY(1.3);
    }
    100% {
        -ms-transform: rotate(0deg) scaleX(1) scaleY(1);
        -webkit-transform: rotate(0deg) scaleX(1) scaleY(1);
        transform: rotate(0deg) scaleX(1) scaleY(1);

    }
}

@-webkit-keyframes animate-slider-left {
    0%   {
        -ms-transform: rotate(360deg) scaleX(2) scaleY(2);
        -webkit-transform: rotate(360deg) scaleX(2) scaleY(2);
        transform: rotate(360deg) scaleX(2.2) scaleY(2.2);
    }

    25% {
        -ms-transform: rotate(270deg) scaleX(1.75) scaleY(1.75);
        -webkit-transform: rotate(270deg) scaleX(1.75) scaleY(1.75);
        transform: rotate(270deg) scaleX(1.9) scaleY(1.9);

    }
    50%  {
        -ms-transform: rotate(180deg) scaleX(1.5) scaleY(1.5);
        -webkit-transform: rotate(180deg) scaleX(1.5) scaleY(1.5);
        transform: rotate(180deg) scaleX(1.6) scaleY(1.6);

    }

    75% {
        -ms-transform: rotate(90deg) scaleX(1.25) scaleY(1.25);
        -webkit-transform: rotate(90deg) scaleX(1.25) scaleY(1.25);
        transform: rotate(90deg) scaleX(1.3) scaleY(1.3);
    }
    100% {
        -ms-transform: rotate(0deg) scaleX(1) scaleY(1);
        -webkit-transform: rotate(0deg) scaleX(1) scaleY(1);
        transform: rotate(0deg) scaleX(1) scaleY(1);

    }
}

@keyframes animate-image-vibration {
    0%   {top: -30px; left: -30px} 50%  {top: 0; left: 0} 100% {top: 30px; left: 30px;}
}

@-webkit-keyframes animate-image-vibration {
    0%   {top: -30px; left: -30px} 50%  {top: 0; left: 0} 100% {top: 30px; left: 30px;}
}

@keyframes animate-image-translation-right {
    0% {bottom: 10px; left: -10px;}
    25% {bottom: -30px; left: 0;}
    50% {bottom: -30px; left: 30px;}
    75% {bottom: 30px; left: 30px;}
    100% {bottom: 10px; left: -10px;}
}

@-webkit-keyframes animate-image-translation-right {
    0% {bottom: 10px; left: -10px;}
    25% {bottom: -30px; left: 0;}
    50% {bottom: -30px; left: 30px;}
    75% {bottom: 30px; left: 30px;}
    100% {bottom: 10px; left: -10px;}
}

@keyframes animate-image-translation-left {
    0% {top: 10px; left: -10px;}
    25% {top: -30px; left: 0;}
    50% {top: -30px; left: 30px;}
    75% {top: 30px; left: 30px; }
    100% {top: 10px; left: -10px;}
}

@-webkit-keyframes animate-image-translation-left {
    0% {top: 10px; left: -10px;}
    25% {top: -30px; left: 0;}
    50% {top: -30px; left: 30px;}
    75% {top: 30px; left: 30px; }
    100% {top: 10px; left: -10px;}
}

@keyframes animate-image-zoom-right {
    0% {transform: scale(1);}
    25% {transform: scale(1.2);}
    50% {transform: scale(0.6);}
    100% {transform: scale(1);}
}

@-webkit-keyframes animate-image-zoom-right {
    0% {transform: scale(1);}
    25% {transform: scale(1.2);}
    50% {transform: scale(0.6);}
    100% {transform: scale(1);}
}


@keyframes animate-image-zoom-left {
    0% {transform: scale(1);}
    25% {transform: scale(0.6);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
}

@-webkit-keyframes animate-image-zoom-left {
    0% {transform: scale(1);}
    25% {transform: scale(0.6);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
}