/* Styles for k-12

   developer:   tajudeen
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */

/* ==========================================================================
   setup the environment
   ========================================================================== */
:root {
    --wrapper-h-pad: 3.125rem;
}


/*sections*/
main .page-width {
    margin: 0 auto;
    max-width: 1225px;
    padding: 3.125rem var(--wrapper-h-pad);
    width: 100%;
}

#included .individual-person {
    display: none;
}

#included .package h3 .price-tag {
    margin-right: 0.5rem;
}

/*content grids*/
.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3rem;
}
.three-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1.5rem;
    margin: 1rem 0;
}

#offer {
    position: absolute;
    width: 8.1875rem;
    height: 2.9375rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 600;
    color: #ee5f00;
    top: 0;
    left: var(--wrapper-h-pad);
}

/*text*/
main {
    color: #404040;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

main h1, main h2, main h3, main h4 {
    font-weight: 600;
}
main h1 { 
    font-size: 4.688rem; 
    line-height: 1;
    white-space: nowrap;
}
main h1 .subtitle {
    display: block;
    font-size: 2.25rem;
    text-transform: uppercase;
}
#hero h1 em {
    font-size: 2rem;
    display: block;
    font-weight: 300;
    white-space: nowrap;
}
main h2 { 
    border-top: 1px solid #ddd;
    color: #ee5f00; 
    font-size: 2.5rem; 
    padding-top: 3.125rem;
    padding-bottom: 2rem;
}
main h3 {
    border-top: 1px solid #ddd;
    color: #ee5f00; 
    font-size: 1.75rem; 
    padding-top: 3.125rem;
}
main h4 { 
    font-size: 1.125rem; 
    padding-bottom: 0.25rem;
}
main #included-2 h4 {
    font-size: 1.375rem;
    font-weight: 600;
}
main p { 
    line-height: 1.5;
    padding: 0 0 1.5rem; 
}

main ul { padding-bottom: 1rem; }
main ul li {
    padding: 0 0  0.5rem 0.75rem;
    position: relative;
}
main ul li:before {
    color: #888;
    content: '\25AA';
    margin-left: -0.75rem;
    position: absolute;
}

span.price { 
    font-size: 1rem; 
    line-height: 1; 
}
span.price span.dollarsign {
    display: inline-block;
    font-size: 1.25rem;
    margin-top: .25rem;
    vertical-align: top;
}
span.price span {
    font-size: 2rem;
}


/*altered text*/
main p:last-child,
main li:last-child { padding-bottom: 0; }

#intro h2,
#included h2,
#recommended h3,
#pricing h3,
#addons h3, 
#faq h3 { 
    border: 0;
    padding-top: 0;
}

#intro p:last-of-type {
    font-size: 1.375rem;
    line-height: 1.62;
}

#included.included.page-width {
    padding-top: 2rem;
}

#further .package.base-package {
    background-color: #ebf2f8; 
    border-top: 10px solid #0067a4;
}

#faq h3 {
    padding-bottom: 1.25rem;
    font-weight: 600;
}


/*links*/
main a {
    color: #404040;
    font-weight: 600;
}
main a:hover {
    color: #ee5f00;
}
main a.button {
    border-radius: 0.25rem; 
    display: inline-block;
    color: #fff;
    font-weight: 400;
    padding: 0.75rem 1rem;
}
main a.button.white { background: #fff; }
main a.button.base-package { background: #16a4ab; }
main a.button.pro-package { background: #0067a4; }



/* ==========================================================================
   hero
   ========================================================================== */
#hero { 
    background: #16a4ab; 
    color: #fff;
}
#hero .page-width {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 300px;
    position: relative;
}



/* ==========================================================================
   intro
   ========================================================================== */
#intro p {
    font-size: 1.625rem;
}
#intro p:first-of-type {
    font-size: 1.625rem;
    line-height: 1.62;
    font-weight: 400;
    padding-bottom: 2rem;
}
#intro.page-width {
    padding-bottom: 0;
}


/* ==========================================================================
   what's included
   ========================================================================== */
#included .package {
    margin-bottom: 5px; 
}
.included.page-width{
    padding-bottom: 0;
}
#included-2 .package.base-package {
    padding-bottom: 3.125rem;
}
main #included-2 .package-perks h4 {
    font-size: 1.125rem;
}
#included .package h3 {
    align-items: center;
    color: #fff;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr auto auto;
    line-height: 1;
    padding: 1rem;
}
#included .package h3 div {
    justify-self: end;
    background: none;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
}
#included .package h3 .subtitle {
    font-size: 1rem;
    font-weight: 400;
}
#included .package-perks, #included-2 .package-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    margin: 5px 0;
}
#included .package-perks > div, #included-2 .package-perks > div {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px;
}
#included .perk, #included-2 .perk {
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-gap: 1rem;
    padding: 1.5rem;
}
#included .perk {
    grid-template-columns: 50px 1fr;
}
#included.noheading .perk {
    grid-template-columns: 1fr;
}
#included-2 .divider {
    border: 1px solid #ddd;
}

#included .base-package h3 { background: #16a4ab; }
#included .base-package h4, #included-2 .base-package h4 { color: #16a4ab; }
#included .base-package .perk, #included-2 .base-package .perk { background: #e7f5f6; }
#included .base-package a.button { color: #16a4ab !important; }
#included .base-package a.button:hover { background: #107f85; color: #fff !important; }

