section#page-title{
    overflow-y: visible;
    &.cta-free-guide{
        overflow: visible;
        & .row.col2{
            overflow-y: visible;
            align-items: stretch;
            justify-content: flex-start;
            & .w45{
                position: relative;
                & .form-holder{
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: var(--base-width);
                    padding: calc(var(--base-sm-padding) * 3);
                    background: var(--light-grey);
                    border-radius: var(--base-border-radius);
                    box-shadow: var(--base-shadow);
                    z-index: 5;
                    & h2 {
                        color: var(--black-color);
                    }
                    & .wpforms-field.wpforms-field-html {
                        color: var(--black-color);
                    }
                    & .wpforms-submit-container {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        flex-direction: row;
                        flex-wrap: wrap;
                        align-content: center;
                        & button.wpforms-submit {
                            background-color: var(--secondary-light-green);
                            border: var(--base-border);
                            border-color: var(--secondary-light-green);
                            color: var(--white-color);
                            border-radius: calc(var(--base-font-size) * 0.25);
                            font-weight: var(--font-weight-bold);
                            font-size: calc(var(--base-font-size) * 1.20);
                            line-height: var(--base-line-height);
                            text-align: var(--base-text-align-center);
                            padding: var(--base-sm-padding) calc(var(--base-sm-padding) * 3);
                            margin-right: var(--base-sm-margin);
                            text-decoration: none;
                            height:auto;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }
    }
}
/* Included Meso Hub Guide */
section#included-meso-hub-guide{
    background-color: var(--primary-light-25-transparent);
    & .w40{
        display: flex;
        padding: calc(var(--base-sm-padding) * 2);
        & div{
            width: calc(var(--base-width) / 2);
            max-width: calc(var(--base-width) / 2);
            margin: calc(var(--base-sm-margin) * 1.5);
            & img{
                width: var(--base-width);
                border-radius: var(--base-border-radius);
            }
            &:first-of-type{
                margin-left: 0;
                & img{
                    margin-top: calc(var(--base-lg-margin) * -1.0);
                    box-shadow: var(--offset-shadow-bottom-secondary);
                }
            }
            &:last-of-type{
                margin-right: 0;
                & img{
                    box-shadow: var(--offset-shadow-top-secondary);
                    margin-top: var(--base-lg-margin);
                }
            }
        }
    }
    /* & ul.vertical-list {
        & li::before {
            top: -11px;
        }
    } */
}
section#more-than-just-a-guide{
    background-color: var(--nav-primary-li);
    color: var(--white-color);
    & .blurbs{
        align-items: stretch;
        text-align: var(--base-text-align-center);
        & .col{
            width: calc((var(--base-width) / 3) - (calc(var(--base-sm-margin) * 2) + 20px));
            max-width: calc((var(--base-width) / 3) - (calc(var(--base-sm-margin) * 2) + 20px));
            position: relative;
            text-align: var(--base-text-align-left);
            &::after{
                content: "";
                width: 18px;
                height: 28px;
                position: absolute;
                top: 50%;
                left: calc(var(--base-width) + 25px);
                transform: translate(-50%, -50%);
                background: url("../images/arrow-right-light.png");
            }
            &:last-of-type{
                &::after{
                    display: none;
                }
            }
            & h5{
                font-size: calc(var(--base-font-size) * 1.5);
                line-height: calc(var(--base-font-size) * 2.5);
            }
        }
    }
}
section#receive-your-meso-guide{
    & .row.col.w80{
        margin: auto;
        text-align: var(--base-text-align-center);
        h4{
            width: var(--base-width);
        }
    }
    & .row.col3{
        gap: calc(var(--base-sm-margin) * 2);
        & .col{
            background-color: var(--primary-light-25-transparent);
            border-radius: var(--base-border-radius);
            padding: calc(var(--base-sm-padding) * 3);
            min-height: -webkit-fill-available;
            flex: calc(var(--base-width) / 4);
            max-width: calc(var(--base-width) / 0);
            & img{
                width: calc(var(--base-sm-margin) * 7);
            }
        }
    }
    & .row.col{
        justify-content: center;
    }
}
/* All Above Sections combined mobile look responsiveness */
.page-template-find-doctor section,
.page-template-patient-advocates section,
.page-template-cta-guide section{
    &#page-title{
        & .row.col2{
            gap: calc(var(--base-sm-margin) * 2);
            & .w45{
                & .form-holder{
                    position: static;
                    & .wpforms-field{
                        width: var(--base-width);
                        padding: 5px 0;
                    }
                    & .wpforms-one-half,
                    & .wpforms-one-third{
                        margin-left: 0;
                        float: none;
                    }
                }
            }
        }
        & .w55,
        & .w45{
            width: var(--base-width);
            max-width: var(--base-width);
        }
        & .w85{
            width: inherit;
            max-width: inherit;
        }
    }
    & .w50,
    & .w80,
    & .w55,
    & .w40{
        width: var(--base-width);
        max-width: var(--base-width);
    }
    &#included-meso-hub-guide{
        & .row.col2{
            gap: calc(var(--base-sm-margin) * 2);
        }
    }
    &#more-than-just-a-guide{
        & .row.col2{
            gap: var(--base-sm-margin);
        }
        & .blurbs{
            gap: calc(var(--base-sm-margin) * 2);
            & .col{
                width: var(--base-width);
                max-width: var(--base-width);
                &::after{
                    display: none;
                }
            }
        }
    }
}
@media (min-width: 375px) { }

