.owl-carousel .owl-dots{
    text-align: center;
}

.owl-carousel button.owl-dot{
    background-color: #36A9E1;
    border:none;
    height:10px;
    width:10px;
    margin-left: 10px;
    border-radius: 100px;
    transition: width .3s ease-out;
    -webkit-transition: width .3s ease-out;
    -moz-transition: width .3s ease-out;
    -o-transition: width .3s ease-out;
}

.owl-carousel button.owl-dot.active{
    background-color:#36A9E1;
    border:none;
    width:30px;
}

.owl-carousel button:focus{
    outline: none;
}