#included .pro-package { margin-top: 2.5rem; }
#included .pro-package h3 { background: #0067a4; }
#included .pro-package h4 { color: #0067a4; }
#included .pro-package .perk { background: #ebf2f8; }
#included .pro-package a.button { color: #0067a4 !important; }
#included .pro-package a.button:hover { background: #004d7b; color: #fff !important; }



/* ==========================================================================
   Go Further
   ========================================================================== */

main #further h3 {
    padding-top: 0;
    border-top: none;
    padding-bottom: 0.25rem;
    font-size: 1.375rem;
    font-weight: 600;
    color: #0067a4;
}

main #further > div p {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.22;
    color: #404040;
}

main #further > div p a {
    color: #024b75;
}

main #further > div p a:hover {
    color: #ee5f00;
}

#further .package-perks {
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-gap: 1rem;
    padding: 1.5rem;
}

#further.page-width {
    padding: 0 var(--wrapper-h-pad);
}

/* ==========================================================================
   recommended for
   ========================================================================== */
#recommended { background: #277993; }
#recommended h3 { color: #fff; }
#recommended .three-col-grid > div {
    background: #fff;
    padding: 1.875rem;
}



/* ==========================================================================
   pricing
   ========================================================================== */
#pricing {
    background: #EBF2F8;
}
#pricing h3 { 
    color: #ee5f00; 
}
#pricing .page-width > .two-col-grid {
    grid-gap: 1.875rem;
}
#pricing .two-col-grid > div {
    background: #fff;
    padding: 1.875rem;
}
#pricing .two-col-grid .two-col-grid > div { padding: 0; }
#pricing .two-col-grid h4 { 
    font-size: 1.5625rem; 
    padding-bottom: 0.5rem;
}
#pricing .two-col-grid hr {
    margin: 0 0 1rem;
}
#pricing .two-col-grid .button { 
    font-size: 1.125rem;
}
#pricing .two-col-grid + p,
#pricing p a { color: #444; }

#pricing .two-col-grid .two-col-grid {
    align-items: center;
    grid-gap: 1rem;
    grid-template-columns: auto 1fr;
}

.two-col-grid > div:last-of-type > p:first-of-type {
    padding-bottom: 0.5rem !important;
}

#pricing .base-package h4 { color: #16a4ab; }
#pricing .base-package .button { background: #16a4ab; }
#pricing .base-package .button:hover { background: #107f85; }

#pricing .pro-package h4 { color: #0067a4; }
#pricing .pro-package .button { background: #0067a4; }
#pricing .pro-package .button:hover { background: #004d7b; }

#pricing .org-package {
    align-items: center;
    display: grid;
    grid-column-end: span 2;
    grid-template-columns: 1fr auto;
    padding: 1rem 1rem 1rem 1.875rem !important;
}
#pricing .org-package h4 { color: #ee5f00; }
#pricing .org-package div { justify-self: end; }
#pricing .org-package .button { background: #ee5f00; }
#pricing .org-package .button:hover { background: #b33f33; }
span.price + em {
    color: #777;
    display: block;
    margin-top: -0.125rem;
}



/* ==========================================================================
   faq
   ========================================================================== */
#faq { padding-bottom: 4rem; }
#faq ul { padding-bottom: 1.5rem; }
#faq ul li:not(:last-child) { padding-bottom: 0.1875rem; }


 
/* ==============================OVERRIDE============ */
div#IPstripe-wrap {
    display: none !important;
}

body.stripe.generic {
    padding-bottom: 0 !important;
}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1200px) {
    #hero .page-width img {
        height: 147px;
        width: auto;
    }
}

@media (max-width: 900px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 2rem;
    }

    #hero .page-width {
        flex-direction: column;
        height: auto;
        gap: 2rem;
    }

    main h1 { text-align: center; }

    /*hero*/
    #hero .page-width {
        background-size: 489px;
        background-position-x: calc(100% + 73px);
        background-position-y: bottom;
    }

    /*what's included*/
    #included .package-perks, #included-2 .package-perks {
        grid-template-columns: 1fr;
    }

    /*grids*/
    #recommended .three-col-grid,
    #faq .two-col-grid {
        grid-template-columns: 1fr;
        grid-gap: 1.5rem 0;
    }


    /*pricing*/
    #pricing .two-col-grid {
        grid-template-columns: 1fr;
    }
    #pricing .org-package {
        grid-column-end: span 1;
    }
}


@media (max-width: 600px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 1rem;
    }

    /*hero*/
    #hero .page-width {
        height: auto;
        text-align: center;
    }

    /*text*/
    main h1 .subtitle { font-size: 1.625rem; }
    main h1 { font-size: 3.875rem;}
    #hero h1 em { font-size: 1.5rem; }
    #included .package h3 > span { font-size: 1.5rem; }

    #hero .page-width img {
        height: 128px;
        width: auto;
    }
    /*included*/
    #included .package h3 {
        grid-gap: 0.5rem;
        grid-template-columns: auto 1fr auto;
    }
    #included .package h3 > div:first-of-type { border-left: 1px solid #fff;  }
    #included .package h3 div:first-of-type {
        justify-self: start;
        padding-left: 0.5rem;
    }
    #included .package h3 .subtitle.show__600 {
        justify-self: start; 
        grid-column-end: span 3;
    }
}