/* ed tech page

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

/* ==========================================================================
   setup the environment
   ========================================================================== */

:root {
    /*greys*/
    --grey-22: #222222;
    --grey-32: #323232;
    --grey-4b: #4b4b4b;
    --grey-53: #535353;
    --grey-80: #808080;
    --grey-a6: #a6a6a6;
    --grey-db: #dbdbdb;
    --grey-f2: #f2f2f2;
    /*blues*/
    --darkest-blue: #1c2a40;
    --dark-blue: #364660;
    --hero-blue: #4e70a7;
    --light-blue: #8e9fbc;
    --lightest-blue: #bed4f5;
    /*links*/
    --link-base: #227599;
    --link-hover: #eb661e;
    /*etc*/
    --main-red: #dd1100;
    --main-orange: #ff7700;
    /*measurements*/
    --wrapper-h-pad: 2rem;
    --mobile-img-pad-bot: 20px;
    --slide-nav-h: 2rem;
    --quote-pad-t: 1.875rem;
    --quote-lh: 1.5rem;
    /*font: 1.125rem x line-height: 1.2*/
    --quote-lines: 4;
    --quote-pad-b: 1.25rem;
    --quote-att-h: 1.2rem;
}

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

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

.video-wrapper {
    text-align: center;
}

.lowercase {
    text-transform: lowercase !important;
}

/*section*/

section,
main header {
    padding: 0 var(--wrapper-h-pad);
    width: 100%;
}

div[id$="-content"] {
    margin: 0 auto;
    max-width: 69.125rem;
    /*1106px*/
    padding-bottom: 3.125rem;
    padding-top: 2rem;
    width: 100%;
}

div[id$="-content"].narrow {
    max-width: 68.75rem;
}

.feature div[id$="-content"] {
    border-top: 1px solid var(--grey-db);
}

#hero+.feature div[id$="-content"] {
    border-top: none;
}

/*grids*/

.feature-grid {
    align-items: start;
    border-top: 1px solid #ccc;
    display: grid;
    grid-gap: 0 83px;
    grid-template-columns: 1fr 27.5rem;
    margin-top: 3.125rem;
    padding-top: 3.125rem;
}

.feature-grid:first-of-type {
    border-top: none;
    margin-top: 0;
}

.feature-grid.img-on-left {
    grid-template-columns: 27.5rem 1fr;
}

.feature-grid img,
.feature-grid video {
    margin: 0 auto;
}

.feature-grid .feature-right {
    /*font-size: 0;*/
    text-align: center;
}

.feature-grid.img-on-left .feature-left {
    order: 2;
}

.feature-grid.img-on-left .feature-right {
    order: 1;
}

.feature-grid.img-stroke img,
.feature-grid.img-stroke video {
    border: 2px solid var(--grey-db);
}

