:root {
    --milliken-blue: #004a96;
    --pale-blue: #0070c0;
    --green: #8ba054;
    font-family: Helvetica
}

#cc-grid {
    display: grid;
    width: 100%;
    max-width: 1400px;
    margin: 50px auto
}

#cc-grid header {
    display: grid;
    grid-gap: 24px;
    grid-template-columns: 1fr 2fr 4fr 1fr repeat(4, 2fr);
    margin-bottom: 20px
}

#cc-grid header img.logo {
    grid-column: 2 / span 2;
    max-width: 300px
}

#cc-grid header img.co2 {
    max-width: 100%;
    grid-column: 5 / span 1;
    object-fit: cover;
    display: flex;
    align-items: Center
}

#cc-grid header img.trees {
    max-width: 100%;
    grid-column: 6 / span 1;
    object-fit: cover;
    display: flex;
    align-items: Center
}

#cc-grid header img.cars {
    width: 100%;
    grid-column: 7 / span 1;
    object-fit: cover
}

#cc-grid header img.cement {
    width: 100%;
    grid-column: 8 / span 1;
    object-fit: cover
}

#cc-grid header h3 {
    grid-column: 2 / span 2;
    display: flex;
    align-items: center;
    color: var(--milliken-blue);
    text-transform: uppercase;
    font-size: 1.5rem
}

#cc-grid main {
    display: grid;
    grid-gap: 24px;
    grid-template-columns: 1fr 2fr 4fr 1fr repeat(4, 2fr)
}

#cc-grid main h6 {
    margin: 0px;
    color: var(--pale-blue);
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    display: flex;
    flex-direction: column
}

#cc-grid main h5 {
    margin: 0px;
    color: var(--pale-blue);
    text-transform: uppercase;
    font-size: 16px;
    display: flex;
    align-items: center;
    grid-column: 1
}

#cc-grid main div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: var(--pale-blue);
    position: relative
}

#cc-grid main div#breaker {
    grid-column: 1 / span 8;
    display: flex;
    justify-content: flex-end
}

#cc-grid main div#breaker button {
    background: var(--milliken-blue);
    color: white;
    text-transform: uppercase;
    border: none;
    font-weight: 600;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer
}

#cc-grid main div#breaker~span {
    border: solid 2px var(--pale-blue)
}

#cc-grid main div#breaker~span:first-of-type {
    grid-column: 3 / span 2;
    border: none;
    text-align: right;
    color: var(--pale-blue);
    font-weight: bold
}

#cc-grid main div#breaker~span:first-of-type~span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--pale-blue)
}

#cc-grid main div#breaker~span#offset_total {
    grid-column: 5 / span 1;
    color: white;
    background: var(--green);
    border-color: var(--green)
}

#cc-grid main div#breaker~span#trees_total {
    grid-column: 6 / span 1
}

#cc-grid main div#breaker~span#km_total {
    grid-column: 7 / span 1
}

#cc-grid main div#breaker~span#concrete_total {
    grid-column: 8 / span 1
}

#cc-grid main div input {
    width: 80%;
    text-align: center;
    border: none;
    color: var(--pale-blue);
    font-weight: bold;
    height: 40px;
    outline: none;
    font-size: 16px;
    appearance: textfield;
    -webkit-appearance: textfield
}

#cc-grid main div input::-webkit-outer-spin-button,
#cc-grid main div input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

#cc-grid main div input+label {
    padding-right: 5px
}

#cc-grid main div select {
    border: none;
    background: transparent;
    width: 90%;
    height: 40px;
    font-weight: bold;
    color: var(--pale-blue);
    outline: none
}

#cc-grid main div.border {
    border: solid 2px var(--pale-blue)
}

#cc-grid main div.equals:after {
    content: "=";
    position: absolute;
    right: -18px
}

#cc-grid main div.gwp {
    position: relative
}

#cc-grid main div.gwp:before {
    content: "+";
    position: absolute;
    left: -10px
}

#cc-grid main div.offset {
    color: white;
    background: var(--green);
    border-color: var(--green)
}

#cc-grid footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
}

#cc-grid footer ul {
    grid-column: 2 / span 1;
    list-style-type: none;
    padding: 0px;
    margin-top: 2rem
}

#cc-grid footer ul li {
    margin-bottom: 1rem;
    font-size: 12px
}

#cc-grid footer ul li a {
    color: var(--milliken-blue);
    text-decoration: none;
    font-weight: 600
}

/* MOBILE STYLING */
#cc-grid-mobile {
    /* display: none; */
}

#cc-grid-mobile  img.logo {

    max-width: 300px
}

#cc-grid-mobile  img.co2 {
    max-width: 100%;

    object-fit: cover;

    align-items: Center
}

#cc-grid-mobile  img.trees {
    max-width: 100%;

    object-fit: cover;

    align-items: Center
}

#cc-grid-mobile  img.cars {
    width: 100%;

    object-fit: cover
}

#cc-grid-mobile  img.cement {
    width: 100%;

    object-fit: cover
}

