.frame main { overflow: hidden; }

#content h2 { margin: 3rem 0 1rem 0; font-size: 1.5rem; color: #234399; text-align: center; }
#content h3 { font-size: 1.125rem; color: #387fbc; }
.column-left { max-width: 100%; padding-top: 0; }

.autoship-intro { display: flex; gap: 6rem; align-items: center; margin-bottom: 2rem; padding: 2rem 2rem; border-radius: 0 0 2rem 2rem; background-color: #eff3f9; }
.autoship-intro div { flex: 1; }
.autoship-intro div + div { flex: .75; padding-right: 2rem; }
.autoship-intro h1 { display: inline-block; margin: .25rem 0 0 0; padding: 0 3rem 0 0; font-size: 2.5rem; color: #234399; line-height: 1.15em;
                     background: url('/template/src/autoship-arrows.png') 100% 2px no-repeat; background-size: 34px 40px; }
.autoship-intro img { min-width: 22rem; margin-right: 2rem; mix-blend-mode: multiply; }
.autoship-intro p { max-width: 31rem; font-size: .875rem; line-height: 1.75em; }
.autoship-intro h1 + p { margin: .5rem 0 1rem 0; font-size: 1.5rem; font-weight: bold; font-style: italic; color: #387fbc; }
@media(max-width: 1000px) {
    .autoship-intro { gap: 2rem; }
    .autoship-intro div + div { padding-right: 0; }
    .autoship-intro img { margin-right: 0; }
    .autoship-intro p { line-height: 1.5em; }
}
@media(max-width: 900px) {
    .autoship-intro { margin: 0 -16px 2rem -16px; border-radius: 0; }
    .autoship-intro h1 { padding: .5rem 3rem .5rem 0; font-size: 1.75rem; }
    .autoship-intro h1 + p { font-size: 1.125rem;}
    .autoship-intro div + div { display: none;}
}

.autoship-benefits ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2rem; margin: 2rem 4% 1rem 4%; padding: 0; list-style: none; }
.autoship-benefits li { position: relative; padding: 0 0 0 5rem; }
.autoship-benefits li h3 { padding: .5rem 0; }
.autoship-benefits li:before { content: ''; position: absolute; left: 0; top: 0; width: 48px; height: 48px; border: 8px solid #387fbc; border-radius: 50%; background-color: #fff; }
.autoship-benefits li:after { content: ''; position: absolute; top: 29px; left: 31px; width: 10px; height: 24px; border: solid #387fbc; border-width: 0 6px 6px 0; transform: translate(-50%, -50%) rotate(45deg); }
@media(max-width: 600px) {
    .autoship-benefits ul { display: flex; flex-direction: column; }
}

.autoship-how { width: 100vw; position: relative; left: 50%; right: 50%; margin: 3rem -50vw 0 -50vw; padding: 2.5rem 0; background-color: #eff3f9; text-align: center; }
.autoship-how .wrap-inner { padding: 0 2rem; }
.autoship-how ul { display: flex; gap: 4rem; margin: 0; padding: 0; list-style: none; counter-reset: how; }
.autoship-how li { flex: 1; }
.autoship-how li p { max-width: 16rem; margin: 0 auto; }
.autoship-how li:nth-child(even) p { max-width: 22rem; }
.autoship-how li:before { counter-increment: how; content: counter(how); display: inline-block; width: 48px; height: 48px; margin-bottom: 1rem; font-size: 1.5rem; line-height: 48px; color: #fff; border-radius: 50%; background-color: #387fbc; }
.autoship-how li + li:before { background-color: #f37421; }
.autoship-how li + li + li:before { background-color: #008a85; }
#content .autoship-how li + li h3 { color: #f37421; }
#content .autoship-how li + li + li h3 { color: #008a85; }
#content .autoship-how h2 { margin: 0 0 2rem 0; }
#content .autoship-how h3 { margin-bottom: 1rem; }
@media(max-width: 900px) {
    .autoship-how ul { gap: 2rem; }
}
@media(max-width: 750px) {
    .autoship-how ul { flex-wrap: wrap; }
    .autoship-how li { min-width: 14rem; }
}


.cat_text_large { margin-top: 4rem; font-size: 1rem; }
.cat_text_large p, .cat_text_large li { line-height: 1.375rem; }
.cat_text_large ul { margin-top: .25rem; }
.cat_text_large a.button { padding: .75rem 1.5rem; }
#content .cat_text_large h3 { color: #000; }

h2 + div { padding: 1rem; border-radius: 1rem; background: #ebf1f9; }


div[itemprop="mainEntity"] {
    position: relative;
    padding: 1rem;
    border-bottom: 2px solid #fff;
    margin-bottom: 0;
}
div[itemprop="mainEntity"]:last-child { border: 0;}

h3[itemprop="name"] {
    cursor: pointer;
    padding-right: 1.5rem;
    color: #000;
    font-size: 1.375rem;
    line-height: 1.25em;
}

h3[itemprop="name"]:hover {
    color: #234399;
}

h3[itemprop="name"]::after {
    content: 'v';
    position: absolute;
    right: 1rem;
    top: 1rem;
    color: #6d6d6d;
    transform: scale(1.5, 1);
}

.faq-open h3[itemprop="name"]::after {
    transform: scale(1.5, -1);
}

[itemprop="acceptedAnswer"] {
    display: none;
}

.faq-open [itemprop="acceptedAnswer"] {
    display: block;
}