@media (min-width: 425px) { }

/* 2. LARGE MOBILE (480px+) */
@media (min-width: 480px) { }

/* 3. TABLET (768px+) */
@media (min-width: 768px) { }

/* 4. DESKTOP (1024px+) */
@media (min-width: 1024px) {
    .page-template-find-doctor section,
    .page-template-patient-advocates section,
    .page-template-cta-guide section{
        &#page-title{
            & .row.col2{
                gap: calc(var(--base-sm-margin) * 0);
                & .w45{
                    width: calc(var(--base-width) / 100 * 45);
                    max-width: calc(var(--base-width) / 100 * 45);
                    & .form-holder{
                        position: absolute;
                        & .wpforms-field{
                            padding: 5px 0;
                        }
                        & .wpforms-one-half{
                            width: calc(50% - 5px);
                            margin-left: 5px;
                            float: left;
                        }
                        & .wpforms-one-third{
                            width: calc(100% / 3 - 50px);
                            float: left;
                            margin-left: 5px;
                        }
                        & .wpforms-field-select,
                        & .wpforms-field-textarea,
                        & .wpforms-field-html{
                            width: var(--base-width);
                        }
                    }
                }
            }
            & .w55{
                width: calc(var(--base-width) / 100 * 55);
                max-width: calc(var(--base-width) / 100 * 55);
            }
            & .w85{
                width: calc(var(--base-width) / 100 * 85);
                max-width: calc(var(--base-width) / 100 * 85);
            }
        }
        & .w50{
            width: calc(var(--base-width) / 100 * 50);
            max-width: calc(var(--base-width) / 100 * 50);
        }
        & .w80{
            width: calc(var(--base-width) / 100 * 80);
            max-width: calc(var(--base-width) / 100 * 80);
        }
        & .w55{
            width: calc(var(--base-width) / 100 * 55);
            max-width: calc(var(--base-width) / 100 * 55);
        }
        & .w40{
            width: calc(var(--base-width) / 100 * 40);
            max-width: calc(var(--base-width) / 100 * 40);
        }
        &#included-meso-hub-guide{
            & .row.col2{
                gap: calc(var(--base-sm-margin) * 0);
            }
        }
        &#more-than-just-a-guide{
            & .blurbs{
                gap: calc(var(--base-sm-margin) * 0);
                & .col{
                    width: calc((var(--base-width) / 3) - (calc(var(--base-sm-margin) * 2) + 20px));
                    max-width: calc((var(--base-width) / 3) - (calc(var(--base-sm-margin) * 2) + 20px));
                    &::after{
                        display: block;
                    }
                    &:last-of-type{
                        &::after{
                            display: none;
                        }
                    }
                }
            }
        }
        &#comprehensive-mesothelioma-guide{
            padding: calc(var(--base-lg-padding) * 2.5) 0;
        }
    }
}

/* 5. LARGE DESKTOP (1200px+) */
@media (min-width: 1200px) {
    .page-template-find-doctor section,
    .page-template-patient-advocates section,
    .page-template-cta-guide section{
        &#comprehensive-mesothelioma-guide{
            padding: calc(var(--base-lg-padding) * 1.5) 0;
        }
    }
}

/* 6. EXTRA LARGE (1440px+) */
@media (min-width: 1440px) { }