.feature-grid.img-gradient img,
.feature-grid.img-gradient video {
    background: linear-gradient(0deg, #ebebeb 0%, #fbfbfb 100%);
    padding: 0.625rem;
}

/*grids*/

.feature-quote-grid {
    align-items: start;
    display: grid;
    column-gap: 0px;
    row-gap: 0px;
    grid-template-columns: 1fr 500px;
}

.feature-quote-grid.img-on-left {
    grid-template-columns: 500px 1fr;
}

.feature-quote-grid img,
.feature-quote-grid video {
    margin: 0 auto;
}

.feature-quote-grid .feature-right {
    /*font-size: 0;*/
    text-align: center;
}

.feature-quote-grid .feature-top {
    grid-column: 1 / span 2;
    display: grid;
}

.feature-quote-grid.img-on-left .feature-left {
    order: 2;
    height: 100%;
}

.feature-quote-grid.img-on-left .feature-right {
    order: 1;
}

.feature-quote-grid.img-stroke img,
.feature-quote-grid.img-stroke video {
    border: 2px solid var(--grey-db);
}

.feature-quote-grid.img-gradient img,
.feature-quote-grid.img-gradient video {
    background: linear-gradient(0deg, #ebebeb 0%, #fbfbfb 100%);
    padding: 0.625rem;
}

.feature-grid .feature-left ul {
    display: inline-block;
}

.feature-grid .feature-left ul.multi-col {
    min-width: calc(31% - 2rem);
    width: auto;
}

.feature-grid .feature-left ul.multi-col > li {
    white-space: nowrap;
}

.feature-grid .feature-left ul.multi-col:first-of-type {
    margin-right: 2rem;
}

.feature-grid.full-size {
    grid-template-columns: auto;
    border: none;
}

.feature-quote-grid ul {
    margin-left: 15px;
    margin-right: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/*text*/

main h1 {
    color: var(--grey-4b);
    font-size: 3.625rem;
    letter-spacing: -0.06rem;
    line-height: 1;
    padding-bottom: 0.75rem;
}

main h2 {
    color: #404040;
    padding-bottom: 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.25rem;
}

main h2 .subtitle {
    color: #404040;
    display: block;
    font-size: 1.875rem;
    padding-top: 0.25rem;
}

main h3 {
    color: var(--grey-22);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.15;
    padding-bottom: 0.5rem;
}

main p {
    font-size: 1.25rem;
    padding-bottom: 1.25rem;
}

main div[id$="-content"] .feature-grid p {
    line-height: 1.5rem;
    font-size: 1rem;
    padding-bottom: 1rem;
}

main div[id$="-content"] p:last-child,
.feature-grid li:last-child {
    padding-bottom: 0;
}

main li {
    line-height: 1.2;
    padding-bottom: 0.625rem;
}

main a {
    color: var(--main-red);
}

main a:hover {
    color: #e65c00;
}

/*restore bullets*/

ul.with-bullets li {
    display: list-item;
    list-style: disc;
    margin-left: 1.5rem;
    padding-bottom: 1rem;
}

/*links*/

.chevron-before.rotate-90-cw {
    padding-left: 1.65rem;
}

.chevron-before.rotate-90-cw::before {
    display: inline-block;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 0.5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    transform: rotate(90deg);
}

.video-icon-after {
    background: url('/educational-technology/img/icon-video.svg') no-repeat right;
    background-size: 1rem;
    padding-right: 1.375rem;
}

/*buttons*/
.button_box {
    display: inline-block;
    margin: 1rem 0;
}

.buttons {
    display: flex;
    flex-flow: row wrap;
}

.button {
    background: #de3831;
    border: 1px solid #de3831;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1;
    margin: 0 1rem 1rem 0;
    padding: 0.625rem 0.75rem;
    position: relative;
}

.button:hover {
    color: #fff;
    background: #ee6f2d;
    border: 1px solid #ee6f2d;
}

.button:active {
    color: #fff;
    background: #de3831;
}

.gpt_box {
    max-width: 15rem;
    display: inline-block;
    margin: 1rem 0 0 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ff7700;
    background: #fdf3ec;
    border: 1px solid #fdc689;
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
    vertical-align: top;
}

.gpt_box a {
    color: #404040;
}

.gpt_box a:hover {
    color: #ff7700;
}

.gpt_box .chevron-after:after {
    color: #ff7700;
}

.gpt_box .divider {
    border-right: 1px solid #acacac;
    margin: 0 0.25rem -2px 0.3125rem;
    display: inline-block;
    height: 12px;

}

/* ==========================================================================
   hero
   ========================================================================== */

#hero {
    background: linear-gradient(90deg, rgba(225, 46, 34, 1) 49%, rgba(243, 130, 44, 1) 50%);
    height: 350px;
    color: #fff;
    overflow: hidden;
    position: relative;
}

#hero-content {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}

#hero h1 {
    font-size: 3rem;
    letter-spacing: .02em;
    padding-bottom: 0;
    color: #7f0904;
}

#hero h1 strong {
    white-space: nowrap;
    font-size: 4.05rem;
    color: #fff;
}

#hero .feature-grid {
    align-items: center;
    border: none;
    grid-template-columns: 1fr 1fr;
    margin-top: 65px;
}

#hero .feature-left img {
    margin: 0 auto;
}

#hero .feature-right {
    position: relative;
    height: 302px;
}

#hero .feature-right img {
    left: 0;
    max-width: none;
    position: absolute;
    top: 0;
}


div#banner-scooter {
    z-index: 0;
    position: absolute;
    height: 350px;
    max-width: 1280px;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

#hero img {
    height: 350px;
    position: absolute;
    right: 0;
}

#hero .feature-left {
    z-index: 4;
}

#hero p {
    font-size: 1.2rem;
    white-space: nowrap;
}

/* ==========================================================================
   carousel
   ========================================================================== */

.cd-hero {
    max-width: 440px;
    position: relative;
}

.cd-hero__slider {
    height: calc(308px + var(--slide-nav-h));
    overflow: hidden;
    position: relative;
    width: 100%;
}

