/*! 
 *   Unlock Commerce
 *   Snippet Type: Backbone
 *   Snippet Name: Carousels
 *   Author: Shashank Agarwal
 */


/* +++++++++++++++++++++++++++++ Carousels +++++++++++++++++++++++++++++ */
#banner{
    position:relative;
}
.carousel-inner img {
    margin: 0 auto;
}
.carousel-indicators li, .carousel-indicators li.active {
   margin: 1px 4px;
}
.carousel-indicators li.active
{
    width:10px;height:10px;
}
.carousel-control.left,
.carousel-control.right {
    background: none;
    width: 20%;
    min-width:50px;
}

.carousel-control .fa {
    width: auto;
    height: auto;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

@media screen and (max-width:450px) {
    .carousel-indicators li, .carousel-indicators li.active {
        height: 5px;
        width: 5px;
    }
}

@media screen and (min-width: 768px) {
    .carousel-indicators {
        bottom: 0px;
    }
}


/* +++++++++++++++++++++++++++++ Center Align Slick Slider +++++++++++++++++++++++++++++ */

#banner .center {
    margin-left: -100px;
    margin-right: -100px;
}

  #banner   .center .slick-current  img {
         opacity: 1;
      
    }
  #banner .slider{
      margin: 0;
    padding-top: 0;
  }
  #banner   .center  img {
          opacity: 0.4;
        transition: all 300ms ease;
    }

#banner .content {
    margin: auto;
    padding: 20px 40px;
    width: auto;
}
#banner .slick-slide{
    padding:0;
}
#banner .slick-next:before, 
#banner .slick-prev:before{
    font-size:50px;
}
#banner .slick-prev, 
#banner .slick-next{
    background:none !important;
}
#banner .slick-dots{
    bottom:10px;
}
#banner .slick-dots li{
       width: 15px;
    height: 15px;
}
#banner .slick-dots li button{
     width: 15px;
    height: 15px;
    color: #fff;
    background: #fff;
    border-radius: 50%;
}
    #banner .slick-dots li button:before {
        width: 15px;
        height: 15px;
        color: #fff;
    }
    #banner .slick-dots li.slick-active button{
           color: #000;
    background: #000;
    }
#banner .slick-dots li.slick-active button:before {
  
    color: #000;
}

@media screen and (max-width:767px){
    #banner .slick-dots{
        display:none;
    }
}