.img-fill {
    width: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center
}

.img-fill > img {
    width: 100%;
    position: relative;
    display: inline-block;
    max-width: none;
}


/* ==== Slider Style === */

.Modern-Slider {
    overflow: hidden;
}

.Modern-Slider .NextArrow {
    position: absolute;
    top: 50%;
    right: 0px;
    width: 45px;
    height: 80px;
    background: rgba(0, 0, 0, .50);
    border: 0 none;
    margin-top: -22.5px;
    text-align: center;
    color: #FFF;
    z-index: 5;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.Modern-Slider .PrevArrow {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 45px;
    height: 80px;
    background: rgba(0, 0, 0, .50);
    border: 0 none;
    margin-top: -22.5px;
    text-align: center;
    color: #FFF;
    z-index: 5;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}



.Modern-Slider .slick-dots {
    position: absolute;
    height: 50px;
    bottom: 0px;
    width: 100%;
    left: 0px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    text-align: center;
}

.Modern-Slider .slick-dots li {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: Transparent;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #FFF;
    margin: 0 2.5px;
    cursor: pointer;
    position: relative;
}

.Modern-Slider .slick-dots li a {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 120px;
    height: 75px;
    display: block;
    visibility: hidden;
    border: 4px solid rgba(0, 0, 0, .50);
    margin-left: -60px;
    margin-bottom: 15px;
    -webkit-transition: visibility 0.5s linear 0.5s;
    transition: visibility 0.5s linear 0.5s;
    -webkit-animation: fadeOut 0.5s both;
    animation: fadeOut 0.5s both;
}

.Modern-Slider .slick-dots li:hover a {
    visibility: visible;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-animation: fadeIn 0.5s both;
    animation: fadeIn 0.5s both;
}

.Modern-Slider .slick-dots li a img {
    width: 100%;
    height: 100%;
}

.Modern-Slider .item .img-fill .info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0, 52, 69, .15);
    text-align: center;
  /*  background:#333;*/
    /*opacity: 0.8*/
   

}

.Modern-Slider .item .img-fill .bg_style{
     background:url(../images/slideshow02.png?t=123);
     position: absolute;
     left: 0px;
     top:0px;
     height: 100%;
     width: 100%
}
.Modern-Slider .item a.buy-btn {
    animation: bounceInDown 1s both 2s;
}

.Modern-Slider .item h1 {
    animation: bounceOutRight 1s both .5s;
}

.Modern-Slider .item.slick-active a.buy-btn {
    animation: bounceInUp 1s both 1.2s;
}

.Modern-Slider .item.slick-active h1 {
    animation: bounceInRight 1s both .5s;
}

.Modern-Slider .item p {
    animation: bounceInRight 1s both .5s;
}

.Modern-Slider .item.slick-active p {
    animation: bounceInLeft 1s both 1s;
}


/*animation */


/* ==== Slider Image Transition === */


/* Animate.css */

@keyframes slideInRight {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        visibility: visible
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}


/* Animate.css */

@keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        visibility: hidden;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}


/* Animate.css */

@keyframes slideInLeft {
    0% {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        visibility: visible
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}


/* Animate.css */

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        visibility: hidden;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}