.cd-hero__slide {
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    will-change: transform;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cd-hero__slide.cd-hero__slide--selected {
    /* this is the visible slide */
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.cd-hero__slide.cd-hero__slide--move-left {
    /* slide hidden on the left */
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

.cd-hero__slide.cd-hero__slide--is-moving,
.cd-hero__slide.cd-hero__slide--selected {
    /* the cd-hero__slide--is-moving class is assigned to the slide which is moving outside the viewport */
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}

html:not(.js-enabled) .cd-hero__slide {
    display: none;
}

html:not(.js-enabled) .cd-hero__slide.cd-hero__slide--selected {
    display: block;
}

/* hero slider nav */

.cd-hero__nav {
    bottom: 0;
    height: 1.125rem;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.cd-hero__nav nav,
.cd-hero__nav ul,
.cd-hero__nav li,
.cd-hero__nav a {
    height: 100%;
}

.cd-hero__nav nav {
    display: block;
    margin: 0 auto;
    position: relative;
}

.cd-hero__nav ul.outer-ul {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.cd-hero__nav li {
    line-height: 1.125rem;
    padding-bottom: 0;
}

.cd-hero__nav ul.outer-ul li.scroll {
    overflow-x: hidden;
    width: 100%;
}

.cd-hero__nav ul.inner-ul {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
    /*overflow-x: hidden;*/
}

.cd-hero__nav ul.inner-ul>li {
    flex: 0 0 auto;
}

.cd-hero__nav .dot {
    background: transparent;
    border-radius: 100%;
    border: 2px solid var(--grey-a6);
    cursor: pointer;
    display: inline-block;
    height: 12px;
    margin: 0 4px;
    width: 12px;
}

.cd-hero__nav li.cd-selected .dot {
    background: var(--grey-a6);
}

.cd-hero__nav .dot:hover {
    border-color: var(--link-hover);
}

.cd-hero__nav li.cd-selected .dot:hover {
    background: var(--link-hover);
}

#quote-content .cd-hero__nav {
    bottom: 10px;
    left: 468px;
}

/* quoted content */

.grid-container {
    display: grid;
    grid-template-columns: 45% 55%;
    max-width: 1100px;
    margin: 0 auto;
    border: 1px solid #cccccc;
}

.grid-container .top {
    grid-column: 1 / -1;
    display: grid;
}

.left {
    max-width: 500px;
    display: grid;
    margin: auto auto;
}

.right {
    display: grid;
    background: #4059a2;
    align-items: center;
    height: 371px;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    width: auto;
}

.right ul li {
    display: block;
    list-style: none;
}

#quote {
    color: #fff;
}

#quote .carousel {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

#quote p {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    margin-left: calc(10px + (16 - 10) * ((100vw - 600px) / (1920 - 600)));
    margin-right: calc(-12px + (0 + 12) * ((100vw - 600px) / (1920 - 600)));
    padding-bottom: 0px;
    padding-left: calc(58px + (78 - 58) * ((100vw - 600px) / (1920 - 600)));
    padding-right: calc(24px + (38 - 24) * ((100vw - 600px) / (1920 - 600)));
}

#quote p.the-quote-itself {
    background: url(/educational-technology/img/quote-open-blue.png) no-repeat;
    background-size: calc(44px + (70 - 44) * ((100vw - 600px) / (1920 - 600)));
    font-size: calc(15px + (20 - 15) * ((100vw - 600px) / (1920 - 600)));
    font-style: italic;
    padding-left: calc(56px + (85 - 56) * ((100vw - 600px) / (1920 - 600)));
    text-align: left;
}

#quote p.attribution {
    font-size: calc(10.5px + (15 - 10.5) * ((100vw - 600px) / (1920 - 600)));
    margin-right: calc(0px + (9 - 0) * ((100vw - 600px) / (1920 - 600)));
    margin-top: calc(18px + (27 - 18) * ((100vw - 600px) / (1920 - 600)));
    padding-bottom: 0px;
    text-align: right;
}

#quote p.read-the-story {
    margin-top: calc(21px + (35 - 21) * ((100vw - 600px) / (1920 - 600)));
    margin-bottom: calc(16px + (0 - 16) * ((100vw - 600px) / (1920 - 600)));
}

#quote p.read-the-story a {
    color: #fdc689;
    font-size: calc(14.4px + (20 - 14.4) * ((100vw - 600px) / (1920 - 600)));
    padding-left: calc(-27px + (10 + 27) * ((100vw - 600px) / (1920 - 600)));
    text-align: left;
    text-decoration: none;
}

#quote p.read-the-story a:hover {
    color: #e65c00;
    text-decoration: none;
}

.barnes-and-noble .left {
    margin: 0;
}

.barnes-and-noble .left img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.uofm .left {
    margin: auto;
}

#quote .cd-hero__nav {
    bottom: 2.5rem;
    padding-right: 1rem;
}

#quote .cd-hero__nav nav {
    float: right;
}

#quote .cd-hero__slider {
    height: calc(371px + var(--slide-nav-h));
    overflow: hidden;
    position: relative;
    width: 100%;
}

#quote .cd-hero__slide {
    height: 100%;
    left: 0;
    position: absolute;
    text-align: inherit;
    top: 0;
    width: 100%;
}

/* ==========================================================================
   APIs for AIs
   ========================================================================== */

#apis-for-ais h2 {
    margin-bottom: 3.125rem;
    margin-top: 2rem;
    text-transform: none;
}

#apis-for-ais .apis:first-of-type {
    padding-bottom: 3.125rem;
    border-bottom: 1px solid #ccc;
}

#apis-for-ais .apis:last-of-type {
    margin-top: 3.125rem;
}

#apis-for-ais #courseware-content {
    border-bottom: 1px solid #ccc;
}

/* ==========================================================================
   OTHER SECTIONS
   ========================================================================== */

