/* Carousel styles */
.carouselExample{
    position: relative;
}
.slick-slide{
    height: 400px;
    position: relative;
    text-align: center;
}

.headImage {
    margin-bottom: 0px;
    width: auto;
   
}
.buttonPosition-rt-mid{    

    position:absolute;
    top: 176px;
    right: -11px;
    z-index: 11111111;
}
.buttonPosition-bt-mid{
    width: 200px;
    margin: 50px auto 0;
}
.carouselHeading{
    position:absolute;
    top: 10px;
    right: 0;
    padding: 16px;
    text-align: center;
    background-color: #fff;
}


.carouseldescription{
    position:absolute;
    bottom: 7px;
    left:0;
    right: 0;
    padding: 15px 22px;
    width: 370px;
    background-color: #fff;
    text-align: left;
}
.carouseldescription a{
    font-size: .8em;
}

.buttonPosition-lft-bt{
    position:absolute;
    bottom: 28px;
    left: 313px;
    text-align: center;
    z-index: 888;
}



/* Arrows */

#mainImageDiv .slick-prev:before, #mainImageDiv .slick-next:before {
    font-size: 55px;
}

.slick-prev:before, .slick-next:before {
    color: #cefdf3 !important;
}

/* Pagination dots */
.slick-dots{
    position: absolute;
    bottom: -45px;
}
.slick-dots li{
    margin: 0 15px;
}

#mainImageDiv .slick-dots li button:before{
    font-size: 28px;

}
.slick-dots li button:before{
    opacity: .4;
}
.slick-dots li.slick-active button:before {
    opacity: 1.0;
    color: #000;
}
.slick-dots li button:focus{
    outline: 2px dotted red;
    /* border: 2px dotted red; */
    outline-offset: 2px;
}