@-webkit-keyframes left-right {
        0% {
            -moz-transform: translateY(-20%) translateX(-10%);
            -ms-transform: translateY(-20%) translateX(-10%);
            -webkit-transform: translateY(-20%) translateX(-10%);
            transform: translateY(-20%) translateX(-10%)
        }
        100% {
            -moz-transform: translateY(0%) translateX(10%);
            -ms-transform: translateY(0%) translateX(10%);
            -webkit-transform: translateY(0%) translateX(10%);
            transform: translateY(0%) translateX(10%)
        }
    }
    
    @-moz-keyframes left-right {
        0% {
            -moz-transform: translateY(-20%) translateX(-10%);
            -ms-transform: translateY(-20%) translateX(-10%);
            -webkit-transform: translateY(-20%) translateX(-10%);
            transform: translateY(-20%) translateX(-10%)
        }
        100% {
            -moz-transform: translateY(0%) translateX(10%);
            -ms-transform: translateY(0%) translateX(10%);
            -webkit-transform: translateY(0%) translateX(10%);
            transform: translateY(0%) translateX(10%)
        }
    }
    
    @-ms-keyframes left-right {
        0% {
            -moz-transform: translateY(-20%) translateX(-10%);
            -ms-transform: translateY(-20%) translateX(-10%);
            -webkit-transform: translateY(-20%) translateX(-10%);
            transform: translateY(-20%) translateX(-10%)
        }
        100% {
            -moz-transform: translateY(0%) translateX(10%);
            -ms-transform: translateY(0%) translateX(10%);
            -webkit-transform: translateY(0%) translateX(10%);
            transform: translateY(0%) translateX(10%)
        }
    }
    
    @keyframes left-right {
        0% {
            -moz-transform: translateY(-20%) translateX(-10%);
            -ms-transform: translateY(-20%) translateX(-10%);
            -webkit-transform: translateY(-20%) translateX(-10%);
            transform: translateY(-20%) translateX(-10%)
        }
        100% {
            -moz-transform: translateY(0%) translateX(10%);
            -ms-transform: translateY(0%) translateX(10%);
            -webkit-transform: translateY(0%) translateX(10%);
            transform: translateY(0%) translateX(10%)
        }
    }
    
    @-webkit-keyframes right-left {
        0% {
            -moz-transform: translateY(0%) translateX(10%);
            -ms-transform: translateY(0%) translateX(10%);
            -webkit-transform: translateY(0%) translateX(10%);
            transform: translateY(0%) translateX(10%)
        }
        100% {
            -moz-transform: translateY(-20%) translateX(-10%);
            -ms-transform: translateY(-20%) translateX(-10%);
            -webkit-transform: translateY(-20%) translateX(-10%);
            transform: translateY(-20%) translateX(-10%)
        }
    }
    
    @-moz-keyframes right-left {
        0% {
            -moz-transform: translateY(0%) translateX(10%);
            -ms-transform: translateY(0%) translateX(10%);
            -webkit-transform: translateY(0%) translateX(10%);
            transform: translateY(0%) translateX(10%)
        }
        100% {
            -moz-transform: translateY(-20%) translateX(-10%);
            -ms-transform: translateY(-20%) translateX(-10%);
            -webkit-transform: translateY(-20%) translateX(-10%);
            transform: translateY(-20%) translateX(-10%)
        }
    }
    
    @-ms-keyframes right-left {
        0% {
            -moz-transform: translateY(0%) translateX(10%);
            -ms-transform: translateY(0%) translateX(10%);
            -webkit-transform: translateY(0%) translateX(10%);
            transform: translateY(0%) translateX(10%)
        }
        100% {
            -moz-transform: translateY(-20%) translateX(-10%);
            -ms-transform: translateY(-20%) translateX(-10%);
            -webkit-transform: translateY(-20%) translateX(-10%);
            transform: translateY(-20%) translateX(-10%)
        }
    }
    
    @keyframes right-left {
        0% {
            -moz-transform: translateY(0%) translateX(10%);
            -ms-transform: translateY(0%) translateX(10%);
            -webkit-transform: translateY(0%) translateX(10%);
            transform: translateY(0%) translateX(10%)
        }
        100% {
            -moz-transform: translateY(-20%) translateX(-10%);
            -ms-transform: translateY(-20%) translateX(-10%);
            -webkit-transform: translateY(-20%) translateX(-10%);
            transform: translateY(-20%) translateX(-10%)
        }
    }
    
    .sy-box.sy-loading {
        background: url("sy-loader.gif") 50% 50% no-repeat;
        -moz-background-size: 100px;
        -o-background-size: 100px;
        -webkit-background-size: 100px;
        background-size: 100px;
        min-height: 100px
    }
    
    .sy-box.sy-loading .sy-slides-wrap,
    .sy-box.sy-loading .sy-pager {
        visibility: hidden
    }
    
    .sy-slides-wrap {
        position: relative;
        height: auto;
        width: 100%
    }
    
    .sy-slides-wrap:hover .sy-controls {
        display: block
    }
    
    .sy-slides-crop {
        height: 100%;
        width: 100%;
        position: absolute;
        overflow: hidden
    }
    
    .sy-list {
        width: 100%;
        height: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute
    }
    
    .sy-list.horizontal {
        -moz-transition: left ease;
        -o-transition: left ease;
        -webkit-transition: left ease;
        transition: left ease
    }
    
    .sy-list.vertical {
        -moz-transition: top ease;
        -o-transition: top ease;
        -webkit-transition: top ease;
        transition: top ease
    }
    
    .sy-slide {
        position: absolute;
        width: 100%;
        z-index: 2
    }
    .sy-slide img{width: 100%;}
    .sy-slide.kenburns {
        width: 140%;
        left: -20%
    }
    
    .sy-slide.kenburns.useCSS {
        -moz-transition-property: opacity;
        -o-transition-property: opacity;
        -webkit-transition-property: opacity;
        transition-property: opacity
    }
    
    .sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
        -webkit-animation-name: left-right;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-name: left-right;
        -moz-animation-fill-mode: forwards;
        -o-animation-name: left-right;
        -o-animation-fill-mode: forwards;
        animation-name: left-right;
        animation-fill-mode: forwards
    }
    
    .sy-slide.kenburns.useCSS.sy-ken:nth-child(2n) {
        -webkit-animation-name: right-left;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-name: right-left;
        -moz-animation-fill-mode: forwards;
        -o-animation-name: right-left;
        -o-animation-fill-mode: forwards;
        animation-name: right-left;
        animation-fill-mode: forwards
    }
    
    .sy-slide.sy-active {
        z-index: 3
    }
    
    .sy-slide>img {
        margin: 0;
        padding: 0;
        display: block;
        width: 100%;
        border: 0
    }
    
    .sy-slide>a>img {
        margin: 0;
        padding: 0;
        display: block;
        width: 100%;
        border: 0
    }
    
    .sy-controls {
        display: none;
        list-style: none;
        height: 100%;
        width: 100%;
        position: absolute;
        padding: 0;
        margin: 0
    }
    
    .sy-controls li {
        position: absolute;
        width: 5%;
        min-width: 2em;
        height: 100%;
        z-index: 33
    }
    
    .sy-controls li.sy-prev {
        left: 0;
        top: 0
    }
    
    .sy-controls li.sy-prev a:after {
        background-position: 0% 0;box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    border-radius: 100px;
    }
    
    .sy-controls li.sy-next {
        right: 8px;
        top: 0
    }
    
    .sy-controls li.sy-next a:after {
       background-position: 103% 0;
    margin-right: -27px;
    position: absolute;
    left: 20%;box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    border-radius: 100px;
    }
    
    .sy-controls li a {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
        text-indent: -9999px
    }
    
    .sy-controls li a:link,
    .sy-controls li a:visited {
        opacity: .9
    }
    
    .sy-controls li a:hover,
    .sy-controls li a:focus {
        opacity: 1;
        outline: none
    }
    
    .sy-controls li a:after {
        content: "";
        background-image: url("arrow.png");
        background-repeat: no-repeat;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
        text-align: center;
        text-indent: 0;
        line-height: 2.8em;
        color: #111;
        font-weight: 800;
        position: absolute;
        width: 42px;
        height: 42px;
        left: 50%;
        top: 50%;
        margin-top: -1.4em;
        margin-left: -.8em;
        -moz-border-radius: 0%;
        -webkit-border-radius: 0%;
        border-radius: 0%
    }
    
    @media only screen and (max-device-width:600px) {
        .sy-controls {
            display: block
        }
        .sy-controls li {
            min-width: 2.1em
        }
        .sy-controls li a:after {
            width: 1.1em;
            height: 1.4em;
            margin-top: -.7em;
            margin-left: -.7em
        }
    }
    
    .sy-caption-wrap {
        display: none;
        position: absolute;
        bottom: 2em;
        z-index: 12;
        left: 50%
    }
    
    .sy-caption-wrap .sy-caption {
        position: relative;
        left: -50%;
        background-color: rgba(0, 0, 0, .54);
        color: #fff;
        padding: .4em 1em;
        -moz-border-radius: 1.2em;
        -webkit-border-radius: 1.2em;
        border-radius: 1.2em
    }
    
    .sy-caption-wrap .sy-caption a:link,
    .sy-caption-wrap .sy-caption a:visited {
        color: #e24b70;
        font-weight: 600;
        text-decoration: none
    }
    
    .sy-caption-wrap .sy-caption a:hover,
    .sy-caption-wrap .sy-caption a:focus {
        text-decoration: underline
    }
    
    @media only screen and (max-device-width:600px),
    screen and (max-width:600px) {
        .sy-caption-wrap {
            left: 0;
            bottom: .4em
        }
        .sy-caption-wrap .sy-caption {
            left: 0;
            padding: .2em .4em;
            font-size: .92em;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0
        }
    }
    
    .sy-pager {
        overflow: visible;
        position: absolute;
        z-index: 9;
        outline: 0;
        *zoom: 1;
        display: block;
        width: 100%;
        margin: -50px 0 20px 0;
        padding: 0;
        list-style: none;
        text-align: center;
        display:none; 
    }
    
    .sy-pager li {
        display: inline-block;
        width: 1.2em;
        height: 4px;
        margin: 0 0.5em 0 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0
    }
    
    .sy-pager li.sy-active a {
        background-color: #0099cc;
    }
    
    .sy-pager li a {
        width: 100%;
        height: 100%;
        display: block;
        background-color: #ccc;
        text-indent: -9999px;
        -moz-background-size: 2em;
        -o-background-size: 2em;
        -webkit-background-size: 2em;
        background-size: 2em;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0
    }
    
    .sy-pager li a:link,
    .sy-pager li a:visited {
        opacity: 1;
        outline: 0;
        border-radius:0px;
    }
    
    .sy-pager li a:hover,
    .sy-pager li a:focus {
        opacity: .6
    }
    
    .sy-filler {
        width: 100%
    }
    
    .sy-filler.ready {
        -moz-transition: padding 600ms ease;
        -o-transition: padding 600ms ease;
        -webkit-transition: padding 600ms ease;
        transition: padding 600ms ease
    }
    
    @media screen and (max-width:767px) {
        .sy-pager {
           
        }
        .sy-pager li:last-child{
            margin-right:0px !important;
        }
    }
    #add-banner .sy-controls li.sy-prev a:after {left:50%;}
    #add-banner .sy-controls li.sy-next a:after {left:40%;}