/* ed tech page

   developer:   rmiske
   requires:    /common/framework/css/framework.en.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 {
	width: 31%;
}
.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;
}
#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.5rem;
	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;
}
#hero img {
	z-index: 0;
    position: absolute;
    height: 350px;
    right: 5%;
    max-width: inherit;
}
#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;
}
#gpt {
	background: #e2f2ee;
}
#gpt-content {
	padding: 2rem 0;
}
#gpt .feature-grid {
	padding: 0;
}
#gpt .feature-left {
	padding-top: 2rem;
}
#gpt h3.orange {
	font-weight: 400;
	color: #e76700;
	font-size: 1.4rem;
	text-transform: uppercase;
}
#gpt h3 {
	font-size: 1.5rem;
}
#gpt a {
	color: #e76700;
}
#gpt a:hover {
	color: #dd1100;
}
#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;
}

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

#partners #partner-logos {
    text-align: center;
    height: 4.0625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4.5rem;
    margin-top: 2rem;
}

#partners #courseware-content {
    padding-bottom: 2rem !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;
	}
}
@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*/
	#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: 2rem;
	    max-width: 330px;
	    text-align: center;
	    margin: 1rem auto;
	}
	#partner-logos img {
	    height: 40px;
	    width: auto;
	}

    /*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 {}