/* ===================================
    Button
====================================== */

/*
 * Button Circle
 */

.custom-btn-circle {
    padding: 0;
    text-align: center;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    font-size: 12px;
    line-height: 12px;
}
.custom-btn-circle i , .btn-icon i{
    position: static;
    margin-left: 0;
}

.custom-btn-circle.custom-btn-lg {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    font-size: 16px;
    line-height: 16px;
}

.custom-btn-circle.custom-btn-xl {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 24px;
}

.custom-btn-outline {
    border: 1px solid rgba(0,0,0, 0.3);
    background-color: rgba(0,0,0,0);
    color: rgba(0,0,0, 0.6);;
}

.custom-btn-outline:hover {
    border: 1px solid #12988b;
    background-color: #12988b;
    color: white;
}

.custom-btn-outline-2:hover {
    border: 1px solid #312828;
    background-color: #312828;
    color: white;
}

.custom-btn-outline-3:hover {
    border: 1px solid #127b98;
    background-color: #127b98;
    color: white;
}

.custom-btn-outline-4:hover {
    border: 1px solid #e48049;
    background-color: #e48049;
    color: white;
}

.custom-btn {
    border: 1px solid rgba(0,0,0, 0);
    color: white;
}

.custom-btn:hover {
    border: 1px solid rgba(0,0,0, 0.3);
    background-color: rgba(0,0,0,0);
    color: rgba(0,0,0, 0.6);;
}

.btn-icon-left i {
    margin-right: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.btn-icon-small {
    font-size: 2rem;
    color: rgba(0,0,0, 0.6);;
}

.btn-icon-medium {
    font-size: 3rem;
    color: rgba(0,0,0, 0.6);;
}

.btn-icon-large {
    font-size: 4rem;
    color: rgba(0,0,0, 0.6);
}

.btn-icon i {
    vertical-align: middle;
}