3 CTA Buttons

/********************
    CTA Standard
********************/

// Custom Widget Properties
.customwidget {
    width: 100%;
    float: left;
}

// CTA Custom: Each CTA Pod
.ctacustom {
    width:100%;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
    display: inline-block;
    background-color: rgba(199, 191, 178,0.5);
    -webkit-box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.75);
}

// CTA Custom: The Image
.ctacustom img {
    position: relative;
    width: 90%;
    height: 200px;
    padding-top: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

// CTA Custom: The textbox
.ctacustom-textbox {
    position: relative;
    width: 90%;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height:50px; 
    background-color:$brand-primary;
    -webkit-box-shadow: 0px 8px 5px -2px rgba(0,0,0,0.48);
    -moz-box-shadow: 0px 8px 5px -2px rgba(0,0,0,0.48);
    box-shadow: 0px 8px 5px -2px rgba(0,0,0,0.48);
}

// CTA Custom: The actual text within the textbox
.ctacustom-textbox p {
    text-align: center;
    padding-top: 11px;
    font-size: 18px;
    color: $brand-second;
}

// Media Queries
@media (max-width: 767px) {
    // Centering the entire div and changing width
    .ctacustom-container {
        float: none;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 521px) {
    // Changing width of entire container
	.ctacustom-container {
        width: 100%;
    }
}
This entry was posted in   .
Bookmark the   permalink.

Matt Barrett has written 1 article