/*section-content exceptions*/

/*#courseware-content, #assessment-content, #why-wolfram-content { padding-bottom: 0; }*/

#rtapis h2 {
    padding-top: 2rem;
}

#intro-content {
    padding-bottom: 2.125rem;
    padding-top: 2.75rem;
}

#intro-content p.sub-header {
    color: #cd4c46;
    font-size: 1.6rem;
}


#assistant {
    background: #f3822c;
}

#assistant * {
    color: #fff;
}

#assistant a {
    font-weight: 600;
}

#assistant a:hover {
    color: #fff494;
}

#assistant h3 {
    font-size: 1.5rem;
}

#assistant .feature-grid .feature-left ul {
    display: block;
}

#assistant .feature-grid {
    align-items: center;
    grid-gap: 3rem;
    grid-template-columns: 1fr 31.375rem;
}

#assistant .card {
    background: #fff;
    box-shadow: 0 0 6px 1px rgba(64, 64, 64, 0.31);
    display: block;
    font-size: 0;
    padding: 0.875rem 0.75rem;
}



#quote-content {
    margin-bottom: 80px;
    margin-top: 60px;
    max-width: 1107px;
    border: 1px solid black;
    padding: 0px;
}

.feature-quote-grid .feature-left {
    background-color: #4059a2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-quote-grid .feature-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-quote-grid .responsive {
    width: 100%;
    max-width: 600px;
    height: auto;
}

/*courseware tech*/

#courseware h2+p {
    padding-bottom: 2.4375rem;
}

/*assessment*/

#assessment-steps {
    margin: 1.875rem auto 0;
}

#assessment-steps ul {
    align-items: center;
    display: flex;
    font-weight: 600;
    justify-content: center;
}

#assessment-steps li {
    font-size: 1.375rem;
    padding: 0.75rem;
}

#assessment .step {
    display: inline-block;
    height: 3rem;
    line-height: 3rem;
    margin-right: 0.375rem;
    padding: 0 1.5rem;
    position: relative;
}

#assessment .step::before {
    border-width: 1.5rem 0 1.5rem 1rem;
    border-style: solid;
    content: " ";
    left: -1rem;
    margin-top: -1.5rem;
    position: absolute;
    top: 50%;
}

#assessment .step::after {
    content: " ";
    border-color: transparent;
    border-style: solid;
    border-width: 1.5rem 0 1.5rem 1rem;
    margin-top: -1.5rem;
    position: absolute;
    right: -1rem;
    top: 50%;
}

#assessment .step:last-child {
    margin-right: 0;
}

#assessment h3 .step {
    height: 2.5rem;
    left: -0.5rem;
    line-height: 2.5rem;
    margin-bottom: 0.25rem;
    padding: 0 0.5rem;
}

#assessment h3 .step::before {
    border-width: 1.25rem 0 1.25rem 0.75rem;
    left: -0.75rem;
    margin-top: -1.25rem;
}

#assessment h3 .step::after {
    border-bottom: 1.25rem solid transparent;
    border-top: 1.25rem solid transparent;
    margin-top: -1.25rem;
}

#assessment .step.generate {
    background: #c6e6df;
}

#assessment .step.generate::before {
    border-color: #c6e6df;
    border-left-color: transparent;
}

#assessment .step.generate::after {
    border-left-color: #c6e6df;
}

#assessment .step.display {
    background: #c8e7dc;
}

#assessment .step.display::before {
    border-color: #c8e7dc;
    border-left-color: transparent;
}

#assessment .step.display::after {
    border-left-color: #c8e7dc;
}

#assessment .step.express {
    background: #cee7d8;
}

#assessment .step.express::before {
    border-color: #cee7d8;
    border-left-color: transparent;
}

#assessment .step.express::after {
    border-left-color: #cee7d8;
}

#assessment .step.assess {
    background: #d3e9d5;
}

#assessment .step.assess::before {
    border-color: #d3e9d5;
    border-left-color: transparent;
}

#assessment .step.assess::after {
    border-left-color: #d3e9d5;
}

#assessment .step.analyze {
    background: #d6e9d3;
}

#assessment .step.analyze::before {
    border-color: #d6e9d3;
    border-left-color: transparent;
}

#assessment .step.analyze::after {
    border-left-color: #d6e9d3;
}

/* large-scale systems */
#lss {
    background: #e5eef3;
    margin-top: 1.5rem;
}

#lss h2 {
    color: #48768f;
}

#lss .feature-grid.full-size {
    background: #d5e3eb;
    padding: 25px;
}

#lss img {
    max-height: 167px;
}

/* making ai */
#making-ai {
    margin-bottom: 50px;
}

#making-ai h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#making-ai ul {
    margin-right: 50px;
}

#making-ai .feature-grid {
    margin-top: 1rem;
    padding-top: 1.5rem;
}

#making-ai .feature-grid img {
    width: 105px;
    position: absolute;
}

#making-ai .feature-grid.img-on-left .feature-left {
    margin-left: 120px;
}

/* training data */
#trainingdata .feature {
    border-top: 1px solid #ccc;
    margin-top: 0rem;
    padding-top: 2.0rem;
}

/*why wolfram*/

#why-wolfram {
    background: #eff7f6;
}

#why-wolfram p,
#why-wolfram li {
    font-size: 1.25rem;
}

#why-wolfram li {
    break-inside: avoid;
}

#why-wolfram .feature-grid {
    font-weight: 600;
    grid-gap: 0;
    grid-template-columns: 1fr 320px;
    padding-top: 1rem;
}

/*engaging*/

#engaging img {
    margin: 1.75rem 0 1rem;
}

#engaging .list-inline {
    display: block;
}

#engaging .list-inline li {
    display: inline-block;
    font-size: 1.25rem;
}

#engaging .list-inline li:after {
    content: '\2022';
    margin: 0 5px;
}

#engaging .list-inline li:last-child:after {
    content: '';
}

/* ==========================================================================
  Work With Wolfram
   ========================================================================== */
#work-with-wolfram {
    background: #e2eef5;
}

#cody-framework h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #5d61ad;
    line-height: 1.35;
}

#cody-framework .education h3 {
    color: #784ea0;
}

#cody-framework .programming h3 {
    color: #902990;
}

#cody-framework .full-project h3 {
    color: #a72365;
}

#cody-framework .ad-hoc-mds h3 {
    color: #b52044;
}

#cody-framework p {
    font-size: 1rem;
    font-weight: 400;
    color: #404040;
    line-height: 1.313;
    padding-bottom: 0;
}


/* ==========================================================================
   CONTACT US
   ========================================================================== */

#tell-us-form {
    background-color: #1b7483;
    color: #fff;
}

#tell-us-form h2 {
    color: #fff;
    padding-bottom: 1.0rem;
}

#tell-us-form .grid.cols-1.width-full {
    padding: 1rem 0 0 0;
}

#tell-us-form #_form-gui ._main-grid> :nth-child(2n+1) {
    padding-right: 0rem;
}

#tell-us-form #_form-gui ._main-grid>*:nth-child(even) {
    padding-left: 0.6rem;
}

#tell-us-form #_form-gui ._main-grid>*,
#tell-us-form #_form-gui ._radio-grid>* {
    padding-bottom: 0;
}

#tell-us-form .grid.cols-2.heirs-width-1-2:first-child {
    margin-right: 0.5rem;
}

#tell-us-form a {
    color: #fff !important;
    font-weight: 600;
}

#tell-us-form a:hover {
    color: #1F2127 !important;
}

#tell-us-form input[type='email'],
#tell-us-form input[type='text'],
#tell-us-form textarea {
    color: #656565;
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.25;
}

#tell-us-form #_form-gui label {
    color: #fff;
}

#tell-us-form #_form-gui #submit {
    background: #10505b;
    border: 1px solid #10505b;
    font-size: 0.9375rem;
    margin-top: 0.5rem;
    padding: .60rem 2.2rem;
}

#tell-us-form #_form-gui #submit:hover,
#tell-us-form #_form-gui #submit:focus {
    background: #003352;
    color: #fff;
}

#tell-us-form .error-msg {
    background: url('../img/form-error.png') no-repeat center left;
    background-size: 14px 14px;
    color: #fff;
    font-weight: 300;
}

.tell-us {
    color: #ffffff;
    margin: 0.5rem 0 1.5rem 0;
}

#thank-you {
    background-color: #0079c1;
    color: #fff;
    display: none;
}

#thank-you h2 {
    color: #fff;
    font-weight: 400;
    font-size: 1.875rem;
}

#processing-error {
    display: none;
}

.padding-top-for-mobile {
    padding-top: 1rem;
}

/*contact section*/

#contact-us h2 {
    color: #dd4c00;
    text-align: left;
}

#contact-us .information {
    color: #535353;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.5;
}

#contact-us #compare-nav a,
#contact-us #support-nav a {
    color: #545454;
}

#contact-us #compare-nav a:hover,
#contact-us #support-nav a:hover {
    color: #f57300;
}

#contact-us-section * {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}

#contact-us-section h2 {
    margin: 0 0 8px 0;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    line-height: 40px;
}

#contact-us-section p {
    width: auto;
    color: #636363;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}

#contact-us-section a {
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 7px 3px 5px 3px;
    vertical-align: middle;
}

#contact-us-section a:link,
#contact-us-section a:visited {
    text-decoration: none;
}

#contact-us-section a:hover {
    color: #fff;
    text-decoration: none;
}

#contact-us-section .column.left,
#contact-us-section .column.right,
#contact-us-section .column.far-right {
    vertical-align: middle;
}

#contact-us-section .column.left {
    padding-top: 0.6rem;
}

#contact-us-section .column.right {
    padding-top: 0.5rem;
}

#contact-us-section .column.far-right a {
    margin: 0.3125rem 0 0 3rem;
    padding: 0;
    display: inline-flex;
    border: none;
}

#contact-us-section .column.far-right a:hover,
#contact-us-section .column.far-right a:active {
    background: none;
}

#contact-us-section .column.far-right a>span {
    padding: 0.1875rem 0 0 0.6rem;
}

#contact-us-section .column {
    border: none;
    float: inherit;
    display: inline-block;
}

#contact-us-section p.contact-us-desc {
    margin: 8px 25px 0 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    width: 290px;
    line-height: 21px;
}

#contact-us-section span.strong {
    font-weight: 600;
    color: #ffffff;
    font-size: 16px;
}

/* ==========================================================================
   Partner logos
   ========================================================================== */

#partners h2 {
    text-align: center;
    font-size: 18px;
    color: #658e85;
    padding-bottom: 2rem;
}

#partners {
    background: #e2f2ee;
    padding: 1rem 2rem;
}

#partners #partner-logos {
    display: flex;
    gap: 2rem 3rem;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    text-align: center;
}

#partners #partner-logos img:hover {
    filter: brightness(1.25) saturate(1.25);
}

#partners #partner-logos a {
    cursor: pointer;
}

#partners #courseware-content {
    padding-bottom: 2rem !important;
}


/*#partners img.khan {
    scale: 1.1;
}
#partners img.chatterbox,
#partners img.rogo {
    max-height: 31px;
}
#partners img.bench {
    max-height: 25px;
}
#partners img.iask {
    max-height: 44px;
}
#partners img.deepai {
    max-height: 37px;
}
#partners img.fetch {
    max-height: 36px;
}*/
/*rrr*/
#partners #partner-logos > :nth-child(1) { order: 1; }
#partners #partner-logos > :nth-child(2) { order: 2; }
#partners #partner-logos > :nth-child(3) { order: 3; }
#partners #partner-logos > :nth-child(4) { order: 4; }
#partners #partner-logos > :nth-child(5) { order: 5; }
#partners #partner-logos > :nth-child(6) { order: 6; }
#partners #partner-logos > :nth-child(7) { order: 7; }
#partners #partner-logos > :nth-child(8) { order: 8; }
#partners #partner-logos > :nth-child(9) { order: 9; }
#partners #partner-logos > :nth-child(10) { order: 10; }
#partners #partner-logos > :nth-child(11) { order: 11; }
#partners #partner-logos > :nth-child(12) { order: 12; }
#partners #partner-logos > :nth-child(13) { order: 13 !important; }

/* ==========================================================================
  Sticky footer
   ========================================================================== */
.footer {
    padding: 0;
    text-align: center;
}

.sticky {
    bottom: 0;
    position: fixed;
    z-index: 999999999;
}

.footer a {
    background: #de3831;
    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: #ee6f2d;
}

/*
.hide-form {
    padding: 1rem 0;
    text-align: center;
    width: auto;
}
#close-form-button {
    -webkit-transform: rotate(270deg);
    -webkit-transition-duration: .25s, .5s;
    -webkit-transition-property: opacity, bottom;
    -webkit-transition-timing-function: ease-in;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
    font-size: 2.125rem;
    font-weight: 300;
    height: 0.5rem;
    margin: 0 auto;
    opacity: 1;
    transform: rotate(270deg);
    transition-duration: .25s, .5s;
    transition-property: opacity, bottom;
    transition-timing-function: ease-in;

    width: 1rem;
    z-index: 2;
}
*/



/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

@media (max-width: 1200px) {

    /*setup*/
    :root {
        --wrapper-h-pad: 3rem;
        /*45px*/
        --quote-lines: 4;
    }

    #hero {
        height: 250px;
    }

    #hero img {
        height: 250px;
        right: 0;
    }

    #hero .feature-grid {
        margin-left: 25px;
        margin-top: 32px;
    }

    #gpt .feature-left {
        padding-top: 1rem;
    }

    #partners #partner-logos { max-width: 499px; }

    /*re-arranging the order of the logos*/
    #partners #partner-logos > :nth-child(7) { order: 12; }
    #partners #partner-logos > :nth-child(8) { order: 7; }
    #partners #partner-logos > :nth-child(9) { order: 11; }
    #partners #partner-logos > :nth-child(10) { order: 9; }
    #partners #partner-logos > :nth-child(11) { order: 10; }
    #partners #partner-logos > :nth-child(12) { order: 8; }

    #partners #partner-logos > :nth-child(1),
    #partners #partner-logos > :nth-child(2),
    #partners #partner-logos > :nth-child(3),
    #partners #partner-logos > :nth-child(4),
    #partners #partner-logos > :nth-child(5),
    #partners #partner-logos > :nth-child(6),
    #partners #partner-logos > :nth-child(8),
    #partners #partner-logos > :nth-child(12),
    #partners #partner-logos > :nth-child(10) {
        width: 25%;
    }
    #partners #partner-logos > :nth-child(11),
    #partners #partner-logos > :nth-child(9),
    #partners #partner-logos > :nth-child(7),
    #partners #partner-logos > :nth-child(13) {
        width: 15%;
    }
    #partners #partner-logos > :nth-child(11) {
        width: 117px;
    }

}