#cc-grid-mobile  h3 {

    color: var(--milliken-blue);
    text-transform: uppercase;
    font-size: 1.5rem
}


#cc-grid-mobile  h6 {
    margin: 0px;
    color: var(--pale-blue);
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    display: flex;
    flex-direction: column
}

#cc-grid-mobile  h5 {
    margin: 0px;
    color: var(--pale-blue);
    text-transform: uppercase;
    font-size: 16px;
    display: flex;
    align-items: center;
    grid-column: 1
}


#cc-grid-mobile button {
    background: var(--milliken-blue);
    color: white;
    text-transform: uppercase;
    border: none;
    font-weight: 600;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer
}

#cc-grid-mobile span {
    border: solid 2px var(--pale-blue)
}

#cc-grid-mobile span:first-of-type {
    grid-column: 3 / span 2;
    border: none;
    text-align: center;
    color: var(--pale-blue);
    font-weight: bold
}

#cc-grid-mobile span:first-of-type~span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--pale-blue)
}

#cc-grid-mobile #offset_total-mobile, .offset-mobile {
    height: 30px;
    text-align: center;

    color: white;
    background: var(--green);
    border-color: var(--green)
}

#cc-grid-mobile #trees_total-mobile, .trees-mobile {
    height: 30px;
    text-align: center;
}

#cc-grid-mobile #km_total-mobile, .km-mobile {
    height: 30px;
    text-align: center;
}

#cc-grid-mobile #concrete_total-mobile, .concrete-mobile {
    height: 30px;
    text-align: center;
}

#cc-grid-mobile .col-10 > div {
    text-align: center;
}

#cc-grid-mobile  input {
    width: 80%;
    text-align: center;
    border: none;
    color: var(--pale-blue);
    font-weight: bold;
    height: 40px;
    outline: none;
    font-size: 16px;
    appearance: textfield;
    -webkit-appearance: textfield
}

#cc-grid-mobile input::-webkit-outer-spin-button,
#cc-grid-mobile input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

#cc-grid-mobile input+label {
    padding-right: 5px
}

#cc-grid-mobile select {
    border: none;
    background: transparent;
    width: 94%;
    height: 40px;
    font-weight: bold;
    color: var(--pale-blue);
    outline: none;
    margin-left: 4%;
}

#cc-grid-mobile div.border {
    border: solid 2px var(--pale-blue) !important;
}

#cc-grid-mobile div.equals:after {
    content: "=";
    position: absolute;
    right: -18px
}

#cc-grid-mobile div.gwp {
    position: relative
}

#cc-grid-mobile div.gwp:before {
    content: "+";
    position: absolute;
    left: -10px
}

#cc-grid-mobile div.offset {
    color: white;
    background: var(--green);
    border-color: var(--green)
}


#cc-grid-mobile  ul {
    grid-column: 2 / span 1;
    list-style-type: none;
    padding: 0px;
    margin-top: 2rem
}

#cc-grid-mobile  ul li {
    margin-bottom: 1rem;
    font-size: 12px
}

#cc-grid-mobile  ul li a {
    color: var(--milliken-blue);
    text-decoration: none;
    font-weight: 600
}

#breaker-mobile {
    text-align: center;
    margin: 1rem;
}

#products-mobile .row {
    margin-top: 1rem;
}
.marg2 {
    margin: 2rem auto;
}
.normalWeight {
    font-weight: normal !important;
    text-align: revert !important;
}
#cc-grid-mobile small {
    color: darkgray;
}
#cc-grid-mobile .def {
    margin-bottom: 5rem;
}
#cc-grid-mobile .def li {
    color: var(--pale-blue);
}
#cc-grid-mobile {
    display: none;
}
.areaH6 {
    position: absolute;
    margin-left: 2%;
    white-space: nowrap;
}
.wfH6 {
    white-space: nowrap;
}
#rows-mobile .km-mobile.border, #rows-mobile .trees-mobile.border {
    width: 100%;
    float: left;
}
.equalsSignDiv {
    float: right; 
    font-weight: normal; 
    color: var(--pale-blue);
}
.equalsSignAfter:after {
    content: " =";
    float: right;
    position: absolute;
    margin-left: 2px;
    font-weight: normal; 
    color: var(--pale-blue);
}
#offset_total-mobile, .offset-mobile {
    padding-top: 4px;
}
.row.marg2 .border, #rows-mobile .border {
    padding-top: 2px;
}
.centerTitle {
    margin-bottom: 2rem;
    text-align: center;
}
@media only screen and (max-width: 991px) {
    #cc-grid {
        display: none;
    }

    #cc-grid-mobile {
        display: revert;
    }
}
@media only screen and (max-width: 767px) {
    .areaH6 {
        position: revert;
        margin-left: revert;
        white-space: revert;
    }
    .wfH6 {
        white-space: revert;
    }
    #rows-mobile .km-mobile.border, #rows-mobile .trees-mobile.border {
        /* width: 80%; */
    }
}
@media only screen and (max-width: 500px) {
    #cc-grid-mobile input {
        width: 67%;
    }
    #cc-grid-mobile h6 {
        font-size: 10px;
    }
}