:root {

    /* Colors */
    --black: #000000;
    --white: #ffffff;
    --light-blue: #009efa;

    /* Font Sizes */
    --small: 16px;
    --medium: 20px;
    --large: 24px;

}


/* SOP Categories CSS beginning */
.outer {
    display: table;
    width: 100%;
    height: 100%;
}

.outer .inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.sop-categories-block-wrapper {
    margin-top: 2em;
}

@media only screen and (max-width: 768px) {
    .sop-categories-block-wrapper .sop-categories-block--row .sop-categories-block--column {
        width: 100% !important;
    }
}

.sop-categories-block-wrapper .sop-categories-block--row .sop-categories-block--column .sop-category-item a {
    height: 180px; 
    display: block; 
    margin: 1em; 
    color: white;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    text-decoration: none;
    font-size: var(--medium);
}

.sop-categories-block-wrapper .sop-categories-block--row .sop-categories-block--column .sop-category-item a:hover {
    color: var(--light-blue);
}

.sop-categories-block-wrapper .sop-categories-block--row .sop-categories-block--column .sop-category-item a:before {
    content: "";
    background: var(--black);
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .7;
}

.sop-categories-block-wrapper .sop-categories-block--row .sop-categories-block--column .sop-category-item a .sop-category-item--content {
    height: 100%;
    z-index: 2;
    position: relative;
}
/* SOP Categories CSS END ---> */


/* SOP by Category CSS beginning */
.sop-by-categories-main-wrapper header {
    margin: 1em 0 3em;
    text-align: center;
}

.sop-by-categories-main-wrapper header h2 {
    font-weight: 400;
}

.sop-by-categories-main-wrapper header h2 span {
    color: var(--light-blue);
    font-weight: 600;
}

.sop-by-categories-main-wrapper table {
    width: 100%;
}
/* SOP by Category CSS END ---> */


/* SOP Information Details Page */
.sop-information-main-wrapper .sop-information-main--row .sop-information-main--column .sop-information-page--main-wrapper ol.usa-process-list li.usa-process-list__item {
    max-width: 100%;
}

.sop-information-main-wrapper .sop-information-main--row .sop-information-main--column .sop-information-page--main-wrapper ol.usa-process-list li.usa-process-list__item .sop-image-wrapper {
    max-width: 700px;
}


/* Modal on SOP details page */
.usa-modal-wrapper.is-visible .usa-modal.stepper {
    max-width: 1200px;
}

.usa-modal-wrapper.is-visible .usa-modal.stepper .usa-modal__content .usa-modal__main .usa-prose p  {
   max-width: 100%
}

.usa-modal-wrapper.is-visible .usa-modal.stepper .usa-modal__content h3.usa-modal__heading {
    text-align: center;
    font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
}
/* SOP Information Details END ---> */