﻿
/**** Colored Cards ****/

.content .pink .card {
    border: solid 1px #3a5c20;
    /*margin-top: 70px;*/
    border-radius: 0;
}

    .content .pink .card .card-header {
        background-color: #3a5c20;
        border-radius: 0;
    }

.content .green .card {
    border: solid 1px #3a5c20;
    /*margin-top: 70px;*/
    border-radius: 0;
}

    .content .green .card .card-header {
        background-color: #3a5c20;
        border-radius: 0;
    }

.content .orange .card {
    border: solid 1px #3a5c20;
    /*margin-top: 70px;*/
    border-radius: 0;
}

    .content .orange .card .card-header {
        background-color: #3a5c20;
        border-radius: 0;
    }


    .content .card .card-header h3 {
        color:#fff;
    }

.content .card .card-title {
    margin-bottom: 0;
}

.content .card .card-title-icon {
    position: absolute;
    top: -70px;
    left: -16px;
    width: 80px;
    height: 120px;
}


/**** Faded BG *****/


.content.faded-bg {
    background-image: url('/Images/Layout/dark-faded-rock.jpg');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #000;
    color: #fff;
}

.content.faded-bg h1 {
    color: #fff;
}

.content.faded-bg h2{
    color:#fff;
}

.content.faded-bg a:not(.btn),
.content.faded-bg a:not(.btn):visited {
    color: #FFFFCC;
}

.content.faded-bg a:not(.btn):hover {
    color: #FFFF00;
}

/**** Green BG ****/
.content.green-bg {
    background-color: #535852;
}

.content.green-bg h2,
.content.green-bg p{
    color:#fff !important;
}

    .content.green-bg .card {
        border-radius: 0;
    }

.content.green-bg a,
.content.green-bg a:visited{
    color:#fff000;
}

    .content.green-bg a:hover,
    .content.green-bg a:has(:hover){
        color: #FFF780 !important;
        text-decoration:underline;
    }


/**** Credit Cards ****/

.credit-cards {
    padding-left: 32px;
}

/**** Contact Page ****/

.contact-photo {
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    object-fit: cover;
    border: 1px solid #333333;
}

/** Mulch Calculator **/

.card.mulch-calc {
    border-color: #000000 !important;
}

.mulch-calc .card-header {
    background-color: #3a5c20 !important;
    border-radius: 0;
}

.mulch-calc label{
    color:#000000 !important;
}

.mulch-calc p strong{
    color:#000 !important;
}

/** Photos next to mulch calc **/

.mulch-photos{
    overflow:hidden;
    position:relative;
}

    .mulch-photos img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }