/*/////////*/
/* NAV-BAR */
/*/////////*/

.header.navbar-light.transparent.fixed-top {
    position: absolute;
}
.header.navbar-light.transparent {
    background-color: rgb(0, 0, 0, 0);
    border-bottom: none;
}
.header.navbar-light.transparent .navbar-nav .nav-link {
    color: white;
    padding: 6px 18px;
    background-color: rgb(255, 255, 255, 0.1);
    border-radius: 30px;
}
.header.navbar-light.transparent .navbar-nav .nav-link:hover {
    background-color: rgb(255, 255, 255, 0.15);
}
@media screen and (min-width: 320px) {
    .navbar.transparent .nav-item {
        font-size: calc(1rem + 2.5*((100vw - 320px) / 700));
    }
}
a.navbar-brand {
    opacity: 0.85;
}
a.navbar-brand:hover {
    opacity: 1;
}

/*////////*/
/* SPLASH */
/*////////*/

.above-the-fold-splash {
    font-family: avenir, sans-serif;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(to bottom left, #005588, var(--main-medium-blue));
    padding-top: calc(4.5rem + 1vw);
    padding-left: calc(7vw + 10px);
    padding-right: calc(7vw + 10px);
    border-bottom: 1px solid white;
}
.background-img-div {
    z-index: 0;
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    max-width: 100%;
    min-width: 1475px;
}
.polygon-background {
    background-image: url("/static/img/polygon-background10.f92236e24ed2.png");
    /* src: url("../img/polygon-background10.f92236e24ed2.png"); */
    background-size: cover;
    height: 120%;
    width: 100%;
    left: 0;
}
@media screen and (max-width: 1000px) {
    .polygon-background {
        background-image: url("/static/img/polygon-background-1000.778e05f06240.png");
        background-size: cover;
    }
}

.splash-container {
    z-index: 2;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    text-align: left;
    color: white;
    max-width: 85vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-top: 0;
    padding-bottom: calc(45px + 1vw);
}
.splash-container h1, .splash-container h2, .splash-container .btn {
    z-index: 2;
    opacity: 0.9;
    color: white;
    font-weight: 700;
}
.splash-container h1 {
    max-width: calc(700px + 20vw);
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: calc(2.1rem + 2.95vw);
    line-height: calc(2.7rem + 2.95vw);
    color: #88ffaa;
}
.splash-container h1 span {
    color: white;
}
.splash-container h1 img.inline-logo {
    height: calc(2.5rem + 2.95vw);
    width: calc(2.5rem + 2.95vw);
    margin-top: calc(-9px - 1vw);
} 
.splash-container h2 {
    max-width: calc(750px + 24vw);
    margin-top: 25px;
    margin-bottom: 35px;
    font-size: calc(1.82rem + 2.2vw);
    font-weight: 500;
    line-height: calc(2.4rem + 2.4vw);
    opacity: 0.85;
}
.splash-container h2 span, .splash-container p span {
    display: inline-block;
}
.splash-container a {
    z-index: 1;
}
.splash-container p {
    z-index: 2;
    opacity: 0.4;
    font-size: 95%;
    font-weight: 200;
    margin-top: 10px;
    margin-bottom: 40px;
}

.splash-container .btn {
    font-size: min(calc(1rem + 0.8vw), 35px);
    background-color: rgb(255, 255, 255, 0.2);
    color: white;
    padding: 13px 35px;
    opacity: 0.8;
}
.splash-container .btn:hover:not(.disabled), .splash-container .btn:active:not(.disabled) {
    opacity: 1;
}
.splash-container .btn.create-account-button {
    margin-bottom: 20px;
    background-color: rgb(255, 255, 255, 0.35);
}
.splash-container .btn.create-account-button:hover {
    opacity: 1;
}

.splash-container .broccoli-image {
    position: absolute;
    right: 2%;
    bottom: 0;
    bottom: -18px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
}
.splash-container .broccoli-image img {
    max-height: 260px;
    max-width: 260px;
    height: calc(7rem + 12vw);
    width: calc(7rem + 12vw);
}
@media screen and (min-width: 895px) {
    .splash-container h1 {
        font-size: 60px;
        line-height: 69px;
    }
    .splash-container h1 img.inline-logo {
        height: 67px;
        width: 67px;
        margin-top: -18px;
    }
    .splash-container h2 {
        font-size: 49px;
        line-height: 60px;
        max-width: 1000px;
    }
    .splash-container .btn.create-account-button {
        font-size: 24px;
    }
}
@media screen and (max-width: 450px) {
    .splash-container .broccoli-image img {
        display: none;
    }
}

/*///////////////////*/
/* SPECIFIC SPLASHES */
/*///////////////////*/

#main.homepage {
    padding-top: 0
}
#home .splash-container .home-toggle {
    margin-left: 3px;
    margin-bottom: calc(10px + 1vw);
    z-index: 2;
}
#home .splash-container .audience {
    opacity: 0.5;
}
#home .splash-container .audience:hover {
    opacity: 0.65;
}
#home .splash-container .audience.selected {
    opacity: 0.95;
}
#home .splash-container .home-toggle a {
    color: white;
}

#pricing .splash-container {
    max-width: calc(1280px + 3vw);
}

#learning-disabilities .splash-container h1 {
    margin-bottom: 25px;
}

.splash-container.narrow {
    width: 70vw;
    max-width: 800px;
}

/*///////*/
/* DEMOS */
/*///////*/

#demo-videos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
#demo-videos .mini-demo, #demo-videos .mini-demo iframe {
    height: 21vw;
    width: 33vw;
}
@media screen and (max-width: 1000px) {
    #demo-videos {
        flex-direction: column;
        align-items: start;
    }
    #demo-videos .mini-demo, #demo-videos .mini-demo iframe {
        height: 57.5vw;
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }
}

/*//////////////////*/
/* BROCHURE MODULES */
/*//////////////////*/

.standard-brochure-module-container {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-top: calc(3rem + 2vw);
    padding-bottom: calc(3rem + 2vw);
    padding-left: calc(7vw + 10px);
    padding-right: calc(7vw + 10px);
}
.standard-brochure-module {
    max-width: 930px;
    margin-left: auto;
    margin-right: auto;
}
.centered-standard-brochure-module {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 930px;
    margin-left: auto;
    margin-right: auto;
}

/* COLOR BACKGROUNDS */

.steel-grey-background {
    background-color: var(--main-steel-grey);
}

.dark-blue-background {
    background-color: #002030;
    color: var(--main-steel-grey);
}
.dark-blue-background h2 {
    color: var(--main-light-winter-green);
}
.dark-blue-background p, .dark-blue-background a {
    margin-bottom: 1.2rem;
}
.dark-blue-background p,
.dark-blue-background li {
    color: var(--main-steel-grey);
}
.dark-blue-background th, .dark-blue-background td p {
    color: var(--off-white);
}

a.main-cta {
    opacity: 0.9;
}
.dark-blue-background a {
    color: var(--main-light-winter-green);
    font-weight: 900;
    opacity: 0.9;
}
.dark-blue-background a:hover, .dark-blue-background a:hover .btn, a.main-cta:hover {
    opacity: 1;
}

/* TESTIMONIALS */

#testimonials {
    padding-top: 65px;
    padding-bottom: 10px;
    padding-left: calc(7vw + 10px);
    padding-right: calc(7vw + 10px);
}
#testimonials .centered-standard-brochure-module {
    max-width: 1400px;
}
@media screen and (min-width: 860px) {
    #testimonials .centered-standard-brochure-module {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    .testimonial:not(:last-child) {
        margin-right: 30px;
    }
    #testimonials .testimonial p {
        font-size: 16px;
    }
}
.testimonial {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    min-width: 30%;
    margin-bottom: 40px;
    max-width: 480px;
}
.witness {
    text-align: right;
    min-width: 226px;
    max-width: 80vw;
    margin-top: 20px;
}
.witness h2 {
    font-size: calc(1.2rem + 0.8vw);
}

#testimonials .witness h3 {
    font-size: calc(11px + 0.5vw);
    color: var(--main-dark-dark-steel);
    margin-top: 0.5em
}
.link {
    color: var(--main-blue);
}
.link:hover {
    cursor: pointer;
    color: var(--main-blue-hover);
}
.testimony {
    position: relative;
    display: flex;
    background-color: var(--off-white);
    padding-top: calc(20px + 1vw);
    padding-right: calc(20px + 1vw);
    padding-bottom: calc(5px + 1vw);
    padding-left: calc(12px + 1vw);
    border-radius: calc(20px + 1.25vw) calc(20px + 1.25vw) 0px calc(20px + 1.25vw);
    font-style: italic;
    box-shadow: 5px 5px 20px var(--main-medium-light-grey);

}
.quotation {
    font-size: calc(30px + 4vw);
    color: var(--main-medium-steel-grey);
    line-height: calc(16px + 2.5vw);
    margin-top: calc(3px + 0.5vw);
    margin-right: calc(3px + 1vw);
    font-family: "Times New Roman";
}
.testimony-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
#testimonials p {
    font-size: calc(11px + 0.5vw);
}

/* ADVANTAGES OVER TRADITIONAL TUTORING */

#traditional-tutoring-comparison {
    text-align: center;
    padding-bottom: 95px;
}
@media screen and (max-width: 480px) {
    #traditional-tutoring-comparison {
        padding-bottom: 20px;
    }
}
@media screen and (max-width: 420px) {
    #traditional-tutoring-comparison {
        padding-bottom: 0px;
    }
}
#traditional-tutoring-comparison table {
    margin-top: 45px;
    margin-bottom: 4px;
}
#traditional-tutoring-comparison th, #traditional-tutoring-comparison td {
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
}
#traditional-tutoring-comparison table p {
    padding-top: 7px;
    padding-bottom: 7px;
    margin: 0;
}
#traditional-tutoring-comparison table p .big {
    position: relative;
    top: 2px;
    font-size: 140%;
    line-height: 100%;
}
#traditional-tutoring-comparison th:first-child {
    background: none;
    color: #002030;
}
#traditional-tutoring-comparison th {
    font-size: calc(14px + 1vw);
    padding: calc(17px + 0.25vw) calc(10px + 2vw);
}
#traditional-tutoring-comparison td {
    padding: calc(12px + 0.25vw) calc(10px + 2vw);
}
#traditional-tutoring-comparison th:last-child, #traditional-tutoring-comparison td:last-child {
    background: rgba(255, 255, 255, 0.13);
    min-width: 136px
}
@media screen and (max-width: 350px) {
    #traditional-tutoring-comparison th {
        font-size: calc(13.5px + 1vw);
        padding: calc(17px + 0.25vw) 3vw;
    }
    #traditional-tutoring-comparison td {
        font-size: 13px;
        padding: calc(12px + 0.25vw) 3vw;
    }
    #traditional-tutoring-comparison td p {
        font-size: 13px;
    }
    #traditional-tutoring-comparison th:last-child, #traditional-tutoring-comparison td:last-child {
        min-width: 126px;
    }
}
#traditional-tutoring-comparison tr:not(:last-child) td, #traditional-tutoring-comparison th {
    border-bottom: 4px solid var(--main-dark-blue);
}
#traditional-tutoring-comparison tr:last-child {
    border-bottom: none;
}
#traditional-tutoring-comparison td:not(:last-child), #traditional-tutoring-comparison th:not(:last-child) {
    border-right: 4px solid var(--main-dark-blue);
}
#traditional-tutoring-comparison td:last-child, #traditional-tutoring-comparison th:last-child {
    border-right: none;
}

/* SEE PLANS */

.main-cta {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#see-pricing-section h2 {
    text-align: center;
    color: var(--main-winter-green);
    font-weight: 900;
}
#see-pricing-section.dark-blue-background h2 {
    color: var(--main-light-winter-green);
}
#see-pricing-section .btn.btn-grokkoli-primary.green-btn {
    margin-right: 0;
}

/* FAQ */

#faq-section {
    padding-bottom: 85px;
    padding-left: 4vw;
    padding-right: 4vw;
    overflow: hidden;
}
@media screen and (max-width: 1000px) {
    #faq-section {
        padding-bottom: 4vw;
    }
    #faq-section ol {
    margin-bottom: 0px;
    }
}
#faq-section h2 {
    font-size: calc(1.8rem + 0.5vw);
    font-weight: 900;
    text-align: center;
}

#faq-section ol {
    padding-left: 0px;
}
#faq-section ol li {
    display: flex;
    flex-direction: column;
    font-size: 23px;
    font-size: calc(1.1rem + 0.3vw);
    margin-top: 20px;
}
#faq-section ol li:last-child {
    margin-bottom: 0px;
}
#faq-section ul li {
    display: list-item;
    font-size: calc(1rem + 0.2vw);
    margin-top: 10px;
    list-style-type: square;
}
#faq-section .faq {
    background-color: var(--off-white);
    border-radius: 4px;
    padding: 30px;
}

#faq-section .faq:last-child {
    background-color: var(--main-steel-grey);
    border: 3px dashed var(--main-medium-steel-grey); 
}
#faq-section .faq-question {
    font-weight: 900;
    user-select: none;
}
#faq-section .faq-question a, #faq-section .faq-answer a {
    text-decoration: underline;
}
#faq-section .faq-question:not(:last-child) {
    color: var(--main-blue);
    cursor: pointer;
}
#faq-section .faq-question:not(:last-child):hover {
    color: var(--main-blue-hover);
}
#faq-section .faq-question.disabled {
    color: var(--main-dark-dark-grey);
}
#faq-section .faq-question.disabled:hover {
    color: var(--main-dark-dark-grey);
    cursor: auto;
}
#faq-section .faq-answer {
    font-family: avenir, sans-serif;
    margin-top: 18px;
    font-size: calc(1rem + 0.2vw);
}
.left-shift-container {
    position: relative;
}
#faq-section table {
    margin-left: -5px;
    margin-right: -5px;
}
#faq-section table th {
    background-color: var(--main-steel-grey);
    padding: 20px;
    font-size: calc(1rem + 0.2vw);
    font-weight: 400;
    vertical-align: top;
    border: 5px solid var(--off-white);
    border-radius: 10px;
    min-width: 50%;
}
#faq-section table .column-header th.green-background {
    background-color: var(--main-green);
}
#faq-section table .column-header th {
    vertical-align: middle;
    text-align: center;
    background-color: var(--main-dark-grey);
    color: white;
    font-size: 23px;
    font-size: calc(1.1rem + 0.2vw);
    font-weight: 500;
}
#faq-section table ul li {
    font-size: calc(0.95rem + 0.1vw);
    margin-top: 15px;
}
#faq-section ul li span.small {
    font-size: calc(0.95rem + 0.1vw);
    max-width: calc(575px + 10vw);
    display: inline-block;
}
#faq-section table.how-grokkoli-works {
    font-size: calc(0.7rem + 0.3vw);
}
#faq-section .tech-component {
    font-size: calc(1rem + 0.25vw);
    font-weight: 500;
    min-width: 15vw;
}
.faq-hide {
    display: none;
}
#faq-section strong {
    color: var(--main-dark-dark-dark-steel);
}

/* LEARNING-DISABILITIES LINK */

#dyscalculia-link h2 {
    text-align: center;
    font-weight: 900;
    color: var(--main-dark-blue);
}
#dyscalculia-link h2 a {
    /* text-decoration: underline; */
    color: var(--main-winter-green);
}
#dyscalculia-link h2 a:hover {
    opacity: 0.85;
}

/*/////////////////*/
/* SUCCESS STORIES */
/*/////////////////*/

.success-stories {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 60px;
    box-shadow: 0px 10px 60px var(--main-medium-light-grey);
}
.success-stories.standard-brochure-module-container.solo {
    font-family: avenir, arial, sans-serif;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: none;
}
.success-stories h1 {
    font-weight: 500;
    font-size: calc(2.2rem + 1vw);
    color: var(--main-winter-green);
}
.success-stories h2 {
    font-size: calc(1.3rem + 0.7vw);
    font-weight: 600;
}
.success-stories p {
    font-size: calc(0.9rem + 0.2vw);
}
.success-stories p span {
    font-weight: 600;
}
.success-stories img {
    padding: 20px 10px;
    border-radius: 15px;
    background-color: white;
    margin-right: 25px;
    box-shadow: 3px 7px 20px var(--main-medium-light-grey);
}
#success-story-sample {
    padding-top: 25px;
}

.success-story {
    margin-top: 65px;
}
.success-story h2 {
    margin-top: 0px;
    margin-bottom: 5px;
}
.success-story img {
    float: left;
    margin-bottom: 15px;
}
.success-story img.right {
    float: none;
    padding: 25px 40px 15px 25px;
}

.success-stories .content {
    width: 80vw;
    max-width: 800px;
}
.success-story-list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 25px;
}
@media screen and (min-width: 580px) {
    .success-story-list-item {
        flex-direction: row;
        align-items: center;
    }
}
@media screen and (min-width: 525px) {
    .success-story img.right {
        float: right;
        margin-top: 5px;
        margin-right: 5px;
        margin-left: 15px;
    }
}
.success-story-list-item h2 {
    margin-top: 15px;
    margin-bottom: 5px;
}
.success-story-list-item p span {
    font-family: avenir, arial, sans-serif;
}

/* BETA-LIMITATIONS */

#beta-limitations-on-home h2 {
    margin-bottom: 45px;
    text-align: center;
}
#beta-limitations-on-home p, #beta-limitations-on-home li {
    margin-bottom: 1.2rem;
}
#beta-limitations-on-home li::marker {
    content: "×  ";
    color: var(--main-gold);
}

/*////////*/
/* FOOTER */
/*////////*/

#footer.external {
    padding: 30px calc(7vw + 10px);
}
#footer.learner {
    padding: 15px calc(7vw + 10px);
}
#footer.external .footer-content {
    width: 90vw;
    max-width: 930px;
    margin-left: auto;
    margin-right: auto;
}
#footer.external .link-group {
    flex-direction: column;
    min-width: 10vw;
    margin-right: calc(20px + 4vw);
    margin-bottom: 20px;
}
#footer.external a {
    min-width: calc(70px + 5vw);
}
@media screen and (max-width: 960px) {
    #footer.external .footer-content {
        min-height: 16rem;
        justify-content: space-between;
    }
    #footer.learner {
        min-height: 0;
    }
}
@media screen and (max-width: 800px) {
    #footer.external .links {
        justify-content: space-between;
    }
    #footer.external .link-group {
        margin-right: calc(20px + 2vw);
    }
}
@media screen and (max-width: 600px) {
    #footer.external .link-group  {
        margin-right: 10px;
    }
}