/**** Added with CSPO page with Site Data ********************/
.certHeaderGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 6rem;
    float: right;
    grid-gap: 1rem;
    margin-left: 17%;
}

#certHeaderImage {
    width: 54rem;
}

@media only screen and (max-width: 1000px) {
    #certHeaderImage {
        width: 89%;
    }
}

@media only screen and (max-width: 600px) {
    .certHeaderGrid {
        display: block;
        float: unset;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 0;
    }

    .certHeaderGrid img {
        display: none;
    }
}
/**** END ****************************************************/

.cert-container {
    max-width: 80rem;
    margin: 0 auto;
}

#cert-header {
    background-image: url(/ScrumRedesignDEVSite/media/ScrumAllianceMedia/Certification/CSM-page-header-hero2-01_compressed.png);
    background-repeat: no-repeat;
    /*margin: 1.6rem 0 6rem 0;*/
    /*height: 48rem;*/
    width: 100%;
    object-fit: contain;
    background-position: center;
    background-size: cover;
}

/*.cert-hero-div h1 span {
    text-transform: uppercase;
    background: var(--blue-grey);
    padding: .6rem 1.6rem;
    color: #FFFFFF;
    margin: 1.6rem 0;
    font-weight: 600;
    display: inline-block;
    font-size: 4.5rem;
}*/

#cert-testimonial {
    background-image: linear-gradient(to right, var(--pro-cyan), var(--navy));
    width: 100%;
    padding: 1.6rem;
    color: var(--white);
}

#cert-authority {
    background-image: linear-gradient(to right, var(--navy), var(--pro-cyan));
    width: 100%;
    padding: 1.6rem;
    color: var(--white);
}

#cert-resources {
    background: var(--off-white);
    padding: 1.6rem 0 3.6rem 0;
}

#cert-what, #cert-why, #cert-who, #cert-sa {
    margin: 3.6rem 0 6rem 0;
}

#cert-subscribe {
    background: var(--dark-grey);
}

.cert-cta {
    margin: 0 0 1.6rem 0;
}

#cert-journey-cta {
    margin: 1.6rem 0 6rem 0;
}

#cert-steps {
    background: var(--navy);
    width: 100%;
    color: var(--white);
    padding: 3.6rem 0;
}

#cert-journey {
    background: var(--off-white);
    padding: 3.6rem 0;
}

#cert-call {
    background: var(--blue-grey);
    padding: 3.6rem 0 9rem 0;
    color: #FFFFFF;
    /*display: grid;
    place-content: center;
    text-align: center;*/
}

#cert-why h4, #cert-steps h4, #cert-journey h4, .cert-cta h3 {
    font-weight: bold;
}

.center {
    display: grid;
    place-items: center;
    text-align: center;
}

.step-circle {
    background: var(--yellow);
    border-radius: 50%;
    width: 6rem;
    height: 6rem;
    place-items: center;
    display: grid;
}

    .step-circle h2 {
        margin: 0;
        color: var(--navy);
    }

.clickable-section {
    height: auto;
    display: grid;
    place-items: center;
    text-align: center;
    text-decoration: none;
    color: #25495C;
}

    .clickable-section:hover {
        text-decoration: none;
        color: #009FE3;
    }

    .clickable-section h4 a {
        text-decoration: none;
        color: #25495C;
    }

        .clickable-section h4 a:hover {
            text-decoration: unset;
            color: unset;
        }

    .clickable-section p a {
        text-decoration: none;
        color: #25495C;
    }

        .clickable-section p a:hover {
            text-decoration: unset;
            color: unset;
        }

    .clickable-section img {
        opacity: 1;
        -webkit-animation-duration: .25s;
        animation-duration: .25s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        margin-bottom: 1.2rem;
    }

    .clickable-section:hover img {
        opacity: .7;
        cursor: pointer;
        animation-name: bounce;
        -moz-animation-name: bounce;
    }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .sa-grid-4 {
        grid-template-columns: 1fr 1fr;
    }
}