@media (max-width: 900px) {

    /*setup*/
    :root {
        --wrapper-h-pad: 3.2rem;
        /*~45px*/
        --quote-lines: 7;
        --quote-att-h: 2.4rem;
    }

    div[id$="-content"] {
        padding-bottom: 40px;
        padding-top: 34px;
    }

    .feature-grid {
        grid-gap: 0;
        grid-template-columns: 1fr !important;
    }

    .feature-grid img,
    .feature-grid video {
        padding-bottom: var(--mobile-img-pad-bot);
        padding-top: calc(var(--mobile-img-pad-bot));
    }

    .feature-quote-grid {
        grid-gap: 0;
        grid-template-columns: 1fr !important;
    }

    .feature-quote-grid img,
    .feature-quote-grid video {
        padding-bottom: var(--mobile-img-pad-bot);
        padding-top: calc(var(--mobile-img-pad-bot));
    }

    main h3 {
        font-size: 1.35rem;
    }

    .button {
        margin: 0 15px 15px 0;
        font-size: .97rem;
    }

    main h1 {
        font-size: 56px;
        padding-bottom: 0;
    }

    .button_box {
        display: block;
        border-right: none;
        max-width: 34.375rem;
    }

    .gpt_box {
        display: block;
        margin: 1rem 0 0 0;
    }

    #gpt .feature-left {
        padding-top: 0;
    }

    /*hero*/
    #hero {
        background: rgba(225, 46, 34, 1);
        height: inherit;
    }

    #hero-content {
        padding-bottom: 30px;
        padding-top: 43px;
    }

    #hero h1,
    #hero p {
        text-align: center;
    }

    #hero p {
        padding-bottom: 30px;
        padding-top: 6px;
    }

    #hero .feature-grid {
        margin-top: 0;
        margin-left: 0;
        padding-bottom: 150px;
    }

    img.mobile-header {
        top: -140px;
        position: relative;
        height: 275px;
        margin: auto;
        display: block;
        margin-bottom: -130px;
    }

    /*carousel*/
    .cd-hero {
        margin: 0.5rem auto var(--mobile-img-pad-bot);
        max-width: 439px;
        width: 100%;
    }

    .cd-hero img,
    .cd-hero video {
        padding: 0;
    }

    #quote-content .cd-hero {
        margin: 0px;
        max-width: 439px;
        width: 100%;
    }

    #quote-content .feature-quote-grid .feature-top {
        grid-column: 1 / span 1;
        display: grid;
    }

    /*other sections > section-content exceptions*/
    #intro-content {
        padding-bottom: 28px;
        padding-top: 37px;
    }

    /*other sections > everything else*/
    #assistant .feature-left {
        text-align: center;
    }

    #assistant h3,
    #assistant p,
    #assistant ul {
        text-align: left;
    }

    #assistant .card.show__900 {
        display: inline-block !important;
        margin-top: 2rem;
    }

    #assessment-steps {
        margin: 22px auto 0;
    }

    #why-wolfram-content {
        padding-bottom: 10px;
        padding-top: 30px;
    }

    #why-wolfram-content>img.show__900 {
        margin: 0 auto 2rem;
    }

    #why-wolfram ul {
        column-count: 2;
        column-gap: 4rem;
    }

    #why-wolfram .feature-grid {
        padding-bottom: 0;
    }

    #why-wolfram li,
    #why-wolfram li:last-child {
        padding-bottom: 28px;
    }
}

