Styling Caldera Forms with a Colored Opaque Background

caldera-colored-opaque.css

/*** MAIN FORM CONTAINER ***/
.caldera-grid {
    background: rgba(127, 156, 150, 0.95);
    padding: 40px 40px 10px 40px;
}
/*** HEADER FONT ***/
.caldera-grid h2 {
    color: #DCE0D9;
    font-weight: 700;
    text-shadow: 2px 2px 0 #666;
}
/*** BODY FONT ***/
.caldera-grid p,
.caldera-grid label {
    color: #f5f5f5;
}
/*** ADDS EXTRA SPACE BELOW HORIZONTAL RULE ***/
.caldera-grid .row {
    margin-bottom: 20px;
}
/*** HORIZONTAL RULE ***/
.caldera-grid hr {
    border-top: 5px solid #DCE0D9;
}
/*** FIELD STYLING ***/
.caldera-grid .form-control {
    background: rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: 0;
    color: #f5f5f5;
}
/*** FIELD STYLING WHEN IN FOCUS ***/
.caldera-grid .form-control:focus {
    color: #f5f5f5;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: none;
}
/*** BUTTON STYLING ***/
.caldera-grid input[type=submit] {
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 0;
    background: #555;
    color: #f5f5f5;
    border: none;
    transition: -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
/*** BUTTON HOVER STYLING ***/
.caldera-grid input[type=submit]:hover {
    background: #444;
    color: #fff;
}