/* Styles for featureset template.

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

/* ==========================================================================
   setup the environment
   ========================================================================== */
:root {
    --wrapper-h-pad: 3.125rem;
}
main { font-family: "Source Sans Pro", sans-serif; }
.page-width {
    margin: 0 auto;
    max-width: calc(1032px + (2 * var(--wrapper-h-pad)));
    padding: 0 var(--wrapper-h-pad);
    width: 100%;
}

main img { height: auto; max-width: 100%; }

hr {
   border-top: 1px solid #ccc;
   border-bottom: 0;
   margin-top: 3.125rem;
}


/* magnific global overrides */
.mfp-bg { background: #2d2e2f !important; opacity: 0.7 !important; }
.mfp-container .mfp-content { padding: 0 !important; }
img.mfp-img { padding: 40px 0 !important; }
.mfp-content button.mfp-close { right: -12px; top: 28px !important; }
a.magnific.image:hover { cursor: zoom-in; }


/*no super tall images!*/
.mfp-container .mfp-content { max-width: 622px !important; }



/* ==========================================================================
   hero
   ========================================================================== */
#hero { background: #343541; }
#hero .bg-pad { 
    background: url('/img/hero-background.png') bottom right no-repeat;
    background-size: 814px;
    margin: 0 auto;
    max-width: 1260px; 
}
#hero .page-width { 
    align-items: center;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 417px;
    margin: 0 auto; 
}

#hero h1 {
    color: #fff;
    font-size: 5.125rem;
}
#hero h1 span {
    color: #15d8a8;
    display: block;
    text-transform: uppercase;
    font-size: 1.625rem;
}
#hero img { margin-top: 3.125rem; }



/* ==========================================================================
   sections
   ========================================================================== */
section { 
    padding-bottom: 3.125rem !important;
    padding-top: 3.125rem !important; 
}
section h2 {
    color: #343541;
    font-size: 2.25rem;
    padding-bottom: 2.5rem;
    text-align: center;
}
section a { color: #10a37f; }
section a:hover { color: #036c52; }
section p {
    color: #404040;
    font-size: 1.25rem;
    line-height: 1.4;
}


/*intro*/
#intro { padding-bottom: 0 !important; }
#intro p:first-child {
    color: #10a37f;
    font-size: 1.625rem;
    padding-bottom: 1.5rem;
}
#intro p:first-child a { color: #036c52; }
#intro p:first-child a:hover { color: #10a37f; }


/*how to get*/
.expando h3 {
    background: #f6f6f6;
    color: #222;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.75rem;
    padding: 0.625rem;
}
.expando h3:hover { color: #10a37f; }
.expando h3::before { 
    color: #10a37f;
    content: "\002B\0020"; /*plus/space*/
}
.expando.active h3::before { content: "\2013\0020"; } /*minus/space*/
.expando-content { 
    background: #f6f6f6; 
    display: none; 
    padding: 1.5rem 1.25rem;
    text-align: center;
}
.expando-content.active { display: block; }
.expando-content p {
    color: #404040;
    font-size: 1rem;
    line-height: 1.5;
    padding-bottom: 1.25rem;
    padding-top: 3rem;
    text-align: left;
}
.expando-content p:first-child { padding-top: 0; }
.expando-content img { 
    border: 1px solid #e5e5e5;
    max-width: calc(100% - 5rem); 
}


/*some things you can do*/
#things-you-can-do { background: #e2f2ee; }
.examples {
    align-items: center;
    display: grid;
    grid-gap: 2rem 1.625rem;
    grid-template-columns: 1fr 1fr 1fr;
}
.examples + .examples { margin-top: 2rem; }
.examples a {
    background: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 5px 0 rgb(100,100,100,0.3);
    color: #404040;
    font-size: 1.125rem;
    max-width: 326px;
    padding: 0.625rem 0.625rem 0.75rem;
    text-align: center;
}
.examples a:hover {
    border-color: #10a37f;
    color: #10a37f;
}
.examples img { margin-bottom: 0.625rem; }
.button {
    background: #10a37f;
    border: none;
    border-radius: 0.25rem;
    color: #fff;
    display: block;
    font-weight: 600;
    line-height: 1;
    margin: 2.5rem auto 0;
    padding: 0.75rem 1.5rem;
}
.button:hover,
a.button:hover { background: #0d8769; }
a.button:hover { color: #fff; }


/*more from wolfram*/
#more { }
.more-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
	margin-left: 8.5rem;
}
.more-grid a {
    align-items: center;
    color: #222;
    display: grid;
    font-size: 1.125rem;
    font-weight: 600;
    grid-gap: 1.25rem;
    grid-template-columns: 79px 1fr;
    padding: 0 1.875rem 1.875rem 0;
}
.more-grid a strong { 
    color: #0d8769;
    display: block;
    font-size: 1rem;
    font-weight: 400;
    margin-top: -2px;
    text-transform: uppercase; 
}
.more-grid a:hover, .more-grid a:hover strong { color: #10a37f; }



/* ==========================================================================
   footer
   ========================================================================== */
.footer {
    padding: 0 !important;
    text-align: center;
    max-width: none;
}
.sticky {
    bottom: 0;
    position: fixed;
    z-index: 999999999;
}
.footer a {
    background: #10a37f;
    color: #fff !important;
    display: block;
    font-size: 1.125rem;
    font-weight: 300;
    padding: 1.375rem 2rem;
}
.footer a span {
    color: #fff494;
    white-space: nowrap;
}
.footer a:hover { background: #0d8769; }



/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1200px) {
    #hero .bg-pad { background-position-x: calc(100% + 68px); }
}


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


    /*hero*/
    #hero .bg-pad { background-position-y: bottom; }
    #hero .page-width { 
        grid-gap: 0;
        grid-template-columns: 1fr; 
        text-align: center;
    }
    #hero h1 { padding: 3.125rem 0; }
    #hero img { margin: 0 auto; }


    /*sections*/
    .examples { grid-gap: 1.5rem; }
	.more-grid { margin-left: 6rem;}
}


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

    /*hero*/
    #hero h1 { font-size: 40px; padding: 2rem 0; }
    #hero h1 span { font-size: 18px; }


    /*sections*/
    section { 
        padding-bottom: 2rem !important;
        padding-top: 2rem !important; 
    }
    section h2 { font-size: 29px; padding-bottom: 1.5rem; }
    section p, .expando h3 { font-size: 18px; }
    #intro p:first-child {
        font-size: 21px;
        padding-bottom: 1rem;
    }
    .expando-content p { 
        font-size: 14px; 
        padding-top: 2rem; 
    }
    .expando-content img { max-width: 100%; }
    .examples { grid-template-columns: 1fr; }
    .examples a { font-size: 16px; margin: 0 auto; }
    .button { font-size: 14px; margin-top: 2rem; }
    .more-grid { grid-template-columns: 1fr; margin-left: 0;}
    .more-grid a { font-size: 16px; }


    /*footer*/
    .footer {
        font-size: 1.1875rem;
        line-height: 1.2;
    }
    .footer a {
        padding: 0.875rem 1rem;
    }
}


@media (max-width: 320px) {}