@media (max-width: 600px) {

    /*setup*/
    :root {
        --wrapper-h-pad: 20px;
        /*line up with global menu*/
        --quote-lines: 11;
        --quote-att-h: 3.6rem;
    }

    div[id$="-content"] {
        padding-bottom: 32px;
        padding-top: 32px;
    }

    div[id$="-content"].narrow {
        max-width: 450px;
    }

    section.feature {
        padding-left: 0;
        padding-right: 0;
    }

    section.feature div[id$="-content"] {
        padding-left: var(--wrapper-h-pad);
        padding-right: var(--wrapper-h-pad);
    }

    main h1 {
        font-size: 36px;
        line-height: 1;
    }

    div[id$="-content"].feature-grid p {
        font-size: 17px;
    }

    #making-ai .feature-grid img {
        width: 50px;
        position: absolute;
        padding-top: 0px;
    }

    #making-ai .feature-grid.img-on-left .feature-left {
        margin-left: 60px;
    }

    #making-ai ul {
        margin-bottom: 7px;
    }

    /*main li { font-size: 1.24rem; line-height: 1.25; }*/
    .button_box {
        max-width: 100%;
    }

    .button {
        border-radius: 0.3rem;
        font-size: 0.95rem;
        margin: 0 7px 7px 0;
        padding: 0.625rem 0.75rem !important;
    }

    .chevron-before.rotate-90-cw::before {
        display: none;
    }

    /*hero*/
    #hero p {
        white-space: normal;
    }

    /*other sections > section-content exceptions*/
    #intro-content {
        padding-bottom: 33px;
    }

    /*other sections > everything else*/
    #why-wolfram ul {
        column-count: 1;
        padding-bottom: 20px;
    }

    #why-wolfram li,
    #why-wolfram li:last-child {
        padding-bottom: 10px;
    }

    /*contact us*/
    #tell-us-form ._main-grid>*,
    #tell-us-form ._radio-grid>* {
        padding-top: .6rem;
    }

    input::placeholder,
    textarea::placeholder {
        font-size: 0.875rem;
    }

    /*quoted content*/
    .grid-container {
        grid-template-columns: 100%;
        max-width: 500px;
    }

    #quote p.the-quote-itself {
        font-size: 1.0625rem;
        background: url(/educational-technology/img/quote-open-blue.png) no-repeat;
        background-size: 44px;
        font-style: italic;
        text-align: left;
        padding-left: 56px;
    }

    #quote p {
        padding-left: 74px;
        padding-right: 21px;
        margin-left: 10px;
        margin-right: 10px;
    }

    #quote p.attribution {
        font-size: 13px;
        text-align: right;
        margin-right: 21px;
        margin-top: 18px;
        line-height: 1.25;
    }

    #quote p.read-the-story a {
        font-size: 17.5px;
        margin-left: -15px;
        color: #fdc689;
    }

    #quote p.read-the-story {
        margin-top: 21px;
        margin-bottom: 16px;
    }

    .left {
        max-width: 600px;
    }

    .right {
        align-items: unset;
        height: 413px;
        padding-top: 8vh;
    }

    .uofm .left img {
        display: block;
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
    }

    #quote .cd-hero__nav {
        bottom: 1.0rem;
        padding-right: unset;
    }

    #quote .cd-hero__nav nav {
        float: inherit;
    }

    #quote .cd-hero__slider {
        height: calc(305px * 2 + var(--slide-nav-h));
    }

    /* partner logos */
    #partners {
        padding: 1rem 20px;
    }

    #partners #partner-logos {
        gap: 1rem 1rem;
        justify-content: center;
        max-width: 386px;
    }

    #partners #partner-logos > :nth-child(1),
    #partners #partner-logos > :nth-child(2),
    #partners #partner-logos > :nth-child(3),
    #partners #partner-logos > :nth-child(4),
    #partners #partner-logos > :nth-child(5),
    #partners #partner-logos > :nth-child(6),
    #partners #partner-logos > :nth-child(8),
    #partners #partner-logos > :nth-child(12),
    #partners #partner-logos > :nth-child(10),
    #partners #partner-logos > :nth-child(11) {
        width: 46%;
    }
    #partners #partner-logos > :nth-child(9),
    #partners #partner-logos > :nth-child(7),
    #partners #partner-logos > :nth-child(13) {
        width: 24%;
    }

    #partners #partner-logos img.aleph {
        width: 50px;
    }

    #partners #partner-logos img.rabbit {
        width: 90px;
    }
    
    #partners #partner-logos img.kogi {
        width: 70px;
    }

    #partners #partner-logos img.perplexity {
        width: 150px;
    }

    #partners #partner-logos img.robbin {
        width: 100px;
    }

    #partners #partner-logos img.chatterbox,
    #partners #partner-logos img.smodin {
        width: 120px;
    }

    #partners #partner-logos img.rogo {
        width: 63px;
    }

    #partners #partner-logos img.bench {
        width: 111px;
    }

    #partners #partner-logos img.iask {
        width: 101px;
    }

    #partners #partner-logos img.deepai,
    #partners #partner-logos img.fetch {
        width: 110px;
    }

    #partners #partner-logos img.answersai {
        width: 140px;
    }

    #partners #partner-logos img.khan {
        width: 166px;
    }

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

    .footer a {
        padding: 0.875rem 1rem;
    }
}

@media (max-width: 430px) {
    #hero h1 {
        font-size: 10vw;
    }

    #hero h1 strong {
        font-size: 12vw;
    }

    img.mobile-header {
        top: -100px;
        height: 200px;
        margin-bottom: -120px;
    }

    #hero .feature-grid {
        padding-bottom: 100px;
    }
}

@media (max-width: 320px) {
    .right {
        height: 400px;
        align-items: unset;
        padding-top: 2rem;
    }

    #quote .cd-hero__slider {
        height: calc(285px * 2 + var(--slide-nav-h));
    }

}

@media print {}